最近发现一套前端面试的笔试题，个人觉的还是考察的蛮细的，涵盖了很多前端知识，于是摘录下来，空余时间学习一下，巩固一下自己的基础。
前端工程师面试（笔试）题
HTML 部分
1）DOCTYPE 是什么，有什么作用，为什么要用 html5 标准的DOCTYPE（初级）
<!DOCTYPE>声明位于文档的最前面（处于 <html> 标签之前）。告知浏览器以何种模式来渲染文档。
<!DOCTYPE html>让浏览器以自身的最高模式来渲染，尽量匹配 web 标准。
DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
2）请分别列举至少 3 个 html 中默认的块级元素和行内元素（初级）
块级元素：div、table、ul、p、ol、form、h1~h6、dl
行内元素：span、a、em、strong、img、label
3）请列举出至少 3 个 html5 中新增的语义化标签（初级）
main、nav、aside、article、header、footer、section等
4）要实现一组单选框 radio，属性上需要满足什么条件（初级）
name 属性必须一样
5）从 SEO 角度，请给出至少 2 条 html 书写上的注意点（中级）
a 标签一定要写 title 属性
img 标签一定要写 alt、title 属性
选用语义化的 html 标签
6）请列举出至少 3 个 html5 中新增的表单控件（中级）
email、url、number、range、Date pickers、search、color、datalist
7）谈下对 html 语义化的理解（中级）
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，遵循 W3C标准减少差异化。
CSS 部分
1）请列举出至少 5 个具有继承特性的 css 属性（初级）
font-size font-family color line-height text-align text-indent list-style 等，4 个即可
2）请阐述下 display:none 和 visibility:hidden 的区别（初级）
display:none 隐藏对应的元素，在文档布局中不再给它分配空间
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
3）请简述（或者图示）下 w3c 标准的盒模型（初级）
标准和模型包含：内容（content）、内边距（padding）、边框（border），外边距（margin）
4）请列出 display 属性除了none 以外的其他 3 个常用值，并分别说明每个值的作用（初级）
display: inline|block|inline-block
inline 布局特点转为行内元素
block 布局特点转为块级元素
inline-block 布局上同时具有行内、块级元素的特征
5）在页面重构时，为什么要先重置 css 样式，你自己是如何处理的？（初级）
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
6）请对下面的一段 css 属性定义的写法进行简化（初级）
padding-left: 10px;
padding-right: 10px;
padding-top:4px;
padding-bottom: 8px;
padding: 4px10px 8px
7）请列举出至少 4 个 css3 属性（初级）
border-raduis box-shadow text-shadow transform transition 等
8）请列举出至少 6 种 css 选择器（初级）
id 选择器（#id）
类选择器（.clazzname）
标签选择器（div、h1、p）
后代选择器（li a）
属性选择器（a[ref=”external”]）
孩子选择器（ul > li）
9）position 属性的 3 个值：relative、absolute、fixed 分别是相对什么进行定位（初级）
relative：无 top、left 设置时，元素自身在文档流中的位置
absolute：相对于上级元素中第一个 position 属性非 static 的元素
fixed：相对于浏览器视窗
10）css3 中哪个属性可以对 DOM 元素的盒模型进行调整，该属性有哪些值，请分别阐述（或者图示）下不同值对盒模型的影响（中级）
box-sizing: content-box|border-box
context-box 即 w3c 标准盒模型
border-box 使得content 包含了 padding、border
11）请简述下 CSS sprites 的原理，代码层面涉及哪个 css 属性（中级）
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限
制，一般浏览器都是 6 个。再利用 CSS 的background-image、background-repeat、background-position 的组合进行背景定位，background-position 可以用
数字能精确的定位出背景图片的位置。
对于未来而言，http2协议应用的话，就不需要这样做了。
12）css 中@import 指令的作用，它有何缺陷（中级）
在 css文件中引入外部的 css 代码块
缺陷：不利于多个 css 文件的并行下载，会造成阻塞，对页面渲染不利。
13）为什么对元素使用了 float 浮动，一定要有清除浮动（中级）
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而
只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮
动元素（“高度塌陷”现象）。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0（高度塌陷）。在实际布局中，
往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
14）请列举 3 种常用的清除浮动的方式（中级）
用空标签：通过一个内容为空的标签，并为其定义 CSS 代码：clear:both 来清除浮动
使用 overflow 属性：在需要清除浮动的元素中定义CSS 属性：”overflow:hidden”，为了兼容 IE6 同时要加上”zoom:1″
使用 after 伪类清除浮动
15）请列举至少 2 个 IE7 中的常见 bug，以及解决方案（中级）
1，百分比布局时，IE7 的计算精度没有其他浏览器高，1 行 5 列，每列width20%的浮动布局，在 IE7 会出现错位。
解决方案为，为 IE7写 hack，*width:19.99%
2，IE7 不支持opcity 属性。
解决办法：filter: alpha(opacity=60); opacity:0.6;
3，overflow:hidden 属性在 IE7 中不起作用，如果 overflow:hidden 父元素里面的子元素采用了绝对定位的方式布局，父元素上的 overflow: hidden 会失效。
解决方案：在 overflow:hidden 属性的元素上添加 position: relative;
4，IE7 浏览器对绝对定位的元素设置了很高的 z-index 确不能显示在上层。原因是 IE7 中层级的比较先比较绝对定位元素的相对定位点元素的 z-index。所以，
解决方案： 给相对定位点的元素设置较高的 z-index， 如果祖先元素中有很多 position:relative 的元素， 则比较的是第一个祖先元素 position： relative
的层级，给第一个祖先元素设定较高的层级即可。
16）页面重构过程中，从 ps 中导出图片素材时，如何选取合适的导出格式（中级）
当图片色彩丰富且无透明要求时，建议保存 JPG格式并且选择合适的品质。
当图片色彩不太丰富(单一颜色的小图标)无论有没有透明度的要求，请保存为 png-8 格式
当图片有半透明要求时，请保存为 png-24 格式
17）请简述下对渐进增强、优雅降级的理解（中级）
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好
的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
18）什么是 BFC，请谈谈对此概念的理解（高级）
BFC，块级格式化上下文，一个创建了新的 BFC 的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂
直方向（和布局方向有关系）的 margin 会发生折叠。（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）
19）请简述下低版本 IE（6,7）中下特有的 hasLayout 属性（高级）
“Layout”是一个 Internet Explorer for Windows 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何
响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些HTML 元素则默认就具有”layout”。
IE6-7 使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为
false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。
JavaScript 部分
1）JavaScript 有哪几种数据类型（初级）
简单：Number，Boolean，String，Null，Undefined
复合：Object，Array，Function
2）请编写一个 JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：（初级）
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url) {
var params = {};
var arr = url.split("?");
if (arr.length <=1){
return params;
}
arr =arr[1].split("&");
for (var i = 0, l= arr.length; i < l; i++) {
vara = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
3）js 中 split()和 join() 方法的区别（初级）
前者是将字符串切割成数组的形式，后者是将数组转换成字符串
4）已知有字符串 foo=”get-element-by-id”,写一个function 将其转化成驼峰表示法”getElementById”。（初级）
function combo(str) {
var arr = str.split('-');
for(var i =0; i<arr.length; i++){
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
}
str =arr.join('');
return str;
}
5）请计算下面变量的值（初级）
var a= (Math.PI++);
var b = (Math.PI++);
alert(a);
alert(b);
答案: 3.141592653589793，3.141592653589793
6）请写出以下 js 表达式的值（初级）
4+"3"
3+"a"
var a="4"; a+3
3+null
3+true
3+“a”-3
undefined==null
1===true
答案："43"，"3a"，"43"，3，4，NaN，true，false
7）有如下 html，如何用 js 获得被选中的 option 的 text 描述（非 value）（初级）
<select id="select_id">
<option vlue="1">text1</option>
<option vlue="2">text2</option>
<option vlue="3">text3</option>
<option vlue="4">text4</option>
</select>
答案：
var s = document.getElementById("select_id"),
index = s.options.selectedIndex;
var text = s.options[index].text;
alert(text);
8）js 怎样添加、移除、移动、复制、创建和查找节点（初级）
1）创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id，唯一性
9）看下面代码，给出输出结果。（初级）
for(var i =1; i < 3; i++){
setTimeout(function(){
console.log(i);
}, 10);
}
答案：3,3
10）按顺序写出 alert 弹出窗口的内容。（中级）
var name = "The Window";
var object = {
name : "My Object",
getNameFunc: function() {
alert('1.' + this.name);
return function(){
return this.name;
};
}
};
var func = object.getNameFunc();
alert('2.' + func());
alert('3.' + func.call(object));
alert('4.' + func.apply(object));
答案: 1.My Object，2.The Window， 3.My Object， 4.My Object
11）简述创建 ajax 过程（中级）
1. 创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.
2. 创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.
3. 设置响应`HTTP`请求状态变化的函数.
4. 发送`HTTP`请求.
5. 获取异步调用返回的数据.
6. 使用 JavaScript和 DOM实现局部刷新.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ===4 & xmlHttp.status === 200){
}
}
12）说说你对作用域链的理解（中级）
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是
不被允许的。
13）说说你对闭包的理解（中级）
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包有三个特性：
1. 函数嵌套函数
2. 函数内部可以引用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收
14）null 和 undefined 的区别？（中级）
null 是一个表示"无"的对象，转为数值时为 0；undefined 是一个表示"无"的原始值，转为数值时为 NaN。
当声明的变量还未被初始化时，变量的默认值为 undefined。
null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于 undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于 undefined。
（3）对象没有赋值的属性，该属性的值为 undefined。
（4）函数没有返回值时，默认返回 undefined。
null 表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
15）call() 和 apply() 的区别和作用？（中级）
作用：动态改变某个类的某个方法的运行环境（执行上下文）。
区别：用法上不同，主要是参数不完全同，call 方法接受的参数是不固定的，第一个是调用的对象 ，第二个参数数量不确定，apply 方法固定是两个参数，第一
个是调用的对象，第二个是一个带有下标的数组
16）请简述两种实现异步加载 js 的方法（中级）
1.动态插入 script 标签
2.通过 ajax 去获取 js 代码，然后通过 eval 执行
3.script 标签上添加 defer 或者async 属性
4.创建并插入 iframe，让它异步执行 js
17）GET 和 POST 的区别，何时使用 POST？（中级）
GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在 2000 个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET 方式需要使用 Request.QueryString 来取得变量的值，而 POST 方式通过 Request.Form 来获取变量的值，
也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。
在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
18）请实现 js 对象的深度克隆（中级）
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf= []; //创建一个空的数组
vari = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}elseif (Obj instanceof Object){
buf= {}; //创建一个空对象
for(var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}
19）请在 js 的 Array 本地对象增加一个原型方法，他的用途是删除数组中重复的条目，并将新的数组返回（中级）
以下是数组去重的三种方法：
Array.prototype.unique1 = function () {
var n= [];//一个新的临时数组
for (var i = 0; i< this.length; i++) {//遍历当前数组
//如果当前数组的第 i 已经保存进了临时数组，那么跳过，
//否则把当前项 push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function() {
var n ={},r=[]; //n 为hash 表，r 为临时数组
for(vari = 0; i < this.length; i++) {//遍历当前数组
if (!n[this[i]]) {//如果 hash 表中没有当前项
n[this[i]] = true; //存入 hash 表
r.push(this[i]); //把当前数组的当前项 push 到临时数组里面
}
}
return r;
}
Array.prototype.unique3 = function() {
var n =[this[0]]; //结果数组
for(vari = 1; i < this.length; i++) {//从第二项开始遍历
//如果当前数组的第 i 项在当前数组中第一次出现的位置不是 i，
//那么表示第 i 项是重复的，忽略掉。否则存入结果数组
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}
20）请简述如何实现一个对页面某个节点的拖曳功能？（使用原生 JS）（中级）
给需要拖拽的节点绑定 mousedown, mousemove, mouseup 事件
mousedown 事件触发后，开始拖拽
mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置
mouseup 时，拖拽结束
需要注意浏览器边界的情况
21）请解释什么是事件代理（中级）
事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给
父元素，让父元素担当事件监听的职务。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好处是可以提高性能。
22）DOM 元素的 attribute 和 property 属性的区别是什么？（中级）
attribute 是 dom 元素在文档中作为 html 标签拥有的属性；
property 就是 dom 元素在 js 中作为对象拥有的属性。
所以：对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的
23）用 JS 写一个实现继承的方法。（中级）
function Parent(age) {
this.name =[ 'mike', 'jack', 'smith' ];
this.age = age;
}
Parent.prototype.run = function() {
return this.name + ' are both' + this.age;
};
function Child(age) {
Parent.call(this,age);// 对象冒充，给超类型传参
}
Child.prototype =new Parent();// 原型链继承
24）Javascript 垃圾回收方法（高级）
1. 标记清除（mark and sweep）
这是 JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”， 当变量离开环境的时候（函
数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的
就是要删除的变量了
2. 引用计数(reference counting)
在低版本 IE 中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量
并将一个引用类型赋值给该变量的时候这个值的引用次数就加 1，如果该变量的值变成了另外一个，则这个值得引用次数减 1，当这个值的引用次数变为 0 的时候，说
明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的空间。
25）你觉得 jQuery 或 zepto源码有哪些写的好的地方（高级）
jquery 源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入 window 对象参数，可以使 window 对象作为局部变量使用，好处是
当 jquery中访问 window 对象的时候， 就不用将作用域链退回到顶层作用域了， 从而可以更快的访问window对象。 同样， 传入 undefined参数，可以缩短查找undefined
时的作用域链。
(function( window, undefined ) {
//用一个函数域包起来，就是所谓的沙箱
//在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
})( window );
jquery 将一些原型属性和方法封装在了 jquery.prototype 中，为了缩短名称，又赋值给了 jquery.fn，这是很形象的写法。
有一些数组或对象的方法经常能使用到，应将它们保存为局部变量以提高访问速度。
将全局对象 window 作为参数传入，则可以使之在匿名函数内部作为局部变量访问，提供访问速度。
jquery 实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。
Web 安全
1）cookie 和 session 的区别：（初级）
1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2. cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗。考虑到安全应当使用 session。
3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用 cookie。
4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个cookie。
5. 所以个人建议：
将登陆信息等重要信息存放为 session
其他信息如果需要保留，可以放在 cookie 中
2）sql 注入原理（中级）
就是通过把 SQL命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。
总的来说有以下几点：
1. 永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2. 永远不要使用动态拼装 SQL，可以使用参数化的SQL 或者直接使用存储过程进行数据查询存取。
3. 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4. 不要把机密信息明文存放，请加密或者 hash 掉密码和敏感的信息。
3）XSS 原理（中级）
Xss(cross-site scripting)攻击指的是攻击者往 Web 页面里插入恶意 html 标签或者 javascript 代码。比如：攻击者在论坛中放一个看似安全的链接，骗取
用户点击后，窃取cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以
为的信任站点。
4）XSS 防范方法（中级）
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤； 其次任何内容写到页面之前都必须加以encode， 避免不小心把html
tag 弄出来。这一个层面做好，至少可以堵住超过一半的 XSS 攻击。
首先，避免直接在 cookie 中泄露用户隐私，例如 email、密码等等。
其次，通过使 cookie 和系统 ip 绑定来降低 cookie 泄露后的危险。这样攻击者得到的 cookie 没有实际价值，不可能拿来重放。
尽量采用 POST 而非 GET 提交表单
5）XSS 与 CSRF有什么区别吗？（中级）
XSS 是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
要完成一次 CSRF 攻击，受害者必须依次完成两个步骤：
1. 登录受信任网站 A，并在本地生成 Cookie。
2. 在不登出 A 的情况下，访问危险网站 B。
6）CSRF的防御（中级）
服务端的 CSRF 方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。
通过验证码的方法
性能部分
1）谈谈我们可以从哪些方面进行性能优化（中级）
代码层面：避免使用 css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存 Ajax，使用 CDN，使用外部 js 和 css 文件以便缓存，添加 Expires 头，服务端配置 Etag，减少 DNS 查找等
请求数量：合并样式和脚本，使用 css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启 GZIP，
2）代码层面我们可以做哪些优化（中级）
用 hash-table 来优化查找
少用全局变量
用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
用 setTimeout 来避免页面失去响应
缓存 DOM 节点查找的结果
避免使用 CSS Expression
避免全局查询
避免使用 with 语句(with 会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
3）移动端性能优化（中级）
尽量使用 css3 动画，开启硬件加速。适当使用 touch 事件代替 click 事件。避免使用 css3 渐变阴影效果。
4）什么是 Etag？（高级）
当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。
情景一：若没有过期，则不向服务器发送请求，直接使用缓存中的结果，此时我们在浏览器控制台中可以看到 200OK(from cache) ，此时的情况就是完全使用
缓存，浏览器和服务器没有任何交互的。
情景二：若已过期，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和 Etag
然后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求之后，文件是不是没有被修改过；根据 Etag，判断文件内容自上一
次请求之后，有没有发生变化
情形一： 若两种判断的结论都是文件没有被修改过， 则服务器就不给浏览器发index.html 的内容了， 直接告诉它， 文件没有被修改过， 你用你那边的缓存吧—— 304
Not Modified，此时浏览器就会从本地缓存中获取 index.html 的内容。此时的情况叫协议缓存，浏览器和服务器之间有一次请求交互。
情形二：若修改时间和文件内容判断有任意一个没有通过，则服务器会受理此次请求，之后的操作同①
试题说明
重构工程师的题目主要从 HTML 部分和 CSS 部分的初级中级题目，以及 JavaScript 部分的初级题目。
该文档中的所有题目都适用于前端工程师，但侧重于 JavaScript 部分中的初级中级题目以及性能部分的题目。
4523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
