เมื่อเร็ว ๆ นี้ฉันได้ศึกษาหนังสือ "คู่มือการก่อสร้างเว็บไซต์ประสิทธิภาพสูง" บทความนี้เป็นบันทึกการศึกษา ฉันจะจัดเรียงสิ่งที่ฉันได้เรียนรู้เพื่อการดูง่ายในภายหลัง
Performance Golden Rule อธิบายว่ามีเพียง 10% ถึง 20% ของเวลาตอบสนองของผู้ใช้ปลายทางที่ใช้ในการยอมรับเอกสาร HTML ของผู้ใช้ที่ร้องขอในขณะที่ส่วนที่เหลือ 80% ถึง 90% ของเวลาถูกใช้ไปกับคำขอ HTTP สำหรับส่วนประกอบทั้งหมด
-Steve Sounders
1 ไฟล์ผสาน (ลดจำนวนคำขอ HTTP)
สไปรต์ CSS
ใช้ CSS Sprites เพื่อรวมรูปภาพที่ใช้ในเว็บไซต์เป็นภาพเดียวและใช้ไอคอนผ่านตำแหน่งพื้นหลังความกว้างและความสูงเพื่อควบคุมตำแหน่งภาพพื้นหลัง วิธีนี้สามารถลดการร้องขอภาพหลายภาพเป็นครั้งเดียว มีเครื่องมือมากมายในการสร้างสไปรต์ CSS มีปลั๊กอินที่เกี่ยวข้องในเสียงฮึดฮัดและอึกและ CSSGAGA ก็ดีเช่นกัน
ผสาน JS และ CSS
เช่นเดียวกับแผนที่ Sprite การรวมไฟล์ CSS และ JS ก็เป็นวิธีที่สำคัญในการลดคำขอ HTTP ไม่มีข้อโต้แย้งเกี่ยวกับการควบรวมกิจการของไฟล์ CSS ในปัจจุบัน แต่สำหรับความชุกในปัจจุบันของ JS modularity การรวมไฟล์ JS ทั้งหมดเข้าด้วยกันในไฟล์เดียวดูเหมือนจะย้อนหลัง วิธีที่ถูกต้องคือการปฏิบัติตามรูปแบบภาษาที่รวบรวมรักษาโมดูลของ JS และสร้างไฟล์เป้าหมายเฉพาะสำหรับไฟล์ JS ที่ใช้ในการร้องขอเริ่มต้นในระหว่างกระบวนการสร้าง
2 ใช้เนื้อหาเพื่อเผยแพร่เครือข่าย (ลดเวลาคำขอ HTTP)
ปัจจัยอีกประการหนึ่งที่มีผลต่อเวลาคำขอ HTTP คือระยะทางที่คุณมาจากเว็บเซิร์ฟเวอร์เว็บไซต์ เห็นได้ชัดว่ายิ่งระยะทางนานขึ้นคำขอใช้เวลานานขึ้นซึ่งสามารถปรับปรุงได้อย่างมากผ่าน CDN
CDN เป็นเว็บเซิร์ฟเวอร์ที่จัดจำหน่ายในหลาย ๆ ตำแหน่งทางภูมิศาสตร์ที่ใช้ในการเผยแพร่เนื้อหาให้กับผู้ใช้อย่างมีประสิทธิภาพมากขึ้น ฟังก์ชั่นหลักของ CDN คือการจัดเก็บไฟล์คงที่สำหรับผู้ใช้และยังให้บริการดาวน์โหลดบริการรักษาความปลอดภัยและฟังก์ชั่นอื่น ๆ
3 ชุดเบราว์เซอร์แคช (หลีกเลี่ยงคำขอ HTTP ซ้ำกัน)
ใช้ Expire/Cache-Control
เบราว์เซอร์สามารถหลีกเลี่ยงการร้องขอซ้ำทุกครั้งโดยใช้แคช HTTP 1.0 และ HTTP 1.1 มีวิธีการใช้แคชที่แตกต่างกันหมดอายุ (1.0) และแคชควบคุม (1.1) เว็บเซิร์ฟเวอร์ใช้หมดอายุเพื่อบอกไคลเอนต์ว่าสำเนาที่แคชทั้งหมดของไฟล์จะถูกใช้ภายในเวลาที่กำหนดและไม่ได้ทำการร้องขอไปยังเซิร์ฟเวอร์ซ้ำ ๆ อีกต่อไปเช่น:
หมดอายุ: พู, 01 ธ.ค. 2559 16:00:00 น. GMT (รูปแบบ GMT)
การตั้งค่านี้หมายความว่า ณ วันที่ 1 ธันวาคม 2559 สำเนาแคชสามารถใช้ได้โดยไม่ต้องร้องขอเพิ่มเติม
Expires มีข้อ จำกัด เกี่ยวกับวิธีการผ่านกำหนดเวลา: ต้องมีการซิงโครไนซ์อย่างเข้มงวดระหว่างนาฬิกาไคลเอนต์และนาฬิกาเซิร์ฟเวอร์ในขณะที่การควบคุมแคชที่แนะนำโดย HTTP 1.1 ระบุวันที่แคชโดยการระบุเวลาในวินาทีดังนั้นข้อ จำกัด นี้จึงไม่ปรากฏ
Cache-Control: Max-age = 31536000
การตั้งค่านี้หมายความว่าเวลาแคชเป็นเวลาหนึ่งปีและขอแนะนำให้ใช้การควบคุมแคช แต่เมื่อรองรับ HTTP 1.1 อีกสิ่งหนึ่งที่ควรทราบ: แคชควบคุมและหมดอายุในเวลาเดียวกันแคชควบคุมมีลำดับความสำคัญสูงกว่า
กำหนดค่าหรือลบ etag
การใช้ Expire/Cache-Control สามารถหลีกเลี่ยงการเข้าชมครั้งที่สองใช้แคชท้องถิ่นเพื่อหลีกเลี่ยงคำขอ HTTP ซ้ำและปรับปรุงความเร็วของเว็บไซต์ อย่างไรก็ตามหากผู้ใช้คลิกที่เบราว์เซอร์รีเฟรชหรือหมดอายุการร้องขอ HTTP GET จะยังคงออกไปยังเซิร์ฟเวอร์ หากไฟล์ไม่เปลี่ยนแปลงในเวลานี้เซิร์ฟเวอร์จะไม่ส่งคืนไฟล์ทั้งหมด แต่จะส่งคืนรหัสสถานะ 304 ที่ไม่ได้แก้ไข
มีสอง basiss สำหรับเซิร์ฟเวอร์เพื่อตรวจสอบว่าไฟล์มีการเปลี่ยนแปลงหรือไม่: แก้ไขล่าสุด (วันที่แก้ไขล่าสุด) และ ETAG (แท็กเอนทิตี);
ETAG (แท็กเอนทิตี) ได้รับการแนะนำใน HTTP 1.1 และมีลำดับความสำคัญสูงกว่าเมื่อมีอยู่ในเวลาเดียวกันกับการแก้ไขล่าสุด เซิร์ฟเวอร์เปรียบเทียบ ETAG (if-none-match) ที่ส่งโดยไคลเอนต์กับ ETAG ปัจจุบันและส่งคืน 304 ไม่ได้แก้ไขหากสิ่งเดียวกันเป็นจริงมิฉะนั้นไฟล์ทั้งหมดและ 200 OK จะถูกส่งคืน
มีปัญหาเกี่ยวกับ ETAG: เมื่อเบราว์เซอร์ส่งคำขอ GET ไปยังเซิร์ฟเวอร์หนึ่งตัวจากนั้นขอส่วนประกอบจากเซิร์ฟเวอร์อื่น ETAG ไม่ตรงกัน แน่นอนถ้าเว็บไซต์ของคุณโฮสต์บนเซิร์ฟเวอร์เดียวและตอนนี้เว็บไซต์หลายแห่งใช้เซิร์ฟเวอร์หลายตัวการมีอยู่ของ ETAG ช่วยลดอัตราความสำเร็จของความถูกต้องในการตรวจสอบได้อย่างมาก
วิธีแก้ปัญหานี้คือการกำหนดค่า ETAG ลบค่าอินโนไดซ์เซิร์ฟเวอร์และเก็บรักษาเวลาและขนาดการปรับเปลี่ยนเป็นค่า ETAG หรือลบ ETAG โดยตรงและใช้การแก้ไขล่าสุดเพื่อตรวจสอบความถูกต้องของไฟล์
4 ส่วนประกอบบีบอัด (ลดขนาดคำขอ HTTP)
โดยการบีบอัดไฟล์ที่ส่ง HTTP ลดขนาดของคำขอ HTTP และปรับปรุงความเร็วคำขอ GZIP เป็นวิธีการบีบอัดที่ใช้กันมากที่สุดและมีประสิทธิภาพมากที่สุดในปัจจุบัน
อย่างไรก็ตามไม่จำเป็นต้องบีบอัดไฟล์ทรัพยากรทั้งหมด ค่าใช้จ่ายในการบีบอัดรวมถึงที่เซิร์ฟเวอร์จำเป็นต้องใช้วงจร CPU เพื่อบีบอัดและลูกค้ายังจำเป็นต้องคลายการบีบอัดไฟล์ที่บีบอัดซึ่งจะต้องชั่งน้ำหนักร่วมกับเว็บไซต์ของตัวเอง ตอนนี้เว็บไซต์ส่วนใหญ่บีบอัดเอกสาร HTML ของพวกเขาและบางเว็บไซต์เลือกที่จะบีบอัด JS และ CSS แทบไม่มีเว็บไซต์ใดที่ใช้การบีบอัด GZIP สำหรับรูปภาพ PDF และไฟล์อื่น ๆ เหตุผลก็คือไฟล์เหล่านี้ถูกบีบอัดและการใช้ HTTP เพื่อบีบอัดสิ่งที่ได้รับการบีบอัดมากเกินไปไม่สามารถทำให้เล็กลงได้ ในความเป็นจริงการเพิ่มส่วนหัวการบีบอัดพจนานุกรมและการตรวจสอบร่างกายการตอบสนองทำให้มันใหญ่ขึ้นและการสูญเสีย CPU
วิธีเปิดใช้งาน GZIP บนเว็บไซต์ต้องมีการตั้งค่าในเว็บเซิร์ฟเวอร์ (IIS, Nginx, Apache ฯลฯ )
5 ไฟล์ CSS ถูกวางไว้ก่อน
การวางไฟล์ CSS ในครั้งแรกและสุดท้ายจะไม่ส่งผลกระทบต่อคำขอ HTTP ดังนั้นจึงสอดคล้องกันในแง่ของเวลาคำขอ อย่างไรก็ตามจากมุมมองของประสบการณ์ผู้ใช้การวางไฟล์ CSS ในครั้งแรกจะให้ประสบการณ์ผู้ใช้ที่ดีขึ้น
เหตุผลก็คือเบราว์เซอร์วิเคราะห์เอกสาร HTML จากบนลงล่างและวางไฟล์ CSS ไว้ที่หัว หน้าจะทำการร้องขอไปยังไฟล์ CSS ก่อนจากนั้นโหลดแผนผัง DOM และแสดงผล หน้าจะค่อยๆนำเสนอต่อผู้ใช้
ในทางตรงกันข้ามหากวางไฟล์ CSS ไว้ที่ท้ายหน้าจะโหลด DOM เต็มและขอไฟล์ CSS แล้วแสดงผลต้นไม้ DOM ทั้งหมดและนำเสนอให้กับผู้ใช้ จากมุมมองของผู้ใช้ก่อนที่จะมีการร้องขอไฟล์ CSS หน้าทั้งหมดจะอยู่ในสถานะหน้าจอสีขาว หน้าจอสีขาวเป็นพฤติกรรมของเบราว์เซอร์ คำอธิบายของ David Hyatt เป็นเช่นนี้
ก่อนที่ต้นไม้สไตล์จะถูกโหลดอย่างเต็มที่การแสดงผลต้นไม้ DOM นั้นเป็นของเสียเพราะมันจะถูกเรนเดอร์อีกครั้งหลังจากโหลดต้นไม้สไตล์และปัญหา FOUC (ไม่มีการสั่นไหวของเนื้อหาสไตล์) เกิดขึ้น
อีกสิ่งที่ควรทราบคือการใช้ลิงก์แทน @Import เพื่อแนะนำ CSS Stylesheets แม้ว่ารูปแบบที่แนะนำโดย @Import จะถูกเขียนในส่วนหัวมันจะถูกโหลดในตอนท้ายของเอกสาร
ไฟล์ JS 6 ไฟล์ถูกวางไว้ในตอนท้าย
คำขอ HTTP นั้นขนานกันและจำนวนการดาวน์โหลดแบบขนานของเบราว์เซอร์ที่แตกต่างกันนั้นแตกต่างกัน (2, 4 หรือ 8) การดาวน์โหลดแบบขนานปรับปรุงความเร็วของคำขอ HTTP การวางไฟล์ JS ในสถานที่แรกไม่เพียง แต่บล็อกการดาวน์โหลดไฟล์ที่ตามมา แต่ยังบล็อกการแสดงผลของหน้า
ทำไมสิ่งนี้ถึงเกิดขึ้น? มีสองเหตุผล:
document.write อาจมีอยู่ในไฟล์ JS เพื่อแก้ไขเนื้อหาของหน้าดังนั้นหน้าจะไม่แสดงผลหลังจากดำเนินการสคริปต์
ไฟล์ JS ที่แตกต่างกันอาจมีการพึ่งพาโดยไม่คำนึงถึงขนาดดังนั้นจึงต้องดำเนินการตามลำดับดังนั้นพวกเขาจึงถูกห้ามเมื่อโหลดสคริปต์
ดังนั้นวิธีที่ดีที่สุดคือวางไฟล์ JS ในตอนท้ายและรอจนกว่าส่วนประกอบภาพทั้งหมดของหน้าจะถูกโหลดก่อนที่จะทำการร้องขอเพื่อปรับปรุงประสบการณ์ผู้ใช้
ข้างต้นเป็นคำแนะนำบางประการเกี่ยวกับการปรับปรุงประสิทธิภาพของเว็บไซต์โดย JavaScript ว่าตัวแก้ไขแนะนำให้คุณ (1) ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดใส่ใจกับ wulin.com ในบทความถัดไปบรรณาธิการจะแนะนำคำแนะนำสำหรับการปรับปรุงการเพิ่มประสิทธิภาพการทำงานของเว็บไซต์ของ JavaScript (II)