请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

对于渲染的流程有些疑惑

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

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

正在回答 回答被采纳积分+3

2回答

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

css放在body标签尾部时, DOMTree构建完成之后便开始构建RenderTree, 并计算布局渲染网页, 等加载解析完css之后, 开始构建CSSOMTree, 并和DOMTree重新构建RenderTree, 重新计算布局渲染网页
css放在head标签中时, 先加载css, 之后解析css构建CSSOMTree, 于此同时构建DOMTreeCSSOMTreeDOMTree都构建完毕之后开始构建RenderTree, 计算布局渲染网页
对比两者, css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因此性能会更好; 并且css放在body标签尾部时会在网页中短暂出现"裸奔"的HTML, 这不利于用户体验

0 回复 有任何疑惑可以回复我~
  • 提问者 慕丝1117639 #1
    按你的意思是,当浏览器解析完HTML之后,就立马构建RenderTree了,不等CSSOMTree构建完毕,也就是说RenderTree的构建不一定能需要CSSOMTree。 但是我们知道css的解析会堵塞页面的渲染,既然会堵塞页面的渲染,也就是说CSSOMTree会影响RenderTree的构建,那这样岂不是矛盾了吗?请问我哪里理解错了,谢谢
    回复 有任何疑惑可以回复我~ 2022-05-08 09:28:56
双越 2022-03-08 23:11:45

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

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


之后,要说明两点

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

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


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

0 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信