前端性能优化指南

一、常用指标

1、FP(First Paint)：页面在导航后首次呈现出不同于导航前内容的时间点。

计算方式：白屏时间 = firstPaint - pageStartTime

2、FCP(First Contentful Paint)：从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。

计算方式：首屏时间 = firstContentTime - pageStartTime

3、LCP(Largest Contentful Paint)：视窗最大可见图片或者文本块的渲染时间。

注：FP、FCP、LCP三者是按顺序触发的，FP之前为白屏时间，FP到FCP为dom内容绘制阶段，FCP到LCP为最大dom元素绘制阶段。FP和FCP可能是相同的时间，也可能FP先于FCP。

4、FMP(First Meaningful Paint)：页面的主要内容开始出现在屏幕上的时间点，因页面逻辑而异。

5、DCL(DOMContentLoaded)：HTML文档被完全加载和解析完成，无需等待样式、图片、子框架的完全加载。

6、L(onLoaded)：当依赖的资源全部加载完毕。

二、script标签中的defer和async

1、script标签

浏览器在加载HTML的过程中，若遇到script标签会暂停dom的解析与渲染，必须等待脚本内容被加载并执行完，才能继续解析渲染dom，即会发生"渲染阻塞"。

2、script标签加入defer

加载过程：js脚本会被异步加载，加载过程中不会阻塞dom解析。

执行过程：js脚本加载完成后，若dom未解析完成，脚本会暂时挂起，延迟到dom解析完成后执行

注：dominteractive表示dom解析完时间，domContentLoaded表示dom解析完毕且js脚步执行完毕时间，domContentLoaded-dominteractive即为js脚本的执行时间。

3、script标签加入async

加载过程：js脚本会被异步加载，加载过程中不会阻塞dom解析。

执行过程：js脚本加载完成就会立即执行，若dom未解析完成，执行过程依然会阻塞dom解析。

 注：DOMContentLoaded和async脚本不会互相等待，DOMContentLoaded可能发生在async之前或者之后。

总结一：defer脚本保持相对顺序来执行，不论如下long.js和small.js谁先加载完毕，都先执行long.js后执行small.js。async 执行与文档顺序无关，先加载哪个就先执行哪个。

<script defer src="https://javascript.info/article/script-async-defer/long.js"></script>
<script defer src="https://javascript.info/article/script-async-defer/small.js"></script>

总结二：要减小dom解析时间，建议采用defer方法，js脚本会等到DOM解析完成后执行，不会阻塞DOM解析过程。

总结三：async和defer属性都仅适用于外部脚本，如果script标签没有src属性，尽管写了async、defer属性也会被忽略。

三、preconnect、preload、prefetch

1、preconnect

允许浏览器在一个HTTP请求正式发送给服务器前执行一些操作，包含DNS解析、TLS协商、TCP握手，消除了往返延迟并为用户节省时间。

preconnect可以直接添加到link标签属性中，也可以在HTTP头中或者通过JS生成，如下是一个为 CDN 使用 preconnect 的例子：

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>

2、preload

是一个预加载关键字，显式地向浏览器声明一个需要提前加载的资源。浏览器就会以一定的优先级在后台加载资源，加载完的资源放在HTTP缓存中。当资源真正被使用的时候从HTTP缓存取出资源，无需等待网络的消耗。

第一种方式：通过 Link 标签进行创建

<link rel="preload" href="/path/to/style.css" as="style">

第二种方式：在 HTTP 响应头中加上 preload 字段

Link: <https://example.com/other/styles.css>; rel=preload; as=style

3、prefetch

是一个低优先级的资源提示，告诉浏览器未来可能用到的某个资源，浏览器会在空闲时候会去加载对应的资源。获取完成后，将会存储在浏览器缓存中，等到真正使用时直接从内存中读取即可。使用方式类似preload。

<!-- link 模式 -->
<link rel="prefetch" href="/path/to/style.css" as="style">

<!-- HTTP 响应头模式 -->
Link: <https://example.com/other/styles.css>; rel=prefetch; as=style