前端性能优化-静态资源优化-极客时间

系统性学习前端性能优化

第二章 静态资源优化

2.1 图片格式和应用场景介绍

• JPEG：有损压缩 颜色丰富

• PNG： Icon适合

  

• GIF： 动画

  

• Webp

  

2.2 图片优化——怎样让图片加载的更快

• 用工具进行图片压缩

  

  

  

  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-huNJD17o-1631602575146)(https://gitee.com/zhangbing520/images/raw/master/images/image-20210910161337107.png)]

  

  ​

  

​ 显示不同尺寸的图片

先显示低质量的展位图片

2.3 图片优化——在服务端进行图片自动优化的原理

2.4 HTML 优化

2.5 CSS 优化

2.6 js 优化

• eval 耗费性能
• 事件绑定在父级元素上（提高事件查询效率）

• css 动画可以直接访问 GPU， 比 JS 动画性能好

2.7 如何对 js 缓存进行优化

• SPA 从A 页面 传到 B页面的值如何进行传递？
  • 可以存到 sessionStorage ，页面之间进行传值，不适合长时间的数据存储

• IndexedDB 的存储量很大

• 例如石墨文档就用到了

• 注意资源的更新策略——使用 contentHas
• 阅读类的网站可以存储用户的浏览位置

总结： 需要根据不同的业务场景选择不同的缓存策略

2.8 JavaScript：如何选择合适的模块化加载方案

2.9 怎样才能减少浏览器的回流和重绘

• 动画使用 绝对定位 脱离文档流，单独进行设置
• table 布局会引起多次回流重绘
• 避免频繁设置样式

• 避免频繁操作DOM，合并多次修改，一次性批量处理

  

2.10 DOM编程优化：怎样控制DOM大小并减少DOM操作

2.11 静态文件：有哪些常见的压缩工具

2.12 静态文件：怎样打包才算合理

• Combo: 服务端处理的方式，使用 ??a.js,b.js 用户在请求这个 url 的时候，服务端会自动对这两个文件进行合并

2.13 静态文件：版本号更新，你应该遵循哪些策略

• 更新 header 头（缓存相关的header）
• 文件打开页面就可以进行更新

• 文件hash值的方式是比较好的
• 内容变更hash值变化，保证更新的内容会更新缓存

2.14 构建工具：常用的前端构建工具

• 百度：FIS

• 京东：JDF

2.15 打包优化：提升 Webpack 打包效率的6个小技巧

• 抽离公共文件

• 对于一些框架，例如React，需要编译到内存中，我们可以进行 DLL，就不用每次代码有变更的时候都需要进行变异，提升开发效率。