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

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

• JS一般放置在标签之前或添加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的作用是什么？有什么区别

• 当浏览器碰到