对于渲染的流程有些疑惑
来源：16-4 网页加载和渲染的示例
慕丝1117639
2022-03-08
课程里面说将css放在head中是因为会造成重复的渲染，在网速慢的时候，会出现页面样式跳变的情况。
请问浏览器接收到html文件的之后，他是先解析整个HTML文件之后，生成一颗DOM树，同时也会解析CSS文件生成CSSOM，这时候都没有进行渲染，只有两者结合成renderTree之后，才渲染。
既然是需要将整个HTML文件解析之后才开始渲染。那么即使css被放在了html内容的最下面，那么HTML文件解析完毕生成DOMTree时，CSSOM不也完成了吗》为什么将CSS样式放在最下面会发生样式跳变的情况呢？
还是不理解
2回答
-
前端祭酒师
2022-05-08
css放在body标签尾部时,
DOMTree构建完成之后便开始构建RenderTree, 并计算布局渲染网页, 等加载解析完css之后, 开始构建CSSOMTree, 并和DOMTree重新构建RenderTree, 重新计算布局渲染网页
css放在head标签中时, 先加载css, 之后解析css构建CSSOMTree, 于此同时构建DOMTree,CSSOMTree和DOMTree都构建完毕之后开始构建RenderTree, 计算布局渲染网页
对比两者,css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因此性能会更好; 并且css放在body标签尾部时会在网页中短暂出现"裸奔"的HTML, 这不利于用户体验012022-05-08 -
双越
2022-03-08
想一个极端的例子，如果 CSS放在网页最后，但 CSS的资源是 404 ，那即便加载不了这个 css ，网页也要渲染出来，对吧。能显示什么样就显示什么样。
然后继续想，如果这个 CSS 资源不是 404 ，而是很慢很慢，要 1min 才加载出来。那网页肯定等不了 1min ，也是会先显示到页面上的。那 1min 之后，css 加载完了，网页就会重新刷新。
之后，要说明两点
第一，以上我说的都是最极端的情况，辅助我们的理解
第二，课程中讲的渲染显示过程，也是最基本的一个理论模型，浏览器实际的渲染和显示过程非常复杂，不是我们一门课能讲清楚的，当然面试也不会考那么细。
所以，还是课程里那句话：了解原理，别扣细节。
00
相似问题