WEB性能优化

jopen 7年前

      作为一个前端工作人员,我们不可避免要进行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、给网站直接带来的好处:流量、咨询量、客户量、成单量。