เพื่อมอบประสบการณ์การใช้งานที่สดใหม่และไม่เหมือนใครเว็บไซต์หลายแห่งใช้ JavaScript เพื่อปรับปรุงการออกแบบตรวจสอบรูปแบบตรวจสอบเบราว์เซอร์รวมถึงคำขอ AJAX การดำเนินการคุกกี้ ฯลฯ เพื่อให้ได้เอฟเฟกต์แบบไดนามิกที่ปราศจากการรีเฟรช อย่างไรก็ตามหากคุณต้องการแสดงเนื้อหาจำนวนมากในเบราว์เซอร์หากไม่ได้ดำเนินการอย่างถูกต้องประสิทธิภาพของเว็บไซต์จะลดลงอย่างรวดเร็ว ดังนั้นจึงจำเป็นต้องเข้าใจวิธีการปรับปรุงประสิทธิภาพการดำเนินการของ JavaScript
ฟังก์ชัน JavaScript
ใน JavaScript ฟังก์ชั่นจะคอมไพล์ล่วงหน้าก่อนการใช้งาน แม้ว่าบางครั้งสตริงสามารถใช้แทนฟังก์ชั่นได้ แต่รหัส JavaScript นี้จะได้รับการจัดเตรียมใหม่ทุกครั้งที่ดำเนินการและส่งผลกระทบต่อประสิทธิภาพ
1. ตัวอย่างตัวอย่าง
การคัดลอกรหัสมีดังนี้:
evals ('output = (อินพุต * อินพุต)');
// ขอแนะนำให้เปลี่ยนเป็น:
eval (ฟังก์ชั่นใหม่ () {output = (อินพุต * อินพุต)});
2. ตัวอย่าง settimeout
การคัดลอกรหัสมีดังนี้:
settimeout ("Alert (1)", 1,000);
// ขอแนะนำให้เปลี่ยนเป็น:
settimeout (function () {Alert (1)}, 1000);
ใช้ฟังก์ชั่นแทนสตริงเป็นพารามิเตอร์เพื่อให้แน่ใจว่ารหัสในวิธีใหม่สามารถปรับให้เหมาะสมโดยคอมไพเลอร์ JavaScript
ขอบเขตจาวาสคริปต์
แต่ละขอบเขตในโซ่ขอบเขตจาวาสคริปต์มีตัวแปรหลายตัว เป็นสิ่งสำคัญที่จะต้องเข้าใจโซ่ขอบเขตเพื่อให้คุณสามารถใช้ประโยชน์จากมันได้
การคัดลอกรหัสมีดังนี้:
var localvar = "global"; // ตัวแปรทั่วโลก
ฟังก์ชั่นทดสอบ () {
var localvar = "local"; // ตัวแปรท้องถิ่น
// ตัวแปรท้องถิ่น
การแจ้งเตือน (localvar);
// ตัวแปรทั่วโลก
การแจ้งเตือน (this.localvar);
// ค้นหาเอกสารและตัวแปรท้องถิ่นไม่สามารถพบได้ดังนั้นให้มองหาตัวแปรส่วนกลาง
var pagename = document.getElementById ("pagename");
-
การใช้ตัวแปรท้องถิ่นนั้นเร็วกว่าการใช้ตัวแปรทั่วโลกมากเพราะยิ่งไปไกลกว่าในห่วงโซ่ขอบเขต รูปต่อไปนี้แสดงโครงสร้างห่วงโซ่ขอบเขต:
หากมีคำสั่งหรือลองจับในรหัสโซ่ขอบเขตจะซับซ้อนมากขึ้นดังแสดงในรูปด้านล่าง:
สตริง JavaScript
ฟังก์ชั่นในจาวาสคริปต์ที่มีผลกระทบที่มีประสิทธิภาพมากคือการต่อการเชื่อมต่อสตริง โดยทั่วไปแล้วเครื่องหมาย + จะใช้เพื่อใช้การประกบของสตริง อย่างไรก็ตามเบราว์เซอร์ต้นไม่ได้เพิ่มประสิทธิภาพวิธีการเชื่อมต่อดังกล่าวส่งผลให้เกิดการสร้างและการทำลายสตริงอย่างต่อเนื่องซึ่งลดประสิทธิภาพการดำเนินการ JavaScript อย่างจริงจัง
การคัดลอกรหัสมีดังนี้:
var txt = "Hello" + "" + "World";
ขอแนะนำให้เปลี่ยนเป็น:
การคัดลอกรหัสมีดังนี้:
var o = [];
O.Push ("สวัสดี");
O.Push ("");
O.Push ("โลก");
var txt = o.join ();
มาห่อหุ้มกันเถอะ:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชัน StringBuffer (Str) {
var arr = [];
arr.push (str || "");
this.append = function (str) {
arr.push (str);
คืนสิ่งนี้;
-
this.toString = function () {
return arr.join ("");
-
-
แล้วเรียกสิ่งนี้ว่า:
การคัดลอกรหัสมีดังนี้:
var txt = new StringBuffer ();
txt.append ("สวัสดี");
txt.append ("");
txt.append ("โลก");
การแจ้งเตือน (txt.toString ());
การดำเนินการ JavaScript DOM
โมเดลวัตถุเอกสาร HTML (DOM) กำหนดวิธีมาตรฐานในการเข้าถึงและจัดการเอกสาร HTML มันแสดงถึงเอกสาร HTML เป็นแผนผังโหนดที่มีองค์ประกอบแอตทริบิวต์และเนื้อหาข้อความ ด้วยการใช้ HTML DOM JavaScript สามารถเข้าถึงและจัดการโหนดทั้งหมดในเอกสาร HTML
ทาสีใหม่
ทุกครั้งที่วัตถุ DOM แก้ไขไปยังหน้านั้นเกี่ยวข้องกับการวาดใหม่ DOM เบราว์เซอร์จะแสดงหน้าใหม่อีกครั้ง ดังนั้นการลดจำนวนการดัดแปลงวัตถุ DOM สามารถปรับปรุงประสิทธิภาพของ JavaScript ได้อย่างมีประสิทธิภาพ
การคัดลอกรหัสมีดังนี้:
สำหรับ (var i = 0; i <1000; i ++) {
var elmt = document.createElement ('P');
elmt.innerhtml = i;
document.body.appendchild (Elmt);
-
ขอแนะนำให้เปลี่ยนเป็น:
การคัดลอกรหัสมีดังนี้:
var html = [];
สำหรับ (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
-
document.body.innerhtml = html.join ('');
การเข้าถึง DOM
แต่ละโหนดในเอกสาร HTML สามารถเข้าถึงได้ผ่าน DOM ทุกครั้งที่คุณเรียก GetElementById (), getElementsByTagname () และวิธีการอื่น ๆ โหนดจะได้รับการเสร็จสิ้นและเข้าถึงอีกครั้ง ดังนั้นแคชโหนด DOM ที่พบสามารถปรับปรุงประสิทธิภาพของ JavaScript
การคัดลอกรหัสมีดังนี้:
document.getElementById ("p2"). style.color = "Blue";
document.getElementById ("p2"). style.fontfamily = "Arial";
document.getElementById ("p2"). style.fontsize = "ใหญ่กว่า";
ขอแนะนำให้เปลี่ยนเป็น:
การคัดลอกรหัสมีดังนี้:
var elmt = document.getElementById ("P2");
Elmt.style.color = "Blue";
Elmt.style.fontfamily = "Arial";
elmt.style.fontsize = "ใหญ่กว่า";
Dom Traversal
องค์ประกอบของ Dom Traversal Child มักจะอ่านองค์ประกอบลูกถัดไปโดย INDEX Loop ในเบราว์เซอร์ต้นวิธีการอ่านนี้มีประสิทธิภาพมากในการดำเนินการ การใช้วิธีการ Nextsibling สามารถปรับปรุงประสิทธิภาพของการเดินทางผ่าน DOM โดย JS
การคัดลอกรหัสมีดังนี้:
var html = [];
var x = document.getElementsByTagname ("p"); // โหนดทั้งหมด
สำหรับ (var i = 0; i <x.length; i ++) {
// todo
-
ขอแนะนำให้เปลี่ยนเป็น:
การคัดลอกรหัสมีดังนี้:
var html = [];
var x = document.getElementById ("div"); // โหนดที่เหนือกว่า
var node = x.firstchild;
ในขณะที่ (โหนด! = null) {
// todo
node = node.nextsibling;
-
การปล่อยหน่วยความจำ JavaScript
ในเว็บแอปพลิเคชันเมื่อจำนวนวัตถุ DOM เพิ่มขึ้นการใช้หน่วยความจำจะมีขนาดใหญ่ขึ้นเรื่อย ๆ ดังนั้นการอ้างอิงถึงวัตถุควรได้รับการปล่อยตัวในเวลาเพื่อให้เบราว์เซอร์สามารถรีไซเคิลหน่วยความจำนี้ได้
ฟรีหน่วยความจำที่ครอบครองโดย DOM
การคัดลอกรหัสมีดังนี้:
document.getElementById ("ทดสอบ"). innerhtml = "";
การตั้งค่า innerHTML ขององค์ประกอบ DOM เป็นสตริงว่างสามารถปลดปล่อยหน่วยความจำที่ถูกครอบครองโดยองค์ประกอบลูกของมัน
ปล่อยวัตถุจาวาสคริปต์
การคัดลอกรหัสมีดังนี้:
//วัตถุ:
obj = null
// คุณสมบัติวัตถุ:
ลบ obj.property
// องค์ประกอบอาร์เรย์:
arr.splice (0,3); // ลบองค์ประกอบ 3 รายการแรก