渲染的理解

Question

老师请问我们说的渲染就是将我们写的HTML标签显示在屏幕上吗？
按照您说的的渲染流程，以下图片这个代码中，看到的现象应该是，在aler()堵塞渲染的时候，屏幕上已经显示了P1、P2这两个内容才对，为什么js代码堵塞渲染的时候，屏幕上没有显示P1和P2呢？

结果为:

Answer 1

双越 2022-03-08 21:18:47

浏览器的渲染和显示都有各种细化和优化，为了不同情况下更好的用户体验。

渲染不一定就是显示在页面上。你可以在 alert 时，用 js 获取一下 p 的数量。如果能取到正确的数量，那就是 DOM 已经部分构建完成了。

alert(document.getElementsByTagName('p').length)

• 提问者 慕丝1117639 #1

  请问一般说的渲染指的是做了工作呀，例如对于chrome浏览器来说，DOM树和CSSOM整合之后形成Render Tree，您在视频里讲的渲染Render Tree，如果渲染不是显示的话，请问渲染Render Tree大概做的是什么工作呢？

• 双越 回复 提问者 慕丝1117639 #2

  光计算 render tree 的一些数据就很麻烦，例如一个 div 到底定位到哪里，宽高是多少，根据上下级节点计算，这就挺麻烦的。