คำนำทำไมการเพิ่มประสิทธิภาพประสิทธิภาพจึงมีความสำคัญสำหรับวิศวกรส่วนหน้า
มีคำพูดในอุตสาหกรรมที่ฉันไม่รู้ว่าคุณเคยได้ยินหรือไม่ว่า 'คนที่รู้การเพิ่มประสิทธิภาพประสิทธิภาพและได้ศึกษาซอร์สโค้ด jQuery และรหัสที่เขียนโดยไม่มีการเพิ่มประสิทธิภาพประสิทธิภาพจะมีความแตกต่างในการบริโภคประสิทธิภาพหลายร้อยหรือหลายพันครั้ง' JavaScript ของวันนี้เป็นกระบวนการเฉพาะกาลจาก ECMASCript3 ถึง ECMASCRIPT5 และ ECMASCRIPT6 เมื่อ JavaScript ไม่ได้เขียนอย่างดีวิธีการรหัสจะไม่ถูกเขียนอย่างถูกต้องและปัญหาที่เกิดขึ้นไม่สามารถละเว้นได้
การเพิ่มประสิทธิภาพประสิทธิภาพ
ด้านล่างนี้ฉันจะแบ่งปันข้อมูลเชิงลึกเกี่ยวกับการเพิ่มประสิทธิภาพประสิทธิภาพกับคุณ
1. ภาพเอลฟ์
สิ่งพื้นฐานที่สุดคือการทำให้ภาพพื้นหลังเป็นเอลฟ์ให้มากที่สุดเท่าที่จะทำได้เพื่อลดการร้องขอรูปภาพดังนั้นสัญชาตญาณพื้นฐานอีกประการหนึ่งสำหรับวิศวกรเว็บทั่วไปคือการสร้างเอลฟ์
2. การเพิ่มประสิทธิภาพตัวเลือก CSS
ใน CSS ลองใช้ตัวเลือกเด็ก> ใช้ตัวเลือกลูกหลานน้อยลง เมื่อใช้ตัวเลือกลูกหลานเครื่องมือค้นหาจะค้นหาองค์ประกอบลูกหลานทั้งหมด หากเราใช้ตัวเลือกเด็กเราสามารถ จำกัด ช่วงการค้นหาซึ่งจะช่วยลดการใช้ประสิทธิภาพของเครื่องมือค้นหา
3.JS เปลี่ยนสไตล์และใช้ชื่อคลาสโดยตรง
เมื่อใช้งานสไตล์องค์ประกอบ JS อย่าใช้สไตล์เพื่อเพิ่มสไตล์โดยตรง โดยทั่วไปจะมีคุณลักษณะน้อยลงและจะไม่มีผลกระทบใด ๆ ในความเป็นจริงนี่ไม่ใช่กรณี ทุกครั้งที่มีการเพิ่มสไตล์หน้าจะถูกวาดอีกครั้ง การทาสีใหม่จำเป็นต้องให้ความสนใจ เมื่อรูปแบบการใช้งานการจัดการชื่อคลาสโดยตรงจะทำให้เกิดการวาดใหม่เพียงครั้งเดียว การเพิ่มสไตล์โดยตรงตามสไตล์จะทำให้เกิดการวาดใหม่หลายครั้ง
4.JS ทำงานโดยตรงโหนด DOM
เมื่อใช้งานโหนดให้ลองเพิ่มโหนดที่อยู่ด้านหลังองค์ประกอบ หากแทรกไว้ที่ด้านหน้าของโหนดโหนดทั้งหมดหลังจากโหนดที่แทรกจะทำให้เกิดการรีดกลับ เมื่อแทรกไว้ที่ด้านหลังเฉพาะโหนดที่แทรกจะต้องรีดกลับหนึ่งครั้ง
บางคนอาจไม่เข้าใจแนวคิดของการวาดใหม่และ reflow
5. ตัวเลือกการจับคู่ปกติ
ใน CSS3 และ jQuery ตัวเลือกเหล่านี้บางตัวถูกจับคู่โดยใช้วิธีการปกติและพยายามที่จะไม่ใช้ แน่นอนหากไม่ได้พิจารณาการเพิ่มประสิทธิภาพประสิทธิภาพวิธีการเหล่านี้ค่อนข้างใช้งานง่าย ตัวเลือกการจับคู่ปกติจะทำให้เครื่องมือค้นหาค้นหาแท็กทั้งหมดซึ่งมีผลต่อประสิทธิภาพอย่างมาก
6.JS ได้รับการเพิ่มประสิทธิภาพองค์ประกอบ
เมื่อได้รับองค์ประกอบใน JS เป็นเรื่องปกติที่จะใช้ document.getElementsById เครื่องมือค้นหาจะค้นหาจากด้านล่างของแผนผัง DOM จนกว่าจะค้นหาเอกสารในหน้าต่างแล้วค้นหาอีกครั้ง ดังนั้นจึงเป็นการดีที่สุดที่จะจัดเก็บเอกสารเมื่อได้รับองค์ประกอบ เมื่อใช้งานอีกครั้งเพียงแค่นำตัวแปรนี้ออกไปใช้ซึ่งสามารถบันทึกประสิทธิภาพของเครื่องมือค้นหา
7. หน่วยความจำล้น
โดยทั่วไปเมื่อเรียกใช้ซ้ำการไหลของหน่วยความจำจะเกิดขึ้นส่งผลให้ประสิทธิภาพลดลงอย่างมีนัยสำคัญเมื่อเรียกใช้ซ้ำ หลังจากทำงานแล้วหน่วยความจำจะถูกนำกลับมาใช้ใหม่โดยระบบ ดังนั้นเมื่อเรียกใช้ซ้ำคุณต้องบันทึกค่าด้วยวัตถุตรวจจับทุกครั้งที่การดำเนินการเรียกซ้ำส่งคืนโดยตรงและเพิ่มหากไม่มีอยู่ สิ่งนี้สามารถแก้ประสิทธิภาพที่ยอดเยี่ยมของการเรียกซ้ำ
8. ใช้คำขอรับ AJAX
คำขอโพสต์ทำได้โดยการส่งส่วนหัวคำขอ HTTP ก่อนจากนั้นส่งข้อมูล Get ไม่มีส่วนหัวคำขอ แต่ควรสังเกต ว่าขีด จำกัด ขนาดรับประมาณ 4K ในขณะที่โพสต์ไม่มีขีด จำกัด
9. ล่าช้าในการโหลดรูปภาพ
เมื่อหน้าเริ่มร้องขอจำนวนคำขอมีขนาดใหญ่เกินไปดังนั้นรูปภาพจึงสามารถโหลดได้ เมื่อหน้าเลื่อนไปยังตำแหน่งของรูปภาพภาพจะถูกโหลด
นี่คือปลั๊กอินสำหรับการโหลดรูปภาพขี้เกียจ
jQuery.lazyload.js
10. หลีกเลี่ยงแอตทริบิวต์ภาพ SRC ที่ว่างเปล่า
รูปภาพที่มีแอตทริบิวต์ SRC ที่เป็นสตริงว่างเป็นเรื่องธรรมดาส่วนใหญ่จะปรากฏในสองรูปแบบ:
<img src = "">
var img = ภาพใหม่ (); img.src = "";
ทั้งสองรูปแบบทำให้เกิดปัญหาเดียวกัน: เบราว์เซอร์ส่งคำขออื่นไปยังเซิร์ฟเวอร์
ทักษะ
1. ความคิดพิเศษ
ก่อนอื่นไม่รวมสิ่งปัจจุบันทั้งหมดแล้วดำเนินการต่อไป โดยทั่วไปเมื่อแสดงภาพเคลื่อนไหวการเพิ่มรูปแบบ ฯลฯ ก่อนอื่นให้อธิบายรูปแบบก่อนหน้าในระหว่างการดำเนินการรองจากนั้นเพิ่มรูปแบบใหม่เพื่อหลีกเลี่ยงความขัดแย้งในภาพเคลื่อนไหวในเวลาเดียวกัน
2. การดำเนินการลัดวงจร (||)
โดยทั่วไปเมื่อต้องตัดสินค่าว่ามีอยู่หรือไม่พยายามอย่าใช้ถ้างบ คุณสามารถใช้ตัวดำเนินการลัดวงจรเพื่อบันทึกหน่วยความจำที่ครอบครองโดยรหัส ตัวอย่างเช่น:
a = a || b;
หากมีอยู่ให้ใช้ A; หากไม่มีอยู่ให้ใช้ b
3. การดำเนินการ (&&)
มันสามารถใช้เมื่อเงื่อนไขตรงกับเพื่อให้การสืบค้นเงื่อนไขที่ไม่จำเป็นเช่นเมื่อพิจารณาว่าวัตถุเป็นอาร์เรย์หรือไม่
a && a.length && a.length> = 0
4. เทียมอาเรย์และอาเรย์
เมื่อคุณต้องการห่อหุ้มองค์ประกอบที่ไม่ใช่อาร์เรย์และเปลี่ยนเป็นอาร์เรย์วิธีที่ง่ายที่สุดคือการเพิ่ม [] ลงไป หากจำเป็นต้องเป็นอาร์เรย์หลอกคุณสามารถตั้งค่าแอตทริบิวต์ความยาวได้
5. วาล์วคันเร่ง
โดยทั่วไปใช้ในภาพเคลื่อนไหวตั้งค่าตั้งค่าเป็นจริงที่จุดเริ่มต้นกำหนดค่ากำหนดค่านี้ให้เป็นเท็จเมื่อป้อนภาพเคลื่อนไหวและใช้ฟังก์ชั่นการเรียกกลับเพื่อกำหนดใหม่ให้เป็นจริงในตอนท้ายของภาพเคลื่อนไหว
6. ปลดล็อกสถานะการเลือกแบบพาสซีฟของข้อความ (สินค้าแห้งบริสุทธิ์)
เมื่อคลิกปุ่มบางปุ่มบางครั้งข้อความจะถูกเลือกซึ่งทำให้ลูกค้าเห็นว่าเป็นข้อบกพร่อง ต่อไปนี้เป็นรหัสเพื่อลบสถานะนี้และวางไว้
if (document.all) {document.onselectStart = function () {return false}; // สำหรับ ie} else {document.onmousedown = function () {return false}; document.onmouseup = function () {return true}; } document.onSelectStart = ฟังก์ชั่นใหม่ ('event.returnValue = false');7. ใช้ตัวดำเนินการแบบ Ternary อย่างชาญฉลาด
เมื่อมีความจำเป็นในการพิจารณาว่ามีค่าอยู่หรือไม่คุณยังสามารถใช้ตัวดำเนินการแบบไตรมาสเพื่อให้รหัสได้รับการปรับให้เหมาะสมยิ่งขึ้น ตัวอย่างเช่น
obj = obj === undefined วัตถุ: obj;
เติมเต็ม:
ด้านบนคือการเพิ่มประสิทธิภาพส่วนหน้าและเคล็ดลับบางอย่างที่ฉันได้สรุปในที่ทำงาน หากคุณมีการเพิ่มประสิทธิภาพและเทคนิคที่ดีฉันหวังว่าคุณจะแสดงความคิดเห็นเพิ่มเติมได้ โดยส่วนตัวแล้วฉันคิดว่าเทคโนโลยีต้องมีการสื่อสารมากขึ้นเพื่อให้ก้าวหน้าขึ้น