มาดูวิธีการเพิ่มความเร็วให้กับการทำงานของ jQuery อีกวิธี ในการใช้งาน selector นั่นก็คือ การใช้ select โดยใช้ ID แทนที่จะใช้ Class ครับ แล้วมันเร็วขึ้นแค่ไหนล่ะ ลองเอาโค้ดไปทดสอบดูนะครับ วิธีทดสอบเราจะสร้างแท็ก ul ขึ้นมาโดยมีแท็ก li ซัก 1000 แท็ก แล้วลองดึงแต่ละแท็กด้วย ID และ Class เปรียบเทียบกันดู
1. ใช้ Class
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}
ซึ่งจะใช้เวลาประมาณ 5000 กว่ามิลลิวินาที (ms)�� หรือ ประมาณ 5 วินาทีครับ
2. ใช้ ID
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}
แต่ถ้าใช้ ID จะใช้เวลาในการทำงานประมาณ 60 มิลลิวินาที (ms) ประมาณ 0.06 วินาทีครับ
เร็วกว่ากันเยอะเลยนะเนี๊ย ^^
ขอขอบคุณแหล่งข้อมูลครับ