关于浏览器渲染
2017-12-11 本文已影响0人
饥人谷_邵征鹏
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。
- 白屏
- 如果把样式放在底部，对于IE浏览器，在某些情景下（新窗口打开，刷新等）页面会出现白屏，而不是内容逐渐展现。
- 如果使用@import标签，即使CSS放入link,并且放在头部，也可能出现白屏。
- 对于图片和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内核渲染机制
- 解析html标签，构建dom树。
- 解析css标签，构建cssom树。
- 把dom和cssom组合成渲染树（render tree）。
- 在渲染树的基础上进行布局，计算每个节点的结构。
- 把每个节点绘制到屏幕上（painting）。
Webkit main flow.png
- Gecko内核渲染机制
- 解析 HTML 标签到 Content Sink。
- 这时，先加载Content Sink 里面的内容，页面上会显示一个无样式的内容（HTML标签，网页内容优先）。
- 循环加载 CSS 样式， 构建渲染结构。
- 重新渲染页面， 绘制到屏幕上（painting）。
Mozilla's Gecko rendering engine main flow.png
