对于渲染的流程有些疑惑

Question

课程里面说将css放在head中是因为会造成重复的渲染，在网速慢的时候，会出现页面样式跳变的情况。
请问浏览器接收到html文件的之后，他是先解析整个HTML文件之后，生成一颗DOM树，同时也会解析CSS文件生成CSSOM，这时候都没有进行渲染，只有两者结合成renderTree之后，才渲染。

既然是需要将整个HTML文件解析之后才开始渲染。那么即使css被放在了html内容的最下面，那么HTML文件解析完毕生成DOMTree时，CSSOM不也完成了吗》为什么将CSS样式放在最下面会发生样式跳变的情况呢？
还是不理解

Answer 1

前端祭酒师 2022-05-08 06:42:31

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, 这不利于用户体验

• 提问者 慕丝1117639 #1

  按你的意思是，当浏览器解析完HTML之后，就立马构建RenderTree了，不等CSSOMTree构建完毕，也就是说RenderTree的构建不一定能需要CSSOMTree。 但是我们知道css的解析会堵塞页面的渲染，既然会堵塞页面的渲染，也就是说CSSOMTree会影响RenderTree的构建，那这样岂不是矛盾了吗？请问我哪里理解错了，谢谢

Answer 2

双越 2022-03-08 23:11:45

想一个极端的例子，如果 CSS放在网页最后，但 CSS的资源是 404 ，那即便加载不了这个 css ，网页也要渲染出来，对吧。能显示什么样就显示什么样。

然后继续想，如果这个 CSS 资源不是 404 ，而是很慢很慢，要 1min 才加载出来。那网页肯定等不了 1min ，也是会先显示到页面上的。那 1min 之后，css 加载完了，网页就会重新刷新。

之后，要说明两点

第一，以上我说的都是最极端的情况，辅助我们的理解

第二，课程中讲的渲染显示过程，也是最基本的一个理论模型，浏览器实际的渲染和显示过程非常复杂，不是我们一门课能讲清楚的，当然面试也不会考那么细。

所以，还是课程里那句话：了解原理，别扣细节。