浏览器是如何渲染页面(这里的渲染指生成包含有数据完整html页面的过程)
1、获取html代码解析成一个DOM树,DOMtree,tag是节点,根节点document
2、遇到css解析成样式结构体,去掉浏览器不能解析的样式
3、构建一个呈现树,render tree,能够识别css,呈现树不包含隐藏节点,display:none,<head>等。
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
(最后,以上理论若有问题,欢迎并感谢指正)