基础理论

浏览器渲染原理

我们需要知道浏览器是如何渲染一个页面的，我们才能知道如何对页面进行性能优化

进程与线程

浏览器有多种进程，其中最主要的5种进程如下：

浏览器进程负责界面展示、用户交互、子进程管理、提供存储等
渲染进程每个页面都有一个单独的渲染进程，用于渲染页面，包含webworker线程
网络进程主要处理网络资源加载（HTML、CSS、JS、IMAGE、AJAX等）
GPU进程 3D绘制，提高性能
插件进程 chrome插件，每个插件占用一个进程

输入url到页面展示完整过程

渲染完整过程.png

用户输入

用户在浏览器进程输入并按下回车健后，浏览器判断用户输入的url是否为正确的url，如果不是，则使用默认的搜索引擎将该关键字拼接成url。

卸载原页面并重定向到新页面

然后浏览器会将现有页面卸载掉并重定向到用户新输入的url页面，也就是图中【Process Unload Event】和【Redirect】流程。

此时浏览器会准备一个渲染进程用于渲染即将到来的页面，和一个网络进程用于发送网络请求。

处理Service Worker

如果当前页面注册了Service Worker那么它可以拦截当前网站所有的请求，进行判断是否需要向远程发送网络请求。也就是图中【Service Worker Init】与【Service Worker Fecth Event 】步骤

如果不需要发送网络请求，则取本地文件。如果需要则进行下一步。

网络请求

网络请求.webp
tip：大部分请求期间，相应的DNS查找时间和SSL时间很短，无法被捕捉到，所以只有一个已停止时间。

根据url查询本地是否已经有强制缓存，如果有则判断缓存是否过期，如果没过期则直接返回缓存内容，也就是图1中【HTTP Cache】步骤
如果没有强制缓存或者缓存已过期，则将该请求加入队列进行排队准备发送网络请求，也就是图2中【正在排队】，然后进入DNS解析阶段，也就是图1中【DNS】以及图2中的【DNS查找】，DNS根据域名解析出对应的IP地址。(DNS基于UDP)。
使用IP寻址找到对方，然后根据IP地址+端口号创建一个TCP连接(三次握手)，也就是图1中【TCP】以及图2中的【初始连接】创建完成后利用TCP连接来传输数据。(TCP会将数据拆分为多个数据包，进行有序传输，如果丢包会重发，TCP的特点是可靠、有序)
判断当前协议是否为https，如果为https，则进行SSL协商，将数据进行加密，如果为http协议则不进行加密(明文传输)，也就是图2中的【SSL】。
开始发送http请求(请求行/请求头/请求体)，也就是图1中【Request】以及图2中的【已发送请求】。HTTP协议有多个版本，目前使用最多的版本为HTTP/1.1，HTTP/1.1发送完成后默认不会断开。keep-alive 默认打开，为了下次传输数据时复用上次创建的连接。每个域名最多同时建立6个TCP连接，所以同一时间最多发生6个请求。
服务器收到数据后解析HTTP请求(请求行/请求头/请求体)，处理完成后生成状态码和HTTP响应(响应行/响应头/响应体)后返回给客户端，也就是图2的【等待中】在做的事情。
客户端接收到HTTP响应后根据状态码进行对应的处理，如果状态码为304则直接代表协商缓存生效，直接取本地的缓存文件。如果不是则下载内容。也就是图1中【Response】以及图2中的【下载内容】步骤。

服务端响应

在网络请求第6步中，服务器收到HTTP请求后需要根据请求信息来进行解析，并返回给客户端想要的数据，这也就服务端响应。

服务端可以响应并返回给客户端很多种类型的资源，这里主要介绍html类型。

目前前端处理服务端响应html请求主要分为SSR服务端渲染与CSR客户端渲染，CSR就是返回一个空的HTML模版，然后浏览器加载js后通过js动态渲染页面。SSR是服务端在接受到请求时事先在服务端渲染好html返回给客户端后，客户端再进行客户端激活。

在打开一个站点的首屏页的完整链路中，使用SSR服务端渲染时的速度要远大于CSR客户端渲染，并且SSR对SEO友好。所以对于首屏加载速度比较敏感或者需要优化SEO的站点来说，使用SSR是更好的选择。

浏览器渲染详细流程

浏览器渲染详细流程主要在网络请求中的第7步。浏览器下载完html内容后进行解析何渲染页面的流程。

浏览器渲染流程.webp

渲染流程分为4种情况：

HTML中无任何CSS相关标签
CSS相关标签在HTML最顶部，且在解析到内容标签（
）时已经解析完CSS相关标签
CSS相关标签在HTML最顶部，但在解析到内容标签（
）时CSS相关标签尚未解析完
CSS相关标签在HTML最底部

浏览器处理每一帧的流程

浏览器在渲染完页面之后还需要不间断的处理很多内容的，比如动画、用户事件、定时器等。因此当浏览器渲染完页面后，还会在之后的每一帧到来时执行以下的流程。

每一帧流程.webp

【Input events】处理用户事件，先处理【阻塞事件Blocking】包括touch和wheel事件，后处理【非阻塞事件Non-blocking】包括click和keypress。
【JS】处理完用户事件后执行【定时器Timers】
【Begin frame】处理完定时器后开始进行【每帧事件Per frame events】的处理，包括窗口大小改变、滚动、媒体查询的更改、动画事件。
【rAF】处理完帧事件后执行requestAnimationFrame回调函数和IntersectionObserver回调函数。
【Layout】然后【重新计算样式Recalc style】、【更新布局Update layout】、【调整Observer回调的大小Resize Observer callbacks】
【Paint】然后【合成更新Compositing update】、【Paint invalidation】、【Record】

Chrome性能优化相关工具

了解完浏览器渲染原理，我们还需要知道根据哪些指标才能判断一个页面性能的好坏，在Chrome中这些指标应该怎么获取。以及Chrome都为我们提供了哪些性能相关的工具，如何使用。

Chrome Performance(性能)

Performance既是一个Chrome工具，可用于性能检测。
同样又是一套JS API，可在Chrome中执行。

Chrome Performance 工具的使用

打开Chrome调试面板选择Performance，中文版为性能，点击刷新按钮，Performance会刷新并录制当前页面，然后我们就可以在面板中看到如下的各种性能相关细节。

Chrome性能优化相关工具.webp

使用Performance API获取性能相关指标

接下来我们来了解一下目前常用的性能指标，并且我们需要知道其中一些关键指标如何用Performance API获取。

TTFB（Time To First Byte）首字节时间：从发送请求到数据返回第一个字节所消耗的时间。
FP (First Paint) 首次绘制: 第一个像素绘制到页面上的时间。
FCP (First Contentful Paint) 首次内容绘制: 标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素。
FMP(First Meaningful Paint) 首次有效绘制: 例如，在 YouTube 观看页面上，主视频就是主角元素。
图片可以没加载完成，但整体的骨架已经加载完成了。
1秒内完成FMP的概率超过80%，那就代表这个网站是一个性能较好的网站。
TTI (Time to Interactive) 可交互时间 : DOM树构建完毕，可以绑定事件的时间
LCP (Largest Contentful Paint) 最大内容渲染: 代表在viewport中最大的页面元素加载的时间。LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象(2019年11月新增)。
DCL (DomContentloaded): 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载。
L (onLoad), 当依赖的资源(图片、文件等), 全部加载完毕之后才会触发。
TBT (Total Blocking Time) 页面阻塞总时长: TBT汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总。
CLS (Cumulative Layout Shift) 累积布局偏移: 总结起来就是一个元素初始时和其hidden之间的任何时间如果元素偏移了, 则会被计算进去, 具体的计算方法可看这篇文章 https://web.dev/cls/
SI (Speed Index): 指标用于显示页面可见部分的显示速度, 单位是时间。