- 性能优化
- 编码优化
- 打包优化
- tree shaking
- JS-tree-shaking
- css-tree-shaking
- tree shaking
- 内存优化
-
- 性能监控-performance monitor
- 量化性能指标 - lighthouse
性能优化
其实之前我在工作文档中提到具体怎么做,但是没有在宏观上去对比,这里主要讲解下如何测试性能并优化
编码优化
- 减少内存的无关变量监听
- v-if与v-for不推荐连用,v-for的优先级高
- ajax的请求尽量能够减少多个，如果ajax请求比较慢，但是又必须得请求。那么可以考虑使用 Web Worker
- 防抖和节流
- 图多的页面需要做图片懒加载+预加载+cdn请求以及压缩,加入父容器限制,避免重绘重排时容易造成页面排版混乱的情况
- 组件按需加载, 公共组件提取
打包优化
tree shaking
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的 静态结构特性，例如 [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 和 [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
为了学会使用 tree shaking，你必须……
- 使用 ES2015 模块语法（即
import和export）。 - 在项目
package.json文件中，添加一个 “sideEffects” 入口。 - 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如
UglifyJSPlugin）。
你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。
JS-tree-shaking
"sideEffects": false
css-tree-shaking
webpack-css-treeshaking-plugin
原理:整体思路是这样的，遍历所有的css文件中的selector选择器，然后去所有js代码中匹配，如果选择器没有在代码出现过，则认为该选择器是无用代码。
happypack多线程打包
sourceMap优化
cdn加载第三方模块
splitChunks抽离公共组件
内存优化
在页面从零到加载完成这个过程中JS Heap（js堆内存）、documents（文档）、Nodes（DOM节点）、Listeners（监听器）、GPU memory（GPU内存）的最低值、最高值以及随时间的走势曲线
性能监控-performance monitor
量化性能指标 - lighthouse
我们可以看到几项指标：
- First Contentful Paint 首屏加载时间(FCP)
- Time to interactive 可互动的时间(TTI) 衡量一个页面多长时间才能完全交互
- Speed Index 内容明显填充的速度(SI) 分数越低越好
- Total Blocking Time 总阻塞时间(TBT) 主线程运行超过50ms的任务叫做Long Task，Total Blocking Time (TBT) 是 Long Tasks（所有超过 50ms 的任务）阻塞主线程并影响页面可用性的时间量，比如异步任务过长就会导致阻塞主线程渲染，这时就需要处理这部分任务
- Largest Contentful Paint 最大视觉元素加载的时间(LCP) 对于SEO来说最重要的指标,用户如果打开页面很久都不能看清楚完整页面，那么SEO就会很低。（对于Google来说）
- Cumulative Layout Shift 累计布局偏移(CLS) 衡量页面点击某些内容位置发生偏移后对页面对影响 eg:当图片宽高不确定时会时该指标更高，还比如异步或者dom动态加载到现有内容上的情况也会造成CLS升高
以上6个指标就能很好的量化我们网页的性能
若有收获，就点个赞吧
0 人点赞
