预加载器（Pre-loader）可以说是提高浏览器性能最重要的措施。 根据Mozilla官方数据，通过Preloader技术，网页的加载性能提升了19%。 Chrome测试了Alexa排名前2000的网站，性能提升了20%。
这不是一项新技术。 有些人认为只有 Chrome 才有这个功能。 有些人认为这是有史以来提高浏览器性能的最有效方法。 如果你是第一次接触预加载器，你的脑海里已经有无数的问号。 哪些是预加载器？ 它如何提高浏览器性能？
首先，您需要了解浏览器如何加载网页。
网页的加载依赖于脚本文件和CSS样式文件。 让我们看一下浏览器是如何加载网页的。
虽然浏览器可以并行执行多个请求，但它不能与对脚本文件的操作并行执行。
您可以通过IE7打开链接中的网页进行测试。 我们可以看到网页的head标签包含2个样式文件和2个脚本文件。 正文包含3张图片和1个脚本文件。
通过瀑布流我们可以查看资源加载过程：
剪辑图像001
脚本文件的下载和执行会阻塞其他资源文件的下载，这无疑会大大提高浏览器性能。
Preloader如何提高网络利用率
2008年，IE、WebKit、Mozilla都实现了preloader功能，以提高网络的利用率，改善脚本文件对其他资源文件的阻塞。
当浏览器被脚本文件阻塞时，另一个轻量级解析器会继续浏览剩余的标签，寻找需要下载的资源，比如样式文件、脚本文件、图片等。
一旦找到，预加载器就可以开始在后台接收这些资源，等待主解析器完成当前的脚本操作，其他资源已经下载完毕，从而减少脚本阻塞带来的性能损失。
下面的瀑布流是使用IE8打开链接中网页的结果。 性能显着提升：IE8=7S>IE7=14S。
剪辑图像002
预加载功能仍然是各大浏览器厂商都渴望尝试的一个实验领域。 许多浏览器尝试优先考虑资源下载。 例如，Safari 会为不适用于当前视图区域的样式文件添加优先级。 Chrome 将脚本文件的优先级设置为低于图像，即使脚本文件位于 HTML 之上。
预加载器的陷阱
预加载器只能检索HTML标签中的URL，并且很难测量添加了脚本代码的URL。 此类资源只有在执行脚本代码后才能获取。
我现在遇到一个反例，使用JavaScript来确定当前Window的长度，然后决定加载CSS样式文件。 预加载器很难识别此类资源。
var file = window.innerWidth < 1000 ? "mobile.css" : "desktop.css";
document.write('');
复制
里面的这段代码可以轻松骗过IE9的预加载机制。 我们可以在下面的大瀑布中看到，加载图片占用了所有连接html预加载，并且CSS文件直到第一张图片加载完毕后才开始下载。
剪辑图像003
影响预加载器加载顺序的激励措施
目前有多种方法可以控制预加载器的加载顺序（使用javacript隐藏资源文件就是其中之一）。 同时，W3CResourcePriorities还提供了两个影响预加载器的功能。
lazyload：被标记的资源只有在没有被标记为lazyload的资源下载完之后才会被下载。
推迟：资源在最终用户可见之前不会被下载。 ie标签的显示属性设置为none。
预加载与预取
预取可以告知浏览器当前页面或未来某个时间的其他页面可能会使用哪些资源。
下面是预取的一个简单应用，它通知浏览器加载即将访问的其他站点的资源：
复制
Chrome允许我们提前通知浏览器加载将来会用到的资源，并且声明的资源会被优先下载。
复制
（Chromium源码中提到，标记为子资源的资源优先级高于样式文件和脚本文件，但不高于图片加载优先级）
还有一些标签通知浏览器哪些文件是较低级别的预取文件。
预取将来会用到的独立资源文件。
复制
通过prefetch方法，整个页面在后台渲染。
复制
总结
预加载并不是一项新技术。 它对于增强浏览器性能具有里程碑意义。 我们不需要做任何事情来使用预加载。
它广泛可用html预加载，我测试了以下浏览器，所有浏览器都具有预加载功能：
Bruce Lawson（Opera 总裁）还宣布 OperaMini 也支持预加载。
