WEB性能优化

      作为一个前端工作人员，我们不可避免要进行web的性能优化。那么有哪些优化的方法呢？

      A、常规项

      1 、减少HTTP请求，在网页中图片、css、javascript、flash等等，都会增加我们的HTTP请求，减少请求数能提高WEB的页面响应时间；

       2、导入的css和js文件的位置，css放在head部分，js放在body的尾部；

       3、js/css/html代码的压缩；

       4、使用外部的 js/css，内联的css和js其实比外部文件反应更快，那为什么要用外部呢？因为使用外部的css和技术可以让浏览器缓存它，这样不仅HTML文档大小减少，而且不会增加HTTP请求数量。另外，外部的 js/css可以提高代码的重用性；

       5、资源的延迟加载（懒加载）；

$("img").lazyload

        6、预加载；

        7、缓存处理，使用localStorage。

        B、CSS项

        1、避免使用css表达式，因为它被重新极端的次数相当多；

        2、避免使用@import ；

        3、避免使用IE Filter；

        4、避免使用后代选择器 ul>li ;

        5、利用css继承机制；

        6、避免使用通配符选择器；

        7、使用多重选择器；

        8、CSS Sprites技术

        C、JavaScript项

        1、使用临时变量（或数组）存放dom节点；

        2、批量操作时，使用字符串拼接，用innerHTML开销更小，速度更快，同时内存也更安全；

        3、减少dom访问，可以缓存已经访问过的元素，删除dom节点中不必要的节点（remove炽热的()）和对象；

        4、创建dom节点，在执行完 createElement 代码后，应该马上添加（append）到dom树中；

        5、监听dom事件，监听父节点（事件冒泡）。

        D、HTML项

        1、避免使用iframe，因为它会导致页面的重绘；

        2、减少节点数量；

        3、避免重绘和回流，布局变化引起重绘，元素变化（内容、样式）导致回流；

        E、资源项

        1、图片

        1-1、减少图片数量（CSS Sprites）；

        1-2、降低图片质量（减小图片大小）；

        1-3、选择适当的图片样式（jpg主要是摄影级照相类图像，gif主要是动画图片，png杜宇透明无损耗的小文件是不错的选择）；

        1-4、图片的转码Base64（src="data:image/jpg;base64,..."）；

        2、避免使用flash，尽量用css3代替。

        F、压缩工具

        1、jsmin压缩代码，不会验证代码语法；

        2、YUIcompressor 压缩时会验证语法，代码优化。

        G、CDN（内容分发网络）

        CDN的好处在于

         1、不用担心自己网站访客，在任何时间、任何地点、任何网络运营商，都能快速打开网站；

         2、各种服务器虚拟主机带宽等采购成本，包括后期运维成本都会大大减少；

         3、给网站直接带来的好处：流量、咨询量、客户量、成单量。