从浏览器原理分析 preload 和 prefetch 是如何控制资源加载的

preload 和 prefetch 的作用和区别

1. preload
   • 是一种在页面加载过程中提前加载关键资源的方法
   • 通过在页面头部以 的方式引入资源
   • 告诉浏览器哪些资源是页面加载过程中需要优先加载的
   • 适用于当前页面需要的资源，可以帮助加快关键资源的加载速度，提高首屏渲染性能。
2. prefetch
   • 是一种在浏览器空闲时提前加载未来可能需要的资源的方法
   • 通过在页面头部以 的方式引入资源
   • 告诉浏览器哪些资源是未来页面可能会使用到的可以在浏览器空闲时提前加载这些资源，以减少未来页面加载时的延迟
   • 适用于未来可能会被访问到的资源，可以在一定程度上提高用户的后续页面加载速度。
3. 总结概述

   • preload 和 prefetch 都是用来提高网站性能的技术
   • preload 是针对当前页面的关键资源进行提前加载的
   • prefetch 则是针对未来可能会被访问到的资源提前加载
   • 正确使用 preload 和 prefetch 可以有效地优化页面性能和用户体验。

浏览器加载资源过程

首先看一个问题：当我们在浏览器地址栏输入网址并点击回车之后，浏览器肯定需要加载一批相关的资源，包括但不限于html，css，js，image等文件，那么浏览器是按照什么顺序加载这些资源的呢？

其实在浏览器加载资源时，内部会经历以下步骤：

1. 将所有需要加载的资源进行分类
2. 根据浏览器相关的安全策略，来决定资源的加载权限。
3. 对各个资源的加载优先级进行计算和排序。
4. 最后，根据加载优先级顺序来加载资源。

第一步：资源分类

例如：chrome浏览器常用的资源分类，如下表所示：

<

类型	介绍
kMainResource	主资源，html页面文件资源就属于该类型
kImage	各种图片资源
kCSSStyleSheet	层叠样式表css资源
kScript	脚本资源，例如js资源
kFont	字体资源，例如网页中常用的字体集.woff资源
kRaw	混合类型资源，最常见的ajax请求就属于这类资源
kLinkPrefetch	HTML5页面的预读取资源，例如dns-prefetch
kMedia	多媒体资源，video or audio都属于该类资源