กฎการเพิ่มประสิทธิภาพบางประการสำหรับหน้าเว็บเบราว์เซอร์
การเพิ่มประสิทธิภาพหน้า การบีบอัดทรัพยากรแบบคงที่ใช้เครื่องมือก่อสร้าง (webpack, gulp) เพื่อบีบอัดทรัพยากรคงที่ของหน้าเว็บ เช่น รูปภาพ สคริปต์ และสไตล์อย่างเหมาะสม
ภาพสไปรท์ CSS, ภาพอินไลน์ base64รวมไอคอนขนาดเล็กบนไซต์ให้เป็นภาพเดียว ใช้ CSS เพื่อวางตำแหน่งและสกัดกั้นไอคอนที่เกี่ยวข้อง ใช้รูปภาพในบรรทัดอย่างเหมาะสม
สไตล์ที่ด้านบนและสคริปต์ที่ด้านล่างหน้านี้เป็นกระบวนการแสดงผลแบบทีละขั้นตอน การติดสไตล์ไว้ที่ด้านบนสามารถนำเสนอหน้าให้กับผู้ใช้ได้เร็วขึ้น การติดแท็ก <script> ที่ด้านบนจะบล็อกการดาวน์โหลดทรัพยากรที่อยู่ด้านหลังหน้า
ใช้ CSS และ Js ของลิงก์ภายนอกหลายหน้าอ้างอิงถึงทรัพยากรสาธารณะแบบคงที่ และการใช้ทรัพยากรซ้ำจะช่วยลดคำขอ http เพิ่มเติม
หลีกเลี่ยงรูปภาพที่มี src ว่างเปล่าหลีกเลี่ยงการร้องขอ http ที่ไม่จำเป็น
<!-- รูปภาพที่มี src ว่างเปล่าจะยังคงเริ่มต้นคำขอ http--><img src= style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; ล้น: ซ่อนไว้; ชัดเจน: ทั้งสอง; ตระกูลแบบอักษร: tahoma, arial, Microsoft YaHei;"><!-- ขนาดรูปภาพจริงคือ 600x300 ซึ่งปรับขนาดเป็น 200x100 ใน html --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; โครงร่าง: ไม่มี; ความสูงบรรทัด: 25.2px; ขนาดตัวอักษร: 14px; ซ่อนเร้น; ชัดเจน: ทั้งสอง; ตระกูลแบบอักษร: tahoma, arial, Microsoft YaHei;"><!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>เอกสาร</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>ในตัวอย่าง ไฟล์ css และ js จะถูกโหลดไว้ล่วงหน้า และจะถูกเรียกทันทีเมื่อมีการใช้ในการเรนเดอร์เพจครั้งต่อๆ ไป
คุณสามารถระบุประเภทของการโหลดทรัพยากรประเภทต่างๆ ได้
- สไตล์
- สคริปต์
- วิดีโอ
- เสียง
- ภาพ
- แบบอักษร
- เอกสาร
- -
วิธีนี้ยังโหลดทรัพยากรล่วงหน้าข้ามโดเมนได้ด้วยการตั้งค่าแอตทริบิวต์ crossorigin
<link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>ซีเอสเอส ตัวเลือกลำดับความสำคัญของตัวเลือกจากสูงไปต่ำคือ:
- ตัวเลือกรหัส
- ตัวเลือกชั้นเรียน
- ตัวเลือกแท็ก
- ตัวเลือกที่อยู่ติดกัน
h1 + p{ ระยะขอบบน: 15px;เลือกย่อหน้าที่ปรากฏต่อจากองค์ประกอบ h1 องค์ประกอบ h1 และ p มีองค์ประกอบหลักร่วมกัน
ตัวเลือกลูก
h1 > แข็งแกร่ง {สี:สีแดง;}ตัวเลือกลูกหลาน
h1 em {สี:แดง;}ตัวเลือกตัวแทน
ตัวเลือกแอตทริบิวต์
*[title] {color:red;}img[alt] {border: 5px solid red;}ตัวเลือกคลาสหลอก
ประสบการณ์การใช้งานตัวเลือก:
ลดระดับของตัวเลือก
- จัดลำดับความสำคัญของตัวเลือกคลาส ซึ่งสามารถแทนที่ตัวเลือกป้ายกำกับหลายชั้นได้
- ใช้ตัวเลือก ID ด้วยความระมัดระวัง แม้ว่าจะมีประสิทธิภาพ แต่จะไม่ซ้ำกันในเพจ และไม่เอื้อต่อการทำงานร่วมกันเป็นทีมและการบำรุงรักษา
- ใช้การสืบทอดตัวเลือกอย่างเหมาะสม
- หลีกเลี่ยงการแสดงออก CSS
ตามลำดับความสำคัญของตัวเลือกก่อนหน้า คุณควรพยายามหลีกเลี่ยงการซ้อนตัวเลือกหลายระดับ โดยไม่ควรเกิน 3 ระดับ
.container .text .logo{ color: red; }/*เปลี่ยนเป็น*/.container .text-logo{ color: red;ปรับปรุงไฟล์สไตล์ของเพจและลบสไตล์ที่ไม่ได้ใช้เบราว์เซอร์จะทำการจับคู่สไตล์ที่ซ้ำซ้อน ซึ่งจะส่งผลต่อเวลาในการเรนเดอร์ นอกจากนี้ ไฟล์สไตล์ที่มีขนาดใหญ่เกินไปจะส่งผลต่อความเร็วในการโหลดด้วย
ใช้การสืบทอด CSS เพื่อลดขนาดโค้ดการใช้คุณสมบัติที่สืบทอดได้ของ CSS องค์ประกอบหลักจะกำหนดสไตล์ และองค์ประกอบย่อยไม่จำเป็นต้องตั้งค่าอีกครั้ง
แอ็ตทริบิวต์ที่สืบทอดได้ทั่วไป ได้แก่ สี ขนาดฟอนต์ ตระกูลฟอนต์ ฯลฯ แอ็ตทริบิวต์ที่ไม่สามารถสืบทอดได้ ได้แก่ ตำแหน่ง การแสดงผล โฟลต ฯลฯ
เมื่อค่าแอตทริบิวต์เป็น 0 จะไม่มีการเพิ่มหน่วยเมื่อค่าแอตทริบิวต์ CSS เป็น 0 จะไม่สามารถเพิ่มหน่วยเพื่อลดจำนวนโค้ดได้
.text{ ความกว้าง: 0px; ความสูง: 0px; }/*เปลี่ยนเป็น*/.text{ ความกว้าง: 0; ความสูง: 0;จาวาสคริปต์ใช้การมอบหมายเหตุการณ์
ใช้การมอบหมายเหตุการณ์เพื่อผูกเหตุการณ์กับองค์ประกอบ DOM ที่คล้ายกันหลายรายการ
<ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul>// วิธีที่ไม่มีเหตุผล: ผูกเหตุการณ์การคลิกกับแต่ละองค์ประกอบ $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); });//วิธีการมอบหมายกิจกรรม: ใช้กลไกฟองสบู่ของเหตุการณ์เพื่อมอบหมายเหตุการณ์ให้กับองค์ประกอบหลัก $('#container').on('click', '.list', function() { var text = $(this ).ข้อความ(); console.log(ข้อความ });ควรสังเกตว่าถึงแม้ว่าจะสามารถมอบหมายกิจกรรมให้กับเอกสารได้เมื่อใช้การมอบหมายกิจกรรม แต่ก็ไม่สมเหตุสมผล ประการหนึ่งคือทำให้ตัดสินกิจกรรมผิดได้ง่าย และอีกอย่างคือประสิทธิภาพการค้นหาห่วงโซ่ขอบเขตต่ำ ควรเลือกองค์ประกอบหลักที่ใกล้เคียงที่สุดเป็นผู้รับมอบสิทธิ์
นอกจากประสิทธิภาพที่ดีขึ้นแล้ว การใช้การมอบหมายเหตุการณ์ยังช่วยลดความจำเป็นในการเชื่อมโยงเหตุการณ์กับองค์ประกอบ DOM ที่สร้างขึ้นแบบไดนามิกอีกด้วย
โหลดเนื้อหา DOM แล้วคุณสามารถเริ่มการประมวลผลแผนผัง DOM ได้หลังจากที่โหลดองค์ประกอบ DOM แล้ว (DOMContentLoaded) แทนที่จะรอจนกว่าจะดาวน์โหลดทรัพยากรรูปภาพทั้งหมด
// Native javascript document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM โหลดและแยกวิเคราะห์ครบถ้วน);}, false);// jquery$(document).ready(function() { console.log(ready) ! );});// $(document).ready()$(function() { console.log(ready!);});โหลดล่วงหน้าและโหลดแบบ Lazy Loading โหลดล่วงหน้าใช้เวลาว่างของเบราว์เซอร์เพื่อโหลดทรัพยากรที่อาจใช้ในอนาคตล่วงหน้า เช่น รูปภาพ สไตล์ และสคริปต์
การโหลดล่วงหน้าแบบไม่มีเงื่อนไขเมื่อ onload ถูกทริกเกอร์ ทรัพยากรที่จำเป็นในอนาคตจะได้รับทันที
โหลดทรัพยากรรูปภาพไว้ล่วงหน้าแล้ว (3 วิธีในการใช้งานการโหลดรูปภาพล่วงหน้า)
กำลังโหลดล่วงหน้าตามพฤติกรรมของผู้ใช้ตัดสินการดำเนินการที่เป็นไปได้ของพฤติกรรมผู้ใช้และโหลดทรัพยากรล่วงหน้าที่อาจจำเป็นในอนาคต
ขี้เกียจโหลด
- เมื่อผู้ใช้พิมพ์ในช่องป้อนข้อมูลการค้นหา ทรัพยากรที่อาจใช้บนหน้าผลการค้นหาจะถูกโหลดไว้ล่วงหน้า
- เมื่อผู้ใช้ใช้งานแท็บ หนึ่งในนั้นจะปรากฏขึ้นตามค่าเริ่มต้น เมื่อคลิกที่ตัวเลือกอื่น ทรัพยากรที่จะใช้ในอนาคตจะถูกโหลดก่อนเมื่อเลื่อนเมาส์
ยกเว้นเนื้อหาหรือส่วนประกอบที่จำเป็นสำหรับการเริ่มต้นเพจ ทุกอย่างอื่นๆ สามารถโหลดได้อย่างเกียจคร้าน เช่น ไลบรารี js ที่ตัดรูปภาพ รูปภาพที่ไม่อยู่ในช่วงที่มองเห็นได้ เป็นต้น
โหลดรูปภาพแบบขี้เกียจ (ตรวจสอบว่ารูปภาพอยู่ภายในพื้นที่ที่มองเห็นหรือไม่ หากเป็นเช่นนั้น ให้กำหนดเส้นทางจริงให้กับรูปภาพ)
หลีกเลี่ยงการค้นหาทั่วโลกตัวแปรที่ไม่ใช่ท้องถิ่นที่ใช้มากกว่าหนึ่งครั้งในฟังก์ชันควรถูกจัดเก็บเป็นตัวแปรท้องถิ่น
ฟังก์ชั่น updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg); msg.innerHTML = อัปเดตเสร็จสมบูรณ์;}ตัวแปรโกลบอลของเอกสารถูกใช้หลายครั้งในฟังก์ชันด้านบน โดยเฉพาะอย่างยิ่งในลูป for ดังนั้นจึงเป็นแนวทางที่ดีกว่าในการจัดเก็บตัวแปรส่วนกลางของเอกสารเป็นตัวแปรภายในเครื่องแล้วนำไปใช้
ฟังก์ชั่น updateUI(){ var doc = document; var imgs = doc.getElementsByTagName(img); สำหรับ (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + รูปภาพ + i; } var msg = doc.getElementById(msg); msg.innerHTML = อัปเดตเสร็จสมบูรณ์;}สิ่งหนึ่งที่น่าสังเกตคือในโค้ด JavaScript ตัวแปรใดๆ ที่ไม่ได้ประกาศโดยใช้ var จะกลายเป็นตัวแปรร่วม และการใช้งานที่ไม่เหมาะสมจะทำให้เกิดปัญหาด้านประสิทธิภาพ
หลีกเลี่ยงการสอบถามแอตทริบิวต์ที่ไม่จำเป็นการใช้ตัวแปรและอาร์เรย์มีประสิทธิภาพมากกว่าการเข้าถึงคุณสมบัติบนออบเจ็กต์ เนื่องจากออบเจ็กต์จะต้องค้นหาสายโซ่ต้นแบบสำหรับคุณสมบัติที่มีชื่อนั้น
//ใช้อาร์เรย์ var ค่า = [5, 10];var sum = ค่า[0] + ค่า[1];alert(sum);//ใช้วัตถุ var ค่า = { แรก: 5, วินาที: 10 };var sum = ค่าแรก + ค่าวินาที;การแจ้งเตือน(ผลรวม);ในโค้ดข้างต้น คุณสมบัติของวัตถุจะถูกใช้ในการคำนวณ การค้นหาคุณสมบัติหนึ่งครั้งหรือสองครั้งจะไม่ทำให้เกิดปัญหาด้านประสิทธิภาพ แต่หากจำเป็นต้องมีการค้นหาหลายครั้ง เช่น ในลูป ประสิทธิภาพจะได้รับผลกระทบ
เมื่อค้นหาแอตทริบิวต์หลายรายการเพื่อให้ได้ค่าเดียว เช่น:
แบบสอบถาม var = window.location.href.substring(window.location.href.indexOf(?));ควรลดการค้นหาแอตทริบิวต์ที่ไม่จำเป็นลงและ window.location.href ควรถูกแคชไว้เป็นตัวแปร
var url = window.location.href;var query = url.substring(url.indexOf(?));การควบคุมปริมาณฟังก์ชันสมมติว่ามีช่องค้นหา ผูกเหตุการณ์ onkeyup เข้ากับช่องค้นหา เพื่อให้คำขอถูกส่งทุกครั้งที่ยกเมาส์ การใช้ฟังก์ชันควบคุมปริมาณสามารถรับประกันได้ว่าการดำเนินการต่อเนื่องหลายครั้งโดยผู้ใช้ภายในเวลาที่กำหนดของการป้อนข้อมูลจะทริกเกอร์คำขอเดียวเท่านั้น
<ประเภทอินพุต=ข้อความ id=ค่าอินพุต= />// ผูกเหตุการณ์ document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// ฟังก์ชั่นลอจิก ค้นหาฟังก์ชัน() { console.log('search. . .');}// ฟังก์ชั่นคันเร่ง ฟังก์ชั่นคันเร่ง (วิธีการ, บริบท) { clearTimeout (method.tId); method.tId = setTimeout (ฟังก์ชั่น () { method.call (บริบท); }, 300);}สถานการณ์การใช้งานของฟังก์ชันการควบคุมปริมาณไม่ได้จำกัดอยู่เพียงช่องค้นหา ตัวอย่างเช่น การเลื่อนหน้า การปรับขนาดหน้าต่างที่ยืดออก ฯลฯ ควรใช้ฟังก์ชันการควบคุมปริมาณเพื่อปรับปรุงประสิทธิภาพ
ลดจำนวนใบแจ้งยอดให้เหลือน้อยที่สุดจำนวนคำสั่งยังเป็นปัจจัยที่ส่งผลต่อความเร็วของการดำเนินการอีกด้วย
รวมการประกาศตัวแปรหลายรายการไว้ในการประกาศตัวแปรเดียว
// ใช้การประกาศ var หลายรายการ var count = 5; var color = blue; var now = new Date(); // หลังจากปรับปรุงแล้ว var count = 5, color = blue , ค่า = [1,2,3] ตอนนี้ = วันที่ใหม่ ();เวอร์ชันที่ได้รับการปรับปรุงคือการใช้การประกาศ var เพียงรายการเดียว โดยคั่นด้วยเครื่องหมายจุลภาค เมื่อมีตัวแปรหลายตัว การใช้การประกาศ var เพียงอันเดียวจะเร็วกว่าการประกาศ var แยกกันมาก
การใช้อาร์เรย์และตัวอักษรของวัตถุใช้อาร์เรย์และอ็อบเจ็กต์ตัวอักษรแทนการกำหนดคำสั่งทีละคำสั่ง
ค่า var = new Array();values[0] = 123;values[1] = 456;values[2] = 789;//หลังการปรับปรุง ค่า var = [123, 456, 789];var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alert(this.name);};//หลังการปรับปรุง var person = { name : Jack, age : 28, sayName : function(){ alert(this.name); }};การเพิ่มประสิทธิภาพสตริง การต่อสตริงเบราว์เซอร์ในยุคแรกๆ ไม่ได้ปรับวิธีการเชื่อมสตริงเข้ากับเครื่องหมายบวกให้เหมาะสม เนื่องจากสตริงไม่เปลี่ยนรูป หมายความว่ามีการใช้สตริงระดับกลางเพื่อจัดเก็บผลลัพธ์ ดังนั้นการสร้างและทำลายสตริงบ่อยครั้งจึงเป็นสาเหตุของความไร้ประสิทธิภาพ
var text = สวัสดี;ข้อความ+= ;ข้อความ+= โลก!;เพิ่มสตริงลงในอาร์เรย์ แล้วเรียกวิธีการรวมของอาร์เรย์เพื่อแปลงเป็นสตริง จึงหลีกเลี่ยงการใช้ตัวดำเนินการเพิ่มเติม
var arr = [], i = 0;arr[i++] = สวัสดี;arr[i++] = ;arr[i++] = World!;var text = arr.join('');เบราว์เซอร์สมัยใหม่มีการปรับสตริงให้เหมาะสมพร้อมการต่อเครื่องหมาย ดังนั้นในกรณีส่วนใหญ่ ตัวดำเนินการเพิ่มเติมยังคงเป็นตัวเลือกแรก
ลดการเรียงซ้ำและการวาดใหม่ในกระบวนการเรนเดอร์เบราว์เซอร์ จะมีการจัดเรียงใหม่และวาดใหม่ ซึ่งเป็นกระบวนการที่สิ้นเปลืองประสิทธิภาพ คุณควรใส่ใจกับการลดการดำเนินการที่ทริกเกอร์การจัดเรียงใหม่และวาดใหม่ระหว่างการทำงานของสคริปต์
การดำเนินการใดที่ทำให้เกิดการจัดเรียงหรือวาดใหม่
- การจัดวางใหม่: คุณสมบัติทางเรขาคณิตขององค์ประกอบมีการเปลี่ยนแปลง และจำเป็นต้องสร้างแผนผังการเรนเดอร์ใหม่ กระบวนการเปลี่ยนแผนผังการเรนเดอร์เรียกว่าการรีโฟลว์
- วาดใหม่: ขนาดทางเรขาคณิตขององค์ประกอบไม่เปลี่ยนแปลง แต่สไตล์ CSS (สีพื้นหลังหรือสี) ขององค์ประกอบมีการเปลี่ยนแปลง
จะลดการจัดเรียงและวาดใหม่และปรับปรุงประสิทธิภาพของหน้าเว็บได้อย่างไร
- ปรับขนาดหน้าต่าง
- ปรับเปลี่ยนแบบอักษร
- เพิ่มหรือลบสไตล์ชีท
- การเปลี่ยนแปลงเนื้อหา เช่น ผู้ใช้ป้อนข้อความในกล่อง <input/>
- จัดการคุณสมบัติของคลาส
- สคริปต์เพื่อจัดการ DOM (เพิ่ม ลบ หรือแก้ไของค์ประกอบ DOM)
- คำนวณคุณสมบัติ offsetWidth และ offsetHeight
- ตั้งค่าของแอตทริบิวต์สไตล์
1. การจัดการสคริปต์ขององค์ประกอบ DOM
- ตั้งค่าองค์ประกอบ DOM ให้แสดง: ไม่มี การจัดเรียงใหม่จะถูกทริกเกอร์ในระหว่างกระบวนการตั้งค่า แต่คุณสามารถเปลี่ยนได้ตามต้องการในภายหลังและแสดงหลังจากแก้ไขแล้ว
- โคลนองค์ประกอบลงในหน่วยความจำก่อนใช้งาน และเปลี่ยนองค์ประกอบอีกครั้งหลังการแก้ไข
2. ปรับเปลี่ยนรูปแบบขององค์ประกอบ
- พยายามทำการแก้ไขเป็นชุดแทนที่จะแก้ไขทีละรายการ
- ตั้งค่ารหัสและคลาสล่วงหน้า จากนั้นตั้งชื่อคลาสขององค์ประกอบ
3. เมื่อเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบ ให้ตั้งค่าสไตล์ CSS ขององค์ประกอบเป็นตำแหน่ง:คงที่หรือตำแหน่ง:สัมบูรณ์ องค์ประกอบจะไม่ทำให้เกิดการจัดเรียงใหม่หลังจากที่ออกจากการไหลของเอกสาร
4. ใช้ฟังก์ชันการควบคุมปริมาณ (ดังที่กล่าวไปแล้วข้างต้น) เมื่อปรับขนาดหน้าต่าง, ป้อนข้อมูลลงในช่องป้อนข้อมูล, เลื่อนหน้า ฯลฯ
HTTP แคชของเบราว์เซอร์การตั้งค่าแคชเบราว์เซอร์อย่างเหมาะสมเป็นหนึ่งในวิธีการสำคัญในการเพิ่มประสิทธิภาพหน้าเว็บ
การหมดอายุและการควบคุมแคชการหมดอายุมาจาก HTTP1.0 และการควบคุมแคชมาจาก HTTP1.1 เมื่อตั้งค่าทั้งคู่พร้อมกัน การควบคุมแคชจะแทนที่การหมดอายุ
ETag และการแก้ไขครั้งล่าสุด
- Expires ระบุวันหมดอายุจริงมากกว่าจำนวนวินาที แต่ Expires มีปัญหาบางอย่าง เช่น เวลาเซิร์ฟเวอร์ไม่ซิงค์หรือไม่ถูกต้อง ดังนั้นจึงเป็นการดีกว่าที่จะแสดงเวลาหมดอายุโดยใช้วินาทีที่เหลือ แทนที่จะแสดงเวลาที่แน่นอน
- Cache-Control สามารถตั้งค่าอายุสูงสุดเป็นวินาทีและระบุเวลาหมดอายุของแคชได้ ตัวอย่างเช่น: การควบคุมแคช: อายุสูงสุด=3600
ทั้ง ETag และ Last-Modified จะถูกส่งกลับโดยเซิร์ฟเวอร์ในส่วนหัวการตอบกลับ ETag มีลำดับความสำคัญสูงกว่า Last-Modified ซึ่งหมายความว่าเซิร์ฟเวอร์จะจัดลำดับความสำคัญของค่าของ ETag
แคชที่แข็งแกร่งและแคชการเจรจาต่อรอง
- ETag คือแท็กใดๆ ที่แนบมากับเอกสาร ซึ่งอาจเป็นหมายเลขซีเรียลหรือหมายเลขเวอร์ชันของเอกสาร หรือการตรวจสอบเนื้อหาในเอกสาร เป็นต้น เมื่อเอกสารเปลี่ยนแปลง ค่า ETag ก็เปลี่ยนแปลงไปด้วย ที่เกี่ยวข้องกับ ETag คือ If-None-Match เมื่อเบราว์เซอร์เริ่มต้นคำขอ จะมีค่า ETag ในช่อง If-None-Match และส่งไปยังเซิร์ฟเวอร์
- Last-Modified คือเวลาที่เอกสารถูกแก้ไขครั้งล่าสุดบนฝั่งเซิร์ฟเวอร์ ที่เกี่ยวข้องกับ Last-Modified คือ If-Modified-Since เมื่อเบราว์เซอร์เริ่มต้นคำขอ จะมีค่า Last-Modified ในฟิลด์ If-Modified-Since และส่งไปยังเซิร์ฟเวอร์
ประเภทของแคชคือแคชที่รัดกุมและแคชที่มีการเจรจา ข้อแตกต่างระหว่างทั้งสองคือแคชที่รัดกุมจะไม่ส่งคำขอไปยังเซิร์ฟเวอร์ แต่แคชที่เจรจาไว้จะส่งคำขอ หากการจับคู่สำเร็จ จะส่งกลับ 304 Not Modified หากการจับคู่ไม่สำเร็จก็จะถูกส่งกลับ 200 เบราว์เซอร์จะตรวจสอบแคชที่รัดกุมก่อน และหากแคชที่รัดกุมหายไป ให้ทำการตรวจสอบแคชการเจรจาต่อรอง
วิธีกำหนดค่าแคชของเบราว์เซอร์เหตุใดจึงต้องลดคำขอ HTTP
- เพิ่ม Expires และ Cache-Control เพื่อตอบกลับการตอบกลับของเว็บเซิร์ฟเวอร์
- กำหนดค่า Expires และ Cache-Control ในไฟล์การกำหนดค่า nginx หรือ apache
มาตรการเพื่อลดคำขอ http มีส่วนสำคัญในการเพิ่มประสิทธิภาพการทำงาน เช่น การใช้รูปภาพ CSS Sprite เพื่อแทนที่คำขอรูปภาพหลายรายการ การหลีกเลี่ยงรูปภาพ src ที่ว่างเปล่า การใช้รูปภาพในบรรทัด การใช้ลิงก์ภายนอก css และ js การแคช เป็นต้น
กระบวนการตั้งแต่การป้อน URL ไปจนถึงการโหลดหน้าเว็บให้เสร็จสมบูรณ์ประกอบด้วย:
- ความละเอียด DNS
- การเชื่อมต่อทีพีพี
- คำขอ HTTP และการตอบกลับ
- เบราว์เซอร์แสดงผลหน้า
- การเชื่อมต่อที่ใกล้ชิด
คำขอ http ที่สมบูรณ์จะต้องผ่านกระบวนการเหล่านี้ ซึ่งใช้เวลานานและสิ้นเปลืองทรัพยากร ดังนั้นจึงจำเป็นต้องลดจำนวนคำขอลง
อ้างอิง:
"คำแนะนำขั้นสูงสำหรับการสร้างเว็บไซต์ประสิทธิภาพสูงเทียบกับการสร้างเว็บไซต์ประสิทธิภาพสูง"
"แนวทางปฏิบัติที่ดีที่สุดในการเร่งความเร็วเว็บไซต์ของคุณ"
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network