ส่วนประกอบปฏิกิริยาที่มีประสิทธิภาพ: คู่มือการเพิ่มประสิทธิภาพปฏิกิริยา

นับตั้งแต่เปิดตัว React ได้เปลี่ยนวิธีที่นักพัฒนา front-end คิดในการสร้างเว็บแอป ด้วย DOM เสมือน React ทำให้การอัปเดต UI มีประสิทธิภาพมากที่สุดเท่าที่จะเป็นได้ ทำให้เว็บแอปของคุณเร็วขึ้น แต่ทำไมเว็บแอป React ที่มีขนาดปานกลางถึงยังคงทำงานได้ไม่ดีนัก

เงื่อนงำอยู่ที่ว่าคุณใช้งาน React อย่างไร

ไลบรารีส่วนหน้าที่ทันสมัยอย่าง React ไม่ได้ทำให้แอปของคุณเร็วขึ้นอย่างน่าอัศจรรย์ นักพัฒนาต้องการให้เข้าใจว่า React ทำงานอย่างไรและส่วนประกอบต่างๆ ทำงานอย่างไรผ่านขั้นตอนต่างๆ ของวงจรชีวิตส่วนประกอบ

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

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

ปฏิกิริยาทำงานอย่างไร?

ก่อนที่เราจะเจาะลึกถึงเทคนิคการเพิ่มประสิทธิภาพ เราต้องเข้าใจวิธีการทำงานของ React ให้ดีเสียก่อน

ที่แกนหลักของการพัฒนา React คุณมีไวยากรณ์ JSX ที่เรียบง่ายและชัดเจน และความสามารถของ React ในการสร้างและเปรียบเทียบ DOM เสมือน นับตั้งแต่เปิดตัว React ได้มีอิทธิพลต่อไลบรารีส่วนหน้าอื่น ๆ มากมาย ไลบรารีเช่น Vue.js ยังอาศัยแนวคิดของ DOM เสมือน

นี่คือวิธีการทำงานของ React:

แอปพลิเคชั่น React แต่ละรายการเริ่มต้นด้วยองค์ประกอบรูท และประกอบด้วยส่วนประกอบหลายอย่างในการก่อตัวของต้นไม้ ส่วนประกอบใน React คือ "ฟังก์ชัน" ที่แสดง UI ตามข้อมูล (อุปกรณ์ประกอบฉากและสถานะ) ที่ได้รับ

เราสามารถเป็นสัญลักษณ์ของสิ่งนี้เป็น F .

 UI = F(data)

ผู้ใช้โต้ตอบกับ UI และทำให้ข้อมูลเปลี่ยนแปลง การโต้ตอบเกี่ยวข้องกับการคลิกปุ่ม การแตะที่รูปภาพ การลากรายการไปรอบๆ คำขอ AJAX ที่เรียกใช้ API เป็นต้น การโต้ตอบทั้งหมดจะเปลี่ยนเฉพาะข้อมูลเท่านั้น พวกเขาไม่เคยทำให้ UI เปลี่ยนแปลงโดยตรง

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

เมื่อใดก็ตามที่มีการเปลี่ยนแปลงในข้อมูลนี้ React จะใช้ฟังก์ชันของส่วนประกอบเพื่อแสดงผล UI อีกครั้ง แต่จะทำได้เฉพาะในแทบเท่านั้น:

 UI1 = F(data1) UI2 = F(data2)

React คำนวณความแตกต่างระหว่าง UI ปัจจุบันและ UI ใหม่โดยใช้อัลกอริธึมการเปรียบเทียบบน DOM เสมือนทั้งสองเวอร์ชัน

 Changes = Diff(UI1, UI2)

จากนั้น React จะใช้เฉพาะการเปลี่ยนแปลง UI กับ UI จริงบนเบราว์เซอร์

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

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

จะเริ่มการเพิ่มประสิทธิภาพได้ที่ไหน

แต่สิ่งที่เราเพิ่มประสิทธิภาพคืออะไรกันแน่?

คุณเห็นในระหว่างกระบวนการแสดงผลเริ่มต้น React จะสร้างแผนผัง DOM ดังนี้:

จากการเปลี่ยนแปลงข้อมูลส่วนหนึ่ง สิ่งที่เราต้องการให้ React ทำคือแสดงผลเฉพาะส่วนประกอบที่ได้รับผลกระทบโดยตรงจากการเปลี่ยนแปลงเท่านั้น (และอาจข้ามกระบวนการ diff สำหรับส่วนประกอบที่เหลือ):

อย่างไรก็ตาม สิ่งที่ React ทำได้คือ:

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

นักพัฒนาของไลบรารี React พิจารณาสิ่งนี้และให้เบ็ดสำหรับเราที่จะทำอย่างนั้น: ฟังก์ชันที่ช่วยให้เราบอก React ได้เมื่อข้ามการเรนเดอร์ส่วนประกอบ

วัดกันก่อน

ตามที่ Rob Pike วางไว้ค่อนข้างหรูหราเป็นหนึ่งในกฎการเขียนโปรแกรมของเขา:

วัด. อย่าปรับความเร็วจนกว่าคุณจะวัดได้ และอย่าทำอย่างนั้นเว้นแต่ส่วนหนึ่งของโค้ดจะครอบงำส่วนที่เหลือ

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

React มีเครื่องมือที่ทรงพลังสำหรับสิ่งนี้ การใช้ไลบรารี react-addons-perf คุณสามารถดูภาพรวมของประสิทธิภาพโดยรวมของแอปได้

การใช้งานนั้นง่ายมาก:

 Import Perf from 'react-addons-perf' Perf.start(); // use the app Perf.stop(); Perf.printWasted();

การดำเนินการนี้จะพิมพ์ตารางที่มีส่วนประกอบเวลาที่เสียไปในการแสดงผล

ไลบรารีมีฟังก์ชันอื่นๆ ที่ช่วยให้คุณพิมพ์ด้านต่างๆ ของเวลาที่เสียไปโดยแยกจากกัน (เช่น การใช้ printInclusive() หรือ printExclusive() ) หรือแม้แต่พิมพ์การดำเนินการจัดการ DOM (โดยใช้ printOperations() )

การเปรียบเทียบขั้นต่อไป

หากคุณเป็นคนมีทัศนวิสัย แล้ว react-perf-tool คือสิ่งที่คุณต้องการ

react-perf-tool ขึ้นอยู่กับไลบรารี react-addons-perf ช่วยให้คุณสามารถแก้ไขจุดบกพร่องประสิทธิภาพของแอป React ได้ชัดเจนยิ่งขึ้น มันใช้ไลบรารีพื้นฐานเพื่อรับการวัดแล้วแสดงเป็นกราฟ

วิธีนี้เป็นวิธีที่สะดวกกว่ามากในการระบุจุดคอขวด คุณสามารถใช้มันได้อย่างง่ายดายโดยเพิ่มเป็นส่วนประกอบในแอปพลิเคชันของคุณ

ควร React อัปเดตส่วนประกอบหรือไม่

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

เมื่อแอปของคุณเติบโตขึ้น การพยายามแสดงผลและเปรียบเทียบ DOM เสมือนทั้งหมดในทุกๆ การกระทำจะช้าลงในที่สุด

React ให้วิธีง่ายๆ สำหรับนักพัฒนาในการระบุว่าส่วนประกอบต้องการการแสดงผลซ้ำหรือไม่ นี่คือที่มาของวิธี shouldComponentUpdate

 function shouldComponentUpdate(nextProps, nextState) { return true; }

เมื่อฟังก์ชันนี้คืนค่า จริง สำหรับองค์ประกอบใด ๆ จะช่วยให้สามารถทริกเกอร์กระบวนการ render-diff ได้

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

 function shouldComponentUpdate(nextProps, nextState) { return nextProps.id !== this.props.id; }

การใช้ React.PureComponent

เพื่อทำให้เทคนิคการเพิ่มประสิทธิภาพนี้ง่ายขึ้นและทำให้เป็นอัตโนมัติเล็กน้อย React ได้จัดเตรียมสิ่งที่เรียกว่าองค์ประกอบ "บริสุทธิ์" React.PureComponent นั้นเหมือนกับ React.Component ที่ใช้ shouldComponentUpdate() พร้อมการเปรียบเทียบแบบตื้นและสถานะ

React.PureComponent เทียบเท่ากับสิ่งนี้มากหรือน้อย:

 class MyComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this.props, nextProps) && shallowCompare(this.state, nextState); } … }

เนื่องจากทำการเปรียบเทียบแบบตื้นเท่านั้น คุณอาจพบว่ามีประโยชน์เฉพาะเมื่อ:

• อุปกรณ์ประกอบฉากหรือสถานะของคุณมีข้อมูลดั้งเดิม
• อุปกรณ์ประกอบฉากและสถานะของคุณมีข้อมูลที่ซับซ้อน แต่คุณรู้ว่าเมื่อใดควรเรียก forceUpdate() เพื่ออัปเดตองค์ประกอบของคุณ

ทำให้ข้อมูลไม่เปลี่ยนรูป

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

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

คุณสามารถใช้ Object.assign หรือ _.extend (จาก Underscore.js หรือ Lodash):

 const newValue2 = Object.assign({}, oldValue); const newValue2 = _.extend({}, oldValue);

ยิ่งไปกว่านั้น คุณสามารถใช้ไลบรารีที่มีโครงสร้างข้อมูลที่ไม่เปลี่ยนรูปแบบได้:

 var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 2); assert(map1.equals(map2) === true); var map3 = map1.set('b', 50); assert(map1.equals(map3) === false);

ที่นี่ Immutable.Map ให้บริการโดยห้องสมุด Immutable.js

ทุกครั้งที่มีการอัพเดตแผนที่ด้วยเมธอด set แผนที่ใหม่จะถูกส่งคืนก็ต่อเมื่อการทำงานของชุดเปลี่ยนค่าพื้นฐาน มิฉะนั้น แผนที่เดียวกันจะถูกส่งคืน

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้โครงสร้างข้อมูลที่ไม่เปลี่ยนรูปได้ที่นี่

เทคนิคการเพิ่มประสิทธิภาพแอป React เพิ่มเติม

การใช้บิลด์การผลิต

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

หากคุณดูซอร์สโค้ดของ React คุณจะเห็น if (process.env.NODE_ENV != 'production') ตรวจสอบหรือไม่ โค้ดเหล่านี้ที่ React กำลังทำงานในสภาพแวดล้อมการพัฒนาของคุณไม่ใช่สิ่งที่ผู้ใช้ปลายทางต้องการ สำหรับสภาพแวดล้อมการผลิต สามารถทิ้งโค้ดที่ไม่จำเป็นทั้งหมดนี้ได้

หากคุณบูตสแตรปโปรเจ็กต์ของคุณโดยใช้ create-react-app คุณก็สามารถรัน npm run build เพื่อสร้างบิลด์ที่ใช้งานจริงได้โดยไม่ต้องใช้โค้ดพิเศษนี้ หากคุณใช้ Webpack โดยตรง คุณสามารถเรียกใช้ webpack webpack -p (ซึ่งเทียบเท่ากับ webpack --optimize-minimize --define process.env.NODE_ENV="'production'"

ฟังก์ชันผูกมัดก่อน

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

 // Creates a new `handleUpload` function during each render() <TopBar onUpload={this.handleUpload.bind(this)} /> // ...as do inlined arrow functions <TopBar onUpload={files => this.handleUpload(files)} />

ซึ่งจะทำให้ฟังก์ชัน render() สร้างฟังก์ชันใหม่ทุกครั้งที่เรนเดอร์ วิธีที่ดีกว่ามากในการทำสิ่งเดียวกันคือ:

 class App extends React.Component { constructor(props) { super(props); this.handleUpload = this.handleUpload.bind(this); } render() { … <TopBar onUpload={this.handleUpload} /> … } }

การใช้ไฟล์หลายไฟล์

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

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

การแบ่งมีสองประเภท: การแยกทรัพยากรและการแยกรหัสตามความต้องการ

ด้วยการแยกทรัพยากร คุณแยกเนื้อหาทรัพยากรออกเป็นหลายไฟล์ ตัวอย่างเช่น เมื่อใช้ CommonsChunkPlugin คุณสามารถแตกโค้ดทั่วไป (เช่น ไลบรารีภายนอกทั้งหมด) ลงในไฟล์ "chunk" ของตัวเองได้ เมื่อใช้ ExtractTextWebpackPlugin คุณสามารถแยกโค้ด CSS ทั้งหมดเป็นไฟล์ CSS แยกต่างหากได้

การแยกประเภทนี้จะช่วยได้สองวิธี ช่วยให้เบราว์เซอร์แคชทรัพยากรที่เปลี่ยนแปลงน้อยกว่าเหล่านั้น นอกจากนี้ยังช่วยให้เบราว์เซอร์ใช้ประโยชน์จากการดาวน์โหลดแบบคู่ขนานเพื่อลดเวลาในการโหลด

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

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการแยกโค้ด Webpack ได้ที่นี่

การเปิดใช้งาน Gzip บนเว็บเซิร์ฟเวอร์ของคุณ

ไฟล์ JS บันเดิลของแอป React มักจะใหญ่มาก ดังนั้นเพื่อให้หน้าเว็บโหลดเร็วขึ้น เราสามารถเปิดใช้งาน Gzip บนเว็บเซิร์ฟเวอร์ (Apache, Nginx เป็นต้น)

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

ตรวจสอบเอกสารสำหรับเว็บเซิร์ฟเวอร์ของคุณเกี่ยวกับวิธีการเปิดใช้งานการบีบอัด:

• Apache: ใช้ mod_deflate
• Nginx: ใช้ ngx_http_gzip_module

การใช้ Eslint-plugin-react

คุณควรใช้ ESLint สำหรับโครงการ JavaScript เกือบทุกโครงการ ปฏิกิริยาไม่แตกต่างกัน

ด้วย eslint-plugin-react คุณจะบังคับตัวเองให้ปรับให้เข้ากับกฎจำนวนมากในการเขียนโปรแกรม React ซึ่งจะเป็นประโยชน์กับโค้ดของคุณในระยะยาว และหลีกเลี่ยงปัญหาและปัญหาทั่วไปมากมายที่เกิดขึ้นเนื่องจากโค้ดที่เขียนได้ไม่ดี

ทำให้เว็บแอป React ของคุณเร็วขึ้นอีกครั้ง

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

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

แม้ว่าจะมีวิธีการเพิ่มประสิทธิภาพเว็บแอป React มากขึ้น แต่การปรับแต่งส่วนประกอบเพื่ออัปเดตเฉพาะเมื่อจำเป็นจะทำให้ได้รับการปรับปรุงประสิทธิภาพที่ดีที่สุดเท่านั้น

คุณวัดและเพิ่มประสิทธิภาพเว็บแอป React ของคุณอย่างไร? แบ่งปันในความคิดเห็นด้านล่าง