浏览器(chrome)资源的优先级

浏览器一般的行为方式

1. 浏览器加载的时候是自上而下的，加载和渲染为同步进行
2. 加载不会阻塞下载，解析会阻塞下载
3. js 解析的时候会阻塞其他的加载
4. 一般浏览器会在后面解析 js 文件，因为 js 中的代码很有可能改变 dom 树的结构，导致出现重绘和重排的现象

浏览器的加载一般顺序为

1. 将资源分类
2. 安全策略检查
3. 资源优先级计算
4. 根据优先级下载资源

资源分类

安全策略检查 根据浏览器相关的安全策略，来决定资源的加载权限。（是否跨域就是在这个阶段被限制的） 网页安全政策（Content Security Policy，缩写 CSP）是由浏览器提供的一种白名单制度

资源优先级计算(分为三类)

1. 对于 XHR 请求资源：将同步 XHR 请求的优先级调整为最高。
2. 对于图片资源：会根据图片是否在可见视图之内来改变优先级。 图片资源的默认优先级为 Low。 现代浏览器为了提高用户首屏的体验，在渲染时会计算图片资源是否在首屏可见视图之内，在的话，会将这部分视口可见图片(Image in viewport)资源的优先级提升为 High
3. 对于脚本资源：浏览器会将根据脚本所处的位置和属性标签分为三类，分别设置优先级 首先，对于添加了 defer/async 属性标签的脚本的优先级会全部降为 Low 对于没有添加该属性的脚本，根据该脚本在文档中的位置是在浏览器展示的第一张图片之前还是之后，又可分为两类。在之前的(标记 early**)它会被定为 High 优先级，在之后的(标记 late**)会被设置为 Medium 优先级

preload 和 prefetch

• 链接预取: 链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。
• prefetch 资源预读取 ：告诉浏览器加载下一页面可能会用到的资源;注意，是下一页面，而不是当前页面。 在页面闲暇时间加载有 prefetch 的资源

    <link rel="prefetch" href="/images/big.jpeg">
  

• preload 资源预加载 ： 元素的 rel 属性的预加载值允许您在 HTML 的中声明获取请求，指定您的页面将很快需要的资源，您希望在页面生命周期的早期开始加载这些资源，在浏览器的主要呈现机制开始之前。 这确保它们更早可用，并且不太可能阻塞页面的呈现，从而提高性能。 表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源

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

link 标签的属性 rel=“preload” href：指定需要被预加载资源的资源路径 as：指定需要被预加载资源的类型 type：可以包含该元素所指向资源的 MIME 类型