前端性能优化

发表于 更新于 分类于 阅读次数： 本文字数： 123 阅读时长 ≈ 1 分钟

性能优化的指标和工具

  1. https://www.webpagetest.org/ 可以本地配置和安装
  2. lighthouse 用法：lighthouse + 网址
  3. Chorme DevTools
  4. 常用的性能测量 APIS

渲染优化

  1. 关键路径：JavaScript > Style > Layout > Paint > Composite
  2. 影响回流的操作：
  • 添加 / 删除元素
  • 操作 styles
  • display：none
  • offsetLeft， scrollTop，clientWidth
  • 移动元素位置
  • 修改浏览器大小，字体大小
  1. 复合线程（compositor thread）与图层（layers）

资源优化

  1. 图片格式优化：图片压缩工具 imagemin