怎样优化自己的JavaScript代码-js教程-PHP中文网

大家写JS的都知道，同一种效果有很多种写法，结果可以相同但是步奏却不同的列子比比皆是，但是虽然效果你是写出来了，但是页面的性能却大大降低，现在的开发，脚本性能的提升变得越来越重要。怎样优化自己的JavaScript代码？俩点之间的那条直线到底要怎样画才最短？今天就给大家总结归纳一下，如何最优化的写出自己的JavaScript代码。

传统的 Web 页面不会包含很多脚本，至少不会太影响 Web 页面的性能。然而，Web 页面变得越来越像应用程序，脚本对其的影响也越来越大。随着越来越多的应用采用 Web 技术开发，脚本性能的提升就变得越来越重要。桌面应用程序通常是用编译器将源代码转换为最终的二进制。编译器在生成最终的应用程序时，可以花费时间，尽可能地对性能进行优化。Web 应用程序就不能这么奢侈了。因为它们需要在多种浏览器、平台和架构上运行，所以不能对它们进行完全地预编译。浏览器会每次取到一个脚本并对其进行解释和编译，然而最终应用程序却要像桌面应用一样迅速加载、运行流畅。它被期望运行于大量各种各样的设备，从普通的台式电脑到手机都包含在内。

浏览器相当擅长实现这个目标，而 Opera 拥有当前浏览器中最快的脚本引擎之一。不过浏览器也有一些局限，这正是 Web 开发者需要关注的。要确保 Web 应用能运行得尽可能的快，这可能只是一个简单循环交换，改变一个合并的样式而不是三个，或者只添加确实会运行到的脚本。

本文会展示一些能提升 Web 应用性能的改变，其范围涉及 ECMAScript —— JavaScript 的核心语言、DOM 和文件加载。

小贴士

ECMAScript

避免使用 eval 或 Function 构造器

改写 eval

如果你需要函数，使用 function

不要使用 with

不要在要求性能的函数中使用 try-catch-finally

隔离 eval 和 with 的使用

尽量不用全局变量

注意对象的隐式换

在要求性能的函数中避免使用 for-in

使用累加形式连接字符串

基本运算比调用函数更快

为 setTimeout() 和 setInterval() 传入函数而不是字符串

DOM

重绘和重排

将重排数量降到最低

最小重排

修改文档树

修改不可见的元素

测量

一次改变多项样式

平滑度换速度

避免检索大量节点

通过 XPath 提升速度

避免在遍历 DOM 的时候进行修改

在脚本中用变量缓存 DOM 的值

文档加载

避免在多个文档间保持同一个引用

快速历史导航

使用 XMLHttpRequest

动态创建

热门教程

更多>

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

怎样优化自己的JavaScript代码