หกแนวทางปฏิบัติที่ดีที่สุดสำหรับ jQuery เพื่อประสิทธิภาพที่ดียิ่งขึ้น

jQuery เป็นหนึ่งใน ไลบรารี JavaScript ที่เป็นที่นิยมมากที่สุดวันนี้ API ของมันนั้นใช้งานง่ายมากซึ่งนำไปสู่ช่วงการเรียนรู้ที่ไม่สูงชัน โครงการจำนวนมากใช้รหัส jQuery แทนที่จะใช้ vanilla JavaScript โดยตรงเพื่อนำฟังก์ชันการทำงานแบบไดนามิกมาใช้.

แต่ jQuery ก็มีข้อบกพร่องเช่นกัน. มันสามารถนำไปสู่ปัญหาประสิทธิภาพการทำงานบางอย่างถ้าใช้อย่างไม่ระมัดระวัง เหมือนกับภาษาที่ใช้ โพสต์นี้จะแสดงแนวทางปฏิบัติที่ดีที่สุดในการใช้ jQuery ที่จะช่วยให้เราหลีกเลี่ยงปัญหาด้านประสิทธิภาพ.

1. สคริปต์โหลดขี้เกียจเมื่อจำเป็น

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

วิธีหนึ่งในการทำเช่นนี้ใน jQuery คือการใช้ $ .getScript เพื่อโหลดไฟล์สคริปต์ใด ๆ ในเวลาที่ต้องการมากกว่าในระหว่างการโหลดหน้าเว็บ.

$ .getScript ("สคริปต์ / gallery.js", การติดต่อกลับ); 

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

$ .ajaxSetup (cache: true); 

2. หลีกเลี่ยง $ (หน้าต่าง) .load () หากสคริปต์ของคุณไม่ต้องการทรัพยากรย่อยของหน้า

$ (เอกสาร) .ready () เทียบเท่ากับ DOMContentLoaded (ในกรณีที่ DOMContentLoaded สามารถใช้ได้) และ $ (หน้าต่าง) .load () ไปยัง ภาระ. อันแรกจะเริ่มทำงานเมื่อโหลด DOM ของหน้าตัวเอง แต่ไม่ใช่เนื้อหาภายนอกเช่นรูปภาพและสไตล์ อันที่สองจะถูกเรียกใช้เมื่อทุกอย่างที่สร้างขึ้นหน้ารวมถึงเนื้อหาของตัวเองและโหลดทรัพยากรย่อย.

ดังนั้นหากคุณกำลังเขียนสคริปต์ที่ต้องอาศัยทรัพยากรย่อยของหน้าเช่นการเปลี่ยนสีพื้นหลังของ div ที่มีสไตล์จากสไตล์ชีทภายนอกควรใช้งานให้ดีที่สุด $ (หน้าต่าง) .load ().

แต่ถ้าไม่ใช่ในกรณีที่ดีกว่า $ (เอกสาร) .ready () เพราะ jQuery เรียกมันว่า พร้อมแล้ว ตัวจัดการเหตุการณ์ไม่ว่าคุณจะใช้ $ (เอกสาร) .ready () หรือไม่ดังนั้นใช้เมื่อคุณสามารถ.

3. การใช้ ถอดออก เพื่อลบองค์ประกอบออกจาก DOM ที่จำเป็นต้องเปลี่ยนแปลง.

“reflow” เป็นคำที่อ้างถึงการเปลี่ยนแปลงโครงร่างในเว็บเพจเมื่อเบราว์เซอร์จัดเรียงองค์ประกอบของหน้าใหม่เพื่อรองรับองค์ประกอบใหม่ปรับการเปลี่ยนแปลงโครงสร้างขององค์ประกอบเติมช่องว่างที่เหลือจากองค์ประกอบที่ถูกลบออกหรือการกระทำอื่น ๆ ที่ต้องการ การเปลี่ยนแปลงเค้าโครงในหน้า. reflow คือ แพง กระบวนการเบราว์เซอร์.

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

ของ jQuery ถอด () ให้เราลบองค์ประกอบออกจากหน้า, มันแตกต่างจาก ลบ () เพราะมันจะบันทึกข้อมูลที่เกี่ยวข้องกับองค์ประกอบเวลาที่จะต้องเพิ่มลงในหน้าในภายหลัง องค์ประกอบที่แยกออกสามารถนำกลับเข้าไปในหน้าเมื่อมีการแก้ไข.

4. ใช้ CSS () เพื่อตั้งความสูงหรือความกว้างแทน ความสูง () และ ความกว้าง ()

หากคุณตั้งค่าความสูงหรือความกว้างขององค์ประกอบใน jQuery ฉันขอแนะนำให้คุณใช้ CSS () ฟังก์ชั่นเพราะการตั้งค่าเหล่านั้นโดยใช้ ความสูง () และ ความกว้าง () จะทำให้เกิดการ reflow พิเศษเนื่องจากการเข้าถึงคุณสมบัติเค้าโครงบางอย่างในฟังก์ชั่น computeStyleTests ใน jQuery (ทดสอบในเวอร์ชันล่าสุด).

สำหรับรหัส p.height ( "300px"); นี่คือ reflows.

สำหรับ p.css ("height": "300px");

computeStyleTests ใช้ในการทำแบบทดสอบสนับสนุน มันก็เรียกว่าในขณะที่ ได้รับ ความสูงและความกว้างโดยใช้ ทั้งสอง CSS () และ สูงกว้าง() , แต่สำหรับ การตั้งค่า มันถูกเรียกเท่านั้น สูงกว้าง() ซึ่งอาจไม่จำเป็นดังนั้นให้ใช้ CSS () แทน.

5. อย่าเข้าถึงคุณสมบัติเลย์เอาต์โดยไม่จำเป็น

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

ดังนั้นไม่ว่าคุณจะใช้ jQuery หรือวานิลลา JavaScript, ระวังการเข้าถึงคุณสมบัติโครงร่างโดยไม่จำเป็น โดยเฉพาะอย่างยิ่งในลูปหรือหลังจากเปลี่ยนสไตล์.

6. ใช้ประโยชน์จากแคชที่คุณสามารถ

ฟังก์ชั่นบางอย่างของ jQuery มาพร้อมกับกลไกการแคชที่สามารถใช้งานได้ดี คำขอ Ajax ทำการแคชทรัพยากร แต่ไม่สามารถทำได้ ต้นฉบับ และ jsonp, ดังนั้นหากคุณต้องการแคชกับคำขออาแจ็กซ์ทั้งหมดของคุณคุณอาจต้องการ ตั้งทั่วโลก ชอบด้านล่าง.

นอกจากนี้โปรดทราบว่าหากคุณดึงทรัพยากรที่ใช้ เสา จะไม่ถูกแคชแม้ว่าคุณจะเปิดใช้งานการแคชด้วยการตั้งค่าข้างต้น.

อย่างที่ฉันพูดไปก่อนหน้านี้, ถอด () แคชข้อมูลที่เกี่ยวข้องกับองค์ประกอบที่จะถูกลบออกซึ่งแตกต่างจาก ลบ ();ซ่อน () แคช CSS เริ่มต้น แสดง ค่าขององค์ประกอบก่อนที่จะซ่อนมันเพื่อให้สามารถเรียกคืนได้ในภายหลังโดยไม่สูญเสียข้อมูล.

ข้อสรุป

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

เนื่องจาก jQuery เป็นเหมือนรังผึ้งสำหรับ JavaScript ที่มีฟังก์ชั่นเพิ่มเติมสำหรับความเข้ากันได้ของเบราว์เซอร์และคุณลักษณะต่างๆจึงยากที่จะวินิจฉัยปัญหาโดยไม่ต้องใช้เครื่องมือเหล่านี้.