网页中"按需加载"的优势和表现

来源：互联网发布：java基本类型有哪些编辑：程序博客网时间：2024/04/29 05:54

如何定义按需加载呢，顾名思义就是指当浏览网站的用户要什么内容就给什么内容。当然这些内容的加载需要用户去触发，这个触发可以做得人性化一点。比如，我回家到家门口门上的感应器感应到了我在门口，自动把门和室内灯打开，当我坐下沙发的时候电视自动打开。触发事件的动作是靠近门，和坐下沙发。

现在的网页所承载内容越来越大，图片动不动就有几十K上百K，所以性能的优化就需要按需加载。一般情况下触发动作包括下面几个：点击鼠标、鼠标经过、输入文字、拉动滚动条、窗口改变大小等等。后面将会详细介绍"按需"的理解。

按需加载图片
默认图片不会加载，当拉动滚动条图片接近可是范围时才把图片加载进来。用专业点的词来说就是懒惰加载。
为什么要怎么做呢，是因为当我们打开网页时所有的图片一股脑的加载进来，拖了网速还增加了服务器的请求次数，使得性能和速度都有影响。好，我们来说说实现的原来。
我们平常的图片标签都是这样写的<img alt="" src="t.jpg" />，我们让它默认不把图片加载进来或者默认是一个loading图片，变成这样<img alt="" src="loading.gif" data-src="t.jpg" />，这样真实地址就写在了“data-src”这个属性里，默认加载的是loading.gif这张图片。
然后对滚动条做一个绑定事件，拉动滚动条时判断图片还有多少距离进入可视区，比如还有200像素进入可视区，执行函数把图片中的属性“src”中的地址替换成属性“data-src”的地址，加载图片。

按需解析HTML
页面默认不解析某些部分html代码，根据需要来把一部分或者几个部分代码解析出来。把html解析出来是需要一定时间的，特别是代码中有背景图片或者img标签。如果一开始就解析势必会增加请求数和拖慢网速。还有一些控件如下拉菜单、对话框、表格等。下面举个简单的例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按需解析html</title>
<script type="text/javascript" language="javascript">
function ShowHtml(){
document.getElementById('Box').innerHTML='<img src="t.jpg" alt="" />';
}
</script>
</head>

<body>
<div id="Box"></div>
<a href="javascript:;" onClick="ShowHtml()">加载html</a>
</body>
</html>

我们看下代码，当运行并抓包发现：当页面加载结束时，没有图片的请求；当点"加载HTML"按钮时，通过抓包发现有图片请求。如果有css，图片flash等代码可以使用按需加载html，对性能提升还是有一定效果的。其实我们平常看到的选项卡就是一种常见按需加载html。

按需执行JS
这个主要用在比较耗时的js代码上，或执行JS后，需要加载比较多图片、加载iframe、加载广告等。在比较复杂的页面更应该使用这个方法。
当我们的项目越来越大的时候，单个页面就加载N个js。但是合并成一个js以减少请求数的弊病就是造成整个文件很大。这个时候合理的办法就是按需加载。这个和按需执行js比较类似，只不过要执行的js变成了固定的“实现加载js”的代码。

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

按需加载的最大目的就是减少不必要的资源请求，减少流量真正的实现“按需索取”。但是如果使用不当也会影响用户的体验，比如不合理的触发动作，还有当用户网速慢的时候应当触发的某个动作变得时间很长，加载脚本或执行脚本需要很长时间。

最后说的是最好把这些常用的功能封装起来，便于重复利用代码减少工作量和精力

转载于随彩吧 : http://suicai8.com/detail/index/id/29