唯品会-上海-前端面试总结
一面
1. CSS position
- 分为fix absolute relative static
-
absolute:绝对定位。参照父级对象，使用top,bottom,left,right定位，脱离文档流，可以使用z-index层次分级
- fix:固定定位。参照浏览器窗口，可以使用z-index层次分级
-
relative:相对定位，不脱离文档流，参照自身静态位置，top,bottom,left,right定位，可以使用z-index层次分级
- static:静态，默认设置，不可以使用z-index作用域
2.作用域
JS没有块作用域，只有函数作用域
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
3.原型、原型链
每一个构造函数都有一个prototype，指向一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承。
原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
在JavaScript中，用__proto__ 属性来表示一个对象的原型链。当查找一个对象的属性时，JavaScript
会向上遍历原型链，直到找到给定名称的属性为止！
- 分为fix absolute relative static
- absolute:绝对定位。参照父级对象，使用top,bottom,left,right定位，脱离文档流，可以使用z-index层次分级
- fix:固定定位。参照浏览器窗口，可以使用z-index层次分级
- relative:相对定位，不脱离文档流，参照自身静态位置，top,bottom,left,right定位，可以使用z-index层次分级
- static:静态，默认设置，不可以使用z-index作用域
JS没有块作用域，只有函数作用域
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
每一个构造函数都有一个prototype，指向一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承。
原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
在JavaScript中，用__proto__ 属性来表示一个对象的原型链。当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止！
二面
1.浏览器加载一个页面的过程、渲染机制
浏览器的解析方式，浏览器解析html页面首先浏览器先下载html，然后在内存中把html代码转化成Dom
Tree，然后浏览器根据Dom Tree上的Node分析css和Images，当文档下载遇到js时，js独立下载。
2.CSS放在顶部/底部有什么区别
CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
3.跨域的实现方式，例如JSONP
JSONP XHR2 后端*** window.name
window.postmessage
4.src和href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- href是Hypertext
Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
-
src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
5.CSS盒子模型
1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和
pading;
2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
6.CSS选择器优先级
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象
> 通配符 > 继承
7.CSS link/import区别
(1) link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重
高于@import的权重.
8. JS事件***。目标、冒泡、捕获
使用事件***机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源。 // 获取父节点，并为它添加一个click事件 document.getElementById("parent-list").addEventListener("click",function(e) { // 检查事件源e.targe是否为Li if(e.target && e.target.nodeName.toUpperCase() == "LI") { // 真正的处理过程在这里 //alert(123); console.log("List item ",e.target.id," was clicked!");
}
});
-
事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
- 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
-
事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。
9.
http状态码含义。例如304 404
- 304 页面没有修改过
- 404 找不到页面
- 503 服务不可用
- 100继续，200正常，300重定向，400客户端错误，500服务器端错误
10. 页面性能优化，为什么CSS放头上，JS放底下
js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。所以要放在底下加载
如果CSS放在底下加载的话，页面出现白屏。CSS放在前端，页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树
（1） 减少http请求次数：CSS Sprites,
JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 （2） 前端模板
JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3）
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 （4）
当需要设置的样式很多时设置className而不是直接操作style。 （5）
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 （6） 避免使用CSS
Expression（css表达式)又称Dynamic properties(动态属性)。 （7）
图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
浏览器的解析方式，浏览器解析html页面首先浏览器先下载html，然后在内存中把html代码转化成Dom Tree，然后浏览器根据Dom Tree上的Node分析css和Images，当文档下载遇到js时，js独立下载。
CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
JSONP XHR2 后端*** window.name window.postmessage
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。 浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
- src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和
pading;
2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承
(1) link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重
高于@import的权重.
- 事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
- 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
- 事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。
- 304 页面没有修改过
- 404 找不到页面
- 503 服务不可用
- 100继续，200正常，300重定向，400客户端错误，500服务器端错误
js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。所以要放在底下加载
如果CSS放在底下加载的话，页面出现白屏。CSS放在前端，页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 （4） 当需要设置的样式很多时设置className而不是直接操作style。 （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。