JS与页面渲染机制相关概念

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

• JS一般放置在</body>标签之前或添加defer属性

  1. JS是阻塞加载，会阻塞DOM树或阻塞渲染树的构建。
  2. JS 可能会修改 DOM，如果在DOM树加载完成前修改DOM会导致JS代码无效。
  3. JS可能会通过操作DOM对象的class来改变DOM，因此必须保证CSS在JS之前加载和解析完成。

• CSS一般放置在head标签内

  由于Render Tree是由DOM树和CSSOM树组合成的，html页面需要等到CSS解析完后才能完成渲染，所以CSS应放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

白屏和FOUC

• 当把CSS样式放在底部或者使用@import方式引入样式、或将JS放在头部造成其他内容阻塞加载时：
  • 一些浏览器例如chrome,他的加载和渲染机制是等头部的JS和底部的CSS全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。
  • 另一些浏览器例如Firefox,他会在CSS未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。

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

• 当浏览器碰到<script>标签时：
  • 浏览器会立即加载并执行指定的脚本，并且阻塞后续的页面渲染。
  • 有 async时，加载和渲染后续文档元素的过程将和 js脚本 的加载与执行并行进行（异步）。有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。
  • 有 defer时，加载后续文档元素的过程将和 js脚本 的加载并行进行（异步），但是 js脚本 的执行要在DOM加载完成之后，DOMContentLoaded 事件触发之前完成。

简述网页的渲染机制

1. 解析html构建DOM树
2. 解析CSS构建CSSOM树
3. 把DOM和CSSOM组合成渲染树（Render Tree）
4. 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）
5. 把每个节点绘制到屏幕上（Painting）