前端面试题--HTML篇

JS 和 CSS 的位置对资源加载顺序的影响

用一句话概括就是： JS 全阻塞，CSS 半阻塞。(方便记忆而已)

1. JS 会阻塞后续 DOM 解析以及其它资源(如 CSS，JS 或图片资源)的加载。
2. CSS 不会阻塞后续 DOM 结构的解析，不会阻塞其它资源(如图片)的加载，但是会阻塞 JS 文件的加载。
3. 现代浏览器很聪明，会进行 prefetch 优化，浏览器在获得 html 文档之后会对页面上引用的资源进行提前下载。(注意仅仅只是提前下载)

上面介绍了 JS 会阻塞后续 DOM 解析以及其它资源(如 CSS，JS 或图片资源)的加载，这是在没有考虑到 defer, async 的情况下。async: 异步加载，立即执行。defer：异步加载，文档解析完执行。

当浏览器碰到 script 脚本的时候：(不考虑浏览器的 prefetch)

1. 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，当然还得等待前面的 CSS 文件渲染完。

2. <script async src="script.js"></script>

   有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(下载异步，执行同步)。

3. <script defer src="script.js"></script>

   有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

从使用的角度来看，首先把脚本丢到 body 底部是比较好的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

css 和 js 加载，是同步还是异步？

css 异步，js 同步，也可以设置js的defer或async属性将其改为异步