码迷,mamicode.com
首页 > 其他好文 > 详细

“按需加载”的应用(转)

时间:2015-02-28 15:53:44      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

按需解析HTML

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

示例代码如下:

技术分享

我们一起来看下demo,当运行demo并抓包发现:当页面加载结束时,并没有看到图片的请求;当点“点我展示HTML”按钮时,通过抓包发现有图片请求。

曾经做个demo并经过测试发现,如果是直接解析HTML(不包含有请求CSS图片和img标签),耗费的时间要比用<script type=”text x-template”="">html大约慢1-2倍,如果是还包括请求有CSS图片、img标签,请求连接数将会更多,可见按需解析HTML,对性能提升还是有一定效果。

按需加载图片

按需加载图片,就是让图片默认开始不加载,而且在接近可视区域范围时,再进行加载。也称之为懒惰加载。大家都知道,图片一下子全部都加载,请求的次数将会增加,势必影响性能。

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

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

下面看一个示例代码:

技术分享

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

按需加载除了上述场景外,还有更多的场景。如下图:

技术分享

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

  •  生成<img data-src=”url”>标签时,用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像素即将进入可视区域,则就开始加载,而不是等到进入了可视区域才加载。以上所讲的各种“按需加载”类型,都可以封装成相应的组件,然后就可以在项目中进行应用。

 

 

转自:http://www.w3cfuns.com/article-1116-1.html

“按需加载”的应用(转)

标签:

原文地址:http://www.cnblogs.com/ada-zheng/p/4305364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!