avatar

目錄
前端性能优化

WEB前端性能优化总结

各种前端性能优化问题

1. 图片优化

  • 在保证图片质量的情况下,压缩图片,减少图片大小

  • 使用Css3、svg、iconfont代替图片

  • 首次加载不大于1024KB的图片

  • 图片宽不大于640px(移动端)

2. 脚本优化

  • 减少重回和回流操作

  • 使用事件委托,避免批量绑定事件

  • 尽量使用ID选择器

  • 使用touch事件代替click事件

  • 使用节流函数减少性能消耗

3. HTML优化

  • css文件写在头部,javascript放在尾部

  • 避免层级深嵌套

  • 避免img、iframe、a等元素的空src

  • 避免行内样式和事件绑定

  • 大图片避免使用base64

4. CSS优化

  • 移除空的css规则
  • 正确使用display的属性
  • 不滥用float
  • 不声明过多的font-size
  • 值为0时不要使用单位
  • 标准化各种浏览器前缀

4. 渲染优化

  • HTML使用viewport(移动端)
  • 减少DOM节点
  • 尽量使用CSS3 3d动画来触发GPU渲染
  • 使用requestAnimationFrame代替setTimeInter和setTimeout
  • 适当使用canvas动画
  • 对于resize、mousemove事件使用节流处理,较少DOM回流和重绘次数

5. 优化网络链接

  • 使用CDN
  • 使用DNA预解析

6. 资源加载时机

  1. 异步script标签

    • defer: 异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
    • async: 异步加载,加载完成后立即执行
  2. 模块按需加载

    • 在SPA等业务逻辑比较复杂的系统中,需要根据路由来加载当前页面需要的业务模块
    • 按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开,然后在一些
      代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载
    • webpack 提供了两个类似的技术,优先选择的方式是使用符合 ECMAScript 提案 的 import() 语法。第二种则是使用 webpack 特定的 require.ensure
  3. 使用资源预加载preload和资源预读取prefetch

    • preload让浏览器提前加载指定资源,需要执行时再执行,可以加速本页面的加载速度
    • prefetch告诉浏览器加载下一页面可能会用到的资源,可以加速下一个页面的加载速度
  4. 资源懒加载与资源预加载

    • 资源延迟加载也称为懒加载,延迟加载资源或符合某些条件时才加载某些资源
    • 资源预加载是提前加载用户所需的资源,保证良好的用户体验
    • 资源懒加载和资源预加载都是一种错峰操作,在浏览器忙碌的时候不做操作,浏览器空间时,再加载资源,优化了网络性能

【参考】

文章作者: Dylan
文章鏈接: https://www.faithlch.com/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論