数字扫地僧
Web 性能优化 | 了解 HTTP 协议后才能理解的预加载
DNS预解析、域名预建连、预加载和预取等技术，以及如何通过CDN动态加速、流式渲染和HTTP/2推送等手段减少用户等待时间，提升访问速度。还讨论了如何根据用户行为进行智能预取，优化资源使用，确保更流畅的用户体验。
在性能优化中，除了关注服务器响应时间和资源体积优化外，网络开销也不容忽视，尤其是新用户访问网站时的DNS查询、TCP连接等步骤。为了减少这些等待时间，文章介绍了以下几种预加载技术：
CDN动态加速：通过全球分布的边缘节点缓存和处理用户请求，减少传输延迟，并通过智能路由技术选择最优路径传输数据。
DNS预解析（dns-prefetch）：让浏览器提前在后台完成DNS解析工作，避免用户在实际请求资源时等待DNS解析的时间。
域名预建连（preconnect）：提前完成域名的DNS解析、TCP连接和TLS握手，减少用户真正需要请求资源时的等待时间。
预加载（preload与prefetch）：通过`<link rel="preload">`和`<link rel="prefetch">`标签提前下载页面将要使用的资源。`preload`用于关键资源的立即加载，而`prefetch`用于在浏览器空闲时加载未来可能用到的资源。
 
预渲染（prerender）：在后台提前下载并渲染页面的所有资源和内容，使得用户在实际访问页面时能够立即呈现，但这种方法可能会导致资源浪费和数据统计问题。
 
根据用户行为预加载下一跳页面：通过监测用户行为，如鼠标悬停或点击事件，预测用户接下来的动作，并进行预加载。
 
Speculation Rules API：这是一个新的Web API，允许开发者更精确地指示浏览器在何时和如何预取资源。
 
流式渲染：服务器逐步将已准备好的内容立刻发送到客户端，而不是等待所有内容生成完成，从而实现快速的页面加载。
 
HTTP Early Hints：服务器在发送最终响应头部之前，提供一些消息头，客户端可以开始预加载资源。
 
HTTP/2 push：允许服务器在响应客户端请求时，主动推送多个资源给客户端，而无需客户端明确请求这些资源。
 
参考：
 
2024-10-27
浏览39
Web
登录后评论
1
分享