การโปรไฟล์ React Scheduler: เปิดเผยการทำงานของ Task เพื่อประสิทธิภาพสูงสุด

ในโลกของการพัฒนาเว็บสมัยใหม่ การมอบประสบการณ์ผู้ใช้ที่ราบรื่นและตอบสนองได้ดีเป็นสิ่งสำคัญยิ่ง React ซึ่งมีสถาปัตยกรรมแบบคอมโพเนนต์และ Virtual DOM ได้กลายเป็นรากฐานสำคัญสำหรับการสร้าง UI ที่ซับซ้อน อย่างไรก็ตาม แม้จะมีการปรับปรุงประสิทธิภาพของ React แล้ว ปัญหาคอขวดด้านประสิทธิภาพก็ยังสามารถเกิดขึ้นได้ โดยเฉพาะในแอปพลิเคชันขนาดใหญ่และซับซ้อน การทำความเข้าใจว่า React จัดการและดำเนินการกับ Task อย่างไรเป็นสิ่งสำคัญในการระบุและแก้ไขปัญหาด้านประสิทธิภาพเหล่านี้ บทความนี้จะเจาะลึกเข้าไปในโลกของการโปรไฟล์ React Scheduler โดยให้คำแนะนำที่ครอบคลุมในการวิเคราะห์การทำงานของ Task และปรับปรุงแอปพลิเคชัน React ของคุณให้มีประสิทธิภาพสูงสุด

ทำความเข้าใจ React Scheduler

ก่อนที่จะลงลึกในเทคนิคการโปรไฟล์ เรามาสร้างความเข้าใจพื้นฐานเกี่ยวกับ React Scheduler กันก่อน React Scheduler มีหน้าที่รับผิดชอบในการจัดการการทำงานภายในแอปพลิเคชัน React โดยจะจัดลำดับความสำคัญของ Task แบ่งออกเป็นหน่วยงานย่อยๆ และจัดตารางเวลาให้ดำเนินการในลักษณะที่ลดการบล็อก Main thread การจัดตารางเวลานี้มีความสำคัญอย่างยิ่งต่อการรักษาอินเทอร์เฟซผู้ใช้ที่ตอบสนองได้ดี

React ใช้สถาปัตยกรรม Fiber ซึ่งช่วยให้สามารถแบ่งการเรนเดอร์ออกเป็นหน่วยงานย่อยๆ ที่สามารถขัดจังหวะได้ หน่วยเหล่านี้เรียกว่า Fibers และ React Scheduler จะจัดการ Fibers เหล่านี้เพื่อให้แน่ใจว่า Task ที่มีความสำคัญสูง (เช่น การป้อนข้อมูลจากผู้ใช้) จะได้รับการจัดการอย่างรวดเร็ว Scheduler ใช้ Priority Queue เพื่อจัดการ Fibers ซึ่งช่วยให้สามารถจัดลำดับความสำคัญของการอัปเดตตามความเร่งด่วน

แนวคิดหลัก:

• Fiber: หน่วยของงานที่แสดงถึงอินสแตนซ์ของคอมโพเนนต์
• Scheduler: โมดูลที่รับผิดชอบในการจัดลำดับความสำคัญและจัดตารางเวลาของ Fibers
• WorkLoop: ฟังก์ชันที่วนซ้ำผ่าน Fiber tree และทำการอัปเดต
• Priority Queue: โครงสร้างข้อมูลที่ใช้ในการจัดการ Fibers ตามลำดับความสำคัญ

ความสำคัญของการโปรไฟล์

การโปรไฟล์คือกระบวนการวัดและวิเคราะห์ลักษณะการทำงานของแอปพลิเคชันของคุณ ในบริบทของ React การโปรไฟล์ช่วยให้คุณเข้าใจว่า React Scheduler ดำเนินการกับ Task อย่างไร, ระบุการทำงานที่ใช้เวลานาน และชี้ไปยังจุดที่การปรับปรุงประสิทธิภาพจะส่งผลกระทบมากที่สุด หากไม่มีการโปรไฟล์ คุณก็เหมือนกับการบินโดยไม่มีเครื่องนำทาง ต้องอาศัยการคาดเดาเพื่อปรับปรุงประสิทธิภาพ

ลองนึกถึงสถานการณ์ที่แอปพลิเคชันของคุณมีความหน่วงที่เห็นได้ชัดเมื่อผู้ใช้โต้ตอบกับคอมโพเนนต์บางตัว การโปรไฟล์สามารถเปิดเผยได้ว่าความหน่วงนั้นเกิดจากการเรนเดอร์ที่ซับซ้อนภายในคอมโพเนนต์นั้น, กระบวนการดึงข้อมูลที่ไม่มีประสิทธิภาพ หรือการ re-render ที่มากเกินไปซึ่งเกิดจากการอัปเดต state เมื่อระบุสาเหตุที่แท้จริงได้แล้ว คุณจะสามารถมุ่งเน้นความพยายามในการปรับปรุงประสิทธิภาพไปยังส่วนที่จะให้ผลลัพธ์ที่ดีที่สุดได้

เครื่องมือสำหรับการโปรไฟล์ React Scheduler

มีเครื่องมือที่ทรงพลังหลายอย่างสำหรับการโปรไฟล์แอปพลิเคชัน React และการทำความเข้าใจการทำงานของ Task ภายใน React Scheduler:

1. แท็บ Performance ใน Chrome DevTools

แท็บ Performance ใน Chrome DevTools เป็นเครื่องมืออเนกประสงค์สำหรับการโปรไฟล์แง่มุมต่างๆ ของเว็บแอปพลิเคชัน รวมถึงประสิทธิภาพของ React มันให้ไทม์ไลน์โดยละเอียดของกิจกรรมทั้งหมดที่เกิดขึ้นในเบราว์เซอร์ รวมถึงการทำงานของ JavaScript, การเรนเดอร์, การวาดภาพ และการร้องขอเครือข่าย โดยการบันทึกโปรไฟล์ประสิทธิภาพขณะโต้ตอบกับแอปพลิเคชัน React ของคุณ คุณสามารถระบุคอขวดของประสิทธิภาพและวิเคราะห์การทำงานของ Task ใน React ได้

วิธีใช้งาน:

1. เปิด Chrome DevTools (Ctrl+Shift+I หรือ Cmd+Option+I)
2. ไปที่แท็บ "Performance"
3. คลิกปุ่ม "Record"
4. โต้ตอบกับแอปพลิเคชัน React ของคุณเพื่อกระตุ้นพฤติกรรมที่คุณต้องการโปรไฟล์
5. คลิกปุ่ม "Stop" เพื่อหยุดการบันทึก
6. วิเคราะห์ไทม์ไลน์ที่สร้างขึ้นเพื่อระบุคอขวดของประสิทธิภาพ

แท็บ Performance มีมุมมองต่างๆ สำหรับการวิเคราะห์ข้อมูลที่บันทึกไว้ ได้แก่:

• Flame Chart: แสดงภาพ Call Stack ของฟังก์ชัน JavaScript ช่วยให้คุณระบุฟังก์ชันที่ใช้เวลามากที่สุด
• Bottom-Up: รวบรวมเวลาที่ใช้ในแต่ละฟังก์ชันและฟังก์ชันที่ถูกเรียก ช่วยให้คุณระบุการทำงานที่สิ้นเปลืองที่สุด
• Call Tree: แสดง Call Stack ในรูปแบบลำดับชั้น ทำให้เห็นภาพรวมของขั้นตอนการทำงานที่ชัดเจน

ภายในแท็บ Performance ให้มองหารายการที่เกี่ยวข้องกับ React เช่น "Update" (แสดงถึงการอัปเดตคอมโพเนนต์) หรือ "Commit" (แสดงถึงการเรนเดอร์ DOM ที่อัปเดตแล้วขั้นสุดท้าย) รายการเหล่านี้สามารถให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับเวลาที่ใช้ในการเรนเดอร์คอมโพเนนต์

2. React DevTools Profiler

React DevTools Profiler เป็นเครื่องมือพิเศษที่สร้างขึ้นสำหรับการโปรไฟล์แอปพลิเคชัน React โดยเฉพาะ มันให้มุมมองที่เน้นไปที่การทำงานภายในของ React ทำให้ง่ายต่อการระบุปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับการเรนเดอร์คอมโพเนนต์, การอัปเดต state และการเปลี่ยนแปลงของ prop

การติดตั้ง:

React DevTools Profiler มีให้บริการในรูปแบบส่วนขยายเบราว์เซอร์สำหรับ Chrome, Firefox และ Edge คุณสามารถติดตั้งได้จากร้านค้าส่วนขยายของเบราว์เซอร์นั้นๆ

การใช้งาน:

1. เปิดแผง React DevTools ในเบราว์เซอร์ของคุณ
2. ไปที่แท็บ "Profiler"
3. คลิกปุ่ม "Record"
4. โต้ตอบกับแอปพลิเคชัน React ของคุณเพื่อกระตุ้นพฤติกรรมที่คุณต้องการโปรไฟล์
5. คลิกปุ่ม "Stop" เพื่อหยุดการบันทึก

Profiler มีสองมุมมองหลักสำหรับการวิเคราะห์ข้อมูลที่บันทึกไว้:

• Flamegraph: การแสดงผลแบบภาพของ Component Tree โดยแต่ละแท่งแสดงถึงคอมโพเนนต์และความกว้างของมันแสดงถึงเวลาที่ใช้ในการเรนเดอร์คอมโพเนนต์นั้น
• Ranked: รายการคอมโพเนนต์ที่จัดอันดับตามเวลาที่ใช้ในการเรนเดอร์ ช่วยให้คุณระบุคอมโพเนนต์ที่สิ้นเปลืองที่สุดได้อย่างรวดเร็ว

React DevTools Profiler ยังมีคุณสมบัติสำหรับ:

• การเน้นการอัปเดต: เน้นให้เห็นภาพคอมโพเนนต์ที่กำลัง re-render ช่วยให้คุณระบุการ re-render ที่ไม่จำเป็นได้
• การตรวจสอบ props และ state ของคอมโพเนนต์: ตรวจสอบ props และ state ของคอมโพเนนต์เพื่อทำความเข้าใจว่าทำไมจึง re-render
• การกรองคอมโพเนนต์: มุ่งเน้นไปที่คอมโพเนนต์เฉพาะหรือส่วนต่างๆ ของ Component Tree

3. คอมโพเนนต์ React.Profiler

คอมโพเนนต์ React.Profiler เป็น API ที่มากับ React ซึ่งช่วยให้คุณสามารถวัดประสิทธิภาพการเรนเดอร์ของส่วนต่างๆ ในแอปพลิเคชันของคุณได้ มันเป็นวิธีการเก็บข้อมูลโปรไฟล์ผ่านโค้ดโดยไม่ต้องพึ่งพาเครื่องมือภายนอก

การใช้งาน:

ครอบคอมโพเนนต์ที่คุณต้องการโปรไฟล์ด้วยคอมโพเนนต์ React.Profiler ระบุ id prop เพื่อระบุ profiler และ onRender prop ซึ่งเป็นฟังก์ชัน callback ที่จะถูกเรียกหลังจากการเรนเดอร์แต่ละครั้ง

import React from 'react';

function MyComponent() {
  return (
    
      {/* เนื้อหาคอมโพเนนต์ */}
    
  );
}

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set
) {
  console.log(`Component ${id} rendered`);
  console.log(`Phase: ${phase}`);
  console.log(`Actual duration: ${actualDuration}ms`);
  console.log(`Base duration: ${baseDuration}ms`);
}

ฟังก์ชัน callback onRender จะได้รับอาร์กิวเมนต์หลายตัวที่ให้ข้อมูลเกี่ยวกับกระบวนการเรนเดอร์:

• id: id prop ของคอมโพเนนต์ React.Profiler
• phase: บ่งชี้ว่าคอมโพเนนต์เพิ่งถูก mount หรือ update
• actualDuration: เวลาที่ใช้ในการเรนเดอร์คอมโพเนนต์ในการอัปเดตนี้
• baseDuration: เวลาโดยประมาณในการเรนเดอร์ Component Tree โดยไม่มี memoization
• startTime: เวลาที่ React เริ่มเรนเดอร์การอัปเดตนี้
• commitTime: เวลาที่ React commit การอัปเดตนี้
• interactions: เซตของ "interactions" ที่กำลังถูกติดตามเมื่อการอัปเดตนี้ถูกจัดตารางเวลา

คุณสามารถใช้ข้อมูลนี้เพื่อติดตามประสิทธิภาพการเรนเดอร์ของคอมโพเนนต์และระบุส่วนที่ต้องการการปรับปรุง

การวิเคราะห์ข้อมูลโปรไฟล์

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

1. การระบุคอมโพเนนต์ที่เรนเดอร์ช้า

มุมมอง Flamegraph และ Ranked ใน React DevTools Profiler มีประโยชน์อย่างยิ่งในการระบุคอมโพเนนต์ที่ใช้เวลาเรนเดอร์นาน มองหาคอมโพเนนต์ที่มีแท่งกว้างใน Flamegraph หรือคอมโพเนนต์ที่ปรากฏอยู่ด้านบนของรายการ Ranked คอมโพเนนต์เหล่านี้มักจะเป็นเป้าหมายที่ดีสำหรับการปรับปรุง

ในแท็บ Performance ของ Chrome DevTools ให้มองหารายการ "Update" ที่ใช้เวลามาก รายการเหล่านี้แสดงถึงการอัปเดตคอมโพเนนต์ และเวลาที่ใช้ภายในรายการเหล่านี้บ่งชี้ถึงต้นทุนการเรนเดอร์ของคอมโพเนนต์ที่เกี่ยวข้อง

2. การค้นหาการ Re-render ที่ไม่จำเป็น

การ re-render ที่ไม่จำเป็นสามารถส่งผลกระทบต่อประสิทธิภาพได้อย่างมาก โดยเฉพาะในแอปพลิเคชันที่ซับซ้อน React DevTools Profiler สามารถช่วยคุณระบุคอมโพเนนต์ที่ re-render แม้ว่า props หรือ state ของมันจะไม่ได้เปลี่ยนแปลง

เปิดใช้งานตัวเลือก "Highlight updates when components render" ในการตั้งค่า React DevTools สิ่งนี้จะเน้นคอมโพเนนต์ที่กำลัง re-render ด้วยสายตา ทำให้ง่ายต่อการตรวจจับการ re-render ที่ไม่จำเป็น ตรวจสอบสาเหตุที่คอมโพเนนต์เหล่านี้ re-render และใช้เทคนิคเพื่อป้องกัน เช่น การใช้ React.memo หรือ useMemo

3. การตรวจสอบการคำนวณที่ใช้ทรัพยากรสูง

การคำนวณที่ใช้เวลานานภายในคอมโพเนนต์ของคุณสามารถบล็อก Main thread และทำให้เกิดปัญหาด้านประสิทธิภาพได้ แท็บ Performance ของ Chrome DevTools เป็นเครื่องมือที่มีค่าในการระบุการคำนวณเหล่านี้

มองหาฟังก์ชัน JavaScript ที่ใช้เวลามากในมุมมอง Flame Chart หรือ Bottom-Up ฟังก์ชันเหล่านี้อาจกำลังทำการคำนวณที่ซับซ้อน, การแปลงข้อมูล หรือการทำงานที่สิ้นเปลืองอื่นๆ พิจารณาปรับปรุงฟังก์ชันเหล่านี้โดยใช้ memoization, caching หรืออัลกอริทึมที่มีประสิทธิภาพมากขึ้น

4. การวิเคราะห์ Network Requests

Network requests ก็สามารถทำให้เกิดคอขวดด้านประสิทธิภาพได้เช่นกัน โดยเฉพาะอย่างยิ่งหากช้าหรือบ่อยครั้ง แท็บ Network ของ Chrome DevTools ให้ข้อมูลเชิงลึกเกี่ยวกับกิจกรรมเครือข่ายของแอปพลิเคชันของคุณ

มองหา request ที่ใช้เวลานานในการดำเนินการให้เสร็จสิ้น หรือ request ที่ถูกเรียกซ้ำๆ พิจารณาปรับปรุง request เหล่านี้โดยใช้ caching, pagination หรือกลยุทธ์การดึงข้อมูลที่มีประสิทธิภาพมากขึ้น

5. การทำความเข้าใจปฏิสัมพันธ์กับ Scheduler

การทำความเข้าใจอย่างลึกซึ้งว่า React Scheduler จัดลำดับความสำคัญและดำเนินการกับ Task อย่างไรนั้นมีค่าอย่างยิ่งสำหรับการปรับปรุงประสิทธิภาพ ในขณะที่แท็บ Performance ของ Chrome DevTools และ React DevTools Profiler ให้การมองเห็นการทำงานของ Scheduler ได้ในระดับหนึ่ง การวิเคราะห์ข้อมูลที่บันทึกไว้ต้องอาศัยความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับการทำงานภายในของ React

มุ่งเน้นไปที่ปฏิสัมพันธ์ระหว่างคอมโพเนนต์กับ Scheduler หากคอมโพเนนต์บางตัวกระตุ้นการอัปเดตที่มีลำดับความสำคัญสูงอย่างสม่ำเสมอ ให้วิเคราะห์ว่าทำไมการอัปเดตเหล่านี้จึงจำเป็นและสามารถเลื่อนหรือปรับปรุงได้หรือไม่ ให้ความสนใจว่า Scheduler สลับการทำงานระหว่าง Task ประเภทต่างๆ เช่น การเรนเดอร์, การจัดเลย์เอาต์ และการวาดภาพอย่างไร หาก Scheduler สลับไปมาระหว่าง Task ตลอดเวลา อาจบ่งชี้ว่าแอปพลิเคชันกำลังประสบกับ thrashing ซึ่งอาจทำให้ประสิทธิภาพลดลง

เทคนิคการปรับปรุงประสิทธิภาพ

เมื่อคุณระบุคอขวดของประสิทธิภาพผ่านการโปรไฟล์แล้ว ขั้นตอนต่อไปคือการใช้เทคนิคการปรับปรุงเพื่อเพิ่มประสิทธิภาพของแอปพลิเคชันของคุณ นี่คือกลยุทธ์การปรับปรุงที่พบบ่อย:

1. Memoization

Memoization เป็นเทคนิคในการแคชผลลัพธ์ของการเรียกฟังก์ชันที่สิ้นเปลืองและส่งคืนผลลัพธ์ที่แคชไว้เมื่อมีการป้อนข้อมูลเดิมอีกครั้ง ใน React คุณสามารถใช้ React.memo เพื่อ memoize functional components และ useMemo hook เพื่อ memoize ผลลัพธ์ของการคำนวณ

import React, { useMemo } from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // ... ตรรกะของคอมโพเนนต์
});

function MyComponentWithMemoizedValue() {
  const expensiveValue = useMemo(() => {
    // ... การคำนวณที่สิ้นเปลือง
    return result;
  }, [dependencies]);

  return (
    

      {expensiveValue}
    
  );
}

2. Virtualization

Virtualization เป็นเทคนิคในการเรนเดอร์รายการหรือตารางขนาดใหญ่ได้อย่างมีประสิทธิภาพโดยการเรนเดอร์เฉพาะรายการที่มองเห็นได้ ไลบรารีเช่น react-window และ react-virtualized มีคอมโพเนนต์สำหรับการทำ virtualization ให้กับรายการและตารางในแอปพลิเคชัน React

3. Code Splitting

Code splitting เป็นเทคนิคในการแบ่งแอปพลิเคชันของคุณออกเป็นส่วนย่อยๆ และโหลดเมื่อมีความต้องการ สิ่งนี้สามารถลดเวลาในการโหลดเริ่มต้นของแอปพลิเคชันและปรับปรุงประสิทธิภาพโดยรวมได้ React รองรับ code splitting โดยใช้ dynamic imports และคอมโพเนนต์ React.lazy กับ Suspense

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...