ฉันเห็นบทความที่เขาเขียนเมื่อปีที่แล้วเกี่ยวกับ Perfection Kills ตอนนี้ฉันจะบันทึกไว้อย่างละเอียดมาก แม้ว่าบางสิ่งในบทความจะไม่สามารถนำไปใช้ในสภาพแวดล้อมปัจจุบันได้ ภายใต้แนวโน้มปัจจุบันของแอปพลิเคชันเว็บที่ค่อยๆ กลายเป็นส่วนหน้า การเพิ่มประสิทธิภาพฝั่งไคลเอ็นต์ได้รับความสนใจมากขึ้นเรื่อยๆ วิธีลดโค้ด วิธีแสดงแอปพลิเคชันต่อผู้ใช้อย่างรวดเร็ว วิธีลดเวลารอของผู้ใช้ ฯลฯ เช่น Yahoo's กฎทอง 34 ข้อของการเพิ่มประสิทธิภาพ มีการเสนอแผนการเพิ่มประสิทธิภาพโดยละเอียด
ส่วนพื้นฐานที่สุดของการเพิ่มประสิทธิภาพหน้าเว็บควรเป็นการเพิ่มประสิทธิภาพ HTML โดยเฉพาะประการแรกคือการล้างมาร์กอัปไม่เพียงแต่ลดขนาดของเอกสารเท่านั้น แต่ยังทำให้เอกสารง่ายต่อการบำรุงรักษาและปรับปรุงการมองเห็นของเครื่องมือค้นหา (สะอาด) มาร์กอัปหมายถึงการเข้าถึงที่ดีขึ้น) การบำรุงรักษาง่ายขึ้นและการมองเห็นเครื่องมือค้นหาที่ดี) แต่ถึงแม้สำหรับหน้าเว็บเหล่านั้นที่ได้รับการเพิ่มประสิทธิภาพขั้นสูงหากคุณดูโค้ดอย่างใกล้ชิดคุณยังคงพบการใช้แท็กมากมายที่สามารถลบได้หรือ ล้าสมัยแล้ว:
1. แสดงความคิดเห็นตัวละครในสคริปต์
<ภาษาสคริปต์=จาวาสคริปต์>
<!-- เริ่มเลย
alert("daimaren.cn");
//จบ-->
</สคริปต์>
เว้นแต่เบราว์เซอร์ที่เกือบจะสูญพันธุ์อย่าง 95 Netscape 1.0 ต้องการการประมวลผลดังกล่าว ในเบราว์เซอร์กระแสหลักส่วนใหญ่ การเพิ่มความคิดเห็น HTML ลงในบล็อกสคริปต์ก็ไม่จำเป็นเลย
2.<![CDATA[ … ]>
<script type="text/javascript">
//<![ซีดีต้า[
-
-
</สคริปต์>
นี่เป็นอีกหนึ่งมาตรการป้องกันข้อผิดพลาดที่มักถูกเพิ่มลงในบล็อกโค้ด js เมื่อจัดการกับเอกสาร XHTML จริง (ประเภทเนื้อหา "application/xhtml+xml") เพื่อป้องกันไม่ให้โค้ดแยกวิเคราะห์สัญลักษณ์ < เป็นจุดเริ่มต้นของแท็ก ทั้งหมด เนื้อหาที่อยู่ใน CDATA จะถือเป็นข้อความ แต่สถานการณ์จริงคือประเภทเนื้อหาของหน้าเว็บเกือบทั้งหมดในปัจจุบันคือ text/html ซึ่งหมายความว่าไม่ใช่เอกสาร xml ในความหมายที่เข้มงวด แต่เป็นเพียงข้อความตัวอักษร ดังนั้นมาตรการป้องกันข้อผิดพลาดนี้จึงไม่จำเป็นเลย หากคุณแน่ใจว่ารองรับเอกสาร xml คุณควรใช้ CDATA อย่างเหมาะสมขึ้นอยู่กับสถานการณ์
3.onclick=”…”, onmouseover=”“และอื่นๆ
ถือเป็นแนวทางปฏิบัติที่ไม่ฉลาดอย่างยิ่งในการเขียนแอตทริบิวต์เหตุการณ์ในแท็ก HTML ซึ่งจะลดความสามารถในการบำรุงรักษาโค้ดและทำให้แท็กเสียหาย หากแอตทริบิวต์เหตุการณ์ถูกเพิ่มแบบไดนามิกผ่าน JS ไม่เพียงแต่จะสามารถควบคุมได้อย่างยืดหยุ่นเท่านั้น แต่ยังสามารถไคลเอ็นต์ JS ได้อีกด้วย ถูกนำมาใช้ ข้อดีของการแคชคือแอ็ตทริบิวต์เหตุการณ์เหล่านี้ไม่จำเป็นต้องติดตามทุกคำขอเอกสาร
4.onclick=”javascript:…”
นี่เป็นระเบียบจาวาสคริปต์ที่น่าสนใจ Pseudo-protocols และตัวจัดการเหตุการณ์ภายในสามารถสร้างชุดค่าผสมที่ซ้ำซ้อนได้มากถึง 100,000 ชุด ความจริงก็คือเนื้อหาภายในแอตทริบิวต์เหตุการณ์จะกลายเป็นส่วนของร่างกายหลังจากการแยกวิเคราะห์ฟังก์ชันนี้จะทำหน้าที่เป็นตัวจัดการเหตุการณ์ . ดังนั้น javascript: กลายเป็นแท็กซ้ำซ้อนที่ไม่มีประโยชน์ที่นี่
5.href=”javascript:void(0)”
ดำเนินการต่อด้วยจาวาสคริปต์: pseudo-protocol หนึ่งในสิ่งที่ฉาวโฉ่คือ javascript:void(0) ซึ่งใช้เพื่อหลีกเลี่ยงการกระทำของสมอเริ่มต้น มันจะทำให้ JS ไม่สามารถแยกวิเคราะห์ได้ตามปกติหรือทำให้เกิดข้อผิดพลาด (ปิดใช้งาน/ไม่พร้อมใช้งาน/ ข้อผิดพลาด) จุดยึดไม่พร้อมใช้งานโดยสมบูรณ์ วิธีแก้ปัญหาที่เหมาะสมคือการกรอก URL ที่ถูกต้องใน href จากนั้นใช้ JS เพื่อเขียนใหม่แบบไดนามิก เพื่อให้จุดยึดไม่สามารถใช้งานได้แม้ว่าจะไม่ได้ดำเนินการ JS ก็ตาม HREF=“#” เป็นทางเลือกที่คล่องตัวและรวดเร็วยิ่งขึ้น
6. style=”…”
ไม่มีข้อผิดพลาดที่สำคัญ แต่การบำรุงรักษาในภายหลังอาจเป็นเรื่องยุ่งยาก นอกจากนี้ การย้ายไปยังไฟล์ CSS ภายนอกยังสามารถแคชได้เพื่อปรับปรุงประสิทธิภาพการดำเนินการเพจ
7. <script language=”Javascript” >
คุณลักษณะที่เข้าใจผิดมากที่สุดประการหนึ่งคือนี่คือ "ภาษา" ของสคริปต์ คุณลักษณะนี้เก่ามากจนเลิกใช้งานในปี 1999
8. <script charset=”…” >
<script type="text/javascript" charset="UTF-8">
-
</สคริปต์>
คุณลักษณะอื่นที่เข้าใจผิดได้ง่ายของแท็กสคริปต์ ชุดอักขระอธิบายไว้ใน HTML4.01: โปรดทราบว่าคุณลักษณะชุดอักขระอ้างอิงถึงการเข้ารหัสสคริปต์ที่ระบุโดยคุณลักษณะ src ของอักขระ และไม่เกี่ยวข้องกับเนื้อหาขององค์ประกอบสคริปต์ (โปรดทราบว่าแอ็ตทริบิวต์ชุดอักขระอ้างอิงถึงการเข้ารหัสอักขระของสคริปต์ที่กำหนดโดยแอ็ตทริบิวต์ src ซึ่งไม่เกี่ยวข้องกับเนื้อหาขององค์ประกอบ SCRIPT) กล่าวคือ เขาระบุเฉพาะรูปแบบการเข้ารหัสของไฟล์สคริปต์เมื่อทำโครงร่างเท่านั้น สคริปต์ ไม่แนะนำ.