系统性学习前端性能优化
目录
-
-
- 系统性学习前端性能优化
-
- 第二章 静态资源优化
-
- 2.1 图片格式和应用场景介绍
- 2.2 图片优化——怎样让图片加载的更快
- 2.3 图片优化——在服务端进行图片自动优化的原理
- 2.4 HTML 优化
- 2.5 CSS 优化
- 2.6 js 优化
- 2.7 如何对 js 缓存进行优化
- 2.8 JavaScript:如何选择合适的模块化加载方案
- 2.9 怎样才能减少浏览器的回流和重绘
- 2.10 DOM编程优化:怎样控制DOM大小并减少DOM操作
- 2.11 静态文件:有哪些常见的压缩工具
- 2.12 静态文件:怎样打包才算合理
- 2.13 静态文件:版本号更新,你应该遵循哪些策略
- 2.14 构建工具:常用的前端构建工具
- 2.15 打包优化:提升 Webpack 打包效率的6个小技巧
-
第二章 静态资源优化
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,就不用每次代码有变更的时候都需要进行变异,提升开发效率。