Meta
referrer
用于表示从哪儿链接到目前的网页. 借着 HTTP 来源地址, 可以检测访客从哪里而来. 常用于防止图片等资源被盗链.
Refs
加载资源
预加载
preload
的设计初衷是为了让当前页面的关键资源尽早被发现和加载, 从而提升首屏渲染性能.
prefetch
是为了提前加载下一个导航所需的资源, 提升下一次导航的首屏渲染性能. 但也可以用来在当前页面提前加载运行过程中所需的资源, 加速响应.
实践
- 使用
preload
加载字体可以避免文字闪动问题.
Prefetch
prefetch
告诉浏览器用户下一步操作可能需要用到的资源. 浏览器识别到 Prefetch 时, 会延迟加载该资源且不执行, 等到真正请求相同资源时, 就能够得到更快的响应.
preload
preload
是一个预加载关键字. 它显式地向浏览器声明一个需要提前加载的资源. 可以在 head
中的 link
标签或 HTTP 头部的 Link
字段中声明实现.
使用 Preload 加载资源的方式有以下几个特点:
- 提前加载资源.
- 资源的加载和执行分离.
- 不延迟网页的
load
事件(除非 Preload 资源刚好是阻塞 window 加载的资源).
任何你想要先加载后执行, 或者想要提高页面渲染性能的场景都可以使用 Preload.
DNS Prefetching
DNS prefetching 允许浏览器在用户浏览页面时后台运行 NDS 的解析.
Prerendering
Prerendering 和 prefetching 非常相似, 它们都优化了可能导航到的下一页上的资源的加载, 区别是 prerendering 在后台渲染了整个页面.
Preconnect
preconnect
允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些网络操作.
Refs
- 资源提示 —— 什么是 Preload,Prefetch 和 Preconnect?
- Preload,Prefetch 和它们在 Chrome 之中的优先级
- 有一种优化,叫 Preload
- Prefetch 和预加载实践
script
加载和执行
脚本文件在下载时, 浏览器对 Dom 的渲染会被阻止. 因为脚本文件可能会改变 Dom 的结构.
script
标签的 async
属性告诉浏览器, 此脚本加载的时候, 不需要浏览器停止 Dom 的渲染. 只要此脚本下载完毕, 就开始执行脚本.
script
标签的 defer
属性与 async
类似, 只是执行的时机不是脚本下载完毕, 而是等着整个 Dom 解析完成后执行. 另外, 使用 defer
属性的脚本是按顺序执行的.