一:什么是按需加载
按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。加载的文件,可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。
1:按需加载HTMl
按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML。解析HTML都是需要一定时间,特别是HTML中包含有img标签、引用了背景图片时,如果一开始就解析,那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等,这些一开始是不需要解析,可以按需解析。实现按需解析,首先用<script type=”text/x-template”>html</sccript>
这个标签来对忽略对HTML的解析。然后根据触发的动作,把script里面的HTML获取出来,填充到对应的节点中。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按需解析HTML</title>
</head>
<body>
<script type="text/x-template" id="suc_subscription">
<!--假设这里的样式box-dytz 引用了一张背景图--->
<div>
<!--这里暂且用这张图片作为测试,实际中,大家可以替换为任何图片-->
<img src="http://tid.tenpay.com/wp-content/uploads/2012/12/按需加载.jpg" />
</div>
</script>
<div id="success_dilog"></div>
<input type="button" value="点我展示HTML" onclick="showHTML()" />
<script>
function showHTML(){
document.getElementById('success_dilog').innerHTML = document.getElementById('suc_subscription').innerHTML;
}
</script>
</body>
</html>
复制代码
当页面加载结束时,并没有看到图片的请求;当点“点我展示HTML”按钮时,通过抓包发现有图片请求。
曾经做个demo并经过测试发现,如果是直接解析HTML(不包含有请求CSS图片和img标签),耗费的时间要比用<script type=”text/x-template”>html</script>
大约慢1-2倍,如果是还包括请求有CSS图片、img标签,请求连接数将会更多,可见按需解析HTML,对性能提升还是有一定效果。
二:图片的按需加载
按需加载图片,就是让图片默认开始不加载,而且在接近可视区域范围时,再进行加载。也称之为懒惰加载。大家都知道,图片一下子全部都加载,请求的次数将会增加,势必影响性能。
先来看下懒惰加载的实现原理。它的触发动作是:当滚动条拉动到某个位置时,即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤:
生成<img data-src="http://tid.tenpay.com/”url”>
标签时,用data-src来保存图片地址; 记录的图片data-src都保存到数组里; 对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};
在函数lazyload
中,按照下面思路实现:计算图片的Y坐标,并计算可视区域的高度height
,当Y小于等于(height+ scrollTop)
时,图片的src的值用data-src的来替换,从而来实现图片的按需加载;
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片按需加载</title>
</head>
<body>
<style>
li {
float:left;width:200px;}
</style>
<div style="widh:100%;height:1200px;border:1px solid #000">这里是空白的内容,高度为900像素,目的是方便出现滚动条</div>
<ul style="width:600px;">
<li> <img width="158" height="158" data-src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg" /> </li>
<li> <img width="158" height="158" data-src="http://www.jiujiuba.com/xxpict2/picnews/62223245.jpg" /> </li>
<li> <img width="158" height="158" data-src="http://www.bz55.com/uploads/allimg/100729/095KS455-0.jpg" /> </li>
<li> <img width="158" height="158" data-src="http://www.hyrc.cn/upfile/3/200611/1123539053c7e.jpg"/> </li>
<li> <img width="158" height="158" data-src="http://www.mjjq.com/blog/photos/Image/mjjq-photos-903.jpg" /> </li>
<li> <img width="158" height="158" data-src="http://c.cncnimg.cn/000/954/1416_2_b.jpg" /> </li>
<li>