ฉันทำงานในการพัฒนาส่วนหน้ามานานกว่าหนึ่งปีและฉันยังมีข้อมูลเชิงลึกเกี่ยวกับส่วนหน้า วันนี้ฉันจะแบ่งปันกับคุณ
เครื่องมือที่ทรงพลังต่าง ๆ นั้นขาดไม่ได้สำหรับการพัฒนาส่วนหน้า ตัวอย่างเช่นฉันคุ้นเคยกับการใช้ Google Browser และ Heavy Weapon Fiddller
1: สถานการณ์ดั้งเดิม
ก่อนอื่นมาดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codebehind = "default.aspx.cs" สืบทอด = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</head>
<body>
<img src = "1.jpg" />
</body>
</html>
คาดว่า 90% ของโปรแกรมเมอร์จะใส่ไฟล์ JS ไว้ในหัว แต่คุณเคยเจาะลึกลงไปหรือไม่? เบราว์เซอร์จำนวนมากจะใช้เธรดเดี่ยวเพื่อทำ "อินเตอร์เฟส UI Update" และ "JS Script Processing"
นั่นคือเมื่อเอ็นจิ้นการดำเนินการพบ "<script>" การดาวน์โหลดและการแสดงผลของหน้าจะต้องรอการดำเนินการของ <script> ที่จะเสร็จสิ้น จากนั้นมันเป็นเรื่องน่าเศร้าสำหรับผู้ใช้ดูที่หน้าล็อค
ในเวลานี้ผู้ใช้อาจจะปิดให้คุณ
จากแผนภาพน้ำตกด้านบนเราสามารถเห็นสองจุด:
อันดับแรก:
ไฟล์ JS สามไฟล์ถูกดาวน์โหลดแบบขนาน แต่ตามทฤษฎีของฉันข้างต้น JS ควรดำเนินการทีละหนึ่ง อย่างไรก็ตามใน IE8, Firefox 3.5 และ Chrome 2 ทั้งคู่ใช้การดาวน์โหลดแบบขนานของ JS
นี่ค่อนข้างดี แต่มันจะยังคงขัดขวางการดาวน์โหลดแหล่งข้อมูลอื่น ๆ เช่นรูปภาพ
ที่สอง:
การดาวน์โหลดภาพ 1.JPG จะถูกเรียกใช้หลังจากการดำเนินการ JS เสร็จสมบูรณ์ซึ่งตรวจสอบสถานการณ์ที่กล่าวถึงข้างต้นและป้องกันไม่ให้ภาพโหลด
สอง: ขั้นตอนแรกคือการเพิ่มประสิทธิภาพ
เนื่องจาก JS ป้องกันการเรนเดอร์ UI เราสามารถพิจารณาวาง JS ไว้ด้านหน้า </body> เพื่อให้ HTML ก่อน <Script> สามารถแสดงผลได้อย่างสมบูรณ์แบบโดยไม่ต้องให้ผู้ใช้เห็นหน้าว่างรอ
และสถานการณ์ที่เป็นทุกข์จะเพิ่มมิตรภาพตามธรรมชาติ
การคัดลอกรหัสมีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codebehind = "default.aspx.cs" สืบทอด = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</body>
</html>
รูปด้านล่างยังแสดงให้เห็นว่า 1.JPG และ JS สามตัวถูกดาวน์โหลดและดำเนินการในเกือบขนาน เวลาจะลดลงจาก "469ms+" ด้านบนเป็น "326ms"
สาม: ขั้นตอนที่สองของการเพิ่มประสิทธิภาพ
เมื่อดูที่ "Waterfall Diagram" ด้านบนฉันเดาว่าทุกคนสามารถเห็นได้ว่าไฟล์ JS ทั้งสามไฟล์ทำตามคำขอ "รับ" สามรายการ ทุกคนรู้ว่าคำขอรับจำเป็นต้องมีส่วนหัว HTTP
ดังนั้นจึงต้องใช้เวลาดังนั้นการแก้ปัญหาที่เรานำมาใช้คือการลดคำขอรับ มักจะมีสองตัวเลือก
ครั้งแรก: รวมไฟล์ JS เช่นการรวม "hello.js" และ "world.js" ข้างต้น
ประการที่สอง: ใช้เครื่องมือของบุคคลที่สามเช่น miniify ใน PHP
เกี่ยวกับวิธีที่สอง Taobao ใช้ค่อนข้างมาก ลองดูหนึ่งในสคริปต์และใช้ไฟล์ JS สามไฟล์ เปลี่ยนจาก 3 รับคำขอเป็น 1
สี่: ขั้นตอนที่สามของการเพิ่มประสิทธิภาพ
ไม่ว่าจะเป็นการวางไฟล์ JS ไว้ที่ปลายเท้าหรือรวมสามไว้ในหนึ่งสิ่งที่สำคัญคือ "โหมดการปิดกั้น" ซึ่งหมายถึงการล็อคเบราว์เซอร์ เมื่อหน้าเว็บมีความซับซ้อนมากขึ้นเรื่อย ๆ มีไฟล์ JS มากขึ้นเรื่อย ๆ หรือ
สิ่งที่ทำให้เราปวดหัวในเวลานี้เราสนับสนุน "ไม่มีโหมดการปิดกั้น" เพื่อโหลดสคริปต์ JS นั่นคือหน้าทั้งหมดจะถูกนำเสนอและจากนั้นจะเพิ่ม JS ซึ่งสอดคล้องกับทริกเกอร์ของเหตุการณ์บนหน้าต่าง
การต่อท้าย JS คือสิ่งที่เรียกว่า "ไม่มีการบล็อก" แต่สิ่งหนึ่งที่ต้องให้ความสนใจคือความต้องการของเราสำหรับ JS อยู่ในลำดับที่เข้มงวดหรือไม่
ครั้งแรก: ไม่มีข้อกำหนดการสั่งซื้อ ตัวอย่างเช่นหากฉันไม่มีข้อกำหนดการสั่งซื้อสำหรับ "hello.js" และ "world.js" เราสามารถใช้ jQuery เพื่อต่อท้ายได้
การคัดลอกรหัสมีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codebehind = "default.aspx.cs" สืบทอด = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
window.onload = function () {
$ ("#head"). ผนวก ("<script src = 'js/hello.js' type = 'text/javascript'> <// script>")
$ ("#head"). ผนวก ("<script src = 'js/world.js' type = 'text/javascript'> <// script>");
-
</script>
</body>
</html>
ดังที่เห็นได้จากรูป "hello.js" และ "world.js" ปรากฏบนเส้นสีน้ำเงินซึ่งหมายความว่า JS ทั้งสองนี้ถูกกระตุ้นให้โหลดหลังจาก domcontentload เสร็จสิ้นเพื่อให้หน้าจะไม่ถูกล็อค
รอ.
ประการที่สอง: มีข้อกำหนดการสั่งซื้อ
ทำไมจึงต้องมีคำสั่งซื้อ? สำหรับไฟล์ "สอง JS" ที่ต่อท้ายแบบไดนามิกด้านบนในซีรี่ส์ IE คุณไม่สามารถรับประกันได้ว่า Hello.js จะถูกดำเนินการก่อน World.js
มันจะเรียกใช้งานรหัสตามลำดับที่ส่งคืนโดยฝั่งเซิร์ฟเวอร์เท่านั้น
การคัดลอกรหัสมีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codebehind = "default.aspx.cs" สืบทอด = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script type = "text/javascript">
function loadscript (url, callback) {
var script = document.createElement ("สคริปต์");
script.type = "text/javascript";
//เช่น
if (script.readyState) {
script.onreadyStateChange = function () {
if (script.readyState == "โหลด" || script.readyState == "เสร็จสมบูรณ์") {
script.onreadystatechange = null;
การโทรกลับ ();
-
-
} อื่น {
// ไม่ใช่ ie
script.onload = function () {
การโทรกลับ ();
-
-
script.src = url;
document.getElementById ("head"). ภาคผนวก (สคริปต์);
-
// ขั้นตอนแรกคือการโหลดไลบรารีคลาส jQuery
loadscript ("jQuery/jQuery-1.4.1.js", function () {
// ขั้นตอนที่สองคือโหลด hello.js
loadscript ("js/hello.js", function () {
// ขั้นตอนที่สามคือการโหลด World.js
loadscript ("js/world.js", function () {
-
-
-
</script>
</body>
</html>
อย่างที่คุณเห็นได้เวลาที่ใช้ในการโหลดหน้าเว็บอย่างเต็มที่นั้นจริง ๆ แล้วประมาณ 310ms เท่านั้นซึ่งปรับปรุงการดาวน์โหลดและการปรากฏตัวที่เป็นมิตรของหน้าเว็บอย่างมาก
คุณสามารถตรวจสอบ tencent.com ซึ่งเป็นสิ่งที่เขาทำ
มันไม่มีประโยชน์มากเหรอ? ฉันใช้เวลาทำวิจัยและทดสอบที่นี่ ฉันหวังว่าคุณจะได้เห็นมันในใจ ท้ายที่สุดนี่เป็นวิธีการแก้ปัญหาของ บริษัท "Mahua Vine" โปรดดูที่