zoukankan      html  css  js  c++  java
  • 前端优化总结和技巧(原创)

      这两天把自己以往的一些经验总结一下,希望对自己以后的开发更有帮助。分类总结下,前端开发中的优化方法和技巧。可以一起交流。

    一、减少http请求数量(简单粗暴,效果最佳)

      1、对于图片,适当使用css sprite。

      2、适当进行css、js文件的合并和压缩。

      3、(大图片可以使用浏览器的本地缓存,在首次访问的时候保存到浏览器缓存中,典型的是HTML5的manifest缓存机制以及LocalStorage等)

      当然合并也不是随意的,大量的合并和应用sprite会牺牲代码的可维护性,为以后的更新造成麻烦。

    二、良好的书写规范

      1、css文件放在head中。

      2、js文件(阻塞浏览器渲染)放在下面。

      3、避免使用css表达式expression等。

      4、尽量避免使用内联样式。

    三、js优化

      dom优化是js优化的关键,因为dom操作室最浪费时间和内存的。

       1、 能放到DOM操作之外的操作就放到外面,DOM操作要尽量少.

        如:

    // 不好的做法
    for (var i=0; i < items.length; i++){
        var item = document.createElement("li");
        item.appendChild(document.createTextNode("Option " + i);
        list.appendChild(item);
    }   
     
     
    // 更好的做法
    // 使用容器存放临时变更, 最后再一次性更新DOM
    var fragment = document.createDocumentFragment();
    for (var i=0; i < items.length; i++){
        var item = document.createElement("li");
        item.appendChild(document.createTextNode("Option " + i);
        fragment.appendChild(item);
    }
    list.appendChild(fragment);
    

      2、 大范围操作先把容器隐藏,在其中操作完成后,再显示.

      3、 样式操作不要注意修改属性,直接替换class、

      4、用变量保存DOM对象而不是多次获取,同时减少操作DOM属性的次数.即dom缓存

      5、合理的事件委托,在用jquery是链式调用等。

    其中2.3和浏览器的渲染原理有关。可以查看陈浩大神的文章--浏览器的渲染原理。

    四、按需加载、异步加载等。

      1、html5的async、defer、localstronge等

      2、js实现按需加载

      3、js实现图片预取缓存、

      4、ajax等。

  • 相关阅读:
    聊聊WS-Federation
    用双十一的故事串起碎片的网络协议(上)
    责任链模式的使用-Netty ChannelPipeline和Mina IoFilterChain分析
    最小化局部边际的合并聚类算法(中篇)
    最小化局部边际的合并聚类算法(上篇)
    UVaLive 7371 Triangle (水题,判矩形)
    UVaLive 7372 Excellence (水题,贪心)
    POJ 3312 Mahershalalhashbaz, Nebuchadnezzar, and Billy Bob Benjamin Go to the Regionals (水题,贪心)
    UVa 1252 Twenty Questions (状压DP+记忆化搜索)
    UVa 10817 Headmaster's Headache (状压DP+记忆化搜索)
  • 原文地址:https://www.cnblogs.com/dunken/p/4362950.html
Copyright © 2011-2022 走看看