กุญแจสำคัญในการลดเวลาดาวน์โหลดของหน้าเว็บคือพยายามลดขนาดไฟล์ เมื่อหลายหน้าแบ่งปันเนื้อหาส่วนผสมบางอย่างคุณสามารถพิจารณาแยกส่วนร่วมเหล่านี้แยกกัน ตัวอย่างเช่น: เราสามารถเขียนสคริปต์ที่ใช้โดยหลายหน้า HTML ลงในไฟล์. js อิสระจากนั้นเรียกมันในหน้าดังนี้:
<scriptsrc = myfile.js> </script>
ด้วยวิธีนี้ไฟล์สาธารณะจะต้องดาวน์โหลดเพียงครั้งเดียวแล้วเข้าสู่บัฟเฟอร์ ครั้งต่อไปที่ฉันเรียกหน้า HTML ที่มีไฟล์สาธารณะอีกครั้งเวลาดาวน์โหลดจะลดลงอย่างมาก
ให้เนื้อหาสไตล์ชีทเข้าทำงานใต้ดินCSS เป็นชุด HTML และหน้าเว็บที่สวยงามไม่สามารถทำได้หากไม่มีมัน มีหลายวิธีในการอ้างถึง CSS ในหน้า HTML และประสิทธิภาพของวิธีการต่าง ๆ นั้นแตกต่างกัน โดยปกติเราสามารถแยกรหัสควบคุมสไตล์ที่กำหนดระหว่าง <style> </style>, บันทึกลงในไฟล์. css แยกต่างหากจากนั้นอ้างอิงในหน้า HTML ในแท็ก <Link> หรือแท็ก @Import:
<style>
@Importurl (mysheet1.css);
</style>
โปรดทราบ 2 คะแนน: 1. แท็ก <style> ไม่จำเป็นต้องรวมอยู่ในไฟล์. css; 2. @Import และแท็กลิงก์ควรกำหนดไว้ในส่วนหัวของหน้า HTML
สองวิธีในการบันทึกหน่วยความจำที่มีค่าการลดพื้นที่หน่วยความจำที่ถูกครอบครองโดยหน้า HTML เป็นวิธีที่มีประสิทธิภาพในการเพิ่มความเร็วในการดาวน์โหลดหน้าเว็บ ในเรื่องนี้มีสองประเด็นที่ต้องใส่ใจ:
1. ใช้ภาษาสคริปต์เดียวกันหน้า HTML ไม่สามารถแยกออกจากการสนับสนุนของโปรแกรมสคริปต์ เรามักจะฝังภาษาสคริปต์หลายภาษาไว้ในหน้าเช่น JavaScript และ VBScript อย่างไรก็ตามฉันไม่ทราบว่าคุณสังเกตเห็น: ส่วนผสมดังกล่าวจะทำให้ความเร็วในการเข้าถึงของหน้าช้าลง เหตุผลก็คือการตีความและเรียกใช้รหัสสคริปต์หลายรหัสต้องโหลดเอ็นจิ้นสคริปต์หลายตัวในหน่วยความจำ ดังนั้นโปรดลองเขียนโค้ดในภาษาสคริปต์เดียวกันบนหน้า
2. ใช้ iframe อย่างชำนาญคุณใช้แท็ก <frame> หรือไม่? มันเป็นคุณสมบัติที่ยอดเยี่ยมมาก หากคุณต้องการรวมเนื้อหาของหน้าสองในเอกสาร HTML วิธีปกติคือการใช้แท็ก <Frameset> แต่ด้วย <iframe> ทุกอย่างกลายเป็นเรื่องง่าย ตัวอย่างเช่นในการพัฒนาหน้าตัวอย่างเอกสารคุณสามารถวางชุดของหัวข้อทางด้านซ้ายและ iframe ทางด้านขวาซึ่งมีเอกสารที่จะแสดงตัวอย่าง เมื่อเมาส์ผ่านลิงค์แต่ละหัวข้อทางด้านซ้ายให้สร้าง iframe ใหม่ทางด้านขวาเพื่อดูตัวอย่างเอกสาร ในการทำเช่นนั้นประสิทธิภาพของรหัสนั้นมีประสิทธิภาพอย่างไม่ต้องสงสัย แต่ในขณะเดียวกันก็นำไปสู่การประมวลผลหนักและความเร็วช้าในที่สุด
ใช้ IFRAME เดียวเท่านั้น เมื่อเมาส์ชี้ไปที่หัวข้อใหม่คุณจะต้องแก้ไขแอตทริบิวต์ SRC ขององค์ประกอบ iframe เท่านั้น ด้วยวิธีนี้เอกสารตัวอย่างเดียวเท่านั้นที่จะยังคงอยู่ในหน่วยความจำได้ตลอดเวลา
เลือกแอตทริบิวต์การวางตำแหน่งภาพเคลื่อนไหวที่ดีที่สุดเมื่อคุณเรียกดูหน้าออนไลน์ทุกวันคุณจะเห็นเอฟเฟกต์ภาพเคลื่อนไหวมากมาย ตัวอย่างเช่นกระต่ายตัวน้อยน่ารักกำลังเดินไปมาบนหน้า ... เทคโนโลยีหลักเพื่อให้ได้เอฟเฟกต์นี้คือการวางตำแหน่ง CCS โดยปกติเราใช้ Element.style.left และ Element.style.top เพื่อให้ได้จุดประสงค์ของการวางตำแหน่งกราฟิก อย่างไรก็ตามการทำเช่นนี้สร้างปัญหาบางอย่าง: คุณสมบัติด้านซ้ายส่งคืนสตริงและมีหน่วยการวัด (เช่น 100px) ดังนั้นในการตั้งค่าพิกัดตำแหน่งใหม่คุณต้องประมวลผลค่าส่งคืนของสตริงก่อนก่อนที่คุณจะสามารถกำหนดค่าดังนี้:
Dimstringleft, intleft
stringleft = element.style.left
intleft = parseInt (stringleft)
intleft = intleft 10
element.style.left = intleft;
คุณจะรู้สึกว่าคุณต้องเขียนโค้ดที่ซับซ้อนเช่นนี้เพื่อทำสิ่งเล็ก ๆ น้อย ๆ มีวิธีที่กระชับมากกว่านี้หรือไม่? ดูคุณสมบัติทั้ง 4 นี้: Posleft, Postop, Poswidth และ Posheight ซึ่งสอดคล้องกับจำนวนจุดของค่าคืนสตริงที่สอดคล้องกัน ตกลงใช้คุณสมบัติเหล่านี้เพื่อเขียนโค้ดใหม่เพื่อใช้ฟังก์ชั่นที่ใช้โดยรหัสด้านบน:
element.style.posleft = 10
รหัสสั้นกว่า แต่เร็วกว่า!
ลูปควบคุมภาพเคลื่อนไหวหลายภาพเมื่อพูดถึงเอฟเฟกต์แอนิเมชั่นแน่นอนว่าการใช้ตัวจับเวลาจะแยกออกไม่ได้ วิธีปกติคือการใช้ Window.SetTimeOut เพื่อค้นหาองค์ประกอบอย่างต่อเนื่องบนหน้า อย่างไรก็ตามหากมีภาพเคลื่อนไหวหลายภาพบนหน้าเว็บที่จะแสดงคุณจำเป็นต้องตั้งค่าตัวจับเวลาหลายตัวหรือไม่? คำตอบคือไม่! เหตุผลนั้นง่าย: ฟังก์ชั่นตัวจับเวลาจะใช้ทรัพยากรระบบที่มีค่าจำนวนมาก แต่เรายังสามารถควบคุมภาพเคลื่อนไหวหลายภาพบนหน้าและเคล็ดลับคือการใช้ลูป ในลูปควบคุมตำแหน่งของภาพเคลื่อนไหวที่สอดคล้องกันตามค่าตัวแปรที่แตกต่างกันจะใช้การโทรฟังก์ชั่นเดียวเท่านั้น settimeout () ที่ใช้ในลูปทั้งหมด
การมองเห็นเร็วกว่าการแสดงผลปล่อยให้ภาพปรากฏขึ้นและปรากฏขึ้นเป็นครั้งคราวสร้างเอฟเฟกต์ที่น่าสนใจ มีสองวิธีในการบรรลุเป้าหมายนี้: ใช้แอตทริบิวต์การมองเห็นหรือแอตทริบิวต์การแสดงผลของ CSS สำหรับองค์ประกอบตำแหน่งสัมบูรณ์การทัศนวิสัยและการมองเห็นมีผลเหมือนกัน ความแตกต่างระหว่างทั้งสองคือองค์ประกอบที่ตั้งไว้ที่จะแสดง: ไม่มีใครจะไม่ครอบครองพื้นที่ของสตรีมเอกสารอีกต่อไปในขณะที่องค์ประกอบที่ตั้งไว้เป็นทัศนวิสัย: ซ่อนอยู่จะยังคงอยู่ในตำแหน่งเดิม
แต่ถ้าคุณต้องการจัดการกับองค์ประกอบในตำแหน่งที่แน่นอนการใช้ทัศนวิสัยจะเร็วขึ้น
เริ่มเล็กเคล็ดลับสำคัญสำหรับการเขียนหน้าเว็บ DHTML คือ: เริ่มต้นเล็ก ๆ เมื่อเขียนหน้า DHTML เป็นครั้งแรกอย่าลืมลองใช้คุณสมบัติ DHTML ทั้งหมดที่คุณรู้จักในหน้า สามารถใช้คุณสมบัติใหม่เพียงครั้งเดียวในแต่ละครั้งและสามารถสังเกตการเปลี่ยนแปลงที่เกิดขึ้นได้อย่างรอบคอบ หากคุณพบว่าการแสดงนั้นลดลงคุณสามารถค้นหาสาเหตุได้อย่างรวดเร็ว
การชะลอการสคริปต์Defer เป็นฮีโร่ที่ไม่ได้ร้องในบรรดาฟังก์ชั่นที่ทรงพลังของโปรแกรมการเขียนสคริปต์ คุณอาจไม่เคยใช้มัน แต่หลังจากอ่านบทนำที่นี่ฉันเชื่อว่าคุณไม่สามารถอยู่ได้หากปราศจากมัน มันบอกเบราว์เซอร์ว่ากลุ่มสคริปต์มีรหัสที่ไม่จำเป็นต้องดำเนินการทันทีและร่วมกับแอตทริบิวต์ SRC นอกจากนี้ยังสามารถเปิดใช้งานสคริปต์เหล่านี้ในพื้นหลังและเนื้อหาของเบื้องหน้าจะแสดงต่อผู้ใช้ตามปกติ
ในที่สุดโปรดทราบสองคะแนน:1. อย่าโทรหาเอกสารคำสั่ง WWRITE ในบล็อกสคริปต์ประเภทเลื่อนเนื่องจาก Document.write จะสร้างเอฟเฟกต์เอาต์พุตโดยตรง
2. ยิ่งไปกว่านั้นอย่ารวมตัวแปรหรือฟังก์ชั่นส่วนกลางใด ๆ ที่จะใช้เพื่อเรียกใช้สคริปต์ทันทีในบล็อกสคริปต์ที่เลื่อนออกไป
รักษาความสอดคล้องของกรณีของ URL เดียวกันเราทุกคนรู้ว่าเซิร์ฟเวอร์ UNIX นั้นมีความละเอียดอ่อน แต่คุณรู้หรือไม่ว่าบัฟเฟอร์ของ Internet Explorer ยังรักษาสตริงเคสที่แตกต่างกัน ดังนั้นในฐานะนักพัฒนาเว็บคุณต้องจำไว้ว่าต้องรักษาความสอดคล้องของกรณีของสตริง URL ของลิงค์เดียวกันในสถานที่ต่าง ๆ มิฉะนั้นการสำรองข้อมูลไฟล์ต่าง ๆ ในตำแหน่งเดียวกันจะถูกเก็บไว้ในบัฟเฟอร์ของเบราว์เซอร์ซึ่งจะเพิ่มจำนวนคำขอในการดาวน์โหลดเนื้อหาในตำแหน่งเดียวกัน ทั้งหมดนี้ลดประสิทธิภาพการเข้าถึงเว็บอย่างไม่ต้องสงสัย ดังนั้นโปรดจำไว้ว่า: URL ในสถานที่เดียวกันโปรดรักษาความสอดคล้องของกรณีของสตริง URL ในหน้าต่างๆ
ให้เครื่องหมายมีจุดเริ่มต้นและจุดสิ้นสุดเมื่อเขียนหรือดูรหัส HTML ของคนอื่นด้วยตัวเราเองเราต้องพบสถานการณ์ที่เครื่องหมายไม่มีที่สิ้นสุด ตัวอย่างเช่น:
<p> ตัวอย่างด้วยหัวและไม่มีเครื่องหมายหาง
<ul>
<li> คนแรก
<li> ที่สอง
<li> ที่สาม
</ul>
เห็นได้ชัดว่ามีแท็กสุดท้าย </li> สามแท็กที่หายไปในรหัสด้านบน แต่สิ่งนี้ไม่ได้ป้องกันไม่ให้ดำเนินการอย่างถูกต้อง ใน HTML มีแท็กบางอย่างเช่น Frame, IMG และ P.
แต่โปรดอย่าขี้เกียจ กรุณาเขียนเครื่องหมายสิ้นสุดเหมือนเดิม สิ่งนี้ไม่เพียง แต่ทำให้มาตรฐานรูปแบบรหัส HTML แต่ยังเพิ่มความเร็วในการแสดงความเร็วของหน้า เนื่องจาก Internet Explorer จะไม่ใช้เวลาในการตัดสินและคำนวณว่าวรรคหรือรายการสิ้นสุดลงที่ไหน
<p> ตัวอย่างด้วยเครื่องหมายหัวและหาง </p>
<ul>
<li> ก่อน </li>
<li> วินาที </li>
<li> สาม </li>
</ul>
ตกลงด้านบนแสดงรายการเทคนิคการประมวลผล 10 รายการสำหรับการเร่งหน้า HTML มันง่ายที่จะอธิบายสิ่งเหล่านี้ แต่โดยความเข้าใจอย่างแท้จริงและการเรียนรู้สาระสำคัญของมันและการเรียนรู้จากตัวอย่างหนึ่งหรืออื่น ๆ คุณสามารถเขียนโปรแกรมที่เร็วขึ้นและดีขึ้น