การเพิ่มประสิทธิภาพ — ส่วนที่ 3

ในส่วนที่ 3 ของซีรีส์ “การเพิ่มประสิทธิภาพ” ของฉัน คุณจะได้เรียนรู้วิธีทำให้โครงการเว็บของคุณมีประสิทธิภาพและรวดเร็วยิ่งขึ้นโดยการปรับ DOM ให้เหมาะสม

จำกัดจำนวนองค์ประกอบ HTML

โครงสร้าง DOM ขนาดใหญ่อาจทำให้ประสิทธิภาพเว็บไซต์ของคุณช้าลง คุณควรจำกัดจำนวนโหนด HTML ให้มากที่สุด เมื่อโหลดเพจ — ในโลกที่สมบูรณ์แบบ — ควรแสดงเฉพาะโหนดที่ผู้ใช้มองเห็นได้ เนื้อหาที่ปรากฏหลังจากการเลื่อนเท่านั้นหรือเช่น โมดอลที่เปิดหลังจากการโต้ตอบเท่านั้นควรรวมเข้ากับ DOM เท่านั้น คุณควรลบโหนดที่เคยใช้แต่ไม่จำเป็นอีกต่อไปแล้ว

เมื่อใช้ Bootstrap กับ flexbox คุณจะมีโครงสร้าง DOM ที่ลึกกว่าเมื่อใช้ grid โดยอัตโนมัติ คุณสามารถละเว้นระดับขององค์ประกอบแถวได้อย่างสมบูรณ์ที่นี่ และคุณสามารถควบคุมเค้าโครงได้โดยระบุที่อยู่คอนเทนเนอร์หลัก:

/* Using Bootstrap with flexbox */
<div class="container">
  <div class="row">
    <div class="gr-4">...</div>
    <div class="gr-8">...</div>
  </div>
  <div class="row">
    <div class="gr-4">...</div>
    <div class="gr-8">...</div>
  </div>
</div>

/* Using grid without Bootstrap */
<div class="container">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

ผู้สังเกตการณ์ทางแยกเพื่อช่วยเหลือ

คุณสามารถใช้ IntersectionObserver API เพื่อตรวจจับเวลาและสถานที่ที่ผู้ใช้เลื่อนหน้าจอ เพื่อให้คุณสามารถโหลดเนื้อหาของคุณแบบ Lazy Loading ได้ ดูตัวอย่างรูปภาพและส่วนประกอบการโหลดแบบ Lazy Load ในส่วนการโหลดแบบ Lazy Load ใน "ส่วนหนึ่งของซีรีส์การเพิ่มประสิทธิภาพการทำงานของฉัน"

ขนาดการถ่ายโอนที่ต่ำกว่า

หากคุณใช้องค์ประกอบ DOM น้อยลง ขนาดการถ่ายโอนข้อมูลก็จะลดลงด้วย ซึ่งจะทำให้ผู้ใช้อุปกรณ์มือถือพอใจเป็นพิเศษ

ในขณะเดียวกัน ปริมาณการใช้ข้อมูลและภาระบนเซิร์ฟเวอร์ก็ลดลง ซึ่งเป็นข้อดีสำหรับสภาพแวดล้อมของเราด้วย นอกจากนี้ เซิร์ฟเวอร์ยังสามารถส่งเว็บไซต์ได้เร็วขึ้นเมื่อมีภาระงานต่ำได้ง่ายขึ้น

ประสิทธิภาพรันไทม์และประสิทธิภาพของหน่วยความจำ

DOM ขนาดใหญ่ที่มีกฎ CSS ที่ซับซ้อนจำนวนมากอาจทำให้การแสดงผลหน้าเว็บของคุณช้าลงได้

หากคุณมีขนาด DOM มากเกินไปและคุณใช้ตัวเลือกการค้นหาทั่วไป เช่น document.querySelectorAll('div') คุณสามารถจัดเก็บการอ้างอิงไปยังโหนดจำนวนมากได้ ซึ่งอาจทำให้หน่วยความจำของอุปกรณ์ของผู้ใช้ของคุณแทบจะคุกเข่าลงได้

หลีกเลี่ยงการอัพเดตโหนดพาเรนต์

หากคุณจัดการคุณสมบัติ CSS ของโหนดพาเรนต์โดยใช้ JavaScript ก็อาจส่งผลให้องค์ประกอบย่อยทั้งหมดต้องถูกเรนเดอร์ใหม่เช่นกัน ดังนั้นควรพยายามจัดการกับองค์ประกอบทางตรงเสมอ ซึ่งจะทำให้มีการคำนวณใหม่น้อยที่สุด

ส่ง HTML แบบคงที่

ให้ฝั่งเซิร์ฟเวอร์สร้าง HTML ของคุณสำหรับเส้นทางการเรนเดอร์ที่สำคัญล่วงหน้า ถ้าเป็นไปได้ HTML ไม่ควรถูกสร้างขึ้นโดยภาษาเซิร์ฟเวอร์เมื่อมีการเรียก แต่ควรใช้ภาษาสคริปต์ของเซิร์ฟเวอร์เพื่อจัดเก็บและแคช HTML ที่แสดงผลแล้วเป็นไฟล์ ซึ่งจะช่วยประหยัดค่าใช้จ่าย (เช่น การเชื่อมต่อฐานข้อมูล) ในการประกอบเพจเป็นอันดับแรกเมื่อผู้ใช้มาถึงเว็บไซต์ของคุณ

โครงสร้างพื้นฐานของเว็บไซต์ HTML คงที่ บางครั้งเป็นสิ่งที่คุณต้องการสำหรับเส้นทางการเรนเดอร์ที่สำคัญ อาจมีลักษณะดังนี้:

<html>
<head>...</head>
<body>
  <div class="wrap">
    <header class="header">
      <img class="header--logo" src="logo.svg" alt="Logo">
      <nav class="header--nav">
        <ul>
          <li><a href="">Home</a></li>
          ...
        </ul>
      </nav>
    </header>

    <section class="content">
      <h1>Welcome</h1>
      <p>Teaser Text</p>
    </section>

    <!-- insert dynamic content here -->

    <footer class="footer">...</footer>
  </div>
</body>
</html>

หากต้องการเพิ่มเนื้อหาเพิ่มเติมให้กับ DOM ที่ไม่ส่งผลต่อเส้นทางการเรนเดอร์ที่สำคัญ มีหลายวิธีที่จะตามมาในตอนนี้...

อาคาร

การโหลดแบบ Lazy Loading ด้วยส่วนหน้าหมายถึงการโหลดส่วนประกอบของบุคคลที่สามล่าช้า โดยมี HTML แบบคงที่หรือรูปภาพถูกโหลดก่อน ซึ่งจะถูกแทนที่ด้วยส่วนประกอบที่ถูกต้องเมื่อผู้ใช้โต้ตอบเท่านั้น วิธีนี้ช่วยประหยัดการโหลดข้อมูลภายนอกโดยไม่จำเป็น ซึ่งส่วนใหญ่เป็น JavaScript ซึ่งเรามักไม่มีโอกาสปรับประสิทธิภาพให้เหมาะสม

ตามข้อมูลของ Google ควรเพิ่มส่วนหน้าให้กับ DOM ในระหว่างเหตุการณ์ onload ของเว็บไซต์ โดยวางเมาส์ไว้เหนือ จากนั้นจะสามารถเชื่อมต่อกับแหล่งข้อมูลของบุคคลที่สามล่วงหน้าได้ และเพียงคลิกเดียวเท่านั้นที่ส่วนหน้าจะแลกเปลี่ยนกับเนื้อหาของบุคคลที่สาม

การใช้งานด้านหน้าอาคารที่ดี ได้แก่ Google Maps วิดเจ็ตปฏิทิน หรือเครื่องเล่นวิดีโอ เช่น จาก YouTube หรือ Vimeo

เงา DOM

ตอนนี้เรามาดูด้านมืดของ DOM กันดีกว่า...

Shadow DOM ใช้เพื่อสร้างองค์ประกอบ HTML แบบกำหนดเอง — ที่เรียกว่าส่วนประกอบของเว็บ — ซึ่งแนบไปกับ DOM ผ่านทางรูทเงา การปรับเปลี่ยน DOM บางอย่าง (การเพิ่มหรือการลบโหนด HTML) อาจนำไปสู่การจัดเรียงใหม่และทาสีเค้าโครงใหม่ ซึ่งอาจส่งผลเสียต่อประสบการณ์ของผู้ใช้ การจัดการภายใน Shadow DOM จะไม่ส่งผลต่อ DOM ดังนั้นจึงไม่ทำให้เกิดการทาสีใหม่หรือการจัดเรียงใหม่ ซึ่งอาจทำให้การเรนเดอร์ใหม่เร็วขึ้นได้

ในตัวอย่างต่อไปนี้ คุณสามารถดูวิธีการเพิ่มสไตล์ชีตภายนอกให้กับ Shadow DOM ในทำนองเดียวกัน องค์ประกอบ HTML อื่นๆ ก็สามารถสร้างได้ใน Shadow DOM

// Create an external stylesheet
const style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("href", "style.css");

// Create the shadow root
const shadow = this.attachShadow({ mode: "open" });

// Attach the created stylesheet to the shadow DOM
shadow.appendChild(style);

อ่านเพิ่มเติมเกี่ยวกับ Shadow DOM ในส่วน "ลิงก์ที่มีประโยชน์" ด้านล่าง

เอกสารแฟรกเมนต์

ด้วยอินเทอร์เฟซ JavaScript DocumentFragment คุณสามารถสร้างโหนด DOM และเพิ่มลงใน DOM ที่ใช้งานอยู่ได้

เช่นเดียวกับ Shadow DOM การเปลี่ยนแปลง DocumentFragment จะไม่ส่งผลกระทบต่อส่วนที่เหลือของ DOM และไม่ลดประสิทธิภาพการทำงาน

// Create a list of fruits
let fruits = ['Apple', 'Banana', 'Cherry', 'Pineapple'];

// Grab a empty <ul> element with the id #fruits existing in your HTML
let fruitsUl = document.querySelector('#fruits');

// Create a document fragment
let fragment = new DocumentFragment();

// Append content to the fragment
fruits.forEach((fruit) => {
    let li = document.createElement('li');
    li.innerHTML = fruit;
    fragment.appendChild(li);
});

// Append the fragment to your <ul>
fruitsUl.appendChild(fragment);

DOM เสมือน — การให้น้ำ

Hydration เป็นเทคโนโลยีที่ให้ HTML แบบคงที่ก่อน เพิ่มการโต้ตอบกับองค์ประกอบในภายหลังโดยการสร้างสิ่งที่เรียกว่า Virtual DOM ในกรณีของภาวะขาดน้ำบางส่วน ไม่ใช่ว่าทุกองค์ประกอบจะได้รับน้ำ แต่จะมีเฉพาะองค์ประกอบที่มีพฤติกรรมโต้ตอบเท่านั้น ที่นี่ คุณจะได้รับประโยชน์จากการแสดงผลฝั่งเซิร์ฟเวอร์เพื่อปรับปรุง First Input Delay (FID) ของการวัดของ Google

อีกทางเลือกหนึ่งคือการให้ความชุ่มชื้นแบบก้าวหน้า โดยที่แต่ละส่วนประกอบจะถูกโหลดในภายหลังทันทีที่มองเห็นได้บนหน้าจอ

ไฮเดรชั่นถูกใช้โดยเฉพาะสำหรับการใช้งานหน้าเดียว เฟรมเวิร์กเช่น React หรือ NextJS ใช้ไฮเดรชั่น

ลิงค์ที่มีประโยชน์

อะไรต่อไป?

ในส่วนถัดไปของซีรีส์การเพิ่มประสิทธิภาพของฉัน ฉันจะมุ่งเน้นไปที่การเพิ่มประสิทธิภาพเซิร์ฟเวอร์ของคุณและความเร็วหน้าของ JavaScript

คอยติดตาม…

การเพิ่มประสิทธิภาพ — ส่วนที่ 3 — DOM

จำกัดจำนวนองค์ประกอบ HTML

ผู้สังเกตการณ์ทางแยกเพื่อช่วยเหลือ

ขนาดการถ่ายโอนที่ต่ำกว่า

ประสิทธิภาพรันไทม์และประสิทธิภาพของหน่วยความจำ

หลีกเลี่ยงการอัพเดตโหนดพาเรนต์

ส่ง HTML แบบคงที่

อาคาร

เงา DOM

เอกสารแฟรกเมนต์

DOM เสมือน — การให้น้ำ

ลิงค์ที่มีประโยชน์

หลีกเลี่ยงขนาด DOM ที่มากเกินไป

โหลดขี้เกียจด้วยด้านหน้า

เงา DOM

เอกสารแฟรกเมนต์

การให้ความชุ่มชื้น

วิดีโอข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

อะไรต่อไป?

คำถามในหัวข้อ