有效提高JavaScript执行效率的一些知识

时间：2021-10-14 来源：互联网编辑：宝哥软件园浏览：次

为了提供新鲜独特的用户体验，很多网站使用JavaScript来改进设计、验证表单、检查浏览器、Ajax请求、cookie操作等，从而实现不刷新的动态效果。但是，如果在浏览器中呈现大量内容，如果处理不当，网站的性能会急剧下降。因此，我们需要知道如何提高JavaScript的执行效率。

JavaScript函数

在JavaScript中，函数在使用前会被预编译。虽然有时候可以用字符串代替函数，但是每次执行这段JavaScript代码时，都会被重新解析，影响性能。

1.eval示例的复制代码： eval(' output=(input * input)')；//建议改为：eval(new function(){ output=(input * input)})；

2.setTimeout示例。

复制代码如下：settimeout ('alert (1 ')，1000)；//建议改为： settimeout(function(){ alert(1)}，1000)；

使用函数而不是字符串作为参数确保了新方法中的代码可以被JavaScript编译器优化。

JavaScript范围

JavaScript范围链中的每个范围都包含几个变量。理解范围链很重要，以便利用它。

复制的代码如下：var localVar=' global//全局变量

功能测试(){ 0

var localVar=' local//局部变量

//局部变量alert(local var)；

//全局变量alert(this . Localvar)；

//查找文档。如果找不到局部变量，请查找全局变量var page name=document . getelementbyid(' page name ')；}

使用局部变量比使用全局变量快得多，因为在范围链中越远，解析越慢。下图显示了范围链结构：

如果代码中有with或try-catch语句，范围链将会更加复杂，如下图所示：

JavaScript字符串

JavaScript中对性能有很大影响的一个函数是字符串串联。一般来说，字符串由数字拼接而成。但是早期的浏览器并没有优化这种连接方式，导致字符串的不断创建和销毁，严重降低了JavaScript的执行效率。

复制的代码如下：VARTXT=' hello ' ' ' world

建议阅读：

复制代码如下： var o=[]；o . push(' hello ')；o . push(')；o . push(' world ')；var txt=o . join()；

让我们简单地再打包一次：

复制代码如下：函数字符串缓冲区(str){ vararr=[]；arr . push(str | | ' ')；this . append=function(str){ arr . push(str)；归还这个；};this . ToString=function(){ return arr . join(')；};};

然后这样叫：

复制代码如下： var txt=new StringBuffer()；txt . append(' Hello ')；txt . append(' ')；txt . append(' World ')；alert(txt . ToString())；

Javascript操作。

HTML文档对象模型定义了访问和操作HTML文档的标准方法。它将HTML文档表示为节点树，节点树包含元素、属性和文本内容。有了HTML DOM，JavaScript可以访问HTML文档中的所有节点并对其进行操作。

DOM重绘

每次将DOM对象修改为页面时，都会涉及到DOM重绘，浏览器会重新呈现页面。因此，减少DOM对象的修改次数可以有效提高JavaScript的性能。

复制代码如下： for(var I=0；i 1000I){ var elmt=document . create element(' p ')；elmt . innerhtml=I；document . body . appendchild(elmt)；}

建议阅读：

复制的代码如下： var html=[]；for(var I=0；i 1000I){ html . push(' p ' I '/p ')；} document . body . innerhtml=html . join(' ')；

DOM访问

HTML文档中的每个节点都可以通过DOM访问。每次调用getElementById()，getElementsByTagName()等方法时，都会再次搜索和访问节点。因此，缓存找到的DOM节点也可以提高JavaScript的性能。复制代码如下： document . getelementbyid(' p2 ')。style.color=' bluedocument . getelementbyid(' p2 '). style . font family=' Arial '；document . getelementbyid(' p2 '). style . font size=' big '；

建议阅读：

复制代码如下： varem t=document . getelementbyid(' p2 ')；elmt . style . color=' blue '；elmt . style . font family=' Arial '；elmt.style.fontSize='更大'；

DOM遍历

一般在遍历DOM的子元素时，会根据索引循环读取下一个子元素。在早期的浏览器中，这种读取方法效率很低。使用nextSibling方法可以提高js遍历DOM的效率。

复制的代码如下： var html=[]；var x=document . getelementsbytagname(' p ')；//所有节点为(var I=0；i x .长度；i ) { //todo}

建议阅读：

复制的代码如下： var html=[]；var x=document . getelementbyid(' div ')；//父节点var node=x.firstChildwhile(节点！=null){//todo node=node . nextsible；}

JavaScript内存释放。

在web应用中，随着DOM对象数量的增加，内存消耗会越来越大。因此，应该及时释放对象的引用，以便浏览器可以回收内存。

释放DOM占用的内存。

复制代码如下： document . getelementbyid(' test ')。innerhtml=

将DOM元素的innerHTML设置为空字符串可以释放其子元素占用的内存。