图片按需加载
现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,
所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括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/