https://www.yuque.com/cuggz/interview/gme0bw https://juejin.cn/post/7027728332972113927#heading-11
href 和 src
href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；
src 目的是把资源下载到页面中
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。
<script src ='js.js'></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href='common.css' rel='stylesheet'/>
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。
z-index 失效原因
1、父标签 position 属性为 relative。
2、设置 z-index 属性的元素无 position 属性（不包括 static）。
3、问题标签含有浮动（float）属性。
二、解决办法
1、position:relative 改为 position:absolute。
2、浮动元素添加 position 属性（如 relative,absolute 等）。
3、清除浮动。
DOMContentLoaded 和 onLoad
DOMContentLoaded: html 解析后执行，可执行多个回调
onLoad：所有元素加载完成，执行最后一个回调。
https://juejin.cn/post/7027728332972113927#heading-11
defer 和 async 的区别
两个属性都是去异步加载外部的 js 脚本文件（与文档的加载是并行的），但执行顺序不一样：
- async：加载完成后就执行脚本，多个 async 的标签，不能保证加载的顺序。
- defer：等待文档所有元素解析完成后执行，多个 defer 标签，按加载顺序执行。
JS 和 CSS 会阻塞解析吗？
- link 标签的 CSS 不阻塞页面的解析，但阻塞页面渲染。(阻塞 render tree 的生成，可以避免页面样式闪烁)。
- 内链或者外链 JS 脚本都会阻塞页面的解析和渲染（JS 引擎线程 与 GUI 渲染线程 互斥）。
- CSS 会阻塞 JS 的执行（保证 JS 脚本拿到最新的 CSS 属性）。这种情况下 CSS 不仅阻塞 JS 的执行还阻塞了页面的解析（因为 JS 会同步阻塞页面解析）。
- JS 会触发页面渲染。
