http://www.yuyong.net

大神处置如何优化js代码

电脑现已成为我们工作、生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到如何优化js代码的问题,如果我们遇到了如何优化js代码的情况,该怎么处理怎么才能解决如何...

电脑现已成为我们工作、生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到如何优化js代码的问题,如果我们遇到了如何优化js代码的情况,该怎么处理怎么才能解决如何优化js代码带来的困扰呢,对于这样的问题其实我们只需要文本编辑工具网页浏览器打开文本编辑工具,在新建的文本中编写如下图所示的代码并将其保存成一个网页。使用浏览器将网页文件打开。点击鼠标右键,在右键菜单中选择“审查元素”。选择好开发者工具中的控制台窗口。控制台窗口主要用来调试代码方法使用的,自己可以针对编写的代码进行调试。如下图所示js中提供了三种循环语法,它们分别是:for(;;)、while()、for(in)。这三种循环中for(in)的效率最差这样就解决了这样的问题,接下来给大家带来如何优化js代码的详细操作步骤。

工具/原料

文本编辑工具
网页浏览器

方法/步骤

打开文本编辑工具,在新建的文本中编写如下图所示的代码并将其保存成一个网页。使用浏览器将网页文件打开。点击鼠标右键,在右键菜单中选择“审查元素”。选择好开发者工具中的控制台窗口。控制台窗口主要用来调试代码方法使用的,自己可以针对编写的代码进行调试。如下图所示

大神处置如何优化js代码

大神处置如何优化js代码

js中提供了三种循环语法,它们分别是:for(;;)、while()、for(in)。这三种循环中for(in)的效率最差的(需要查询Hash键),因此应尽量少用for(in)循环语句。for(;;)、while()循环的性能基本持平, while和for循环语法推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符。如下图所示

大神处置如何优化js代码

尽量使用局部变量。局部变量的访问速度要比全局变量的访问速度更快。局部变量通常是放在函数的栈里的,而全局变量其实是window对象的成员,定义过多反而会影响界面查询效率。如下图所示

大神处置如何优化js代码

减少对象查找。JavaScript脚本是解释性的,所以像a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,以此类推。所以如果这样的表达式重复出现过多,代码执行性能会大幅度下降。因此代码中应该尽量少出现这样的表达式,可以利用临时的局部变量来减少查询次数。如下图所示

大神处置如何优化js代码

尽量用JSON格式来创建对象,而不是var obj = new Object()方式。原因在于使用JSON格式创建的对象是直接复制,而new需要调用构造器来创建,所以前者的性能会更好。其实Java优化中也提到创建对象尽量减少使用new创建对象。如下图所示

大神处置如何优化js代码

对象查询。使用obj["name"]查询要比obj.name更快。推荐使用obj['name']来获取对象属性信息。如下图所示

大神处置如何优化js代码

尽量减少DOM调用。在Web项目开发过程中,JavaScript主要就是对DOM进行操作。可是对于DOM的操作是非常昂贵的,因为这会导致浏览器执行回流操作。因此能够避免的应该尽可能的减少对DOM的操作。如下图所示

大神处置如何优化js代码

js代码优化的方面还有很多,在此不依依列出。想学习的小伙伴们可以在网上搜集更多的相关资源进行学习。练习js代码优化的时候可以使用上面提到的浏览器开发者工具哦。

注意事项

最好再开发正式的项目中就进行js优化;
上面写的小例子仅作为参考,可以自己写一些例子

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。