วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เข้าสู่การเรียนรู้
ฉันกำลังมองหาเคล็ดลับในการเพิ่มประสิทธิภาพ jQuery เพื่อทำให้แอปพลิเคชันเว็บแบบไดนามิกที่บวมน้อยลง หลังจากค้นหาบทความมากมาย ฉันตัดสินใจแสดงรายการคำแนะนำที่ดีที่สุดและใช้บ่อยที่สุดบางส่วนสำหรับการเพิ่มประสิทธิภาพ [การเรียนรู้ที่แนะนำ: วิดีโอสอน jQuery]
1. คำแนะนำในการเพิ่มประสิทธิภาพตัวเลือก
1. สืบทอดจากตัวเลือก #id เสมอ
นี่เป็นกฎทองสำหรับตัวเลือก jQuery วิธีที่เร็วที่สุดในการเลือกองค์ประกอบใน jQuery คือการเลือกโดยใช้ ID
2. ใช้แท็กหน้าคลาส
ตัวเลือกที่เร็วที่สุดอันดับสองใน jQuery คือตัวเลือกแท็ก (เช่น $('head')) เพราะมันมาจากเมธอด Javascript ดั้งเดิม getElementByTagName() ดังนั้นจึงเป็นการดีที่สุดที่จะใช้แท็กเพื่อแก้ไขคลาสเสมอ (และอย่าลืม ID ที่ใกล้ที่สุด)
ตัวเลือกคลาสใน jQuery นั้นช้าที่สุด เนื่องจากจะสำรวจโหนด DOM ทั้งหมดในเบราว์เซอร์ IE พยายามหลีกเลี่ยงการใช้ตัวเลือกคลาส อย่าใช้แท็กเพื่อแก้ไขรหัสเช่นกัน
3. ใช้แบบสอบถามย่อย
เพื่อแคชออบเจ็กต์หลักเพื่อใช้ในอนาคต
4. ปรับตัวเลือกให้เหมาะสมเพื่อปรับให้เข้ากับโมเดล "ขวาไปซ้าย" ของ Sizzle
ตั้งแต่เวอร์ชัน 1.3 นั้น jQuery ใช้ไลบรารี Sizzle ซึ่งเหมือนกับเวอร์ชันก่อนหน้าในเอ็นจิ้นตัวเลือก การแสดงออกที่แตกต่างกันมาก โดยจะแทนที่โมเดล "จากขวาไปซ้าย" ด้วยโมเดล "จากซ้ายไปขวา"
5.
การใช้ find() จะเร็วกว่าการใช้บริบทเพื่อค้นหาฟังก์ชัน find() แต่หากเพจมีโหนด DOM จำนวนมาก อาจต้องใช้เวลามากขึ้นในการค้นหาไปมา:
6. ใช้การดำเนินการลูกโซ่ที่มีประสิทธิภาพ การใช้
การดำเนินการลูกโซ่ของ jQuery มีประสิทธิภาพมากกว่าตัวเลือกแคช
7. เขียนตัวเลือกของคุณเอง
หากคุณใช้ตัวเลือกบ่อยครั้ง รหัสของคุณ ดังนั้นขยาย $.expr[':'] วัตถุของ jQuery เพื่อเขียนตัวเลือกของคุณเอง
2. คำแนะนำสำหรับการเพิ่มประสิทธิภาพการดำเนินการ DOM
8. แคชวัตถุ jQuery และ
องค์ประกอบแคชที่คุณมักจะใช้
9. เมื่อแทรกลงใน DOM ให้รวมองค์ประกอบทั้งหมดไว้ในองค์ประกอบเดียว
แนวคิดพื้นฐานที่นี่คือการสร้างสิ่งที่คุณต้องการจริงๆ ในหน่วยความจำ จากนั้นอัปเดต DOM นี่ไม่ใช่แนวทางปฏิบัติที่ดีที่สุดของ jQuery แต่จำเป็นสำหรับการทำงานของ JavaScript ที่ถูกต้อง การดำเนินการ DOM โดยตรงช้ามาก เปลี่ยนโครงสร้าง HTML ให้น้อยที่สุด
10. แม้ว่า jQuery จะไม่ส่งข้อยกเว้น แต่นักพัฒนาควรตรวจสอบวัตถุด้วย
แม้ว่า jQuery จะไม่ส่งข้อยกเว้นจำนวนมากให้กับผู้ใช้ แต่นักพัฒนาก็ไม่ควรพึ่งพาสิ่งนี้ โดยปกติแล้ว jQuery จะดำเนินการฟังก์ชันที่ไม่มีประโยชน์มากมายก่อนที่จะพิจารณาว่ามีวัตถุอยู่หรือไม่ ดังนั้นก่อนที่จะสร้างชุดการอ้างอิงไปยังวัตถุ คุณควรตรวจสอบก่อนว่ามีวัตถุอยู่หรือไม่
11. ใช้ฟังก์ชันโดยตรงแทนฟังก์ชันที่เทียบเท่า
เพื่อประสิทธิภาพที่ดีขึ้น คุณควรใช้ฟังก์ชันโดยตรงเช่น .ajax() แทน .ajax() แทน .ajax() .getJSON(),.getJSON(),.post() เพราะอันหลังจะเรียก $.ajax()
12. ผลลัพธ์ jQuery แคชสำหรับใช้ในภายหลัง
คุณมักจะได้รับวัตถุแอปพลิ
เคชัน javascript - คุณสามารถใช้ App เพื่อบันทึกวัตถุที่คุณมักจะเลือกสำหรับใช้ในอนาคต
13. ใช้ข้อมูลฟังก์ชันภายในของ jQuery () เพื่อจัดเก็บสถานะ
ลืมใช้ฟังก์ชัน .data() เพื่อจัดเก็บข้อมูล
14. ใช้ฟังก์ชันอรรถประโยชน์ jQuery
อย่าลืมฟังก์ชันอรรถประโยชน์ jQuery ที่เรียบง่ายและใช้งานได้จริง รายการโปรดของฉันคือ $.isFunction(), isA rray() และ isArray() และ isArray() และ .each()
15. เพิ่มคลาส "JS" ลงในบล็อก HTML
หลังจากโหลด jQuery แล้ว ให้เพิ่มคลาสชื่อ "JS" ลงใน HTML $('HTML').addClass('JS'); คุณสามารถเพิ่มสไตล์ CSS
3. คำแนะนำในการเพิ่มประสิทธิภาพเหตุการณ์
16. เลื่อนไปที่ (window)
บางครั้งใช้ Load (window).load บางครั้งใช้ (window).load() มากกว่า $(document).ready . () เร็วกว่าเพราะอย่างหลังไม่รอจนกว่าจะดาวน์โหลดองค์ประกอบ DOM ทั้งหมด คุณควรทดสอบก่อนใช้งาน
17. ใช้การมอบหมายกิจกรรม
เมื่อคุณมีหลายโหนดในคอนเทนเนอร์และคุณต้องการผูกเหตุการณ์กับโหนดทั้งหมด การมอบหมายจะเหมาะสมมากสำหรับสถานการณ์แอปพลิเคชันดังกล่าว เมื่อใช้ Delegation เราจำเป็นต้องผูกเหตุการณ์ที่พาเรนต์แล้วดูว่าโหนดย่อย (โหนดเป้าหมาย) ใดที่ทริกเกอร์เหตุการณ์ ซึ่งจะสะดวกมากเมื่อคุณมีตารางที่มีข้อมูลจำนวนมาก และคุณต้องการตั้งค่าเหตุการณ์บนโหนด td
18. ใช้ตัวย่อของเหตุการณ์ที่พร้อม
หากคุณต้องการบีบอัดปลั๊กอิน js และบันทึกทุกไบต์ คุณควรหลีกเลี่ยงการใช้ $(document).onready()
4. ทดสอบ jQuery
19. การทดสอบหน่วย jQuery
วิธีที่ดีที่สุดในการทดสอบ รหัส JavaScript คือการใช้คนมาทดสอบ แต่คุณสามารถใช้เครื่องมืออัตโนมัติบางอย่าง เช่น Selenium, Funcunit, QUit, QMock เพื่อทดสอบโค้ดของคุณ (โดยเฉพาะปลั๊กอิน) ฉันต้องการหารือหัวข้อนี้ในหัวข้ออื่นเพราะมีเรื่องจะพูดมากมาย
20. สร้างมาตรฐานให้กับโค้ด jQuery ของคุณ
สร้างมาตรฐานให้กับโค้ดของคุณบ่อยๆ ดูว่าคิวรีใดที่ช้ากว่า และแทนที่ คุณสามารถใช้คอนโซล Firebug ได้ คุณยังสามารถใช้ฟังก์ชันทางลัดของ jQuery เพื่อทำให้การทดสอบง่ายขึ้น
5. คำแนะนำในการเพิ่มประสิทธิภาพ jQuery ทั่วไปอื่น ๆ
21. ใช้ jQuery เวอร์ชันล่าสุด
มักจะดีที่สุด หลังจากเปลี่ยนเวอร์ชันแล้ว อย่าลืมทดสอบโค้ดของคุณ บางครั้งมันก็เข้ากันไม่ได้กับย้อนหลังอย่างสมบูรณ์
22. การใช้ HMTL5
มาตรฐาน HTML5 ใหม่นำโครงสร้าง DOM ที่เบากว่ามาใช้ โครงสร้างที่เบากว่าหมายถึงต้องมีการแวะผ่านน้อยลงเมื่อใช้ jQuery และประสิทธิภาพในการโหลดที่ดีขึ้น ดังนั้นโปรดใช้ HTML5 ถ้าเป็นไปได้
23. หากคุณต้องการเพิ่มสไตล์ให้กับองค์ประกอบมากกว่า 15 องค์ประกอบ
วิธีที่ดีที่สุดในการเพิ่มแท็กสไตล์ให้กับองค์ประกอบ DOM โดยตรงคือการใช้ฟังก์ชัน css() ของ jQuey เพื่อจัดสไตล์องค์ประกอบบางส่วน อย่างไรก็ตาม เมื่อเพิ่มสไตล์ให้กับองค์ประกอบมากกว่า 15 รายการ การเพิ่มแท็กสไตล์ลงใน DOM โดยตรงจะมีประสิทธิภาพมากกว่า วิธีนี้หลีกเลี่ยงการใช้ฮาร์ดโค้ดในโค้ด
24. หลีกเลี่ยงการโหลดโค้ดที่ซ้ำซ้อน
เป็นความคิดที่ดีที่จะใส่โค้ด Javascript ในไฟล์ต่างๆ และโหลดเมื่อจำเป็นเท่านั้น ด้วยวิธีนี้คุณจะไม่โหลดโค้ดและตัวเลือกที่ไม่จำเป็น นอกจากนี้ยังง่ายต่อการจัดการโค้ด
25. บีบอัดเป็นไฟล์ JS หลักเดียวเพื่อรักษาจำนวนการดาวน์โหลดให้เหลือน้อยที่สุด
เมื่อคุณตัดสินใจว่าควรโหลดไฟล์ใด ให้รวมเป็นไฟล์เดียว ใช้เครื่องมือโอเพ่นซอร์สเพื่อทำสิ่งนี้ให้คุณโดยอัตโนมัติ เช่น การใช้ Minify (รวมเข้ากับโค้ดแบ็คเอนด์ของคุณ) หรือการใช้เครื่องมือออนไลน์ เช่น JSCompressor, YUI Compressor หรือ Dean Edwards JS packer เพื่อบีบอัดไฟล์ให้กับคุณ สิ่งที่ฉันชอบคือ JSCompressor
26. การใช้ Javascript แบบเนทีฟเมื่อจำเป็นถือเป็นเรื่องดี
การใช้ jQuery เป็นสิ่งที่ดี แต่อย่าลืมว่านี่เป็นเฟรมเวิร์กสำหรับ Javascript ด้วย ดังนั้นคุณสามารถใช้ฟังก์ชัน Javascript ดั้งเดิมได้เมื่อจำเป็นในโค้ด jQuery ซึ่งสามารถให้ประสิทธิภาพที่ดีขึ้น
27. โหลด jQuery Framework จาก Google
เมื่อแอปพลิเคชันของคุณเปิดตัวอย่างเป็นทางการ โปรดโหลด jQuery จาก Google CDN เนื่องจากผู้ใช้สามารถรับโค้ดได้จากที่ที่ใกล้ที่สุด วิธีนี้ทำให้คุณสามารถลดการร้องขอของเซิร์ฟเวอร์ได้ และหากผู้ใช้เรียกดูเว็บไซต์อื่นที่ใช้ jQuery ของ Google CDN เบราว์เซอร์จะเรียกรหัส jQuery จากแคชทันที
28. การโหลดเนื้อหาช้าไม่เพียงแต่สามารถปรับปรุงความเร็วในการโหลดได้ แต่ยังปรับปรุงการเพิ่มประสิทธิภาพ SEO ด้วย คุณสามารถเริ่มต้นด้วยวิดเจ็ตแถบด้านข้างทั่วไป
[การเรียนรู้ที่แนะนำ: วิดีโอ jQuery, การพัฒนาส่วนหน้าของเว็บ]
ข้างต้นคือวิธีเพิ่มประสิทธิภาพการทำงานของ jQuery ได้อย่างไร สำหรับรายละเอียดเกี่ยวกับการสรุปวิธีการเพิ่มประสิทธิภาพ โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese สำหรับข้อมูลเพิ่มเติม!
