预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据，通过预加载器技术网页的加载性能提升了19%，Chrome测试了 Alexa 排名前2000名网站，性能有20%的提升。
它并不是一门新技术，有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的方法。如果你第一次接触预加载器，也许心中已经有了无数个问号。什么是预加载器？它是如何提升浏览器性能的？
首先需要了解浏览器是如何加载网页的
一个网页的加载依赖于脚本文件、CSS样式文件。让我们看看浏览器加载网页的过程。
首先，浏览器下载 HTML 并开始解析。如果浏览器发现外部CSS资源链接则发送下载请求。
浏览器可以在下载CSS资源的同时，并行解析HTML文件，但是，一旦发现有脚本文件的引用，则必须等待脚本文件完成下载并且执行后才能继续解析。
脚本文件完成下载并且执行后，浏览器可以继续解析HTML工作，如果遇到非阻塞资源 i.e. 图片浏览器会发送下载请求并且继续解析。
即使浏览器可以并行执行多个请求，但是无法与针对脚本文件的操作并行执行。
可以通过IE7打开链接中的网页进行测试。我们可以看到，网页head标签内包含2个样式文件和2个脚本文件。在body 中，包含3个图片、1个脚本文件。
通过瀑布流我们可以查看资源加载的过程：
脚本文件的下载和执行，会阻断其他资源文件的下载，无疑将大大降低浏览器性能。
预加载器如何提高网络利用率
2008 年，IE、WebKit和Mozilla都实现了预加载器功能，来提升网络的利用率，改善脚本文件对其他资源文件的阻塞现状。
当浏览器被脚本文件阻塞时，另一个轻量级的解析器会继续浏览剩余的标记，寻找需要下载的资源i.e. 样式文件， 脚本文件，图片 等。
一旦发现，预加载器既可以在后台开始接收这些资源，等待主解析器完成当前的脚本操作，其他资源已经完成下载，这样就减轻了脚本阻塞带来的性能损耗。
下面这个瀑布流是使用IE8打开链接中网页的结果，性能有显著的提升：IE8=7S > IE7=14S。
查看本栏目更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/tools/
预加载功能仍然是各大浏览器厂商乐此不疲的实验领域。很多浏览器尝试设置资源下载的优先级。例如，Safari降低了不作用于当前视图区域样式文件的优先级。Chrome 则设置脚本文件的优先级高于图片，即使脚本文件位于HTML底部。
预加载器的陷阱
预加载器只能检索HTML标签中的URL，无法检测到使用脚本代码添加的URL，直至脚本代码执行时才可以获取这类资源。
我曾经遇到过一个通过javascript判断当前Window宽度，进而决策加载CSS样式文件的例子。预加载器无法识别此类资源。
<html>
<head>
<script>
var file = window.innerWidth < 1000 ? "mobile.css" : "desktop.css";
document.write('<link rel="stylesheet" type="text/css" href="css/' + file + '"/>');
</script>
</head>
<body>
<img src="img/gallery-img1.jpg" />
<img src="img/gallery-img2.jpg" />
<img src="img/gallery-img3.jpg" />
<img src="img/gallery-img4.jpg" />
<img src="img/gallery-img5.jpg" />
<img src="img/gallery-img6.jpg" />
</body>
</html>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索网页
， 文件
， 浏览器
， 脚本
， ie 下载 chrome
， 性能
， 文件流解析
， 加载文件
， 一些资源文件无法加载
， 加载资源
， 资源
， 无法加载设计器
， 预加载
批量预加载
提升网页加载速度、如何提升网页加载速度、提升页面加载速度、mui提升加载速度、提升网站加载速度，以便于您获取更多的相关知识。