JavaScript - 性能

上一页
下一页

JavaScript 在当今的每个网站中都非常重要。如果 JavaScript 失败，我们的网站将无法正常工作。关注 JavaScript 的性能非常重要，因为它会影响提供积极的用户体验、保持参与度和确保业务成功。优化的 JavaScript 将确保页面加载更快，响应式交互有助于提高用户满意度，从而提高转化率和搜索引擎排名（因为 SEO 会更好）。

在竞争激烈的数字环境中，优化的 JavaScript 代码不仅可以吸引和留住用户，还可以提高资源效率，降低服务器成本并提供竞争优势。随着移动设备的日益普及和对渐进式 Web 应用程序的重视，性能优化不仅是用户的期望，而且是旨在在在线空间中脱颖而出并蓬勃发展的企业的战略必要条件。

优化 DOM 操作

DOM 操作是指将每个元素表示为树中的一个节点，并通过其 ID、类名等进行访问或修改。这些 DOM 操作操作应该尽可能减少，并且会对我们的应用程序速度产生重大影响。让我们考虑下面的示例，其中我们动态创建一个包含 1000 个项目的列表。

例

Naive 代码


<!DOCTYPE html>
<html>
<body>
	 	<ul id="itemList"></ul>
	 	<script>
	 	 	 const itemList = document.getElementById('itemList');
	 	 	 // Inefficient DOM manipulation
	 	 	 for (let i = 0; i < 1000; i++) {
	 	 	 	 	itemList.innerHTML += `<li>Item ${i}</li>`;
	 	 	 }
	 	</script>
</body>
</html>

优化(Optimized)代码


<!DOCTYPE html>
<html>
<body>
	 	<ul id="itemList"></ul>
	 	<script>
	 	 	 // Efficient DOM manipulation using document fragment
	 	 	 const itemList = document.getElementById('itemList');
	 	 	 const fragment = document.createDocumentFragment();
	 	 	 for (let i = 0; i < 1000; i++) {
	 	 	 	 	const listItem = document.createElement('li');
	 	 	 	 	listItem.textContent = `Item ${i}`;
	 	 	 	 	fragment.appendChild(listItem);
	 	 	 }
	 	 	 itemList.appendChild(fragment);
	 	</script>
</body>
</html>

使用 Promise 的异步操作

为了防止主线程阻塞，我们必须优先考虑异步编程。考虑这个例子：使用 Promise 从 API 检索数据;在这种情况下，Promise 被证明对于管理异步数据获取是必不可少的。防止 UI 在运行过程中卡顿;增强整体用户体验：这些是好处。

例


<!DOCTYPE html>
<html>
<body>
	 	<h2>Asynchronous Operations with Promises</h1>
	 	<div id="dataContainer"></div>
	 	<script>
	 	 	 // Fetch data asynchronously
	 	 	 function fetchData() {
	 	 	 	 	return new Promise((resolve, reject) => {
	 	 	 	 	 	 // Simulating an API call with a delay
	 	 	 	 	 	 setTimeout(() => {
	 	 	 	 	 	 	 	const data = { message: 'Hello, world!' };
	 	 	 	 	 	 	 	resolve(data);
	 	 	 	 	 	 }, 1000);
	 	 	 	 	});
	 	 	 }

	 	 	 // Usage of the fetchData function
	 	 	 fetchData()
	 	 	 	 	.then(data => {
	 	 	 	 	 	 document.getElementById('dataContainer').textContent = data.message;
	 	 	 	 	})
	 	 	 	 	.catch(error => {
	 	 	 	 	 	 alert('Error fetching data:', error);
	 	 	 	 	});
	 	</script>
</body>
</html>

延迟 JavaScript 加载

JavaScript 通常在打开页面时加载，但是通过延迟 JavaScript 的加载，我们可以优化页面加载性能，尤其是在处理非必要的脚本时。当浏览器遇到 <script> 标签时，它们通常会阻止渲染，直到脚本完成下载和执行。然而，通过在script标签中使用defer属性，我们可以指示浏览器在后台继续下载脚本，同时继续解析和渲染HTML。然后，在 HTML 完全解析后执行该脚本。

例


<!DOCTYPE html>
<html>
<body>
	 	<p>Deferred JavaScript Loading</p>
	 	<script defer src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
	 	<div id="loadingMessage">JavaScript is loading...</div>
	 	<script>
	 	 	 // Add an event listener to indicate when the JavaScript is fully loaded
	 	 	 document.addEventListener('DOMContentLoaded', function() {
	 	 	 	 	document.getElementById('loadingMessage').textContent = 'JavaScript has finished loading!';
	 	 	 });
	 	</script>
</body>
</html>

上述代码的另一个选项是使用 async 属性。虽然与 defer 类似，但 async 会异步加载脚本，但它不能保证执行顺序。首先完成加载的脚本将首先执行。

避免使用全局变量

全局变量是那些在整个代码中可见或具有较大范围的变量。了解我们的代码是否真的要求变量的范围是全局的，或者它是否可以通过代码封装有效地管理，这很重要。以下示例演示了如何使用封装来避免使用全局变量，从而提高脚本的性能。

例


<!DOCTYPE html>
<html>
<body>
	 	<h2>Avoiding Global Variables</h2>
	 	<div id="result"></div>
	 	<script>
	 	 	 var resultElement = document.getElementById('result');
	 	 	 // Inefficient use of global variables
	 	 	 var globalVar = 10;

	 	 	 function addNumbers(x, y) {
	 	 	 	 	return globalVar + x + y;
	 	 	 }

	 	 	 resultElement.innerHTML += "Using global variable, the sum is " + addNumbers(51, 7) + "<br>";
	 	 	 	 	 		
	 	 	 // Improved encapsulation
	 	 	 (function () {
	 	 	 	 	var localVar = 10;
	 	 	 	 	function addNumbers(x, y) {
	 	 	 	 	 	 return localVar + x + y;
	 	 	 	 	}
	 	 	 	 	resultElement.innerHTML += "Using encapsulation, the sum is " + addNumbers(51, 7);
	 	 	 })();
	 	</script>
</body>
</html>

虽然我们在本教程中从 JavaScript 的角度讨论了性能优化，但重要的是要注意，无论使用哪种语言，某些优化都是不变的。这包括使用 switch case 而不是 length if else if、内存管理、并发等场景。

JavaScript的性能优化对各个行业和应用程序都有影响。在电子商务中，高速页面加载已被证明可以提高用户参与度和对话率，而在社交媒体中，JavaScript 有助于提供无缝交互。新闻和媒体相关网站受益于内容快速更新，并且只有学习平台（教育科技行业）需要 JavaScript 作为交互式教育组件。

另一方面，金融应用程序、协作工具、游戏网站和医疗保健应用程序都需要优化的 JavaScript，以确保其界面响应迅速并及时处理数据。

打印本页
上一页
下一页