页面性能优化之内容加载优化

图片按需加载
现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,
所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括tab切换也可以考虑未显示的区域图片不加载),这样用户在不进行任何操作时,加载页面会很快.
看下面的简单demo:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按需加载的图片</title>
</head>
<body>
<script type="text/javascript">
for(var i=0; i<60; i++){
    document.write("这里是正文内容 <span style='color:#999;font-size:12px;'>[往下拉动滚动条]</span><br />");
}
</script>
<p style="color:red">这是按需加载的图片</p>
<p><img data_src="http://www.ueder.net/testhtml/picshow/datapic/0e0c883622903fb1a61e12be.jpg" width="400" height="600" src="" alt="" /></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var itv;
$(window).scroll(function(){
    clearTimeout(itv);
    itv = setTimeout(function(){
        var winHeight = $(window).height();
        var scrolltop = $(window).scrollTop();
        var oTop = $("img").offset().top;
        if((oTop-scrolltop)>0 && (oTop-scrolltop)<winHeight){
            var src = $("img").attr("data_src");
            $("img").attr("src",src)
        }
    },500);
});
</script>
</body>
</html>

点运行可查看结果,这里测试代码略显粗糙,其实可以利用JQuery好好的用插件形式封装一下,比如可以判断img是否有src属性,没有再执行赋值操作,避免重要赋值,以及setTimeout的使用可以避免滚动过程中大量scroll事件引起性能损耗.

页面DOM结构按需渲染
按需渲染与按需加载不同, 按需渲染是指DOM结构在浏览器的呈现过程, 这无关网络, 是浏览器构建盒模型,渲染页面的过程,
一个页面通常内容有轻有重,有时候我们会希望最先呈现给用户的是一些重要信息, 这个一方面可以在页面结构上做一些小技巧, 像经典的负边距三列布局,就可以让中间重要内容列,在代码上首先呈现,
另一方面则可以通过把次要内容放置于textarea中并且隐藏它,此时页面会加载相关文本,但不会渲染页面DOM结构,等到需要呈现的时候,再把textarea中的内容赋给相应的容器,再进行渲染..
看下面的代码:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面DOM按需渲染</title>
<style>
.unimportant { float:left; 300px; height:200px; background:red; color:#fff; }
.important { float:left; margin-left:20px; 400px; height:300px; background:blue; color:#fff; }
.undis { display:none; }
</style>
</head>
<body>
<div>
<textarea id="txtarea1" name="" cols="" class="undis" rows="">
<div class="unimportant"> 这里的是先加载后渲染的次要内容 </div>
</textarea>
</div>
<div class="important"> 这里显示的是重要内容 </div>
<script type="text/javascript">
    var txtarea1 = document.getElementById("txtarea1"),
        parentnode = txtarea1.parentNode;
    parentnode.innerHTML += txtarea1.value;
</script>
</body>
</html>

以上代码可以看到实现原理很简单,次要内容在代码上置前,如果不做处理,是会比重要内容先呈现的,此时就先放置于textarea中,需要时再加入到页面渲染.

sprites图片预加载
现在大部分页面上都会使用sprites图片技术, 因sprites图片一般较小, 且对页面显示完整较重要, 可考虑在页面开始时就预加载进sprites图片, 像下面这段代码即可:

[隐藏代码]

var img =newImage();
img.src ="sprites.png";

这样即可达到预加载的效果,也可以在任何你认为需要的地方进行预加载.

script及css的预加载
因为浏览器会缓存外部JS及CSS文件，所以script与css文件同样可以进行预加载,
很多门户首页或流量大的页面,为了节省http请求数,常常会把JS及css直接写在页面上, 但子页一般是使用外调的CSS及JS文件,此时就可以考虑在首页加载完毕时, 在用户空闲时,在后台加载子页所需要的CSS及JS文件即可,同时又不影响用户操作，可以使用setTimeout动态加载外部JS及CSS.
动态加载外调 js及CSS可参考这个Der微型库,提供的方法，用法也很简单:

[隐藏代码]

//加载js带回调
Der.loadScript("http://www.ueder.net/derjs/Der.js",function(){
    //这里是加载完毕的回调函数
});
//加载CSS
Der.loadCss("http://www.ueder.net/wp-content/themes/DerStyle/style.css");

预加载与按需加载(或延迟加载)似乎听起来矛盾, 事实上并不冲突, 根据用户体验可以适当的选择预加载或按需加载.

转载：http://www.ueder.net/2011/01/23/%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD%E5%8F%8A%E6%8C%89%E9%9C%80%E6%B8%B2%E6%9F%93/