Der's Blog 图片按需加载
现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,
所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括tab切换也可以考虑未显示的区域图片不加载),这样用户在不进行任何操作时,加载页面会很快.
看下面的简单demo:
提示：你可以先修改部分代码再运行。
点运行可查看结果,这里测试代码略显粗糙,其实可以利用JQuery好好的用插件形式封装一下,比如可以判断img是否有src属性,没有再执行赋值操作,避免重要赋值,以及setTimeout的使用可以避免滚动过程中大量scroll事件引起性能损耗.
在现代web追求富媒体应用(RIA)的时代，为页面添加事件成为实现复杂交互行为的很重要的一部分，然而在javascript中为页面添加很多的事件是会造成性能问题的，特别是在IE中，原因可能有很多方面，首先，每个事件都会绑定一个函数function，而每个function都会占内存，其次，页面加载时必须事先指定所有页面事件处理程序，会延迟整个页面的交互就绪时间。
所谓事件委托就是利用事件的冒泡特性，只需为所有需要添加事件的子元素的父元素添加一个事件处理程序就可以满足应用。在DOM标准中，事件支持捕获及冒泡过程，但IE中只支持冒泡过程，所以我们只需要关注冒泡过程。看下面一段代码
<ul id="list"> <li id="list1">列表1</li> <li id="list2">列表1</li> <li id="list3">列表1</li> </ul>
在上面这段代码中，如果我们需要alert出每个li的innerHTML，传统方法是:
var items = document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=items.length; i<len; i++){
items[i].onclick = function(){
alert(this.innerHTML);
};
}
在页面加载性能当中，页面被阻塞是影响页面主要内容(包括图片等)及时呈现在用户面前的一个重要因素之一，所以我们需要在页面中合理处置外调CSS及JS文件。
来看一段代码
提示：你可以先修改部分代码再运行。
有firebug的童鞋可以看到，页面内容及图片等被head里面的外调script及css文件所阻塞，页面加载耗时5.5S，如下图
样式表下面如果有script标签则同样会阻塞后续页面内容的加载，但我们通常希望优先加载样式表，这样才不会看到裸奔的页面，所以我们只须关注script的无阻塞加载即可。
[继续阅读全文...]