web性能优化之资源加载

重定向→拉取缓存→DNS查询→建立TCP链接→发起请求→接收响应→处理HTML元素→元素加载完成。

减少请求数、减小请求资源体积、提升网络传输速率。

1.避免使用着陆页重定向

重定向会触发额外的 HTTP 请求-响应周期，并会拖慢网页呈现速度。因为这可能会有更多次的往返执行 DNS 查找、TCP 握手和 TLS 协商。所以，应尽可能减少对重定向的使用以提升网站性能。

以下是重定向模式的一些示例：

• com - 使用自适应网页设计，无需任何重定向 - 快速且理想！
• com → m.example.com/home - 会导致移动设备用户遭遇多次往返。
• com → www.example.com → m.example.com - 移动浏览体验非常缓慢。

2.预加载

dns-prefetch可以指定一个用于获取资源所需的源（origin），并提示浏览器应该尽可能早的解析。

<link rel="dns-prefetch" href="//example.com">

preconnect用于启动预链接，其中包含DNS查找，TCP握手，以及可选的TLS协议，允许浏览器减少潜在的建立连接的开销。

<link rel="preconnect" href="//example.com">

prefetch用于标识下一个导航可能需要的资源。浏览器会获取该资源，一旦将来请求该资源，浏览器可以提供更快的响应。

<link rel="prefetch" href="/echarts.js" as="script">

preload提供了预获取资源的能力，进行资源的预加载，具有高优先级、不阻塞渲染等特性

优先加载关键的CSS，CSS资源的加载对浏览器渲染的影响很大

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

3.延迟加载

延迟加载是一种在页面加载时推迟加载非关键资源的技术。

延迟加载图片：

• 判断位于可视区域，将图片占位符替换为真正的图像URL
• 使用loading属性，存在兼容性问题

<img src="image.png" loading="lazy" alt="…" />

延迟加载视频：

• 不自动播放，设置preload属性

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

• 需要自动播放的，判断位于可视区域，再加载视频数据

无阻塞加载JS：

• script不放在head标签内
• script添加defer属性：所有元素解析完成后，DOMContentLoaded事件触发之前
• script添加async属性：当前JS脚本加载完成后（加载后立即执行，执行顺序不固定，适合独立无依赖的代码）
• 动态创建script标签