关于浏览器渲染

CSS和JS在网页中的放置顺序是怎样的?

  • CSS的放置顺序:CSS放在head中,如果放在</body>标签的里面,那么当DOM树构建完成了,渲染树才构建。渲染树构建完成,浏览器不得不再重新渲染整个页面,这样造成了资源的浪费。如果放在<head> </head>之间,浏览器边构建边渲染(并发),页面加载效率高,用户体验也更好。

  • JS的放置顺序:JS放在body 标签内的最后。外链接用 <script src=""></script>,内部的用 <script></script>。普通的<script>标签的加载和解析都是同步的,会阻塞DOM的渲染,这也就是我们经常会把<script>写在<body>底部的原因之一,为了防止加载资源而导致的长时间的白屏,另一个原因是js可能会进行DOM操作,所以要在DOM全部渲染完后再执行。

解释白屏和FOUC。

  • 白屏
  1. 如果把样式放在底部,对于IE浏览器,在某些情景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐渐展现。
  2. 如果使用@import标签,即使CSS放入link,并且放在头部,也可能出现白屏。
  3. 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。
  • FOUC (Flash of Unstyled Content)

  • 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象(逐步加载无样式的内容,等CSS加载完成后页面突然展现样式)。对于Firefox会一直表现出FOUC,这是由于Firefox内核 Gecko 渲染机制造成的。


    Mozilla's Gecko rendering engine main flow.png

async和defer的作用是什么?有什么区别?

  • 普通的<script>标签的加载和解析都是同步的,会阻塞DOM的渲染,这也就是我们经常会把<script>写在<body>底部的原因之一,为了防止加载资源而导致的长时间的白屏,另一个原因是js可能会进行DOM操作,所以要在DOM全部渲染完后再执行, 有什么方法可以防止这些问题的产生呢,就有了async (异步)和defer (延迟)。
  • async(异步),加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
  • defer(延迟),加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
  • 遇上设有async属性的脚本,会在HTML解析过程中下载该脚本,并在完成下载后暂停HTML的解析来执行这个异步脚本,直到执行完成后再继续HTML的解析。打个比方,做饭的同时,也品尝自己做的菜,感觉味道很好了,才出锅,继续做下一道菜。
  • 遇上有defer属性的脚本,会在HTML解析过程中下载该脚本,在HTML解析完成后才执行该文件,延迟脚本按照它们在文档中出现的顺序执行。打个比方,做好饭后,才品尝自己做的菜,不管好不好吃,都已经出锅了。
  • async属性可以保证脚本下载的同时,浏览器进行渲染。需要注意的是,一旦采用这个属性就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行哪个脚本。

翻到一篇博客,讲解的不错,更多内容可以参考这篇博客 async和defer的作用和区别

简述网页的渲染机制

  • webkit内核渲染机制
  1. 解析html标签,构建dom树。
  2. 解析css标签,构建cssom树。
  3. 把dom和cssom组合成渲染树(render tree)。
  4. 在渲染树的基础上进行布局,计算每个节点的结构。
  5. 把每个节点绘制到屏幕上(painting)。
Webkit main flow.png
  • Gecko内核渲染机制
  1. 解析 HTML 标签到 Content Sink。
  2. 这时,先加载Content Sink 里面的内容,页面上会显示一个无样式的内容(HTML标签,网页内容优先)。
  3. 循环加载 CSS 样式, 构建渲染结构。
  4. 重新渲染页面, 绘制到屏幕上(painting)。
Mozilla's Gecko rendering engine main flow.png

推荐阅读更多精彩内容