一、什么是浏览器端渲染 (CSR)？
CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。
二、什么是服务器端渲染 (SSR)？
SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
本文以Vue.js 做为演示框架来区分SSR和CSR。默认情况下，Vue.js可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而也可以将同一个组件渲染为服务器端的 HTML
字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。
三、不同渲染方式在浏览器解析情况
从输入页面URL到页面渲染完成大致流程为：
- 解析URL
- 浏览器本地缓存
- DNS解析
- 建立TCP/IP连接
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器根据深度遍历的方式把html节点遍历构建DOM树
- 遇到CSS外链，异步加载解析CSS，构建CSS规则树
- 遇到script标签，如果是普通JS标签则同步加载并执行，阻塞页面渲染，如果标签上有defer / async属性则异步加载JS资源
- 将dom树和CSS DOM树构造成render树
- 渲染render树
- FP：首次绘制。用于标记导航之后浏览器在屏幕上渲染像素的时间点。这个不难理解，就是浏览器开始请求网页到网页首帧绘制的时间点。这个指标表明了网页请求是否成功。
- FCP：首次内容绘制。FCP 标记的是浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至
- FMP：首次有效绘制。这是一个很主观的指标。根据业务的不同，每一个网站的有效内容都是不相同的，有效内容就是网页中”主角元素”。对于视频网站而言，主角元素就是视频。对于搜索引擎而言，主角元素就是搜索框。
- TTI：可交互时间。用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。应用可能会因为多种原因而无法响应用户输入：①页面组件运行所需的JavaScript尚未加载完成。②耗时较长的任务阻塞主线程
根据上图devtool时间轴的结果，虽然CSR配合预渲染方式（loading、骨架图）可以提前FP、FCP从而减少白屏问题，但无法提前FMP；SSR将FMP提前至js加载前触发，提前显示网页中的”主角元素”。SSR不仅可以减少白屏时间还可以大幅减少首屏加载时间。
- 本文作者： Alvin
- 本文链接： https://alvinyw.github.io/2019/11/1/
- 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！