前端性能优化

前端优化的目的：

    1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。　　
    2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。　　
    总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。　　

前端优化的途径：

第一类是页面级别的优化
        例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;
第二类则是代码级别的优化

        例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序列。　　

    一、页面级优化　　

    1. 减少 HTTP请求数　　
        每个请求都是有成本的，既包含时间成本也包含资源成本。
        一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。
        资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。
        请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间。　　

     减少 HTTP请求数的主要途径包括：　　
        (1). 从设计实现层面简化页面　　
            保持页面简洁、减少资源的使用时最直接的。　　
        (2). 合理设置 HTTP缓存　　
            恰当的缓存设置可以大大的减少 HTTP请求，原则很简单，能缓存越多越好，能缓存越久越好，尽可能的让资源能够在缓存中待得更久。
        (3). 资源合并与压缩
　　    如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。各种文件都可以用相应的工具进行压缩。
　　 (4). CSS Sprites
　　    合并 CSS图片，减少请求数。
　　 (5). Lazy Load Images
　　这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

    2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

       浏览器是可以并发请求的，使得其能够更快的加载资源
       外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态。　

    3. 异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
　　将执行时间较长的 inline脚本异步执行，异步的方式有很多种，例如使用 script元素的defer 属性、使用setTimeout等，在HTML5中引入了 Web Workers的机制，恰恰可以解决此类问题。

    5. 将 CSS放在 HEAD中

     6. 异步请求 Callback

　　使用 script标签来异步的请求数据会对页面性能造成影响，增加了页面首次加载的负担，推迟了 DOMLoaded和window.onload 事件的触发时机。如果时效性允许的话，可以考虑在 DOMLoaded事件触发的时候加载，或者使用 setTimeout方式来灵活的控制加载的时机。

    7. 减少不必要的 HTTP跳转　

    8. 避免重复的资源请求
　

二、代码级优化

1. Javascript
     (1). DOM

　　    DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作

           a. HTML Collection（HTML收集器，返回的是一个数组内容信息）

            将HTML Collection在访问性能上则比数组要差很多，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
　　     b. Reflow & Repaint
　　      reflow(回流)和repaint(重绘) 会大大影响web性能。
                reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。
                repaint：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。
        减少回流的方式：
            1：不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸
            2：尽量通过class来设计元素样式，切忌用style
            3：实现元素的动画，对于经常要进行回流的组件，要抽离出来，它的position属性应当设为fixed或absolute
            4：权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
            5：不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，
            6：这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
            7：css里不要有表达式expression
            8：减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
            9：避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。
            10: 尽量不要过多的频繁的去增加，修改，删除元素，因为这可能会频繁的导致页面reflow，可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。
            11: offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop/Left/Width/Height,clientTop/Left/Width/Heightden等值会使得浏览器会发生reflow，建议将他们合并到一起操作，可以减少回流的次数。

     (2). 慎用 with
        with实际上是修改了代码块中的执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。
　　 因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。

     (3). 避免使用 eval和 Function
　　每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
　　
     (4). 减少作用域链查找
　　如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。此外，要减少作用域链查找还应该减少闭包的使用。
　
     (5). 数据访问
　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
　　a. 对任何对象属性的访问超过 1次
　　b. 对任何数组成员的访问次数超过 1次
　　另外，还应当尽可能的减少对对象以及数组深度查找。
　
     (6). 字符串拼接

　　在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。

    2. CSS选择符
    3. HTML
    4. Image压缩

    5，CDN、 Gzip、多域名、无 Cookie服务器等等

总结：

（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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。
        对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。
        减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。