媒介
如今，在互联网的使用中，经常会遇到Web开发中的功能性成果，尤其是对于目前使用的Web2.0+。如今，JavaScript是开发语言最广泛使用的Web。Web使用的功能成就大部分是因为法国作家写的JavaScript脚本功能太差造成的，包括JavaScript语言本身的功能成就和与DOM交互时的功能成就。本文主要讨论如何尽可能地阻止这样的成就，从而最大限度地提高Web使用的功能。
1.JavaScript功能降级。
因为JavaScript的单线程注释实现的两个特点，所以它有很多功能和成果，所以可以改进。
1.1评估结果:
比下面的代码:
浑丹1。评估结果
带“eval”的代码比带“eval”的代码慢100多倍。
第二个结果是:JavaScript代码将在实现之前停止“预编译” *** 作。最后，它将在当前实现情况下创建一个动作工具，并将那些称为var的变量设置为动作工具的属性。但是，此时那些变量的赋值是未定义的，那些由function定义的函数也作为动作工具的属性加入，它们的值只是函数的定义。但如果使用“eval”，“eval”(实际上是一个字符串)中的代码无法提前识别其大小写，也无法提前解析变质，即无法停止预编译的 *** 纵。所以它的功能会大打折扣。
1.2功能的使用
比下面的代码:
浑丹2号的用法。功能
有类似于“eval”方法的条件，其中“func1”的服从性比“func2”好很多，所以推荐第二种方法。
1.3功能范围链
当JavaScript注释被实现时，它会预先解释当前的变量，并将这些变量返回到不同的级别。正常情况下:
部分变量放在一级(浅)，整体变量放在二级(深)。如果进入“with”或“try–catch”代码块，新的一级将被删除，“with”或“catch”中的变量将被放入最浅的一层(第1层)，上一级将依次加深。
请参考以下代码:
浑丹3。功能域链
在那里，我们可以看到“图像”、“小部件”和“组合”属于一些变量，在第1层。“document”和“myObj”属于偶数变量，处于二级。
可变位置层越浅，面试(阅读和批改)速度越快，层越深，面试速度越慢。所以“图片”、“widget”、“组合”在那里的见面率比“文档”、“myObj”要快。为了保护一些变量的使用，你可以看到下面的代码:
浑丹4。使用一些变量
我们用部分变量“doc”代替齐次变量“document”，可以提高功能，尤其是使用齐次变量的功能。
请看下面的代码:
浑丹5。小心使用
通过减去关键字“with”，我们让代码更简单明了，但是会影响功能。如前所述，当我们进入“with”代码块时，“组合”从原来的第1层变成了第2层，所以服从会被大大扣住。比较、借用、使用原始代码:
浑丹6。改进了
但那其实不是最好的方式。JavaScript有一个特性。对于客体工具，属性满足等级越深，服从性越低。比如那里的“myObj”就曾经遇到过第三层。我们可以这样改进它:
浑丹7。降低工具会议的级别。
我们用一些变量来代替“myObj”第二层的“容器”工具。如果有大量符合工具深层属性的，可以参考上面的方法来完善我们的功能。
1.4弦(弦)的连贯性
字符串拼接
我经常看到这样的代码:
浑单8。简单的字符串拼接
str+="str1"+"str2"
那是我们经常用来拼接字符串的方法，但是那种方法会导致一些临时变量被创建和烧毁，从而影响函数。因此，建议采用以下方法进行拼接:
浑丹9。字符串数组方法拼接
varstr_array=[]；
str_array.push("str1")；
str_array.push("str2")；
str=str_array.join("")；
在那里，我们 *** 纵array的“join”方法来实现字符串的拼接，特别是当它运行在InternetExplore(IE6)的旧法语版本上时，会有显著的功能提升。
当然，最新的阅读器(如Firefox3+，IE8+等。)恶化了字符串的连接，我们也可以这样写:
浑丹10。快速字符串拼接
str+="str1"
str+="str2"
新阅读器降级了“+=”，性能比array的“join”方法略快。没有未来的更新阅读器会降级“+”，所以我们可以间接写成:str+=“str1”+“str2”。
隐性范式转换
请参考以下代码:
浑丹11号。隐性范式转换
我们在每个循环中都在使用“charAt”的方法来挪用字符串，但是因为我们在给“str”赋值常量“12345678”，所以“str”实际上并不是一个字符串工具。每次盗用“charAt”函数，城市临时使用值为“12345678”的字符串工具然后盗用“charAt”我们可以做一些改进:
浑丹12。停止隐式范式转换
在那种情况下，变量“str”将被用作字符串工具，不会有隐式范式转换的过程。那样的话，服从会隐藏进步。
串婚
有JavaScriptRegExp工具，支持字符串的正则表达式联姻。是个好东西，但它的作用其实并不长，也是虚的。相反，字符串工具(String)本身就有一些服从长与短的根本方式，比如“substring”、“indexOf”、“charAt”等等。当我们需要用正则表达式匹配字符串时，可以考虑一下:
1)是否可以通过工艺管柱工具本身支持的基本方法来处理结果。
2)是否可以减少流程“子串”所需正则表达式的类别。
所有这些方法都是有用的。进步的法国服从。
关闭正则表达式工具时，有一点需要注意，参考下面的代码:
浑丹13。正则表达式
在那里，当我们将“/s*extras/”传递到“match”方法中时，就会影响服从。它将构建一个临时值为“/s*extras/”的正则表达式工具，实现“match”方法，然后刻录临时正则表达式工具。我们可以做到:
浑丹14。 *** 纵量
然后就没有临时工具了。
SetTimeout与setInterval
“setTimeout”和“setInterval”这两个函数可以承载字符串变量，但是会取前面提到的“eval”类似的函数结果，所以提倡间接引入函数工具本身。
*** 纵提前退出
请参考以下两个代码:
浑丹15。 *** 纵提前退出
代码中多了一个“name.indexOf(…)”的判断，使得每次法语方法进行到该段时，先实现“indexOf”的判断，再实现前面的“match”。在“indexOf”比“match”更听话的情况下，那会减少“match”被执行的次数，从而达到一定程度的递进服从。
2.DOM *** 作功能恶化
JavaScript的发展离不开DOM *** 作，所以DOM *** 作的功能退化在Web的发展中越来越重要。
2.1重画与回流
重绘，也叫重绘，指的是一个重绘动作，没有会影响当前DOM的结构战规划。重画动作将发生在下列动作中:
不可见(可见性样式属性)
或颜色变化(背景、边框颜色、颜色样式属性)
页面的细节、外观、状态都没有做任何改动，但是不雅的地方改了。
与重绘相比，回流是一个更加隐蔽的变化。它的二次攻击是在DOM树被 *** 纵的时候，任何改变DOM的结构战规划城市都是回流。但是当一个元素的回流 *** 纵攻击时，它所有的母元素和子元素城都让回流走了，最初回流肯定会导致重画。例如，重画动作将发生在下列动作中:
读者窗口中心的转变
添加和删除DOM节点的 *** 作
更改某些页面中元素的细节，触摸外观和状态的 *** 作。
2.2切割回流
通过对流程Reflow和Repaint的介绍可以看出，每次Reflow带来的资金损失都比它的Repaint大，我们只要减少Reflow的发作，大概把它变成只能触碰Repaint *** 纵的代码就可以了。
请参考以下代码:
浑丹16。回流介绍
那是我们经常打的代码，但是那个代码会回流三次。请看下面的代码:
浑丹17。减少回流
回流只有一次，所以推荐DOM节点 *** 作的方法。
基于上述具有较少回流 *** 作的治疗计划，有一个参考表格:
浑丹18。 *** 纵显示器以切断回流
先隐藏pDiv，再显示。那样隐藏和展现之间的 *** 纵就不会有回流，服从性也会提高。
2.3特殊测量属性战法
在DOM元素中，有一些特殊的度量属性的方法，比如面试方法的挪用，也会触动回流。比较典型的例子就是“offsetWidth”属性战“getComputedStyle”方法。
图一。特殊测量属性作战方法
这些测量属性的方法通常包括:
获取
抵消
偏高
偏移距离
顶部/左侧/宽度/高度滚动
客户端顶部/左侧/宽度/高度
getComputedStyle()
当前样式(在IE中)
我们应该减少对属性战方法的滥用，参考下面的代码:
浑丹19。特殊测量属性
在那里，我们可以用临时变量缓存“offsetWidth”的值，这样就不用每次都遇到“offsetWidth”属性。那个方法在轮回中很有用，可以大大提高功能。
2.4风格连贯性
我们一定经常看到下面的代码:
浑丹20。风格是相关的
但是可以看到，那里的每一种风格都在改变，城市在回流。为了减少这种情况的发生，我们可以这样做:
治疗计划1:
浑丹21。类名治疗计划
通过用类替换样式，您可以将所有原来的回流或重画时间减少到一次。
治疗计划2:
浑丹22。cssText治疗计划
一次设置所有样式也是减少回流渐进功能的一种方式。
2.5XPath
一个页面通常包含超过1000页的元素，并且通常需要花费时间来定位详细的元素。如果用id或者名字来定位，会太慢，不听话；如果元素的一些其他属性(如类名等。)都是用来定位的，它会服从无知。有的只能通过流程遍历所有元素(getElementsByTagName)然后过滤找到响应元素，效率更低。在那里，我们推荐使用XPath查找元素，这是很多读者自己都支持的功能。
浑丹23。XPath处理计划
XPathreader的搜索引擎会恶化搜索符合性，大大减少返回时间。
2.6收集工具
那是一种特殊的工具。它们有面的数组，但没有一个是数组。以下方法的返回值通常是HTMLCollection工具:
文档.图像，文档.表单
getElementsByTagName()
getElementsByClassName()
那些HTMLCollection工具其实并不是一个实值，而是一个静态的结果。它们是一些特殊查询的返回值。在以下条件下，他们将从以前的查询中获得新的返回值(查询结果)，尽管在大多数情况下，战前的返回值将是相同的一次或几次:
长度属性
特定成员。
因此，HTMLCollection工具遇到属性战争的那些成员要比数组慢得多。虽然也有例外，但是Opera和Safari已经很好的处理了那种情况，不会有很棒的表现。
请参考以下代码:
浑丹24。tool连接工具
对于以上两个代码，服从性要比上一段慢很多。如果每个轮回城市都有“items.length”，就会导致“document.getElementsByTagName(..)”方法又来了，即服从会导致显著的下降。我们可以这样处理:
浑丹25。tool连接工具处理计划
你一去那里，就服从总阵。
2.7脚本标签的静态创建
下载和实现一个JavaScript脚本需要时间。在我们的法语系统中，一些JavaScript脚本被意外下载，然后被使用(例如，脚本中的函数总是被盗用，等等。).下载那些脚本只会占用CPU时间，减少内存消耗，降低Web使用的功能。为了保护静态的JavaScript脚本文件，尤其是那些内容较多、资金消耗较高的文件。
浑丹26。创建脚本标签
开头写作
那篇文章介绍了Web开发中函数圈需要注意的一些小细节。从JavaScript开始，介绍了JavaScript中一些需要停止的函数，比如eval的缺点，函数作用域链和字符串的用法等。，还分享了一些对抗武力的做法。扩展到JavaScript对DOM *** 纵的函数调整，比如 *** 纵Repaint和Reflow的机制，如何使用特殊的度量属性，style相关的函数调整，HTMLCollection工具的原理和小技巧。我们可以只关注开放过程中的那些小细节，从而尽可能地提高我们Web使用的功能。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）