重定向→拉取缓存→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标签
还没有评论,快来抢第一吧