sam 百度面经的问题总结（2） 性能优化

   拖了好久终于有时间来写点东西了，继续对面试问题的分析。

   下面是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）
                                                  关与选择器的相关请参考：http://www.w3cplus.com/css/css-selector-performance 。
                                        (3)    最后我会介绍一下图标的使用，又一款css精灵的软件，能够帮助我们把各个图标排成一个大图片，用
                                        css的位置属性来模拟出相关的效果，来减少图片的加载数。
      
      js性能优化 :
js的性能优化显然对网站性能的影响是相当巨大的，也是最为复杂的，我会简单的讲一下js大方面的性能问题，不会详细的去介绍代码本身的算法之类的问题。具体建议参考<高性能的javascript>
                         
                             (1) js的文件最好加载在</body>的前面，这是我们一提js性能首先要提到的，因为浏览器的加载是单线程
                                 当加载js文件时，会影响到DOM树的加载，如果js文档很大的话，会在开始加载页面时很大程度上影响到
                                 页面的展示。

                             (2)js对dom树的访问，是使用js的操作符，而每次选择节点时的，都是对dom树的遍历，所以当我们会经常使                                   用一个节点时，最好用一个局部变量进行保存，再对变量进行操作，会减少遍历的次数。

                             (3)减少对dom树的操作，每次操作dom树都会使浏览器从新渲染一次页面，会极大的影响网页性能。
                            (4) 注意原型链，尽量降低原型链的层数。
                            (5)注意数据的类型，变量，直接量，对象成员，数组项。浏览器对于每一种数据类型的处理都是不同的，速度                                   也是有很多差别。

                       之上的都是各类的优化的简单方向，并没有深入的去解释这些问题。希望给大家一点帮助。