感官性能

常规指标

度量

趋势

First Contentful Paint    15%

Speed Index    15%

Largest Contentful Paint    25%

Time to Interactive    15%

Total Blocking Time    25%

Cumulative Layout Shift    5%

渲染流程

“重排”

“重绘”

编码优化: 

1、利用v-if和v-show减少初始化渲染和切换渲染的性能开销

2、computed、watch、methods区分使用场景

3、提前处理好数据解决v-if和v-for必须同级的问题

4、给v-for循环项加上key提高diff计算速度

5、利用v-once处理只会渲染一次的元素或组件

编码优化: 

6、提前过滤掉非必须数据，优化data选项中的数据结构

7、避免在v-for循环中读取data中数组类型的数据

8、组件库的按需引入

资源加载

浏览器默认资源加载优先级

html 、 css 、 font 这三种类型的资源优先级最高；
然后是 preload 资源（通过 <link rel=“preload"> 标签预加载）、 script 、 xhr 请求；
接着是图片、语音、视频；
最低的是prefetch预读取的资源。

 Highest 、 High 、 Medium 、 Low 、 Lowest ;

预加载(Preload)
<link rel="preload" as="script" href="example.js">

预连接(Preconnect)
<link rel="preconnect" href="https://example.com">
预获取(Prefetch)
<link rel="prefetch" href="optional.css">

1、对于XHR请求资源：将同步 XHR 请求的优先级调整为最高。
2、对于图片资源：会根据图片是否在可见视图之内来改变优先级。图片资源的默认优先级为 Low 。现代浏览器为了提高用户首屏的体验，在渲染时会计算图片资源是否在首屏可见视图之内，在的话，会将这部分视口可见图片 ( Image in viewport ) 资源的优先级提升为 High 。
3、对于脚本资源：浏览器会将根据脚本所处的位置和属性标签分为三类，分别设置优先级。
 3.1、首先，对于添加 defer / async 属性标签的脚本的优先级会全部降为 Low 。

 3.2、然后，对于没有添加该属性的脚本，根据该脚本在文档中的位置是在浏览器展示的第一张图片之前还是之后，又可分为两类。在之前的 ( 标记 early ) 它会被定为High优先级，在之后的 ( 标记 late) 会被设置为 Medium 优先级。

资源加载对浏览器渲染的影响

CSS：

  CSS放在head中会阻塞页面的渲染（也就是说页面的渲染会等到css加载完成）

    CSS阻塞JS的执行 （因为GUI线程和JS线程是互斥的，因为有可能JS会操作CSS）

    CSS不阻塞外部脚本的加载（不阻塞JS的加载，但阻塞JS的执行，因为浏览器都会有预先扫描器）

JS:

  直接引入的JS会阻塞页面的渲染（GUI线程和JS线程互斥）

    JS不阻塞资源的加载(这有赖于chrome的预加载机制)

    JS顺序执行，阻塞后续JS逻辑的执行

    JS中访问了某个元素的样式,等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析