性能优化

其实之前我在工作文档中提到具体怎么做,但是没有在宏观上去对比,这里主要讲解下如何测试性能并优化

编码优化

  • 减少内存的无关变量监听
  • 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

  1. "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内存）的最低值、最高值以及随时间的走势曲线

image.png

性能监控-performance monitor

image.png

量化性能指标 - lighthouse

image.png
image.png
我们可以看到几项指标：

  • 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个指标就能很好的量化我们网页的性能