网页预加载---提升网页浏览速度

最新推荐文章于 2024-04-30 16:07:33 发布

Wolfy_Zwei

最新推荐文章于 2024-04-30 16:07:33 发布

阅读量444

点赞数

分类专栏： WEB前端开发技术文章标签： chrome pre 预加载浏览器加速

本文链接：https://blog.csdn.net/Wolfy_Zwei/article/details/40227013

版权

本文探讨了网页预加载如何提高网络利用率，减少脚本阻塞对性能的影响。浏览器的预加载器在解析HTML时后台下载资源，改善加载速度。然而，预加载器存在陷阱，如无法检测脚本添加的URL。预加载顺序可通过W3C Resource Priorities的特性控制。预读取作为预加载的补充，可预先加载未来可能需要的资源。大部分现代浏览器已支持预加载功能。

摘要由CSDN通过智能技术生成

<span style="font-weight: bold; background-color: rgb(249, 249, 249); color: rgb(85, 85, 85); font-family: 'Microsoft YaHei'; font-size: 20px; line-height: 23.799999237060547px;">首先需要了解浏览器是如何加载网页的</span>

一个网页的加载依赖于脚本文件、CSS样式文件。

浏览器加载资源过程：

1.浏览器下载 HTML 并开始解析。如果浏览器发现外部CSS资源链接则发送下载请求。

2.浏览器可以在下载CSS资源的同时，并行解析HTML文件，但是，一旦发现有脚本文件的引用，则必须等待脚本文件完成下载并且执行后才能继续解析。

3.脚本文件完成下载并且执行后，浏览器可以继续解析HTML工作，如果遇到非阻塞资源，浏览器会发送下载请求并且继续解析。

即使浏览器可以并行执行多个请求，但是无法与针对脚本文件的操作并行执行。

可以通过IE7打开链接中的网页进行测试。我们可以看到，网页head标签内包含2个样式文件和2个脚本文件。在body中，包含3个图片、1个脚本文件。