浏览器加载资源过程

  1. 将资源分类
  2. 资源安全策略检查，决定资源的加载权限
  3. 资源优先级计算和排序
  4. 根据加载优先级顺序加载资源
资源分类

chrome 浏览器资源分为 14 类：

类别 介绍
kMainResource 主资源，Html页面文件资源属于该类型
kImage 图片资源
kCssStyleSheet 层叠样式资源
kScript 脚本资源，即js
kFont 字体资源，即.woff
kRaw 混合类型资源，ajax请求属于该类资源
kSVGDocument SVG矢量图资源
kXSLStyleSheet 扩展样式表
kLinkPrefetch HTML5 页面的预读取资源，如dns-prefetch
kTextTrack video 字幕资源，即标签
kImportResource HTML Imports，如
kMedia 多媒体资源
kManifest 应用程序缓存资源
kMock 预留的测试类型
安全策略检查

Content Security Policy，即 CSP，浏览器提供的白名单制度。
通过配置外部资源的加载和执行限制，提高网页安全性。

常用应用：通过限制非信任域名脚本的加载来预防XSS攻击

配置CSP的2种方式

  1. 页面HTTP请求头的Content-Security-Policy字段来限制
  2. 通过<meta>标签设置

  • 预防XSS

    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src nos.netease.com kaola.com;">
    script-src：脚本资源
    style-src：样式资源
    ‘self’：只信任当前域名下的外部资源
    nos.netease.com kaola.com：信任白名单域名下的资源

  • 站点请求协议升级（http -> https）

    <meta http-equiv="Content-Secur****ity-Policy" content="upgrade-insecure-requests">
    upgrade-insecure-requests：升级所有非安全请求
    将http资源强制以https或wss或SSL加密形式发送请求而不报错，如果服务器不支持https等SSL加密，则资源不加载

  • 阻止 Mixed Content

    <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">

浏览器对于可能对安全性造成较大威胁的资源类型的混合模式请求都会直接拦截报错，例如脚本资源，但对于图片、音频、视频等资源只会警告，但不会阻止其加载。

资源优先级计算

资源优先级分级：5级

网络层面：Highest、Medium、Low、Lowest、Idle
浏览器内核：VeryHigh、High、Medium、Low、VeryLow
用户端控制台显示：Highest、High、Medium、Low、Lowest

浏览器内核，资源优先级计算

  • 资源类型设定默认优先级

    1. html、css、font 优先级最高
    2. preload 预加载、script、xhr
    3. 图片、语言、视频
    4. prefetch 预读取资源

  • 根据实际规则，对优先级进行调整

    1. XHR资源请求：同步XHR请求优先级最高
    2. 图片资源：默认优先级 LOW ，现代浏览器为了提高首屏体验，会将首屏资源优先级提高到 High
    3. 脚本资源：
      defer/async属性标签的脚本的优先级会全部降为Low
      脚本位置是在第一张图片前，标记early，定为 High 优先级；之后标记late，设为 Medium 优先级
加载资源

关键请求链：Critical-Request-Chains，可视区域渲染完毕（首屏），并对于用户来说可用时，必须加载的资源请求队列

查找页面的关键请求链

  1. 首屏快照获取关键 image 资源
  2. LightHouse 插件获取关键 js、css资源
  3. 控制台查看各资源优先级

优化关键请求链

  1. preload 和 prefetch

Preload：某些资源可能将来会被使用

<link rel="preload" href="test.jpg">

prefetch：资源预加载、DNS预解析、http预连接和页面预渲染

资源预加载：<link rel="prefetch" href="test.css">
DNS预解析：<link rel="dns-prefetch" href="//haitao.nos.netease.com">
http预连接：<link rel="prefetch" href="//www.kaola.com"> 将建立对该域名的TCP链接
页面预渲染：<link rel="prerender" href="//m.kaola.com"> 将会预先加载链接文档的所有资源

兼容性：
除了 dns-prefetch ，其他的兼容性十分堪忧，尤其 Safari

  1. LocalStorage

资源本地缓存