ความรู้บางอย่างเกี่ยวกับการปรับปรุงประสิทธิภาพการดำเนินการ JavaScript อย่างมีประสิทธิภาพ

เพื่อมอบประสบการณ์การใช้งานที่สดใหม่และไม่เหมือนใครเว็บไซต์หลายแห่งใช้ 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 รายการแรก