Web 性能优化｜了解 HTTP 协议后才能理解的预加载

主要观点总结

本文探讨了多种预加载技术及其在提升网站性能和优化用户体验方面的应用。文章涵盖了服务器响应时间优化、服务端渲染与客户端渲染优化、静态资源体积减少等方面，并特别强调了网络开销问题。为解决新用户访问网站时的网络开销，文章介绍了多种预加载方法，包括prefetch、preload等，并结合流式渲染、HTTP Early Hints、HTTP/2 push等技术进行灵活运用。此外，文章还涉及CDN动态加速、dns-prefetch、preconnect、preload与prefetch预加载、prerender预渲染等技术，以及根据用户行为进行智能prefetch的方案。最后，文章介绍了Speculation Rules API、页面与首屏请求并行加载、流式渲染等内容。

关键观点总结

关键观点1: 预加载技术在网站性能优化中的应用

预加载技术可以解决新用户访问网站时的网络开销问题，通过提前加载资源减少等待时间，提供流畅的用户体验。文章介绍了多种预加载方法，包括使用HTML标签进行声明式资源引入，以及根据用户行为进行智能prefetch的方案。

关键观点2: CDN动态加速和其他优化技术的运用

CDN动态加速可以显著缩短用户到服务器的物理距离，减少传输延迟。同时，文章还介绍了dns-prefetch、preconnect等其他优化技术，以及它们在提高网站性能和用户体验方面的作用。

关键观点3: Speculation Rules API和页面并行加载

Speculation Rules API提供了一种声明式的方法来指示浏览器对哪些资源进行预取操作，开发者可以更精确地指示浏览器在何时和如何预取资源。页面并行加载则通过在用户点击页面的瞬间同时发起异步请求，提高页面加载速度。

关键观点4: 流式渲染简介

流式渲染是一种逐步将已准备好的页面内容发送到客户端的技术，使客户端可以更快接收数据并渲染页面。文章介绍了流式渲染的原理，包括使用HTTP 1.1规范中的Transfer-Encoding头字段，以及浏览器对部分HTML内容的解析和执行。

免责声明