CSS堵塞和JS堵塞

CSS

1. CSS 文件是并行下载的
2. CSS 不阻塞 DOM 解析，但是会阻塞 DOM 渲染
3. CSS 的下载不会阻塞后面 JS 的下载，但是会阻塞JS执行，所以当js下载好后，等待CSS下载后才可以解析JS
4. Body内部的外链CSS较为特殊，会形成FOUC（Flash of Unstyled Content）现象，请慎用

JS

1. 现代浏览器会并行加载 JS 文件，但是按照书写顺序执行代码
2. JS 会阻塞 DOM 解析，只有等到js执行完毕，浏览器才会继续解析 DOM 。没有 DOM树 ，浏览器就无法渲染，所以当加载很大的 JS 文件时，可以看到页面很长时间是一片空白。（JS引擎线程 与 GUI渲染线程互斥，主要目的是为了性能，尽可能减少重绘重排）

异步加载JS方案，script标签中defer和async有什么区别？

1. defer
   • 立即下载，但延迟执行。
   • 多个脚本并行下载，但按照顺序执行
   • defer脚本总是在 DOM 准备好，在DOMContentLoaded事件之前时执行
   • 适用于有DOM操作或者脚本有依赖关系的
2. async
   • 立即下载，下载完成执行
   • async脚本之间互不干扰，谁先下载完就先执行谁，不会等待DOM解析后执行
   • DOMContentLoaded和async脚本不会互相等待

两个都是用于处理外链JS 的。对于内部JS 是没有效果的，于解析html都是异步的，下载此类脚本都不会阻止页面呈现（异步加载）

性能优化时为什么把link标签放在头部，script放在底部？如果头部同时有script与link的情况下，为什么将script放在link上面了吗？

1. 问题：把link标签放在头部，script放在底部
   答：因为浏览器在渲染html的时候，从上到下依次执行，遇到js文件就会停止当前页面的渲染，转而去下载js文件，如果将script标签放在头部，如果文件又很大的情况下，首屏时间就会延长，影响用户体验，而且css不会阻塞dom的解析
2. 问题：头部两个都存在时，将script放在link上面
   答：因为css会阻塞js的执行，js会阻塞dom的解析