浏览器原理篇

浏览器缓存

👉 HTTP中的强缓存与协商缓存

浏览器解析HTML

::: TODO

script标签中async和defer属性有什么区别

async（异步） 并行下载script脚本（不会中断HTML解析过程），下载完毕之后中断HTML解析，执行脚本内容.

defer（延迟） 并行下载script脚本（不会中断HTML解析过程），在执行DOMContentLoaded事件之前，将下载好的script内容执行。

默认行为是 在下载script脚本时会中断HTML解析，如果脚本内容比较大时，会导致加载时间较久，无法很快渲染出整个页面

<script>: The Script element

动态添加

还有一种情况，通过createElement方法创建script标签，默认async属性为true

如果你想要按照script标签添加的顺序执行，请script.async=false

<script>
  console.log('script1')

  const script1 = document.createElement('script');
  script.async = false;
  script.src = 'foo.js';
  document.body.appendChild(script1);

  const script2 = document.createElement('script');
  script2.async = false;
  script2.src = 'bar.js';
  document.body.appendChild(script2);
</script>
<script>console.log('script2')</script>
<!--
    script1
    script2
    foo
    bar
 -->

script tag module模式

<script type="module"></script>

设置了module属性后，浏览器会对内部发起http请求，获取模块中的内容，此时script会在后台下载，不会阻塞html解析，等html加载完成后根据标签顺序执行

Load和DOMContentLoad区别

• 页面中的DOM元素，CSS，JS，包含图片加载完成后触发Load事件
• 当HTML被加载解析完成之后，触发DOMContentLoad事件（比Load事件先触发，无需其他事件，如图片加载，CSS...）

在需要操作DOM的时候可以在DOMContentLoaded操作，如果涉及到图片这类资源内容需要在load事件中处理

浏览器自动填充

很多浏览器会会在DOMContentLoaded中自动填充表单，例如上一次您在某个网页上输入了账号密码并在浏览器保存了这一份数据，那么下一次在加载这个网页时浏览器就会在DOMContentLoaded事件中自动填充保存的数据

link tag preload

用于提前加载一些需要的依赖，并且这些资源会被优先加载

需要搭配as属性使用

<link rel="preload" href="main.css" as="style" />

link tag prefetch

利用浏览器空闲时间，用于提前加载一些后续需要资源，例如其他页面，后续打开将提高加载速度 用

<link rel="prefetch" as="document" href="other.html">