不同渲染方式在浏览器解析情况

作者：追逐者
链接：https://www.zhihu.com/question/308792091/answer/894393973
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

不同渲染方式在浏览器解析情况

从输入页面URL到页面渲染完成大致流程为：解析URL->浏览器本地缓存->DNS解析->建立TCP/IP连接->发送HTTP请求->服务器处理请求并返回HTTP报文->浏览器根据深度遍历的方式把html节点遍历构建DOM树->遇到CSS外链，异步加载解析CSS，构建CSS规则树->遇到script标签，如果是普通JS标签则同步加载并执行，阻塞页面渲染，如果标签上有defer / async属性则异步加载JS资源->将dom树和CSS DOM树构造成render树->渲染render树

CSR和SSR在浏览器中解析情况

• FP：首次绘制。用于标记导航之后浏览器在屏幕上渲染像素的时间点。这个不难理解，就是浏览器开始请求网页到网页首帧绘制的时间点。这个指标表明了网页请求是否成功。
• FCP：首次内容绘制。FCP 标记的是浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 <canvas> 元素。
• FMP：首次有效绘制。这是一个很主观的指标。根据业务的不同，每一个网站的有效内容都是不相同的，有效内容就是网页中"主角元素"。对于视频网站而言，主角元素就是视频。对于搜索引擎而言，主角元素就是搜索框。
• TTI：可交互时间。用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。应用可能会因为多种原因而无法响应用户输入：①页面组件运行所需的JavaScript尚未加载完成。②耗时较长的任务阻塞主线程

根据上图devtool时间轴的结果，虽然CSR配合预渲染方式（loading、骨架图）可以提前FP、FCP从而减少白屏问题，但无法提前FMP；SSR将FMP提前至js加载前触发，提前显示网页中的"主角元素"。SSR不仅可以减少白屏时间还可以大幅减少首屏加载时间。

追逐者：服务端渲染(SSR)vs客户端渲染(CSR)​zhuanlan.zhihu.com