Archive for November, 2010

使用DocumentFragment來加快DOM操作速度

Thursday, November 18th, 2010

DocumentFragment這個物件,一般人好像很少用到。這是一個可以大幅增進Web Page效能物件。廢話不多說,用法如下,假如你有一段code要插入數個element到body裡:

原本的寫法

	for( var i=0; i<100; i++ ) {
		var item = document.createElement('div');
		$(item).text('Element-'+i);
		$(item).css({
			background: 'gold',
			padding: 5,
			margin: 5,
			float: 'left'
		});
		$('body').append(item);
	}

使用DocumentFragment的新寫法

	var fragment = document.createDocumentFragment();
	for( var i=0; i<100; i++ ) {
		var item = document.createElement('div');
		$(item).text('Element-'+i);
		$(item).css({
			background: 'gold',
			padding: 5,
			margin: 5,
			float: 'left'
		});
		fragment.appendChild(item);
	}
	$('body').append(fragment);

用Firefox實測,使用第二種DocumentFragment寫法,速度快了將近一倍 ;-)

之所以用DocumentFragment速度會變快的原因是,DocumentFragment是一個頁面上”不存在“的element物件。所以你對它做任何操作都不會影響到使用者觀看的外觀。第一段code寫法,其實對browser做了100次”更新頁面”的動作,而第二段code只對browser更新一次頁面。這樣說知道速度差在哪了吧…。

另外,當DocumentFragment被插入頁面時,只有它的child element會被加入頁面,它”本身”並不會被加入。

不過,上面兩段code做的事,還可以用下面這段code取代,速度比第二段code更快一倍。做法就是把全部要被插入element的HTML字串組成一個大字串,再一次寫入。但不是每個程式邏輯都適合用這種寫法,例如說如果想要在每個item element被create之後,另外綁定一個callback function或執行某個jQuery plugin的初始化,下面這種寫法就辦不到了。

	var html = '';
	for( var i=0; i<100; i++ ) {
		html += '<div style="background:gold; padding:5px; margin:5px; float:left;">Element-'+i+'</div>';
	}
	$('body').append(html);

神奇的Duff’s Device演算法

Thursday, November 18th, 2010

這是在看“Professional JavaScript for Web Developers 2nd Edition”這本書時看到的。

這個演算法的目的是為了降低一般for/while迴圈初始時的額外資源和一直去check condition所造成的額外運算,而改成每次”直接”執行8次要做的process流程。Tradeoff是code會寫比較多。較適用於資料量龐大的Array,若是小資料則沒有使用的必要。以下範例code以JavaScript為例。

原本的code

for( var i=0; i<values.length; i++ ) {
	process(values[i]);
}

改良版的Duff’s Device code

// calculate the values
var iterations = Math.floor(values.length / 8);
var leftover = values % 8;
var i = 0;

// execute the remain values
if( leftover > 0 ) {
	do {
		process(values[i++]);
	} while (--leftover > 0 );
}

// execute values 8 times per loop
do {
	process(values[i++]);
	process(values[i++]);
	process(values[i++]);
	process(values[i++]);
	process(values[i++]);
	process(values[i++]);
	process(values[i++]);
	process(values[i++]);
} while(--iterations > 0);

不過經過我實際測試的結果,好像沒什麼差… :???:

相關的參考文章:
http://en.wikipedia.org/wiki/Duff’s_device

jQuery Browser Support Plugin

Saturday, November 13th, 2010


Recently, I write a jQuery plugin to detect IE browser and show up a dialog to tell users to download other better browsers. I hope more and more websites can apply it to every web page to block IE browser. IE browser is not deserved to get well supported because it’s a broken and crap browser.

Here is the plugin home URL:
http://fstoke.me/jquery/browser-support/

Please download it and try~~ ;-)

You also can join the Facebook fans page here:
http://www.facebook.com/pages/I-Hate-Internet-Explorer-IE/129502355576?ref=ts