รายการการเพิ่มประสิทธิภาพความเร็วเว็บ

ฉันเชื่อว่าอินเทอร์เน็ตได้กลายเป็นส่วนที่ขาดไม่ได้ในชีวิตของผู้คน แอปพลิเคชันของลูกค้าที่ร่ำรวยเช่น Ajax, Flex ฯลฯ ทำให้ผู้คนมีความสุขมากขึ้นที่จะได้สัมผัสกับฟังก์ชั่นมากมายที่สามารถนำไปใช้ใน C/s เท่านั้น ตัวอย่างเช่น Google โอกาสได้ย้ายแอปพลิเคชันสำนักงานขั้นพื้นฐานที่สุดทั้งหมดไปยังอินเทอร์เน็ต แน่นอนว่าในขณะที่สะดวกมันทำให้หน้าช้าลงและช้าลงอย่างไม่ต้องสงสัย ฉันกำลังพัฒนาส่วนหน้า ในแง่ของประสิทธิภาพจากการสำรวจของ Yahoo แบ็กเอนด์คิดเป็นเพียง 5%ในขณะที่ส่วนหน้าสูงถึง 95%ซึ่ง 88%ของสิ่งต่าง ๆ สามารถปรับให้เหมาะสมได้

ข้างต้นคือแผนภาพวงจรชีวิตของหน้า Web2.0 วิศวกรกล่าวอย่างชัดเจนว่ามันถูกแบ่งออกเป็นสี่ขั้นตอน: การตั้งครรภ์การเกิดการสำเร็จการศึกษาและการแต่งงาน หากเราสามารถตระหนักถึงกระบวนการนี้แทนที่จะตอบสนองการร้องขออย่างง่ายเมื่อเราคลิกที่เว็บลิงค์เราสามารถขุดรายละเอียดมากมายที่สามารถปรับปรุงประสิทธิภาพได้ วันนี้ฉันฟังการบรรยายเกี่ยวกับการวิจัยประสิทธิภาพเว็บโดย Xiao Ma GE ใน Taobao ในทีมพัฒนา Yahoo ฉันรู้สึกว่าฉันได้รับมากและต้องการแบ่งปันในบล็อก

ฉันเชื่อว่าหลายคนเคยได้ยินกฎ 14 ข้อเพื่อเพิ่มประสิทธิภาพการทำงานของเว็บไซต์ ข้อมูลเพิ่มเติมสามารถพบได้ใน Developer.yahoo.com

1. ลดจำนวนคำขอ HTTP ให้มากที่สุด [เนื้อหา]

2. ใช้ CDN (เครือข่ายการส่งเนื้อหา) [เซิร์ฟเวอร์]

3. เพิ่มส่วนหัวที่หมดอายุ (หรือแคชควบคุม) [เซิร์ฟเวอร์]

4. ส่วนประกอบ GZIP [เซิร์ฟเวอร์]

5. วางสไตล์ CSS เหนือหน้า [CSS]

6. ย้ายสคริปต์ไปด้านล่าง (รวมถึงอินไลน์) [JavaScript]

7. หลีกเลี่ยงการใช้นิพจน์ใน CSS [CSS]

8. JavaScript และ CSS แยกต่างหากลงในไฟล์ภายนอก [JavaScript] [CSS]

9. ลดการสืบค้น DNS [เนื้อหา]

10. บีบอัดจาวาสคริปต์และ CSS (รวมถึงอินไลน์) [JavaScript] [CSS]

11. หลีกเลี่ยงการเปลี่ยนเส้นทาง [เซิร์ฟเวอร์]

12. ลบสคริปต์ซ้ำ [JavaScript]

13. กำหนดค่าแท็กเอนทิตี (etags) [CSS]

14. ทำแคช Ajax

มีปลั๊กอิน Yslow ภายใต้ Firefox ซึ่งรวมเข้ากับ Firebug คุณสามารถใช้เพื่อดูว่าเว็บไซต์ของคุณทำงานอย่างไรในด้านเหล่านี้

นี่เป็นผลมาจากการใช้ Yslow เพื่อประเมินเว็บไซต์ Xifengfang ของฉัน น่าเสียดายที่มีเพียง 51 คะแนน ฮิฮิ คะแนนของเว็บไซต์หลักในประเทศจีนไม่สูง ฉันเพิ่งทดสอบมันและทั้ง Sina และ Netease คือ 31 คะแนน จากนั้นคะแนนของ Yahoo (US) คือ 97 คะแนน! จะเห็นได้ว่า Yahoo ได้ใช้ความพยายามในเรื่องนี้ ตัดสินจากกฎ 14 ข้อที่พวกเขาสรุปมีรายละเอียดมากมายที่เพิ่มเข้ามาในตอนนี้และการปฏิบัติบางอย่างก็เป็นเรื่องที่ผิด

บทความที่ 1: ลดจำนวนคำขอ HTTP ให้มากที่สุดเท่าที่จะเป็นไปได้ (ทำคำขอ HTTP น้อยลง)

คำขอ HTTP อยู่เหนือศีรษะและการหาวิธีลดจำนวนคำขอสามารถเพิ่มความเร็วของหน้าเว็บได้ตามธรรมชาติ วิธีการทั่วไปคือการรวม CSS, JS (การรวมไฟล์ CSS และ JS ในหน้าตามลำดับ) และแผนที่ภาพและสไปรต์ CSS ฯลฯ แน่นอนว่าอาจแยกไฟล์ CSS และ JS เนื่องจากการพิจารณาในแง่ของโครงสร้าง CSS การแบ่งปัน ฯลฯ นี่ยังคงเป็นคำขอสำหรับเบราว์เซอร์ แต่ก็ยังสามารถกู้คืนได้หลายครั้งในระหว่างการพัฒนาซึ่งสะดวกสำหรับการจัดการและการอ้างอิงซ้ำ Yahoo ยังแนะนำให้เขียนหน้าแรก CSS และ JS ลงในไฟล์หน้าแทนการอ้างอิงภายนอกโดยตรง เนื่องจากโฮมเพจมีการเข้าชมมากเกินไปการทำเช่นนั้นสามารถลดจำนวนคำขอสองคำขอได้ ในความเป็นจริงพอร์ทัลในประเทศจำนวนมากทำสิ่งนี้

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

http://www.cssssprites.com/ นี่คือเว็บไซต์เครื่องมือที่สามารถรวมรูปภาพที่คุณอัปโหลดโดยอัตโนมัติและให้พิกัดตำแหน่งพื้นหลังที่สอดคล้องกัน และส่งออกผลลัพธ์ในรูปแบบ PNG และ GIF

ข้อ 2: ใช้เครือข่ายการส่งเนื้อหา

พูดตามตรงฉันไม่รู้เกี่ยวกับ CDN มากนัก พูดง่ายๆคือการเพิ่มสถาปัตยกรรมเครือข่ายใหม่ลงในอินเทอร์เน็ตที่มีอยู่เผยแพร่เนื้อหาของเว็บไซต์ไปยังเซิร์ฟเวอร์แคชที่ใกล้เคียงที่สุดกับผู้ใช้ ด้วยเทคโนโลยีการบาลานซ์ DNS จะตัดสินว่าแหล่งที่มาของผู้ใช้กำลังเข้าถึงเซิร์ฟเวอร์แคชใกล้เคียงเพื่อรับเนื้อหาที่ต้องการ ผู้ใช้ในหางโจวเข้าถึงเนื้อหาบนเซิร์ฟเวอร์ใกล้หางโจวและผู้ที่อยู่ในปักกิ่งเข้าถึงเนื้อหาบนเซิร์ฟเวอร์ใกล้ปักกิ่ง สิ่งนี้สามารถลดเวลาของการส่งข้อมูลบนเครือข่ายได้อย่างมีประสิทธิภาพและปรับปรุงความเร็ว สำหรับเนื้อหาที่มีรายละเอียดเพิ่มเติมคุณสามารถอ้างถึงคำอธิบายของ CDN บนสารานุกรม Baidu Yahoo! การกระจายของเนื้อหาคงที่ไปยัง CDN ช่วยลดเวลาผลกระทบของผู้ใช้ 20% หรือมากกว่า

แผนภาพเทคโนโลยี CDN:

ไดอะแกรมเครือข่าย CDN:

ข้อ 3: เพิ่มส่วนหัวการควบคุม/แคช: เพิ่มส่วนหัวหมดอายุ

ตอนนี้รูปภาพสคริปต์ CSS และแฟลชจะถูกฝังอยู่ในหน้ามากขึ้นเรื่อย ๆ และเมื่อเราเข้าถึงได้เราจะทำการร้องขอ HTTP จำนวนมากอย่างหลีกเลี่ยงไม่ได้ ในความเป็นจริงเราสามารถแคชไฟล์เหล่านี้ได้โดยการตั้งค่าส่วนหัวหมดอายุ หมดอายุจริงระบุเวลาแคชของไฟล์ประเภทเฉพาะในเบราว์เซอร์ผ่านข้อความส่วนหัว รูปภาพส่วนใหญ่ไม่จำเป็นต้องแก้ไขบ่อยครั้งหลังจากเผยแพร่ หลังจากถูกแคชเบราว์เซอร์จะไม่จำเป็นต้องดาวน์โหลดไฟล์เหล่านี้จากเซิร์ฟเวอร์อีกต่อไปและอ่านโดยตรงจากแคช สิ่งนี้จะเร่งการเข้าถึงหน้าอีกครั้งอย่างมากอีกครั้ง โปรโตคอล HTTP 1.1 ทั่วไปส่งคืนข้อมูลส่วนหัว:

http/1.1 200 ตกลง

วันที่: ศุกร์, 30 ต.ค. 1998 13:19:41 GMT

เซิร์ฟเวอร์: Apache/1.3.3 (UNIX)

Cache-Control: Max-age = 3600, ต้องทำการตรวจสอบ

หมดอายุ: ศุกร์, 30 ต.ค. 1998 14:19:41 GMT

ล่าสุดแก้ไข: วันจันทร์, 29 มิ.ย. 1998 02:28:12 GMT

ETAG: 3E86-410-3596FBBC

ความยาวเนื้อหา: 1040

ประเภทเนื้อหา: ข้อความ/html

สามารถทำได้โดยการตั้งค่าการควบคุมแคชและหมดอายุผ่านสคริปต์ฝั่งเซิร์ฟเวอร์

ตัวอย่างเช่นหากตั้งค่าใน PHP จะหมดอายุหลังจาก 30 วัน:

<!-pheader (cache-control: ต้องทำการตรวจสอบ); $ OFFSET = 60 * 60 * 24 * 30; $ expSTR = หมดอายุ: gmdate (d, d myh: i: s, เวลา () + $ ออฟเซ็ต) GMT; header ($ expstr);-> สามารถทำได้โดยการกำหนดค่าเซิร์ฟเวอร์เองดังนั้นสิ่งเหล่านี้จึงไม่ชัดเจนมากฮ่าฮ่า หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดดูที่ http://www.web-caching.com/

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

ข้อ 4: เปิดใช้งานการบีบอัด GZIP: ส่วนประกอบ GZIP

แนวคิดของ GZIP คือการบีบอัดไฟล์บนฝั่งเซิร์ฟเวอร์ก่อนจากนั้นถ่ายโอน สิ่งนี้สามารถลดขนาดของการถ่ายโอนไฟล์ได้อย่างมีนัยสำคัญ หลังจากการส่งเสร็จสิ้นเบราว์เซอร์จะทำการปิดการบีบอัดเนื้อหาที่ถูกบีบอัดอีกครั้งและดำเนินการ เบราว์เซอร์ปัจจุบันสามารถรองรับ GZIP ได้ดี ไม่เพียง แต่เบราว์เซอร์จะรับรู้ได้ แต่ยังรวมถึงตัวรวบรวมข้อมูลที่สำคัญยังสามารถรับรู้ได้ Seoers ทั้งหมดสามารถมั่นใจได้ ยิ่งไปกว่านั้นอัตราส่วนการบีบอัดของ GZIP มีขนาดใหญ่มากโดยทั่วไปอัตราส่วนการบีบอัดคือ 85%ซึ่งหมายความว่าหน้า 100K บนเซิร์ฟเวอร์สามารถบีบอัดได้ประมาณ 25K ก่อนที่จะถูกส่งไปยังไคลเอนต์ สำหรับหลักการบีบอัด GZIP เฉพาะคุณสามารถอ้างถึงบทความ "อัลกอริทึมการบีบอัด GZIP" บน CSDN Yahoo เน้นโดยเฉพาะอย่างยิ่งว่าเนื้อหาข้อความทั้งหมดควรถูกบีบอัดโดย GZIP: HTML (PHP), JS, CSS, XML, TXT ... เว็บไซต์ของเราทำงานได้ดีในเรื่องนี้มันเป็น A. ในอดีตโฮมเพจของเราไม่ได้เป็น JS ของเว็บไซต์ของเจ้าของรหัสโฆษณาเหล่านี้ไม่ได้ถูกบีบอัดโดย GZIP ซึ่งจะลากเว็บไซต์ของเราลง

ส่วนใหญ่สามจุดข้างต้นเป็นเนื้อหาฝั่งเซิร์ฟเวอร์และฉันมีความเข้าใจสั้น ๆ เท่านั้น สิ่งที่ผิดคือการแก้ไข

บทความ 5: ใส่สไตล์ชีทที่ด้านบน

วาง CSS ไว้ด้านบนของหน้าทำไมถึงเป็นเช่นนี้? เนื่องจากเบราว์เซอร์เช่น IE, Firefox จะไม่แสดงผลใด ๆ จนกว่า CSS ทั้งหมดจะถูกส่งอย่างสมบูรณ์ เหตุผลนั้นง่ายอย่างที่บราเดอร์แม่พูด CSS, ชื่อเต็ม: แผ่นสไตล์ cascading Cascading หมายความว่า CSS ที่อยู่เบื้องหลังสามารถครอบคลุม CSS ก่อนหน้าและ CSS ที่มีระดับสูงสามารถครอบคลุม CSS ที่มีระดับต่ำ ใน [CSS! สำคัญ] ความสัมพันธ์แบบลำดับชั้นนี้ได้รับการกล่าวถึงที่ด้านล่างของบทความนี้และที่นี่เราจำเป็นต้องรู้ว่า CSS สามารถเขียนทับได้ เนื่องจากก่อนหน้านี้สามารถเขียนทับได้จึงมีเหตุผลอย่างไม่ต้องสงสัยสำหรับเบราว์เซอร์ที่จะแสดงผลหลังจากโหลดเต็ม ในเบราว์เซอร์หลายแห่งเช่น IE ปัญหาของการวางแผ่นสไตล์ที่ด้านล่างของหน้าคือมันห้ามการจัดลำดับการแสดงเนื้อหาของเว็บเพจ หากเบราว์เซอร์บล็อกจอแสดงผลเพื่อหลีกเลี่ยงการทาสีองค์ประกอบหน้าใหม่ผู้ใช้จะเห็นหน้าว่างเท่านั้น Firefox ไม่ได้บล็อกการแสดงผล แต่หมายความว่าเมื่อดาวน์โหลดสไตล์ชีทบางองค์ประกอบบางส่วนอาจจำเป็นต้องทาสีใหม่ซึ่งทำให้เกิดปัญหาการกะพริบ ดังนั้นเราควรรับ CSS โดยเร็วที่สุด

ตามความหมายนี้ถ้าเราดูอย่างระมัดระวังมีบางพื้นที่ที่สามารถปรับให้เหมาะสมได้ ตัวอย่างเช่นไฟล์ CSS สองไฟล์ที่มีอยู่ในเว็บไซต์นี้คือ <link rel = stylesheet rev = stylesheet href = http: //www.space007.com/themes/google/style/google.css ประเภท = ข้อความ/css สื่อ = หน้าจอ/> href = http: //www.space007.com/css/print.css type = text/css media = print/> จากสื่อเราจะเห็นได้ว่า CSS แรกสำหรับเบราว์เซอร์และไฟล์ CSS ที่สองสำหรับสไตล์การพิมพ์ จากพฤติกรรมเชิงพฤติกรรมของผู้ใช้การกระทำในการพิมพ์หน้าจะต้องเกิดขึ้นหลังจากหน้าหน้าปรากฏขึ้น ดังนั้นวิธีที่ดีกว่าควรเพิ่ม CSS ลงในหน้าแบบไดนามิกหลังจากโหลดหน้าเว็บเพื่อให้สามารถปรับปรุงความเร็วได้ (ฮ่า)

บทความ 6: ใส่สคริปต์ที่ด้านล่าง

มีสองวัตถุประสงค์สำหรับการวางสคริปต์ที่ด้านล่างของหน้า: 1 เนื่องจากการดำเนินการสคริปต์สคริปต์ป้องกันการปิดกั้นการดาวน์โหลดของหน้า ในระหว่างกระบวนการโหลดของหน้าเมื่อเบราว์เซอร์อ่านคำสั่ง JS Execution มันจะอธิบายทั้งหมดและอ่านเนื้อหาต่อไปนี้ต่อไป หากคุณไม่เชื่อคุณสามารถเขียน JS Loop เพื่อดูว่าสิ่งที่อยู่ภายใต้หน้าจะยังคงออกมาหรือไม่ (การดำเนินการของ settimeout และ setInterval นั้นคล้ายกับการมัลติเธรดและการเรนเดอร์เนื้อหาต่อไปนี้จะดำเนินต่อไปก่อนเวลาตอบสนองที่สอดคล้องกัน) ตรรกะที่อยู่เบื้องหลังเบราว์เซอร์คือ JS อาจเรียกใช้งานตำแหน่ง HREF หรือฟังก์ชั่นอื่น ๆ ที่อาจขัดจังหวะกระบวนการนี้ได้ตลอดเวลา ดังนั้นการวางไว้ที่ส่วนท้ายของหน้าสามารถลดเวลาการโหลดขององค์ประกอบภาพของหน้าได้อย่างมีประสิทธิภาพ 2. ปัญหาที่สองที่เกิดจากสคริปต์คือมันบล็อกจำนวนการดาวน์โหลดแบบขนาน ข้อกำหนด HTTP/1.1 แนะนำว่าจำนวนการดาวน์โหลดแบบขนานสำหรับแต่ละโฮสต์ของเบราว์เซอร์ไม่ควรเกิน 2 (เช่นสามารถเป็น 2 และเบราว์เซอร์อื่น ๆ เช่น FF ถูกตั้งค่าเป็น 2 โดยค่าเริ่มต้น แต่ IE8 ใหม่สามารถเข้าถึง 6) ดังนั้นหากคุณแจกจ่ายไฟล์รูปภาพไปยังหลายเครื่องคุณสามารถดาวน์โหลดได้มากกว่า 2 รายการ อย่างไรก็ตามเมื่อดาวน์โหลดไฟล์สคริปต์เบราว์เซอร์จะไม่เริ่มดาวน์โหลดคู่ขนานอื่น ๆ

แน่นอนสำหรับแต่ละเว็บไซต์ความเป็นไปได้ของการวางสคริปต์ทั้งหมดที่ด้านล่างของหน้ายังคงเป็นที่น่าสงสัย ตัวอย่างเช่นหน้าของเว็บไซต์ Alibaba Chinese มี JS แบบอินไลน์ในหลาย ๆ ที่และการแสดงหน้าของหน้านั้นขึ้นอยู่กับเรื่องนี้อย่างมาก ฉันยอมรับว่าสิ่งนี้อยู่ไกลจากแนวคิดของสคริปต์ที่ไม่รุกราน แต่ปัญหาทางประวัติศาสตร์หลายอย่างไม่ง่ายเลยที่จะแก้ไข

ข้อ 7: หลีกเลี่ยงการใช้นิพจน์ใน CSS (หลีกเลี่ยงนิพจน์ CSS)

อย่างไรก็ตามจะมีเลเยอร์ทำรังที่ไร้ความหมายอีกสองชั้นซึ่งไม่ดีอย่างแน่นอน จำเป็นต้องมีทางออกที่ดีกว่า

ข้อ 8: ใส่ทั้ง JavaScript และ CSS ในไฟล์ภายนอก (ทำ JavaScript และ CSS ภายนอก)

ฉันคิดว่านี่ยังเข้าใจง่าย สิ่งนี้ไม่เพียงทำจากมุมมองของการเพิ่มประสิทธิภาพประสิทธิภาพ แต่ยังมาจากมุมมองของการบำรุงรักษารหัสง่าย การเขียน CSS และ JS บนเนื้อหาของหน้าสามารถลดคำขอได้ 2 คำขอ แต่ยังเพิ่มขนาดหน้า หากคุณมี CSS และ JS แคชจะไม่มีคำขอ HTTP เพิ่มเติมสองครั้ง แน่นอนฉันยังได้กล่าวไว้ก่อนหน้านี้ว่านักพัฒนาหน้าพิเศษบางคนจะยังคงเลือกไฟล์ CSS และ JS แบบอินไลน์

ข้อ 9: ลดการค้นหา DNS

มีการติดต่อแบบหนึ่งต่อหนึ่งระหว่างชื่อโดเมนและที่อยู่ IP บนอินเทอร์เน็ต ชื่อโดเมน (kuqin.com) จำได้ง่าย แต่คอมพิวเตอร์ไม่รู้จัก การรับรู้ระหว่างคอมพิวเตอร์จะต้องแปลงเป็นที่อยู่ IP คอมพิวเตอร์แต่ละเครื่องในเครือข่ายมีที่อยู่ IP อิสระ งานแปลงระหว่างชื่อโดเมนและที่อยู่ IP เรียกว่าการแก้ไขชื่อโดเมนหรือที่เรียกว่า DNS Query กระบวนการแก้ปัญหา DNS จะใช้เวลา 20-120 มิลลิวินาทีและเบราว์เซอร์จะไม่ดาวน์โหลดอะไรภายใต้ชื่อโดเมนจนกว่าจะมีการค้นหา DNS ดังนั้นการลดเวลาของการสืบค้น DNS สามารถเพิ่มความเร็วในการโหลดความเร็วของหน้า Yahoo แนะนำว่าจำนวนชื่อโดเมนที่มีอยู่ในหน้าควรควบคุมที่ 2-4 ให้มากที่สุด สิ่งนี้ต้องใช้แผนการที่ดีสำหรับหน้าโดยรวม เราไม่ได้ทำได้ดีในขณะนี้และระบบโฆษณาจำนวนมากที่จัดการคะแนนได้ลากเราลง

ข้อ 10: บีบอัด JavaScript และ CSS (Minify JavaScript)

เห็นได้ชัดว่าจะบีบอัดซ้ายและขวาของ JS และ CSS ลดจำนวนไบต์หน้า ความเร็วในการโหลดหน้าเว็บนั้นเร็วขึ้นตามธรรมชาติหากมีความจุเล็กน้อย นอกเหนือจากการลดปริมาณการบีบอัดยังสามารถให้การป้องกันจำนวนหนึ่ง เราทำได้ดีในเรื่องนี้ เครื่องมือการบีบอัดทั่วไป ได้แก่ JSMIN, คอมเพรสเซอร์ Yui ฯลฯ นอกจากนี้เช่น http://dean.edwards.name/packer/ เรายังให้เครื่องมือการบีบอัดออนไลน์ที่สะดวกมาก คุณสามารถดูความแตกต่างของความจุระหว่างไฟล์ JS ที่ถูกบีบอัดและไฟล์ JS ที่ไม่มีการบีบอัดบนหน้าเว็บ jQuery:

แน่นอนว่าข้อเสียอย่างหนึ่งของการบีบอัดคือความสามารถในการอ่านรหัสได้หายไป ฉันเชื่อว่าเพื่อนส่วนหน้าหลายคนพบปัญหานี้: ผลของการดู Google นั้นเจ๋งมาก แต่เมื่อดูที่ซอร์สโค้ดของมันมีตัวละครจำนวนมากที่แออัดเข้าด้วยกันและแม้แต่ชื่อฟังก์ชั่นก็ถูกแทนที่ ฉันเหงื่อออกมาก! ไม่สะดวกสำหรับการบำรุงรักษาหรือไม่ถ้ารหัสของคุณเหมือนกัน? การปฏิบัติในปัจจุบันของเว็บไซต์จีนอาลีบาบาทั้งหมดคือการบีบอัดมันบนฝั่งเซิร์ฟเวอร์เมื่อ JS และ CSS ถูกปล่อยออกมา วิธีนี้เราสามารถรักษารหัสของเราเองได้อย่างง่ายดาย

บทความ 11: หลีกเลี่ยงการเปลี่ยนเส้นทาง

ไม่นานมานี้ฉันเห็นบทความ "Internet Explorer และ Limits Connection Limits" บน IEBlog ตัวอย่างเช่นเมื่อคุณป้อน http://www.kuqin.com/ เซิร์ฟเวอร์จะสร้างเซิร์ฟเวอร์ 301 โดยอัตโนมัติและหันไปที่ http://www.kuqin.com/ คุณสามารถดูได้โดยดูที่แถบที่อยู่ของเบราว์เซอร์ การเปลี่ยนเส้นทางแบบนี้ยังต้องใช้เวลาเช่นกัน แน่นอนว่านี่เป็นเพียงตัวอย่าง มีเหตุผลหลายประการสำหรับการเปลี่ยนเส้นทาง แต่สิ่งที่ไม่สามารถเปลี่ยนแปลงได้คือทุกครั้งที่มีการเพิ่มการเปลี่ยนเส้นทางการร้องขอเว็บจะถูกเพิ่มเข้ามาดังนั้นควรย่อให้เล็กสุด

ข้อ 12: ลบสคริปต์ที่ซ้ำกัน

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

ข้อ 13: กำหนดค่าแท็กเอนทิตี (etags) (กำหนดค่า etags)

ฉันไม่เข้าใจเรื่องนี้เหมือนกันฮ่าฮ่า ฉันพบคำอธิบายโดยละเอียดเกี่ยวกับ InForq "การใช้ ETAGs เพื่อลดแบนด์วิดท์และโหลดเว็บแอปพลิเคชัน" นักเรียนที่สนใจสามารถไปดู

บทความ 14: ทำ Ajax cacheable

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