หน้าแรก>การสอนการออกแบบเว็บไซต์>บทช่วยสอน DHTML

ชุดเทคนิคการเร่งความเร็ว DHTML

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-20 16:59:57
Dynamic HTML (DHTML) ที่ Microsoft? ในอินเทอร์เน็ตเอ็กซ์พลอเรอร์ 4.0
เปิดตัวเพื่อทำให้โมเดลการเขียนโปรแกรมใหม่พร้อมใช้งานสำหรับผู้เขียนและนักพัฒนาเว็บ ตั้งแต่นั้นมาผู้เขียนเว็บก็ได้
ใช้ประโยชน์จากคุณสมบัติอันทรงพลังนี้อย่างเต็มที่เพื่อมอบเนื้อหาแบบไดนามิก สไตล์ และการวางตำแหน่งเพื่อให้ผู้ใช้เว็บสามารถทำได้
สัมผัสประสบการณ์คุณสมบัติเชิงโต้ตอบที่หลากหลาย ความยืดหยุ่นของ DHTML หมายความว่ามักจะมีหลายวิธีในการนำไปใช้
ความคิดของคุณ ทำความเข้าใจว่ากระบวนการแยกวิเคราะห์และแสดงส่วนประกอบ HTML ของ Internet Explorer เป็นอย่างไร
เพื่อช่วยคุณกำหนดวิธีที่ดีที่สุดในการทำงานให้สำเร็จ บทความนี้จะอธิบายฟังก์ชันการทำงานบางอย่างของ DHTML
ผลกระทบที่สำคัญต่อประสิทธิภาพการทำงาน และให้คำแนะนำในการปรับปรุงประสิทธิภาพของหน้าเว็บ

การเปลี่ยนแปลง DHTML เป็นกลุ่ม

บนหน้าเว็บ DHTML วิธีที่มีประสิทธิภาพที่สุดในการปรับปรุงประสิทธิภาพคือการปรับปรุง
การเปลี่ยนแปลงเนื้อหา มีหลายวิธีในการอัปเดตหน้าเว็บ ซึ่งเป็นสิ่งสำคัญที่ต้องทำความเข้าใจ คองเก้
เมื่อพิจารณาจากความคิดเห็นของผู้ใช้ ผู้เขียนเว็บสามารถใช้บล็อกข้อความ HTML หรือสามารถใช้ DHTML ก็ได้
Object Model (ภาษาอังกฤษ) หรือ W3C Document Object Model (DOM) (ภาษาอังกฤษ) เพื่อเข้าถึง HTML แต่ละรายการ
องค์ประกอบ. เมื่อใดก็ตามที่คุณเปลี่ยนเนื้อหา HTML การแยกวิเคราะห์และการแสดงผล HTML ของ Internet Explorer
ส่วนประกอบการแสดงผลทั้งหมดจะต้องจัดระเบียบการนำเสนอภายในเพจใหม่ คำนวณเค้าโครงเอกสารและเอกสารใหม่
สตรีมและแสดงการเปลี่ยนแปลงเหล่านี้ แม้ว่าประสิทธิภาพที่แท้จริงจะถูกกำหนดโดยเนื้อหาของเว็บเพจและการเปลี่ยนแปลงที่คุณทำ
แต่การดำเนินการเหล่านี้มีราคาค่อนข้างแพง หากคุณใช้บล็อกข้อความ HTML แทนแต่ละบล็อก
ในการเข้าถึงองค์ประกอบนั้น จะต้องเรียกตัวแยกวิเคราะห์ HTML ซึ่งจะทำให้มีค่าใช้จ่ายด้านประสิทธิภาพเพิ่มเติม ยอมรับ HTML
วิธีการและคุณสมบัติข้อความ ได้แก่ insertAdjacentHTML (ภาษาอังกฤษ) และ pasteHTML (ภาษาอังกฤษ)
text) เช่นเดียวกับแอตทริบิวต์ innerHTML (ภาษาอังกฤษ) และ externalHTML (ภาษาอังกฤษ)

เคล็ดลับที่ 1: ทำการเปลี่ยนแปลงเนื้อหา HTML ในฟังก์ชันสคริปต์ หากการออกแบบของคุณใช้
หากคุณมีตัวจัดการเหตุการณ์หลายตัว (เช่น เพื่อตอบสนองต่อการเคลื่อนไหวของเมาส์) การอัปเดตควรรวมศูนย์
เปลี่ยน.

ข้อเท็จจริงที่สำคัญอีกประการหนึ่งเกี่ยวกับการแยกวิเคราะห์ HTML และการแสดงส่วนประกอบก็คือ เมื่อสคริปต์ส่งคืนการควบคุม (เช่น
เมื่อตัวจัดการเหตุการณ์สคริปต์ออก หรือเมื่อมีการเรียกใช้เมธอด เช่น setTimeout (ภาษาอังกฤษ))
ส่วนประกอบนี้จะคำนวณเค้าโครงใหม่และแสดงหน้าเว็บ ตอนนี้คุณรู้เกี่ยวกับ Internet Explorer แล้ว
วิธีจัดการกับการเปลี่ยนแปลง ด้านล่างนี้จะเริ่มปรับปรุงประสิทธิภาพของหน้าเว็บของคุณ

เคล็ดลับ 2: สร้างสตริง HTML และทำการเปลี่ยนแปลงเอกสารหนึ่งครั้งแทนที่จะทำการเปลี่ยนแปลงหลายรายการ
อัปเดตครั้งแล้ว หากไม่จำเป็นต้องใช้เนื้อหา HTML ให้พิจารณาใช้
คุณสมบัติข้อความภายใน (ภาษาอังกฤษ)

ในตัวอย่างต่อไปนี้ วิธีที่ช้ากว่าจะเรียก HTML ทุกครั้งที่มีการตั้งค่าคุณสมบัติ innerHTML
เครื่องวิเคราะห์ เพื่อปรับปรุงประสิทธิภาพ คุณสามารถสร้างสตริงก่อนแล้วจึงกำหนดให้กับ innerHTML
คุณสมบัติ.

ช้า:

divUpdate.innerHTML = "";
สำหรับ (var i=0; i<100; i++)
-
divUpdate.innerHTML += "นี่เป็นวิธีการที่ช้ากว่า!";
-

เร็ว:

var str="";
สำหรับ (var i=0; i<100; i++)
-
str += "เนื่องจากใช้สตริง วิธีนี้จึงเร็วกว่า!";
-
divUpdate.innerHTML = str;

ใช้ข้อความภายใน

รูปแบบวัตถุ DHTML เข้าถึงข้อความขององค์ประกอบ HTML ผ่านทางแอตทริบิวต์ innerText (ภาษาอังกฤษ)
เนื้อหาในขณะที่ W3C DOM จัดเตรียมโหนดข้อความลูกอิสระ ผ่านแอตทริบิวต์ InnerText โดยตรง
อัปเดตเนื้อหาขององค์ประกอบอย่างถาวร เร็วกว่าการเรียกใช้เมธอด DOM createTextNode (ภาษาอังกฤษ)

เคล็ดลับ 3: ใช้คุณสมบัติ innerText เพื่ออัปเดตเนื้อหาข้อความ

ตัวอย่างต่อไปนี้แสดงวิธีใช้คุณสมบัติ InnerText เพื่อปรับปรุงประสิทธิภาพ

ช้า:

โหนด var;
สำหรับ (var i=0; i<100; i++)
-
โหนด = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "ใช้ createText
โหนด() ") );
divUpdate.appendChild(โหนด);
-

เร็ว:

โหนด var;
สำหรับ (var i=0; i<100; i++)
-
โหนด = document.createElement( "SPAN" );
node.innerText = "ใช้คุณสมบัติข้อความภายใน";
divUpdate.appendChild(โหนด);
-

เพิ่มองค์ประกอบเดียวโดยใช้ DOM

ตามที่กล่าวไว้ก่อนหน้านี้ การใช้วิธีการเข้าถึงข้อความ HTML จะทำให้ตัวแยกวิเคราะห์ HTML ถูกเรียกจาก
มันจะลดประสิทธิภาพลง ดังนั้นการใช้ createElement (ภาษาอังกฤษ) และ insertAdjacent
วิธีการองค์ประกอบ (ภาษาอังกฤษ) จะเพิ่มองค์ประกอบได้เร็วกว่าการเรียกวิธีการ insertAdjacentHTML เพียงครั้งเดียว

เคล็ดลับ 4: เรียกใช้เมธอด createElement และ insertAdjacentElement ได้เร็วกว่าการโทร
วิธีการ insertAdjacentHTML นั้นรวดเร็ว

การรวมการอัปเดต DHTML และการเรียกใช้เมธอด insertAdjacentHTML หนึ่งครั้งสามารถปรับปรุงได้
ประสิทธิภาพ แต่บางครั้งก็มีประสิทธิภาพมากกว่าในการสร้างองค์ประกอบโดยตรงจาก DOM ในสถานการณ์ด้านล่าง คุณสามารถทำได้
เพื่อลองทั้งสองวิธีและพิจารณาว่าวิธีใดเร็วกว่า

ช้า:

สำหรับ (var i=0; i<100; i++)
-
divUpdate.insertAdjacentHTML( "beforeEnd", " ใช้การแทรก
ที่อยู่ติดกันHTML() " );
-

เร็ว:

โหนด var;
สำหรับ (var i=0; i<100; i++)
-
โหนด = document.createElement( "SPAN" );
node.innerText = "ใช้ insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "ก่อนสิ้นสุด", โหนด );
-

การขยายตัวเลือกในองค์ประกอบ SELECT

สำหรับกฎก่อนหน้านี้โดยใช้วิธีข้อความ HTML จำนวนมาก OPTIONs (ภาษาอังกฤษ)
ข้อยกเว้นคือกรณีที่องค์ประกอบถูกเพิ่มลงใน SELECT (ภาษาอังกฤษ) ในขณะนี้ ให้ใช้ innerHTML
คุณสมบัติมีประสิทธิภาพมากกว่าการเรียกใช้เมธอด createElement เพื่อเข้าถึงคอลเลกชันของตัวเลือก

เคล็ดลับ 5: ใช้ innerHTML เพื่อเพิ่มตัวเลือกจำนวนมากให้กับองค์ประกอบ SELECT

ใช้การดำเนินการต่อสตริงเพื่อสร้างข้อความ HTML ขององค์ประกอบ SELECT จากนั้นจึงใช้สิ่งนี้
เคล็ดลับสำหรับการตั้งค่าแอตทริบิวต์ innerHTML สำหรับตัวเลือกจำนวนมากเป็นพิเศษ การดำเนินการต่อสตริงก็จะทำเช่นกัน
ส่งผลกระทบต่อประสิทธิภาพการทำงาน ในกรณีนี้ ให้สร้างอาร์เรย์แล้วเรียก Microsoft JScript join
(ภาษาอังกฤษ) วิธีการต่อขั้นสุดท้ายของข้อความ HTML ขององค์ประกอบ OPTION

ช้า:

var เลือก;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
สำหรับ (var i=0; i<1000; i++)
-
เลือก = document.createElement( "ตัวเลือก" );
selUpdate.options.add(เลือก);
opt.innerText = "รายการ" + i + "รายการ";
-

เร็ว:

var str="〈SELECT ID='selUpdate'〉";
สำหรับ (var i=0; i<1000; i++)
-
str += "〈OPTION〉th" + i + " item〈/OPTION〉";
-
STR += "";
divUpdate.innerHTML = str;

เร็วขึ้น:

var arr = อาร์เรย์ใหม่ (1,000);
สำหรับ (var i=0; i<1000; i++)
-
arr[i] = "〈OPTION〉th" + i + " item〈/OPTION〉";
-
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
-

อัปเดตตารางด้วย DOM

การใช้วิธี DOM เพื่อแทรกแถวและเซลล์ของตารางจะดีกว่าการใช้ insertRow (ภาษาอังกฤษ) และแทรก
วิธีการเซลล์ (ภาษาอังกฤษ) (ส่วนหนึ่งของโมเดลวัตถุตาราง DHTML) มีประสิทธิภาพมากกว่า โดยเฉพาะอย่างยิ่งใน
เมื่อสร้างตารางขนาดใหญ่ ความแตกต่างด้านประสิทธิภาพจะชัดเจนยิ่งขึ้น

เคล็ดลับ 6: ใช้วิธีการ DOM เพื่อสร้างตารางขนาดใหญ่

ช้า:

แถว var;
วาร์เซลล์;
สำหรับ (var i=0; i<100; i++)
-
แถว = tblUpdate.insertRow();
สำหรับ (var j=0; j<10; j++)
-
เซลล์ = row.insertCell();
cell.innerText = "แถว " + i + " , เซลล์ " + j + " ";
-
-

เร็ว:

แถว var;
วาร์เซลล์;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild (tbody);
สำหรับ (var i=0; i<100; i++)
-
แถว = document.createElement( "TR" );
tbody.appendChild (แถว);
สำหรับ (var j=0; j<10; j++)
-
เซลล์ = document.createElement( "TD" );
row.appendChild (เซลล์);
cell.innerText = "แถว " + i + " , เซลล์ " + j + " ";
-
-

เขียนครั้งเดียวใช้หลายอัน

หากเว็บไซต์ของคุณใช้สคริปต์เพื่อดำเนินการทั่วไป ให้พิจารณาเพิ่มฟังก์ชันเหล่านี้
สามารถวางไว้ในไฟล์แยกต่างหากเพื่อให้สามารถนำกลับมาใช้ซ้ำได้หลายเว็บเพจ ในการทำเช่นนั้นมิใช่เพียงเท่านั้น
มันสามารถปรับปรุงการบำรุงรักษาโค้ดและเก็บไฟล์สคริปต์ไว้ในแคชของเบราว์เซอร์ได้
จำเป็นต้องดาวน์โหลดในเครื่องเพียงครั้งเดียวเมื่อผู้ใช้เยี่ยมชมไซต์ แยกกฎสไตล์ที่ใช้กันทั่วไปออกจากกัน
สามารถรับสิทธิประโยชน์เดียวกันนี้ได้ในไฟล์

เคล็ดลับ 7: นำสคริปต์มาใช้ซ้ำโดยใส่โค้ดที่ใช้บ่อยลงในการดำเนินการหรือไฟล์แบบสแตนด์อโลน

เพื่อใช้ประโยชน์จากการใช้สคริปต์ซ้ำได้ดีขึ้น ให้วางการทำงานของสคริปต์ที่ใช้บ่อยลงใน DHTML add-in
รหัสหรือพฤติกรรมองค์ประกอบ (ภาษาอังกฤษ) พฤติกรรมเป็นวิธีที่มีประสิทธิภาพในการนำสคริปต์กลับมาใช้ใหม่และ
สร้างส่วนประกอบที่เข้าถึงได้จาก HTML และช่วยให้คุณสามารถใช้ออบเจ็กต์ วิธีการ คุณสมบัติ และเหตุการณ์ของคุณเองได้
โมเดลออบเจ็กต์ DHTML แบบขยาย สำหรับพฤติกรรมที่ไม่ใช้ฟีเจอร์ viewlink (ภาษาอังกฤษ) คุณสามารถทำได้
พิจารณาใช้คุณลักษณะลักษณะการทำงานแบบไลท์เวทใน Internet Explorer 5.5
การห่อหุ้มโค้ดที่มีประสิทธิภาพมากขึ้น นอกจากนี้ หากโค้ดสคริปต์ของคุณอยู่ใน SCRIPT (ภาษาอังกฤษ)
ในบล็อกจะได้ประสิทธิภาพที่สูงขึ้น

อย่าใช้แอตทริบิวต์แบบไดนามิกมากเกินไป

คุณสมบัติไดนามิก (ภาษาอังกฤษ) ช่วยให้ผู้เขียนเว็บมีวิธีใช้นิพจน์เป็นค่าคุณสมบัติ
นิพจน์ได้รับการประเมินขณะรันไทม์ และค่าผลลัพธ์จะถูกนำไปใช้กับแอตทริบิวต์ นี่เป็นคุณสมบัติที่ทรงพลัง นี้
สามารถใช้ฟีเจอร์เพื่อลดจำนวนสคริปต์บนเพจได้ แต่เนื่องจากนิพจน์ต้องได้รับการประเมินใหม่เป็นระยะ และ
นิพจน์นี้มักเกี่ยวข้องกับค่าคุณสมบัติอื่นๆ ดังนั้นจึงอาจส่งผลเสียต่อประสิทธิภาพได้ แบบนี้
โดยเฉพาะอย่างยิ่งสำหรับคุณสมบัติการวางตำแหน่ง

เคล็ดลับ 8: จำกัดการใช้คุณสมบัติไดนามิก

การผูกข้อมูลใช้งานได้ดี

การผูกข้อมูล (ภาษาอังกฤษ) เป็นคุณลักษณะที่มีประสิทธิภาพที่ช่วยให้คุณสามารถรวมผลลัพธ์ของการสืบค้นฐานข้อมูลได้
เนื้อหา Fruit หรือ Data Island (เป็นภาษาอังกฤษ) เชื่อมโยงกับองค์ประกอบ HTML บนเว็บเพจ คุณไม่มี
จำเป็นต้องกลับไปที่เซิร์ฟเวอร์เพื่อดึงข้อมูล ซึ่งสามารถจัดให้มีฟังก์ชันการเรียงลำดับและการกรองข้อมูล รวมถึงข้อมูลต่างๆ
มุมมองข้อมูล ลองนึกภาพเว็บเพจที่แสดงข้อมูลของบริษัทเป็นแผนภูมิเส้น แผนภูมิแท่ง หรือแผนภูมิวงกลม
กราฟยังมีปุ่มจัดเรียงข้อมูลตามสำนักงาน สินค้า หรือระยะการขาย และอื่นๆ อีกมากมาย
ฟังก์ชันนี้จำเป็นต้องเข้าถึงเซิร์ฟเวอร์เพียงครั้งเดียวเพื่อใช้งาน

เคล็ดลับ 9: ใช้การเชื่อมโยงข้อมูลเพื่อให้ลูกค้ามองเห็นข้อมูลของคุณได้อย่างครบถ้วน

อย่าตั้งค่าแอตทริบิวต์expandoบนวัตถุเอกสาร

คุณสามารถเพิ่มแอตทริบิวต์ expando (ภาษาอังกฤษ) ให้กับออบเจ็กต์ใดก็ได้ คุณสมบัตินี้มีประโยชน์มากก็สามารถ
เพื่อเก็บข้อมูลภายในเพจวันพุธปัจจุบันและให้วิธีอื่นในการขยายโมเดลออบเจ็กต์ DHTML
กฎ. ตัวอย่างเช่น คุณสามารถกำหนดแอตทริบิวต์ที่ถูกคลิกให้กับองค์ประกอบ DHTML และใช้แอตทริบิวต์นี้เพื่อแจ้งให้ผู้ใช้ทราบ
องค์ประกอบใดที่ผู้ใช้คลิก เมื่อจัดกิจกรรม คุณยังสามารถใช้แอตทริบิวต์ expando เพื่อ
ตัวจัดการเหตุการณ์ให้ข้อมูลตามบริบทมากขึ้น ไม่ว่าคุณจะใช้แอตทริบิวต์ expando อย่างไร ก็ตัดได้
อย่าลืมตั้งค่าไว้ในออบเจ็กต์เอกสาร (ภาษาอังกฤษ) หากคุณทำเช่นนี้เมื่อคุณเยี่ยมชม
เมื่อขอคุณสมบัตินี้ เอกสารจะต้องดำเนินการคำนวณใหม่เพิ่มเติม

เคล็ดลับ 10: ตั้งค่าแอตทริบิวต์ expando บนวัตถุหน้าต่าง (ภาษาอังกฤษ)

ช้า:

สำหรับ (var i=0; i<1000; i++)
-
var tmp;
window.document.myProperty = "รายการ" + i + "รายการ";
tmp = window.document.myProperty;
-

เร็ว:

สำหรับ (var i=0; i<1000; i++)
-
var tmp;
window.myProperty = "รายการ" + i + "รายการ";
tmp = window.myProperty;
-

หลีกเลี่ยงการเปลี่ยนกฎคลาสและสไตล์

การสลับกฎคลาสและสไตล์เป็นการดำเนินการที่มีราคาแพงมากซึ่งต้องมีการคำนวณใหม่และการปรับเปลี่ยนทั้งหมด
เค้าโครงของเอกสาร หากเว็บไซต์ของคุณใช้สไตล์ชีตเพื่อให้มีมุมมองเนื้อหาอื่น คุณก็สามารถทำได้
เพื่อพิจารณาปรับเปลี่ยนออบเจ็กต์สไตล์ (ภาษาอังกฤษ) ขององค์ประกอบที่จะเปลี่ยนแปลงโดยตรง แทนที่จะแก้ไของค์ประกอบ
แอตทริบิวต์ className (ภาษาอังกฤษ) หรือวัตถุ styleSheet (ภาษาอังกฤษ) ที่เกี่ยวข้องกับชั้นเรียน

เคล็ดลับ 11: เมื่อเปลี่ยนรูปลักษณ์ของเนื้อหา ให้แก้ไขวัตถุสไตล์โดยตรง

ยุบช่วงข้อความก่อนที่จะค้นหาพาเรนต์

วัตถุ TextRange (ภาษาอังกฤษ) แสดงถึงผู้ใช้เลือกหรือดึงข้อมูลจากองค์ประกอบ HTML
พื้นที่ข้อความ เช่น BODY (ภาษาอังกฤษ) โดยการเรียกเมธอด parentElement (ภาษาอังกฤษ)
สามารถระบุพาเรนต์ของช่วงข้อความได้ สำหรับช่วงข้อความที่ซับซ้อน ให้เรียก parentElement
ก่อนเรียกใช้เมธอด จะมีประสิทธิภาพมากกว่าในการเรียกเมธอดการล่มสลาย (ภาษาอังกฤษ) ก่อน

เคล็ดลับ 12: ยุบช่วงข้อความก่อนที่จะเข้าถึงเมธอด parentElement

ตัดตอนมาจาก http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
บทความที่เกี่ยวข้อง