跳到主要内容

HTML

资源预加载​

预加载资源时进入请求队列的先后顺序是根据资源在代码中出现的顺序决定的，我们也可以使用 preload来手动调整资源的预加载顺序。

<body>
    <script src="a.js"></script>
    <script src="b.js"></script>
    <script src="c.js"></script>
</body>

对于以上文档的脚本资源的加载顺序是 a、b、c，如果想要在不改变脚本执行顺序的同时让 c.js优先于 a.js进入请求队列，我们可以这样改。此时脚本资源的加载顺序是 c、a、b

<body>
    <link rel="preload" as="script" href="c.js">
    <script src="a.js"></script>
    <script src="b.js"></script>
    <script src="c.js"></script>
</body>

script标签中async和defer的区别​

解析HTML的时候需要注意JavaScript脚本的执行会阻塞HTML的解析，因此当解析HTML解析到一行外链脚本的时候，我们需要等待脚本的加载、再等待脚本的执行，才能继续后续HTML的解析。

如果我们不希望脚本的加载阻塞HTML的解析，我们可以给 script标签加上 async或者 defer，此时该外链脚本的加载将不会阻塞后续HTML的解析（也就是解析后续HTML的同时并行加载该脚本，当该脚本被成功加载后则会停止后续HTML的解析并开始执行该脚本）

  • async：外链脚本加载完成后会立刻停止HTML的解析并开始执行该脚本
  • defer：外链脚本会在整个HTML都被解析完成后（或者说 DOMContentLoaded事件触发）才执行

defer and async

DOMContentLoaded和Load的区别​

  • DOMContentLoaded：HTML被完全加载和解析后触发，通常此时样式、图片等资源没有完全加载好
  • Load：当所有的资源都加载完成，即包括HTML、样式、图片、脚本等资源。

在浏览器 network一栏中可以看到这两个事件完成所经过的时间。

img标签alt和title的区别​

  • alt是图片加载失败时兜底显示的内容，是必要属性
  • title是鼠标hover到图片上时显示的内容，非必要属性