ฉันเชื่อว่าทุกคนรู้ว่า JavaScript เป็นภาษาการพัฒนาเต็มรูปแบบและ JS สามารถเห็นได้บนเบราว์เซอร์โทรศัพท์มือถือและฝั่งเซิร์ฟเวอร์ บทความนี้จะแบ่งปันแนวทางปฏิบัติที่ดีที่สุดของ JavaScript ที่มีประสิทธิภาพเพื่อปรับปรุงความเข้าใจของคุณเกี่ยวกับ JS พื้นฐานและหลักการดำเนินการ
การจัดเก็บข้อมูล
มีปัญหาคลาสสิกในวินัยคอมพิวเตอร์ที่ได้รับการอ่านและเขียนประสิทธิภาพที่ดีที่สุดโดยการเปลี่ยนตำแหน่งของการจัดเก็บข้อมูล ใน JavaScript ที่ตั้งของการจัดเก็บข้อมูลอาจมีผลกระทบอย่างมีนัยสำคัญต่อประสิทธิภาพของรหัส หากคุณสามารถสร้างวัตถุด้วย {} อย่าใช้วัตถุใหม่ หากคุณสามารถสร้างอาร์เรย์ด้วย [] อย่าใช้อาร์เรย์ใหม่ ความเร็วในการเข้าถึงของตัวอักษรใน JS นั้นสูงกว่าวัตถุ ยิ่งตัวแปรที่ลึกกว่านั้นอยู่ในห่วงโซ่ขอบเขตยิ่งฝึกฝนที่จำเป็นสำหรับการเข้าถึงนานขึ้นเท่านั้น สำหรับตัวแปรดังกล่าวตัวแปรท้องถิ่นสามารถบันทึกผ่านแคชลดจำนวนการเข้าถึงไปยังโซ่ขอบเขตไม่มีความแตกต่างระหว่างสัญกรณ์จุด (Object.Name) และผู้ปฏิบัติงาน (วัตถุ [ชื่อ]) Safari เท่านั้นที่จะมีความแตกต่างและคะแนนจะเร็วขึ้นเสมอ
รอบ
มีลูปทั่วไปหลายอย่างใน JS:
สำหรับ (var i = 0; i <10; i ++) {// ทำบางสิ่ง} สำหรับ (var prop ในวัตถุ) {// สำหรับวัตถุลูป} [1,2]. foreach (ฟังก์ชัน (ค่า, ดัชนี, อาร์เรย์) {// loop ตามฟังก์ชัน})ไม่ต้องสงสัยเลยว่าวิธีแรกเป็นภาษาพื้นเมืองด้วยการใช้ประสิทธิภาพต่ำสุดและความเร็วที่เร็วที่สุด วิธีที่สองสำหรับการสร้างค่าใช้จ่ายมากขึ้น (ตัวแปรท้องถิ่น) ทุกการวนซ้ำและความเร็วเพียง 1/7 ของประเภทแรก เห็นได้ชัดว่าวิธีที่สามให้วิธีการวนรอบที่สะดวกยิ่งขึ้น แต่ความเร็วของมันคือ 1/8 ของลูปสามัญ ดังนั้นคุณสามารถเลือกวิธีลูปที่เหมาะสมตามสถานการณ์โครงการของคุณ
การมอบหมายงาน
แค่จินตนาการถึงการเพิ่มเหตุการณ์ในแต่ละแท็กในหน้า เราจะเพิ่ม onclick ลงในแต่ละแท็กหรือไม่? สถานการณ์นี้อาจส่งผลกระทบต่อประสิทธิภาพเมื่อมีองค์ประกอบจำนวนมากในหน้าเว็บที่ต้องผูกพันกับการประมวลผลเหตุการณ์เดียวกัน เหตุการณ์ที่มีผลผูกพันแต่ละครั้งจะเพิ่มภาระในหน้าหรือระหว่างการวิ่ง สำหรับแอพพลิเคชั่น Front-End ที่อุดมไปด้วยการผูกมัดมากเกินไปจะมีหน่วยความจำมากเกินไปในหน้าเว็บที่มีการโต้ตอบหนัก วิธีที่เรียบง่ายและสง่างามคือการมอบหมายงาน มันเป็นเวิร์กโฟลว์ตามเหตุการณ์: จับเลเยอร์โดยเลเยอร์, ไปถึงเป้าหมาย, ฟองขึ้นเลเยอร์โดยเลเยอร์ เนื่องจากมีกลไกฟองสำหรับเหตุการณ์เราสามารถจัดการกับเหตุการณ์ที่เริ่มต้นจากองค์ประกอบเด็กทั้งหมดโดยการเชื่อมโยงเหตุการณ์กับเลเยอร์ด้านนอก
document.getElementById ('เนื้อหา'). onclick = function (e) {e = e || window.event; var target = e.target || E.Srelement; // ถ้าไม่ใช่แท็กฉันจะออกถ้า (target.nodenmae! === 'a') {return} // พิมพ์ที่อยู่ลิงก์ของ console.log (target.href)}ทาสีใหม่และจัดเรียงใหม่
หลังจากเบราว์เซอร์ดาวน์โหลด HTML, CSS และ JS แล้วต้นไม้สองต้นจะถูกสร้างขึ้น: ต้นไม้ DOM และต้นไม้เรนเดอร์ เมื่อคุณสมบัติทางเรขาคณิตของ DOM เปลี่ยนไปเช่นความกว้างและความสูงของ DOM หรือสีตำแหน่งเบราว์เซอร์จะต้องคำนวณคุณสมบัติทางเรขาคณิตขององค์ประกอบใหม่และสร้างต้นไม้เรนเดอร์ใหม่ กระบวนการนี้เรียกว่าการวาดใหม่และจัดเรียงใหม่
bodystyle = document.body.style; bodystyle.color = สีแดง; bodystyle.height = 1000px; bodystyke.width = 100%;
โดยการแก้ไขคุณสมบัติทั้งสามในวิธีข้างต้นเบราว์เซอร์จะทาสีอีกสามครั้ง ในบางกรณีการลดการจัดเรียงใหม่นี้สามารถปรับปรุงประสิทธิภาพการแสดงผลของเบราว์เซอร์ วิธีการที่แนะนำมีดังนี้: ดำเนินการเพียงครั้งเดียวและสามขั้นตอนจะเสร็จสมบูรณ์:
bodystyle = document.body.style; bodystyle.csstext 'สี: สีแดง; ความสูง: 1000px; ความกว้าง: 100%';
การโหลด JavaScript
IE8, Firefox3.5 และ Chrome2 อนุญาตให้ดาวน์โหลดไฟล์ JavaScript ที่จำเป็นได้ ดังนั้น <Script> จะไม่บล็อกการดาวน์โหลดแท็กอื่น ๆ น่าเสียดายที่กระบวนการดาวน์โหลด JS จะยังคงบล็อกการดาวน์โหลดทรัพยากรอื่น ๆ เช่นรูปภาพ แม้ว่าเบราว์เซอร์ล่าสุดจะปรับปรุงประสิทธิภาพโดยการอนุญาตให้ดาวน์โหลดแบบขนาน แต่การบล็อกสคริปต์ยังคงเป็นปัญหา ดังนั้นจึงขอแนะนำให้วางแท็ก <Script> ทั้งหมดที่ด้านล่างของแท็ก <body> เพื่อลดผลกระทบต่อการเรนเดอร์ของทั้งหน้าและหลีกเลี่ยงผู้ใช้ไม่ให้ดูพื้นที่ว่างเปล่า
การปรับใช้ไฟล์ JS ประสิทธิภาพสูง
เนื่องจากคุณรู้อยู่แล้วว่าแท็ก <script> หลายแท็กจะส่งผลกระทบต่อความเร็วในการเรนเดอร์หน้าจึงไม่ยากที่จะเข้าใจว่า "การลด HTTP ที่จำเป็นสำหรับการแสดงหน้าหน้า" เป็นกฎคลาสสิกสำหรับการเร่งความเร็วเว็บไซต์ ดังนั้นการรวมไฟล์ JS ทั้งหมดในสภาพแวดล้อมผลิตภัณฑ์จะลดจำนวนคำขอดังนั้นจึงเร่งการแสดงผลหน้าเว็บ นอกเหนือจากการรวมไฟล์ JS แล้วเรายังสามารถบีบอัดไฟล์ JS ได้ การบีบอัดหมายถึงการถอดชิ้นส่วนของไฟล์ที่ไม่เกี่ยวข้องกับการรัน เนื้อหาที่ถูกถอดออกรวมถึงตัวละครช่องว่างและความคิดเห็น กระบวนการแก้ไขมักจะสามารถลดขนาดไฟล์ลงครึ่งหนึ่ง นอกจากนี้ยังมีเครื่องมือบีบอัดบางอย่างที่ลดความยาวของตัวแปรท้องถิ่นเช่น:
var myname = "foo" + "bar"; // หลังจากการบีบอัดมันจะกลายเป็น var a = "foobar";
ไฟล์แคช JS
การแคชส่วนประกอบ HTTP สามารถปรับปรุงประสบการณ์การใช้งานการเข้าชมเว็บไซต์ได้อย่างมาก เว็บเซิร์ฟเวอร์ใช้ "Expires HTTP Response Header" เพื่อบอกลูกค้าว่าควรแคชทรัพยากรนานเท่าใด แน่นอนว่าแคชยังมีข้อบกพร่องของตัวเอง: เมื่อแอปพลิเคชันได้รับการอัพเกรดคุณต้องตรวจสอบให้แน่ใจว่าผู้ใช้ดาวน์โหลดเนื้อหาคงที่ล่าสุด ปัญหานี้สามารถแก้ไขได้โดยการเปลี่ยนชื่อไฟล์ของทรัพยากรคงที่ คุณอาจเห็นการอ้างอิงเบราว์เซอร์ JSapplication-20151123201212.js ในสภาพแวดล้อมผลิตภัณฑ์ นี่คือการบันทึกไฟล์ JS ใหม่ในการประทับเวลาดังนั้นการแก้ปัญหาของแคชที่ไม่ได้รับการอัปเดต
สรุป
แน่นอน JS ที่มีประสิทธิภาพไม่เพียง แต่เกี่ยวกับสิ่งเหล่านี้ที่สามารถปรับปรุงได้ หากการสูญเสียประสิทธิภาพบางอย่างสามารถลดลงได้เราสามารถใช้ JavaScript เพื่อพัฒนาได้อย่างมีประสิทธิภาพมากขึ้น