前端性能优化小结

优化

优化的目的是提升用户体验,减少网页加载时间。我们可以依据雅虎军规来对项目进行优化。

  • 关于DOM
    1. 减少DOM元素的数量,不要嵌套太深,正常页面的DOM元素数量一般不应该超过1000。
    2. 尽量少用iframe。
    3. 避免空的src和href。
    4. 用智能的事件处理器(事件委托)。
    5. DOM 的多个读操作(或多个写操作),应该放在一起。不要两个读操作之间,加入一个写操作。
    6. 不要一条条地改变样式,而要通过改变class,一次性地改变样式。
    7. 尽量使用离线DOM,而不是真实的网页DOM,来改变元素样式。比如,操作Document Fragment对象,完成后再把这个对象加入DOM。再比如,使用 cloneNode() 方法,在克隆的节点上进行操作,然后再用克隆的节点替换原始节点。
    8. 使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染
  • 关于css
    1. 避免使用CSS表达式
    2. 选择<link>舍弃@import
    3. 避免使用滤镜
  • 关于请求
    1. 尽量减少HTTP请求数。
    2. 使用缓存技术。
    3. 使用CDN(内容分发网络),网站上静态资源即css、js全都使用cdn分发,图片亦然。
    4. 给Cookie减肥
    5. 避免重定向
    6. 权衡DNS查找次数,减少主机名可以节省DNS查找时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
  • 关于文件
    1. 对文件压缩混淆。
    2. 把脚本放在底部,把样式表放在顶部。
    3. 把JavaScript和CSS放到外面,不要写在页面内。
    4. 按需加载。
    5. 合并文件。
  • 关于图片
    1. 使用雪碧图。(小图标)
    2. 避免图片src属性为空。
    3. 不要在HTML中缩放图片。
    4. 更好的图片格式。
    5. 使用base64编码代替图片,css、svg、canvas或iconfont代替图片。

经验

平时项目中,我们可以根据上述经验来对项目进行优化。剩下的可以不断优化自己的代码。

参考

    原文作者:tiancai啊呆
    原文地址: https://www.jianshu.com/p/829e489dd7c3
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞