WEB性能优化

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

      A、常规项

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

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

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

       四、使用外部的 js/css，内联的css和js其实比外部文件反应更快，那为何要用外部呢？由于使用外部的css和技术可让浏览器缓存它，这样不只HTML文档大小减小，并且不会增长HTTP请求数量。另外，外部的 js/css能够提升代码的重用性；

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

$("img").lazyload

        六、预加载；

        七、缓存处理，使用localStorage。

        B、CSS项

        一、避免使用css表达式，由于它被从新极端的次数至关多；

        二、避免使用@import ；

        三、避免使用IE Filter；

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

        五、利用css继承机制；

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

        七、使用多重选择器；

        八、CSS Sprites技术

        C、JavaScript项

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

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

        三、减小dom访问，能够缓存已经访问过的元素，删除dom节点中没必要要的节点（remove炽热的()）和对象；

        四、建立dom节点，在执行完 createElement 代码后，应该立刻添加（append）到dom树中；

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

        D、HTML项

        一、避免使用iframe，由于它会致使页面的重绘；

        二、减小节点数量；

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

        E、资源项

        一、图片

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

        1-二、下降图片质量（减少图片大小）；

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

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

        二、避免使用flash，尽可能用css3代替。

        F、压缩工具

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

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

        G、CDN（内容分发网络）

        CDN的好处在于

         一、不用担忧本身网站访客，在任什么时候间、任何地点、任何网络运营商，都能快速打开网站；

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

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