• 前端优化总结和技巧(原创)


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

    一、减少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等。

  • 相关阅读:
    Java项目xml相关配置
    Jquery的bind跟on绑定事件的区别
    命令操作Mysql数据库
    Jquery实现功能---购物车
    Jquery插件---渐隐轮播
    Jquery制作插件---内容切换
    PCB画板的快捷键
    蓝牙2.0传数据给数码管
    蓝牙2.0传数据给数码管
    共阳极数码管计数器
  • 原文地址:https://www.cnblogs.com/dunken/p/4362950.html
Copyright © 2020-2023  润新知