[086] JavaScript Framework overhead

ไปเจอ JS Framework ชื่อ jQ.Mobi ซึ่งอ้างว่าตัวเองนั้นเร็วกว่า  jQuery ซึ่งในคำกล่าวอ้างนั้นมีหน้าทดสอบ และสรุปออกมาเป็นกราฟว่า คำสั่งในการเรียกใช้ Framework นั้นมีประสิทธิภาพแค่ไหน สำหรับ jQuery เป็นที่รู้กันว่า เป็น JS Framework ที่ช่วยให้การเขียน JavaScript บนเบราเซอร์ทำได้สะดวกรวดเร็วมากกว่าเขียนด้วยคำสั่ง DOM ล้วน ๆ ซึ่งนรกมาก ๆ (Ｔ▽Ｔ) ขอบอก

อย่างที่รู้กันว่า ความสะดวกสบายที่ได้มาย่อมต้องแลกกับทรัพยากรบางอย่างแน่นอน ซึ่งในที่นี่คือประสิทธิภาพ จากประสบการณ์ตรง ใช้ jQuery ในการประมวลผลในโปรแกรมซื้อขายสินค้า หากใช้บ่อย ๆ  (คือเปลี่ยนหน้าบ่อย ๆ) จะพบว่าการตอบสนองมันไม่ค่อยทันใจอย่างเห็นได้ชัด (โดยเฉพาะช่วย query ข้อมูลเยอะ) ตามหลักการออกแบบโปรแกรม ช่วงพัฒนาโปรแกรม ใช้ไปเถอะ Framework น่ะ แต่ถ้าโปรแกรมส่วนใหญ่อยู่ตัวมีเสถียรภาพแล้ว หรือ เป็นส่วนที่ต้องการใช้งานบ่อย ๆ ก็ควรจะ rewrite code ใหม่

เกริ่นมาซะเยอะ มาลองของจริงดีกว่า ในหน้าทดสอบที่ผมทำขึ้นมา http://jsperf.com/jqm3/5 นั้นมีการใช้ Framework ที่เป็นนิยมอยู่คือ jQuery Zepto และ jQ.Mobi ผมจึงเขียน code ที่ทำงานให้ผลเหมือนกัน แต่ใช้คำสั่ง DOM ล้วน ๆ เลย

jQuery

document.getElementById("container").innerHTML = "";


var con = jQuery("#container");
var ul = jQuery("<ul/>");
var i;
for (i = 0; i < 100; i++) {
  var li = jQuery("<li>hello world jQuery</li>");
  ul.append(li);
}
con.append(ul);

Plain JS (เขียนเพิ่มเอง)

document.getElementById("container").innerHTML = "";


var con = document.getElementById("container");
var ul = document.createElement("ul");
var i;
for (i = 0; i < 100; i++) {
  var li = document.createElement("li");
  li.innerHTML = "hello world Plain";
  ul.appendChild(li);
}
con.appendChild(ul);

ส่วนผลก็ตามคาด ตัว Framework กินแรงเครื่องไปเยอะเลย

จากกราฟ จะแสดง operations per second  ค่ายิ่งมากยิ่งดี

UserAgent	Plain JS	Zepto	jQ.Mobi	jQuery	# Tests
Chrome 16.0.912	400	47	182	68	3

จากผลการทดสอบ ถ้า jQ.Mobi มันเสถียร ก็ถือเป็นตัวเลือกในการเพิ่มประสิทธิภาพของโปรแกรม โดยใช้เวลาในการพัฒนาโปรแกรมน้อยเหมือนเดิม (^o^)

สรุปก็คือ อย่าลืม optimize code กันนะครับ ไม่งั้นงานเขียนง่าย เสร็จเร็ว แต่งานไม่สวยแน่นอน เพราะคนใช้จะเซ็งได้ (;￢_￢)