บทความ IT เจ๋งๆ
6 JavaScript Best Practices ที่ช่วยเพิ่ม Performance ให้ Apps ของคุณ
02-มิ.ย.-20
คัมภีร์เทพ IT
เช่นเดียวกับภาษา Programming อื่น ๆ JavaScript เองก็มี Best Practices เพื่อให้ Program ง่ายต่อการอ่านและการ Maintain มากขึ้น ในบทความนี้คุณจะได้รู้ถึง 6 JavaScript Best Practices เพื่อเพิ่ม Performance ให้ Apps ของคุณ
1. ลดการเข้าถึง Variables และ Properties
เราควรจะลดจำนวนการเข้าถึง Variables และ Object Properties ใน Apps ของเรา
เนื่องจากทุกครั้งที่เราเข้าถึง Variables และ Object Properties บ่อย ๆ จะทำให้ CPU ต้องเข้าถึง Item ใน Memory ซ้ำแล้วซ้ำอีก เพื่อคำนวณผลลัพธ์ ดังนั้น เราจึงควรทำสิ่งนี้ให้น้อยที่สุด
ตัวอย่างเช่น หากเรามีการวน Loop เราก็ไม่ควรเขียนแบบนี้:
แต่เราควรเขียนแบบนี้แทน:
ด้วยวิธีการข้างต้น arr.length จะถูกอ้างถึงเพียงครั้งเดียวใน Loop แทนที่จะต้องเข้าถึงทุกครั้งที่มีการวน Loop
2. วิธีที่เร็วที่สุดในการวน Loop ของ Variables
ใน JavaScript มีหลายวิธีในการ Iterate หนึ่งในนั้นก็คือ For Loop นอกจากนี้ยังมี For...of Loop, forEach Method สำหรับ Arrays ส่วน Map และ Filter ก็สามารถใช้กับการวน Loop ค่าต่าง ๆ ใน Arrays ได้ นอกจากนี้ยังมี While Loop อีกด้วย
จากวิธีการต่าง ๆ ทั้งหมดที่ใช้ในการวน Loop ดูเหมือน For Loop จะเป็นวิธีที่เร็วที่สุด ไม่ว่าจะใช้หรือไม่ใช้ length เหมือนอย่างที่เราทำในตัวอย่างข้อที่แล้วก็ตาม แต่บางครั้งการใช้ length ก็ช่วยทำให้ Loop ทำงานได้ดีขึ้น
Browser Engines บางตัว มีการช่วย Optimize For Loop โดยที่ไม่ต้องใช้ length Property แต่อย่างใด
While Loop ประเภทที่เป็น Decrementing Index จะช้ากว่า For Loop ประมาณ 1.5 เท่า ส่วนการใช้ forEach Loop นั้น จะช้ากว่า For Loop ถึง 10 เท่า ดังนั้น ถ้าเลี่ยงได้ก็ควรเลี่ยงโดยเฉพาะอย่างยิ่งกับ Arrays ที่มีขนาดใหญ่
คุณสามารถดูข้อมูลอ้างอิงได้จากที่นี่
3. ลดการเข้าถึง DOM
ทุกครั้งที่มีการเข้าถึง DOM, ตัว Browser จะต้องดึง Element จาก Web Page แล้วทำการสร้าง Object จากนั้นก็ทำการ Return กลับไป
เพื่อลดการเข้าถึง DOM เราควร Set ค่า DOM Node Objects ให้เป็น Variable หากเราต้องการที่จะเข้าจัดการหรือเปลี่ยนแปลงมันมากกว่าหนึ่งครั้ง
ตัวอย่างเช่น หากเรามี HTML ดังต่อไปนี้ และเราต้องการ Set ค่า Text ให้มันภายในไม่กี่วินาที:
เราสามารถเขียน Code เพื่อทำในสิ่งที่ต้องการ ได้ดังต่อไปนี้:
จาก Code ข้างต้น เรามีหนึ่ง Function ที่รับ HTML Element ที่เราต้องการจะจัดการมัน และ Text Content ที่เราต้องการจะ Set ค่าให้
โดย setText Function จะทำการ Return “Promise” ที่ Set ค่า Text ให้กับ Elements ที่กำหนดไว้ หลังจากผ่านไป 3 วินาที
จากนั้นเรามี async Function ที่ทำการ Set ค่า Text จำนวน 3 ครั้ง ส่วนที่สำคัญคือ เราได้ส่งผ่านการอ้างอิงถึง Element ในการ Call แต่ละครั้ง ด้วยวิธีการนี้ เราไม่จำเป็นต้องรับ Element จาก Web Page ถึง 3 ครั้ง ซึ่งเป็นการดำเนินการที่มากเกินความจำเป็น
4. ลดขนาดของ DOM
การแสดงผล DOM Tree นั้นค่อนข้างช้า ดังนั้น เราต้องลดขนาดของ Tree ลง
มันไม่มีวิธีแก้ไขอย่างอื่น นอกจากทำให้ Web Pages ของเรา เรียบง่ายที่สุดเท่าที่จะทำได้
การที่เรามี DOM ขนาดเล็ก จะช่วยทำให้การ Search Element ด้วย Method อย่าง querySelector, getElementById หรือ getElementsByTagName สามารถทำได้เร็วขึ้น เนื่องจากมันมีสิ่งที่ต้องมองหาน้อยลงนั่นเอง
นอกจากนี้ ประสิทธิภาพการแสดงผลของ Page จะดีขึ้นเนื่องจากไม่ต้อง Load อะไรมากมาย สิ่งนี้เป็นจริงอย่างยิ่งสำหรับ Device ที่ช้ากว่า อย่างเช่นใน Mobiles และ Tablets
5. อย่าประกาศ Variables โดยไม่จำเป็น
ทุกครั้งที่เราประกาศ Variables, ตัว Browser จะต้องสำรองพื้นที่ Memory สำหรับ Variables เหล่านั้น ดังนั้น เพื่อลดการใช้ Memory เราจึงไม่ควรประกาศ Variables โดยไม่จำเป็น
ตัวอย่างเช่น หากเรามี HTML ดังต่อไปนี้:
และเราต้องการ Set ค่า Text Content ของ p Element ซึ่งเราไม่ควรเขียนในลักษณะนี้:
เนื่องจากเรามี Variables 2 ตัว นั่นหมายความว่า Computer ของเราต้องใช้พื้นที่หน่วยความจำเพื่อเก็บ JavaScript Variables ที่มากขึ้น
แต่เราก็สามารถลดจำนวนการประกาศ Variables ลง ด้วยการเขียนแบบนี้แทน:
อย่างที่เห็น เราสามารถใช้ querySelector Method เพื่อเลือกสิ่งต่าง ๆ ด้วย CSS Selectors ซึ่งหมายความว่า เราควรใช้ Method นี้และ querySelectorAll Method เพื่อเลือก Elements เนื่องจากพวกมันทั้งคู่สามารถใช้ CSS Selectors เพื่อเลือก HTML Element Node ต่าง ๆ ได้
6. ยืดเวลาการ Load ของ Scripts
ทุกครั้งที่มีการ Load JavaScript Files, ตัว Browser จะต้อง Download File, ทำการวิเคราะห์แยะแยะ Content จากนั้นก็ Convert ไปเป็น Machine Code และ Run มัน ซึ่งเป็นการดำเนินการที่ใช้หลายขั้นตอน
เมื่อ Browser จะทำการ Download File มันจะหยุดการ Operation อื่น ๆ เอาไว้ก่อน ดังนั้น เราควรยืดเวลามันออกไปให้มากที่สุดเท่าที่จะทำได้ ซึ่งเราสามารถทำได้ด้วยการวาง script Tag ไว้ท้ายสุด อีกทั้งเรายังสามารถใช้ defer Attribute บน script Tag เพื่อทำสิ่งนี้ได้อีกด้วย
นอกจากนี้ เรายังสามารถ Run Scripts หลังจาก Page ถูก Load ด้วยการสร้าง script Elements ต่อท้ายทันที ดังนี้:
ที่มา: https://levelup.gitconnected.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด