面试官常问的 web前端 问题 21-30
- 21.jQuery 中的选择器 和 css 中的选择器有区别吗?
- 22.web 前端开发,如何提高页面性能优化?
- 23.什么是 Bootstrap?为什么要使用 Bootstrap?
- 24.对于各类尺寸的设备,Bootstrap 设置的 class 前缀分别是什么?
- 25.什么是 Bootstrap 网格系统(Grid System)?
- 26.Bootstrap 网格系统列与列之间的间隙宽度是多少?
- 27.介绍一下 easyui 的布局
- 28.Easyui 如何实现表单验证
- 29.Easyui 常用的组件有哪些?
- 30.Vue.js 介绍
21.jQuery 中的选择器 和 css 中的选择器有区别吗?
jQuery 选择器支持 CSS 里的选择器,jQuery 选择器可用来添加样式和添加相应的行为;
CSS 中的选择器是只能添加相应的样式
有一定的区别:
1、首先说两者是属于不同的两门语言,jQuery是属于js的一个框架,jQuery选择器是js里面的选择器,css是另一门不同于js的语言,CSS选择器是css选择器,则两者在根本上是不同的。
2、但是两者是有交集的,都是作为网页或者浏览器解析的语言,而js可以通过修改浏览器的dom对象来实现对css修改或者是控制。
3、可以简单的这样区分两者,css选择器用语css当中,js选择器应用于js当中,只不过有时两者使用相同的id标识来选择对象。
jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用 $("")包起来就成了一个jQuery选择器
22.web 前端开发,如何提高页面性能优化?
内容方面:
1.减少 HTTP 请求 (MakeFewerHTTPRequests)
2.减少 DOM 元素数量 (ReducetheNumberofDOMElements)
3.使得 Ajax 可缓存 (MakeAjaxCacheable)
针对 CSS:
1.把 CSS 放到代码页上端 (PutStylesheetsattheTop)
2.从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)
3.精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)
4.避免 CSS 表达式 (AvoidCSSExpressions)
针对 JavaScript :
1.脚本放到 HTML 代码页底部 (PutScriptsattheBottom)
2. 从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)
3. 精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)
4. 移除重复脚本 (RemoveDuplicateScripts)
面向图片(Image):
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSSSprites 技巧对图片优化
前端性能优化
思路:分析一个页面从输入 URL 到页面加载显示完成的所有步骤,采用 分治法 逐步优化。
- 优化DNS查询
减少域名:尽量把所有的资源放在一个域名下。
一个域名同时可以发4(IE8)或 8个请求(Chrome),请求文件少,用1个域名,文件多用多个域名。与3权衡。 - 优化TCP协议
TCP连接复用,使用keep-alive:连接回复加上请求头:keep-alive。
第一次请求不断开,第二次请求复用。
使用http 2.0版本:多路复用,连接复用率会更高 - 优化发送HTTP请求
合并JS或CSS文件
inline image:使用data:url scheme来内连图片
减小cookie体积,每个请求都会附带cookie,所以不要滥用cookie。
合理使用CasheControl代替发送HTTP请求
同时发送多个请求(浏览器自带)IE8可以同时请求下载4个的css文件,Chrome可以同时请求下载8个 。 - 优化接受响应
设置Etags:浏览器重复与请求服务器一样的文件,ETag响应304。
Gzip压缩大文件 使用macos gzip,npm server gzip gzip 文件名
其响应头为Content-Encodinging:gzip,先压缩接收到再解压缩。缺点:耗费浏览器CPU,权衡 - 优化DOCTYPE
不能不写,不能写错 - 优化CSS、JS请求
使用CDN:用CDN请求静态资源同时可以增大同时下载数量,内容分发网络(CDN)可以使请求总时间降低,也可以减少cookie
CSS放在head里:使其尽早下载,因为chrome需要下载完所有的css后才渲染页面
JS放在body里的最后:尽早显示整个页面,获取节点。 - 使用懒加载
组件懒加载
const xxx =()=>import('./components/xxx.vue')
路由懒加载
- 优化用户体验
用户看到哪些内容就请求哪些内容
加一个loading动画用户会感觉时间变快 - 减少监听器,使用事件委托
<body>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
<script>
let liList = document.querySelectorAll('li')
// liList[0].onclick = ()=>console.log(1)
// liList[1].onclick = ()=>console.log(2)
// liList[2].onclick = ()=>console.log(3)
// liList[3].onclick = ()=>console.log(4)
//监听太多
let ul = document.querySelector('ul')
ul.onclick = (e) => {
if (e.target.tagName === 'LI') {
console.log(e.target.innerText)
}
}//减少监听,采用事件委托
</script>
</body>
- 优化图片大小
图片压缩 - 减少或合并DOM操作或使用虚拟DOM
// 不好的方式
var elem = $('#elem');
for (var i = 0; i < 100; i++) {
elem.append('<li>element '+i+'</li>');
}
// 好的方式
var elem = $('#elem' ),
arr = [];
for (var i = 0; i < 100; i++) {
arr.push('<li>element ' +i+'</li>' );
}
elem.append(arr. join(''));
12. 对大量数据计算使用缓存
// data.length === 100000
for(var i = 0;i < data.length;i++){
// do something...
}
//上面的代码没有下面的好
for(var i = 0,len = data.length;i < len;i++){
// do something...
}
- 使用setTimeout降低调用接口频率
23.什么是 Bootstrap?为什么要使用 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点,所以 Bootstrap 被广泛应用。
24.对于各类尺寸的设备,Bootstrap 设置的 class 前缀分别是什么?
超小设备手机(<768px):.col-xs;
小型设备平板电脑(>=768px):.col-sm;
中型设备台式电脑(>=992px):.col-md;
大型设备台式电脑(>=1200px):.col-lg;
25.什么是 Bootstrap 网格系统(Grid System)?
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
26.Bootstrap 网格系统列与列之间的间隙宽度是多少?
间隙宽度为 30px(一个列的每边分别是 15px)。
27.介绍一下 easyui 的布局
easyui:分为上,中,下,左,
右面板 一般在工作中使用上(企业 logo,登录,退出);
左(菜单);
中(展示数据);
28.Easyui 如何实现表单验证
提供了一个 validatebox 插件来验证一个表单, input 表单根据 validType 属性来应用验证;
validType="email"邮箱验证; required=“true” 必填项 ;
<input class="easyui-validatebox" type="text" name="name" validType="email" required="true"></input>
29.Easyui 常用的组件有哪些?
datagrid:数据表格 ;
window:窗口 ;
form:表单 ;
layout:布局 ;
tabs:选项卡 ;
according:折叠面板 ;
combobox:下拉列表;
30.Vue.js 介绍
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和 组合的视图组件。核心是一个响应的数据绑定系统。
Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,同时拥有非常容易上手的 API; Vue.js 是一个构建数据驱动的 Web 界面的库。 Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关 注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统 支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。