“按需加载”的应用

 

按需加载是前端性能优化中的一项重要措施，按需加载是如何定义的呢？顾名思义，指的是当用户触发了动做时才加载对应的功能。触发的动做，是要看具体 的业务场景而言，包括但不限于如下几个状况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，能够是JS、图片、CSS、 HTML等。后面将会详细介绍“按需”的理解。

按需解析HTML

按需解析HTML，就是页面一开始不解析HTML，根据须要来解析HTML。解析HTML都是须要必定时间，特别是HTML中包含有img标签、引 用了背景图片时，若是一开始就解析，那么势必会增长请求数。常见的有对话框、拉菜单、多标签的内容展现等，这些一开始是不须要解析，能够按需解析。实现按 需解析，首先用html 这个标签来对忽略对HTML的解析。而后根据触发的动做，把script里面的HTML获取出来，填充到对应的节点中。

示例代码以下：

咱们一块儿来看下demo，当运行demo并抓包发现：当页面加载结束时，并无看到图片的请求；当点“点我展现HTML”按钮时，经过抓包发现有图片请求。

曾经作个demo并通过测试发现，若是是直接解析HTML（不包含有请求CSS图片和img标签），耗费的时间要比用html大约慢1-2倍，若是是还包括请求有CSS图片、img标签，请求链接数将会更多，可见按需解析HTML，对性能提高仍是有必定效果。

按需加载图片

按需加载图片，就是让图片默认开始不加载，并且在接近可视区域范围时，再进行加载。也称之为懒惰加载。你们都知道，图片一会儿所有都加载，请求的次数将会增长，势必影响性能。

先来看下懒惰加载的实现原理。它的触发动做是：当滚动条拉动到某个位置时，即将进入可视范围的图片须要加载。实现的过程分为下面几个步骤：

•  生成标签时，用data-src来保存图片地址；
• 记录的图片data-src都保存到数组里；
• 对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};
• 在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；

下面看一个示例代码：

运行上述的示例代码，并抓包会发现：一开始并无看到图片的请求，但当拉动滚动条到页面下面时，将会看到图片发送请求。目前不少框架都已经支持图片 的懒惰加载，平时在开发中，你们能够对图片实现懒惰加载，这是有效提高性能的一个方法，特别是网页图片比较多时，更加应该使用该方法。

按需加载除了上述场景外，还有更多的场景。以下图：

页面一开始，加载的是“所有”标签里面的内容，但在点击“指定商品折扣券”标签时，才去加载对应的图片。实现思路以下：

•  生成标签时，用data-src来保存图片地址；
•  在点击标签事件时，获取全部图片，图片的src的值用data-src的来替换；

示例代码以下：

运行上述代码并抓包并发现：一开始没有看到有图片的请求，但点击“指定商品折扣券”标签时，看到有图片的请求发送。须要注意的是，为了确保体验，首屏的图片不建议懒惰加载，而应该直接展现出来；避免一开始用户就没法看到图片，在IE下看到一个虚线框，这样体验反而很差。

按需执行JS

按需执行JS和懒惰加载图片比较相似。当打开网页时，若是等全部JS都加载并执行完毕，再把界面呈现给用户，这样总体上性能会比较慢，体验也不友好。就是当某个动做触发后，再执行相应的JS，以便来渲染界面。按需执行JS，能够应用在下列场景：执行一些耗时比较久的JS代码，或执行JS后，须要加载比较多图片、加载iframe、加载广告等。在一些webapp的应用中，或比较复杂的页面时，更加应该使用这种方法。

实现思路和按需加载比较相似：

•  对滚动条进行事件绑定,假设绑定的函数为function lazyExecuteJS(){};
•  在函数lazyExecuteJS中，按照下面思路实现：选择一个元素做为参照物，当滚动条即将靠近时该元素位置，开始执行对应的JS，从而实现对界面的渲染；

示例代码以下（以YUI3框架为例）：

首先下载最近封装的异步滚动条加载组件：Y.asyncScrollLoader，而后运行下面的代码（须要把页面和Y.asyncScrollLoader.js 放在同一个目录）：

运行上述代码并抓包发现：打开页面时，是不没有看到有对应的图片请求，但当滚动条拉到必定位置时，loadAD的函数被执行。

按需加载JS

JavaScript无非就是script标签引入页面，但当项目愈来愈大的时候，单页面引入N个js显然不行，合并为单个文件减小了请求数，但请 求的文件体积却很大。这时候比较合理的作法就是按需加载。按需加载和按需执行JS比较相似，只不过要执行的JS变成了固定的“实现加载JS”的代码。按需 加载实现的思路以下：

• 对滚动条进行事件绑定,假设绑定的函数为function lazyLoadJS(){};
• 在函数lazyLoadJS中，按照下面思路实现：选择一个元素做为参照物，当滚动条即将靠近时该元素位置，开始执行加载对应JS；
•  在JS加载完毕后，开始执行相应的函数来渲染界面；
• 在实际项目中，能够根据须要设置一个目标距离，好比还有200像素该元素即将进入可视区域；按需加载JS和按需执行JS比较相似，这里就再也不单独提供示例代码了；你们能够在按需执行JS的中示例中，把loadAD函数更改成动态加载JS便可；

分屏展现

当一个网页比较长，有好几个屏幕，并且加载了大量的图片、广告等资源文件时，分屏展现，可提高页面性能和用户体验。其实分屏展现也能够从按需加载的 的角度来看待，默认是加载第一屏幕的内容，当滚动条拉动即将到达下一个屏幕时，再开始渲染下个屏的内容。换言之，是把图片、背景图片、HTML一块儿按需加 载，一开始不对HTML进行解析，那么背景图、img图片也不会进行加载。

分屏展现的思路以下：

•  根据具体业务状况，收集主流最大的分辨率的高度；假设这里是用960px;
•  按照这个高度进行分屏，依次把下一个屏幕内的HTML用来表示；
•  为了让页面的高度不变，须要让textarea占据必定的页面空间，也就是让页面出现对应的滚动条；所以须要指定样式visility:hidden，并指定它的高度和宽度。
• 利用上述讲的按需执行JS，把里面的HTML代码提取出来，从新填充到textarea的父节点上，即可实现解析对应HTML，从而实现分屏展现。

示例代码以下（须要把页面和Y.asyncScrollLoader.js 放在同一个目录）：

运行上面代码并抓包发现：在默认首屏，并无去解析textarea里面的代码，但当拉动滚动条到必定位置时，textarea里面的HTML依次被解析，从而实现了网页分屏展现。

使用“按需加载”进行性能优化时，须要合理选择触发的动做。“按需加载”的最大优点在于减小了没必要要的资源请求，节省流量，真正实现“按需所取”。 可是“按需加载”自己若是使用不当也会影响用户体验，由于“按需加载”的时机在用户触发某动做以后，若是用户的网速比较慢的话，加载脚本或执行脚本可能需 要等候较长的时间，而用户则不得不为此付出代价。所以，若是要使用“按需加载”则须要选择正确的触发动做，若是是根据滚动条来触发，可考虑一个目标距离， 假设目标距离还有200像素即将进入可视区域，则就开始加载，而不是等到进入了可视区域才加载。以上所讲的各类“按需加载”类型，均可以封装成相应的组 件，而后就能够在项目中进行应用。