JavaScript避免代码的重复执行经验技巧分享

Stella981
• 阅读 374

经常会发现一个问题,那就是重复的代码执行,下面就是一些在查看它们的源代码时发现一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码

我喜欢到一些大型网站上去翻阅它们的原代码,期望能找到一些可以应用到自己的代码中的模式,或发现一些之前从未听说过的工具和技巧。可是,在我查看这些大型网站的源代码时,经常会发现一个问题,那就是重复的代码执行,重复的功能应用。下面就是JavaScript避免代码的重复执行经验技巧分享的一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码,

重复的收集元素

我在他们的JavaScript代码里看到的最常见的问题是重复的收集元素。虽然jQuery选择器引擎或querySelectorAll的执行速度都很快,但重复的工作就是会多占用时间和资源。这个问题很浅显。

解决的方法如下:

JavaScript避免代码的重复执行经验技巧分享

对那些写出重复执行代码的程序员的谴责我们天天都在做,但仍需要加强。当然,有些重复的动作是无法避免的(比如ajax加载页面),可是,对于这些情况,我们最好是使用事件代理,而不是直接拉取内容。

重复的条件判断

重复的条件计算很常见,但通常也是有一个通用的模式来避免它们。

你可能会看到一段代码写成这样:

JavaScript避免代码的重复执行经验技巧分享

这是可行的,但不是最高效的代码,上面的条件可能会多次计算。

写成下面的样子会更好:

JavaScript避免代码的重复执行经验技巧分享

只有一个条件,而且条件计算完成时方法或变量就已经作为结果返回了!

重复的对象创建

相比较重复的操作,重复的对象创建更难发现,通常是表现在正则表达式上。

看一下下面的这段代码:

JavaScript避免代码的重复执行经验技巧分享

上面的代码会不断的重复创建一个新的(但是相同的)正则表达式对象,对于这种情况,如果你在这个函数的外部创建这个对象。

就能避免这种情况的出现:

JavaScript避免代码的重复执行经验技巧分享

在上面的例子中,正则表达式对象只创建了一次,但多次使用——省了很多CPU处理。

这只是一部分我经常看到的其它程序员写的有重复问题的例子,你在网站建设中也有方面的发现吗?

文章来源:http://www.haitaoit.com

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Gwendolyn62 Gwendolyn62
3年前
MySQL的语句执行顺序
今天遇到一个问题就是mysql中insertinto和update以及delete语句中能使用as别名吗?目前还在查看,但是在查阅资料时发现了一些有益的知识,给大家分享一下,就是关于sql以及MySQL语句执行顺序:sql和mysql执行顺序,发现内部机制是一样的。最大区别是在别名的引用上。 一、sql执行顺序 
Easter79 Easter79
2年前
tidb集群某个节点报错之:node_exporter
今天启动集群tidb时出现一个错误,是某个tikv节点报错:node\_exporter9100.service failed一个节点的问题会导致整个集群启动失败。去此节点下的日志文件中查找,发现没有什么报错原因。无奈此时只能去系统日志中查看发生了什么问题果然发现了问题Jan1615:35:05ip1723126133
Wesley13 Wesley13
2年前
java编码优化10技巧
最近,我给Java项目做了一次代码清理工作。经过清理后,我发现一组常见的违规代码(指不规范的代码并不表示代码错误)重复出现在代码中。因此,我把常见的这些违规编码总结成一份列表,分享给大家以帮助Java爱好者提高代码的质量和可维护性。这份列表没有依据任何规则或顺序,所有的这些都是通过代码质量工具包括CheckStyle(https://www.osch
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
Modelsim仿真一些简单问题
1.在学习时序逻辑的时候,我们明白寄存器赋值总有一拍的延迟但是有的时候仿真的时候会发现会没有延迟,比如下面这段代码对应的modelsim仿真。源代码代码如下:!(https://oscimg.oschina.net/oscnet/90dc0d40ac35ad54cae504f85c1ccc29b16.png)
Wesley13 Wesley13
2年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
娜娜 娜娜
1个月前
ChatGPT消息发不出去?ChatGPT没反应?那是这个步骤少做了!
前因今天在工作的过程中,我正准备登陆咨询一些关于文案的问题,但突然发现自己无法发送消息了。“消息发送故障,但历史对话仍可查看。为了解决问题,您可以先访问OpenAI官方网站:https://status.openai.com/。这个网站提供了OpenAI系