มีหลายวิธีในการเพิ่มประสิทธิภาพ NG ออนไลน์ แกนกลางคือทั้งหมดที่เกี่ยวกับคุณลักษณะภายในของขอบเขตของผู้เฝ้าดู $$ วันนี้ฉันจะพูดถึงอย่างอื่นสาระสำคัญยังคงไม่เปลี่ยนแปลงเพราะนี่เป็นข้อบกพร่องของ NG อย่างไรก็ตามฉันเชื่อว่าตราบใดที่คุณใช้วิธีการที่เหมาะสมปัญหาเหล่านี้ยังสามารถหลีกเลี่ยงได้
การแนะนำ
AngularJS เป็นตัวย่อเป็น NG ซึ่งเป็นกรอบ MVVM ที่ผลิตโดย Google สิ่งนี้ช่วยเพิ่มประสิทธิภาพการพัฒนาของโครงการส่วนหน้า (ในทางปฏิบัติมันสามารถปรับปรุงประสิทธิภาพการพัฒนาได้อย่างแน่นอน) มันใช้คอนโทรลเลอร์คำแนะนำและบริการเพื่อหมุนรอบโครงการทั้งหมดและใช้ DI ที่ไม่ซ้ำกันเพื่อแก้ปัญหาการโทรก่อนชั้นที่สาม สำหรับรายละเอียดเพิ่มเติมโปรดดูการวิเคราะห์ซอร์สโค้ด NG ที่ฉันเขียนไว้ก่อนหน้านี้
บาดแผลแข็งของอึ้ง
เมื่อพูดถึงข้อบกพร่องก่อนอื่นเราต้องพูดคุยเกี่ยวกับหลักการผูกมัดข้อมูลง่ายๆ
โมเดลที่กำหนดไว้ในแต่ละหน้าใน NG จะเพิ่มผู้ฟังลงในขอบเขตปัจจุบัน คอนเทนเนอร์ภายในคืออาร์เรย์ $$ Wachers ตราบใดที่รุ่นใด ๆ ในหน้าเปลี่ยนวิธีการ Digest ภายในขอบเขตจะถูกเรียกใช้ มันจะค้นหาทุกรุ่นในทรีขอบเขตปัจจุบันเพื่อให้แน่ใจว่ารุ่นในหน้าสามารถรับการซิงโครไนซ์ข้อมูลได้ดังนั้นนี่จึงใช้เวลานานมาก คำแถลงอย่างเป็นทางการคือเมื่อผู้ฟัง 2,000 คนปรากฏบนหน้าเว็บประสิทธิภาพของหน้าจะลดลงอย่างมาก ดังนั้นเพื่อปรับปรุงประสิทธิภาพของ NG คุณต้องเริ่มต้นจากด้านนี้
TIP1: การผูกมัดครั้งเดียว
อันที่จริงมีคนอื่นพูดทางออนไลน์แล้ว นี่คือการใช้งานใหม่ NG รุ่น 1.3.0+ ได้จัดเตรียมไวยากรณ์ในตัวเพื่อรองรับสถานการณ์ที่โมเดลถูกผูกไว้เพียงครั้งเดียว ดูตัวอย่างต่อไปนี้:
รหัสเก่า
การคัดลอกรหัสมีดังนี้:
สวัสดี
รหัสใหม่
การคัดลอกรหัสมีดังนี้:
สวัสดี
คุณจะเห็นว่าไวยากรณ์ใหม่คือการเพิ่ม :: ด้านหน้าของโมเดล ฉันเชื่อว่าไวยากรณ์นี้สะดวกกว่าปลั๊กอินของบุคคลที่สามที่ใช้ออนไลน์
การคัดลอกรหัสมีดังนี้:
TIP2: $ SCOPE. $ DIGEST เทียบกับ $ SCOPE. $ APPLE
ฉันเชื่อว่าหลายคนคุ้นเคยกับวิธีการใช้ $ โดยทั่วไปจะใช้เมื่อดำเนินการโค้ดในสภาพแวดล้อม NG เพื่อให้แน่ใจว่าการซิงโครไนซ์ข้อมูลของหน้าเว็บเรียกใช้วิธีการ $ หลังจากการดำเนินการรหัสจะเรียกใช้ $ digest ภายในเพื่อตรวจสอบทุกรุ่นในขอบเขต ในความเป็นจริงสิ่งนี้เรียกว่าภายในและมีเพียงตัวอย่างโค้ดเท่านั้นที่เขียนไว้ด้านล่าง
การคัดลอกรหัสมีดังนี้:
-
-
$ rootscope. $ digest
-
-
พวกเขาทั้งหมดเรียก $ digest ภายใต้ขอบเขตรูทของ $ rootscope ดังนั้นความแตกต่างระหว่าง $ digest ภายใต้ขอบเขตที่แตกต่างกันคืออะไร? ในความเป็นจริงความแตกต่างที่สำคัญที่สุดคือ
การคัดลอกรหัสมีดังนี้:
$ digest เฉพาะการค้นหาแบบลึกทุกรุ่นด้านล่างผู้โทร
ดังนั้นเมื่อเทียบกับ $ SCOPE, $ ROOTSCOPE มันช่วยประหยัดเวลาได้มากในการค้นหารุ่น
อย่างไรก็ตามหากคุณต้องการให้แน่ใจว่าการซิงโครไนซ์ของข้อมูลโมเดลทั้งหมดในหน้าคุณยังต้องโทรไปที่ $ rootscope ดังนั้นจึงเป็นการดีที่สุดที่จะคิดเกี่ยวกับข้อมูลที่ควรซิงโครไนซ์ก่อนเขียนรหัส
TIP3: โทรหา ng-repeat ให้น้อยที่สุด
NG-Repeat จะสร้างผู้ฟังจำนวนมากโดยค่าเริ่มต้นดังนั้นเมื่อปริมาณข้อมูลมีขนาดใหญ่จะใช้ประสิทธิภาพของหน้าเว็บ ฉันคิดว่า NG-Repeat เป็นสิ่งจำเป็นเฉพาะเมื่อคุณต้องการอัปเดตรายการข้อมูลบ่อยครั้งมิฉะนั้นจะเป็นการเสียที่จะทำให้ผู้ฟังจำนวนมากอยู่ที่นั่น ในเวลานี้คุณสามารถใช้บริการ $ Interpolate ของ NG เพื่อแยกวิเคราะห์ตัวอย่างโค้ดซึ่งคล้ายกับเอ็นจิ้นเทมเพลตแบบคงที่ซึ่งส่วนใหญ่อาศัยบริการการแยกวิเคราะห์หลักของ NG $ parse จากนั้นกำหนดตัวอย่างโค้ดเหล่านี้โดยตรงหลังจากกรอกข้อมูลให้กับโมเดลครั้งเดียว
TIP4: ลองเขียนไวยากรณ์ดั้งเดิมในคำสั่ง
แม้ว่า NG จะให้คำแนะนำมากมายเช่น NG-Show และ NG-hide แต่ฟังก์ชั่นของพวกเขาคือการแสดงหรือซ่อนตัวอย่างโค้ดตามความจริงและเท็จของโมเดล แม้ว่าจะสามารถใช้ข้อกำหนดทางธุรกิจได้อย่างรวดเร็ว แต่คำแนะนำเหล่านี้จะยังคงเพิ่มผู้ฟังตามค่าเริ่มต้น หากรหัสตัวอย่างเหล่านี้มีอยู่ในคำสั่งขนาดใหญ่วิธีที่ดีกว่าคือการเขียนวิธี JQ ที่คล้ายกันเช่น. show () และ. hide () ในลิงค์คำสั่งเพื่อควบคุมซึ่งสามารถบันทึกจำนวนผู้ฟังและคำแนะนำเหตุการณ์ที่คล้ายกัน สิ่งเหล่านี้สามารถผูกเหตุการณ์ในคำแนะนำต่อพ่วงโดยใช้ addeventListener อย่างไรก็ตามก่อนที่จะเขียนโค้ดควรคิดเกี่ยวกับวิธีลดจำนวนผู้ฟังให้น้อยที่สุดเพื่อให้ประสิทธิภาพของหน้าสามารถปรับปรุงได้อย่างละเอียด
TIP5: ใช้ตัวกรองให้น้อยที่สุดในหน้า
เมื่อเพิ่มตัวกรองที่อยู่ด้านหลังโมเดลในหน้าสิ่งนี้จะทำให้โมเดลปัจจุบันทำงานสองครั้งใน $ Digest ทำให้เกิดการสูญเสียประสิทธิภาพที่ไม่จำเป็น ครั้งแรกคือเมื่องานตรวจจับของผู้เฝ้าดู $$ เปลี่ยนไป ครั้งที่สองเกิดขึ้นเมื่อมีการแก้ไขค่าโมเดลดังนั้นลองใช้ไวยากรณ์ตัวกรองเมื่ออินไลน์น้อยที่สุด เช่นสิ่งต่อไปนี้ส่งผลกระทบอย่างมากต่อประสิทธิภาพของหน้าเว็บ
ขอแนะนำให้ใช้บริการ $ Filter เพื่อเรียกใช้ฟังก์ชันตัวกรองในพื้นหลังซึ่งสามารถปรับปรุงประสิทธิภาพของหน้าได้อย่างมีนัยสำคัญ รหัสมีดังนี้
การคัดลอกรหัสมีดังนี้:
$ filter ('ตัวกรอง') (อาร์เรย์, นิพจน์, ตัวเปรียบเทียบ);
สรุป
ข้างต้นเป็นเคล็ดลับในการปรับปรุงประสิทธิภาพของโครงการ NG แม้ว่า NG นั้นมีประสิทธิภาพมาก แต่รหัสที่ผิดปกติก็จะทำลายประสิทธิภาพของมันเช่นกัน ดังนั้นจึงเป็นการดีที่สุดที่จะคิดว่าไม่จำเป็นต้องใช้ผู้ฟังก่อนเขียนโค้ด