浅谈浏览器如何渲染页面与csr和ssr的初探

浏览器是如何渲染页面（这里的渲染指生成包含有数据完整html页面的过程）

1、获取html代码解析成一个DOM树，DOMtree，tag是节点，根节点document

2、遇到css解析成样式结构体，去掉浏览器不能解析的样式

3、构建一个呈现树，render tree，能够识别css，呈现树不包含隐藏节点，display：none，等。

4、绘制页面，注意的是DOM tree和样式结构体是同时分别解析的。

5、DOM解析时，读取到style，若是外部文件，就另开线程去下载，若遇到内部样式，上面说了异步解析（理论上来说，应用样式表不会更改 DOM 树，因此似乎没有必要等待样式表并停止文档解析）。当遇到一个 script 标记时，即遇到了js，将立即阻塞DOM tree的构建（因为js会操作DOM节点或者修改样式），将控制权移交给 JavaScript 引擎，等到 JavaScript 引擎运行完毕，浏览器才会从中断的地方恢复DOM树的构建。

6、渲染树（Render Tree）并不是必须等DOM tree及样式结构体加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。

感兴趣可以研读 浏览器工作原理

csr与ssr区别

一、csr：客户端渲染

性能上：比较慢，加载容易出现白屏，客户端也就是浏览器要等所有资源文件都加载完毕才开始渲染，不利于seo

二、ssr：服务器渲染

性能上：减少了客户端对服务端的http请求，响应速度加快，首屏的性能优化，首屏加载速度快。在服务器端将资源文件加载渲染，返回给浏览器是完整的html，浏览器可以直接渲染，有利于seo

!!!!!!seo的策略是内容相关性，seo对js不友好，对静态页面非常友好，所以服务器渲染，浏览器获得完整静态页面，有利于seo

（最后，以上理论若有问题，欢迎并感谢指正）