拖了好久终于有时间来写点东西了,继续对面试问题的分析。
下面是SAM 的博客 :http://www.kirsten-s.me/index.php/
这次是第二题了 性能优化。
看到这个题目我就给跪了,性能优化这个问题也太大了一些。
我也只能简单的说一些我自己的认识。
一个前端的性能优化无外乎 html css js 。(当然面试官主要考虑的还是js的性能问题)
我们就从第一说起:
html 的性能优化, (1) 减少http 的请求次数,话句话说就是将你的css js 合并 ,尽量减少对外部文件的调用。
(2) 减少使用iframe,iframe是在html 文档中继续套一个html 文档,会占用很大的资源空间。
(3) 避免多层嵌套的dom树 ,浏览器对html 的解析会形成一颗DOM 的树,这颗树的深度也会直 接影响到html的性能。
(4) 减少无关代码,这个就不多说了闪注释,压缩代码。
(5) 指定编码,帮助浏览器解析,这个也不多说。
(6) 指定图片的宽高,浏览器会对文档流进行布局,当加载图片时,会重新进行渲染,这样会对 整体的速度有很大的影响。
其实html的性能方面还是比较简单的,主要是帮助浏览器渲染,我这里只是简述一下,并没有对相 关的原理进行阐述有兴趣的大家可以参考html的相关文档。
css的性能优化: (1) 尽少使用@import,这一点应该是很多人都知道的,主要是浏览器不能并行的下载样式表。
(2) css的性能问题更多的体现在选择器上。浏览器是从右向左进行解析的,所以最右边的关键 字是最主要的字。
而选择效率如下:
- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div,h1,p)
- 相邻选择器(h1+p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(a[rel="external"])
- 伪类选择器(a:hover,li:nth-child)