Der's Blog 图片按需加载
现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,
所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括tab切换也可以考虑未显示的区域图片不加载),这样用户在不进行任何操作时,加载页面会很快.
看下面的简单demo:
提示：你可以先修改部分代码再运行。
点运行可查看结果,这里测试代码略显粗糙,其实可以利用JQuery好好的用插件形式封装一下,比如可以判断img是否有src属性,没有再执行赋值操作,避免重要赋值,以及setTimeout的使用可以避免滚动过程中大量scroll事件引起性能损耗.
最近基于原生JS的研究，尝试封装了一个原生JS底层功能的实现，主要是进行了兼容性处理(众所周知IE在JS方面的很多独特性),以及一些通用方法封装，现在只做了一小部分，只包括节点的获取，事件相关，以及cookie操作等，后续再慢慢添加一些常用的，例如AJAX，CSS样式等,在写这些方法的同时就会查阅相关文档，所以也是一个不错的自我学习的过程…
以下是下载：
压缩版:http://www.ueder.net/derjs/Der.min.js
未压版:http://www.ueder.net/derjs/Der.js
以下是源码:
[继续阅读全文...]
在现代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的无阻塞加载即可。
[继续阅读全文...]
文本内容主要包括以下几点：
1. 什么是repaint/reflow?
2. 什么情况下会触发浏览器的repaint/reflow?
3. 浏览器自身所作的优化
4. 如何优化你的脚本来减少repaint/reflow?
一、什么是repaint/reflow?
页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
以上提到的只是在页面加载时必然会出现的repaint和reflow，除此之外，在页面加载完成后，用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为，具体在后文阐述。
另外，关于浏览器渲染的更为详细的资料可以参考以下，涵盖了IE以及Firefox：
Understanding Internet Explorer Rendering Behaviour
Notes on HTML Reflow
二、什么情况下会触发浏览器的repaint/reflow?
除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：
* DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
* 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
* 应用新的样式或者修改任何影响元素外观的属性
* Resize浏览器窗口、滚动页面
* 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))