前端性能优化
1 构建工具的选择
选择适合开发环境的工具，如 Grunt、Gulp、Webpack、Postcss等
2 渐进增强
首先设计并构建核心体验，再针对高性能浏览器设计高级特性的相关体验
3 合理利用 CDN
可以将部分内容用静态网站生产工具生成一个静态版本，将其置于 CDN 上，从而避免数据库的请求
4 优化构建
使用 cutting-the-mustard 技术
根据浏览器类型的不同载入不同类型的资源。
传统浏览器载入核心型资源，现代浏览器载入增强型资源。
在载入资源时要严格遵守相应的规则：页面加载时应首先载入 Core 资源，然后在 DomContentLoaded 事件触发时载入 Enhancement 资源，最后在 Load 事件触发时载入 Extras 资源。
tree-shaking
打包过程中检测工程中没有引用过的模块并进行标记，在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块（静态引入），提高tree shaking效率
多线程构建
- HappyPack（不维护了）
- thread-pool（webpack5）
压缩代码
- webpack-paraleel-uglify-plugin
- css-loader 的 minimize 选项开启 cssnano 压缩 css
缩小打包作用域
- exclude/include
- ignorePlugin 完全排除模块
DLL 分包
使用 DllReferencePlugin 对 manifest.json 进行引用，将一些基本不会改变的代码打包成静态资源，避免反复编译浪费时间
使用缓存
- 使用 expires、cache-control、max-age 以及其它 HTTP 缓存响应头
- babel-loader 开启缓存
异步加载 js
可以通过在 HTML 的 script 标签上添加 defer 以及 async 属性来实现
优化图片
- 可以使用压缩工具对不同格式的图片进行压缩，如 JPEG 图片用 mozJPEG 压缩、PNG 图片用 Pingo 压缩、GIF 图片用 Lossy GIF 压缩、SVG 图片用 SVGOMG 压缩
- 使用 WebP 格式的图片
首屏渲染
我们需要改变处理CSS的方式–这意味着将其分为两个文件。
对于第一个文件，我们仅提取呈现内容所需的最少CSS，然后将其内联到网页中（以 <style> 的行内形式内嵌到 <head>）。对于第二个文件或非关键CSS，我们异步加载该文件，以免阻塞网页。
加快网络传输
- 使用懒加载的方式载入字体或者开销大的组件，如视频、iframe、图片等
- dns-prefetch，能够让浏览器在后台进程执行一次 DNS 查询
- preconnect，能够让浏览器在后台进程发起一次握手（DNS，TCP，TLS）
- prefetch，能够让浏览器发起对资源的请求
- prerender，能够让浏览器在后台进程渲染出特定的页面
- preload，在不执行资源的前提下，预先拿到该资源
5 提高渲染性能
-
减少重绘和重排
-
使用 transform 和 opacity 实现动画
对于独立的合成层应用 transform 和 opacity 是不会触发 Repaint 的
转载请注明出处，谢谢！
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
