0

0

JavaScript代码规范和性能整理

大家讲道理

大家讲道理

发布时间:2017-03-04 15:11:54

|

1710人浏览过

|

来源于php中文网

原创

  1. 性能

Js在性能方面有多要注意的地方:

  • 避免全局查找

Js性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消耗肯定要比本函数局部作用域的消耗大。举个例子:

function setInnerHtml(){  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i

 

这段代码循环调用了doucument.getElementByid(“dom”),而在循环外只执行了一次doucument所以没必要将doucument赋值局部变量,而是把循环里面的赋值为局部变量,每次循环就不用再去查找全局的doucument对象。

function setInnerHtml(){  var domhtml= doucument.getElementByid(“dom”).innerHtml;  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i

 

原则就是当要多次调用全局对象的时候特别在循环中,最后将全局对象赋值到局部变量中,当然这种在几十次的调用上性能差异不会很明显,但作为一个程序员既然有性能优化的写法还是尽量去做。

  • 避免with语句

现在基本不会用到这个语句了,就不多说。

  • 避免不必要的属性查找

简单说就是变量存值,调用这个变量的性能消耗是最小的,而对象的属性的取值的性能消耗相对多一些。比如:

var query=window.location.href.subtring(window.location.href.indexOf(“?”));

 

这段代码有6次属性查找效率特别不好,最好改为:

var url=window.loaction.href;var query=url.substring(url.indexOf(“?”));

 

这样优化就效率提高了很多。

  • 优化循环

1)         减值迭代:大多数循环都是从0开始增加循环,在很多情况下从最大值减值循环效率更高。

2)         简化终止条件:由于每次循环都会去判断终止条件,所以简化终止条件也可以提高循环效率。

3)         简化循环体:循环体是执行最多的,所以要保证循环体的优化。

  • 避免解析js代码字符串

在js代码中解析js代码字符串时必须重新启动一个解析器来解析代码,这样造成比较大的性能消耗,所以尽量避免比如eval函数,function构造js代码字

符串函数,setTimeout传字符串的情况。

  • 原生方法较快,尽量用原生方法。

  • Switch语句较快。

  • 位运算符较快。

     2. 代码规范

  • 代码注释:

1)         函数和方法:在每个函数或方法都应该包含注释说明函数的功能,输入输出。

2)         复杂的算法:在复杂的算法中要加入注释,好让人理解算法的逻辑思路。

3)         Hack:兼容性代码上也要加入注释说明。

4)         大段代码:用于完成单个任务的多行代码应该在前面放一个描述任务的注释

  • 解耦HTML/JavaScript

Html是结构成,js是行为层,他们天生需要交互,我们在写代码的时候应该尽量让html和js的关联度减小,有些方法会让他们的过于紧密的耦合,比如:js在html页面中script标签中声明js代码、在html标签中绑定onclick事件、在js改写html代码都会造成html和js过于紧密的耦合。

Html呈现应该尽可能和js保持分离,当js用于插入数据时,尽量不要直接插入标记,一般可以在页面中直接包含并隐藏标记,然后等到整个页面渲染好之后,就可以用js显示该标记。

将html和js解耦可以在调试过程中节省时间,更加容易确定错误的来源,也减轻维护难度。

  • 解耦css/JavaScript

JavaScript和css也是非常紧密相关的,js经常对页面的样式做动态修改。为了让他们的耦合更松散,可以通过js修改对应的class样式类。

  • 解耦应用逻辑/事件处理程序

在实际开发中我们经常在一个事件函数出来将要处理的所有代码都放在这个事件中,例如:

function handleKeyPress(event){

   event=EventUtil.getTarget(event);   if(event.keyCode===13){var target=EventUtil.getTarget(event);var value=5*parseInt(target.value);if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

}

 

这里就是把逻辑处理代码和事件处理代码放到一起,这样会让调试不好调试,维护难度变高,而且要是突然修改要新增加一个事件做同样类似的逻辑处理,那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如:

function validateValue(value){

 value=5*parseInt(value); if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}function handleKeyPress(event){

  event=EventUtil.getEvent(event);  if(event.keyCode===13){   var target=EventUtil.getTarget(event);

   validateValue(target.value);

}

}

 

这样事件处理和逻辑处理就分离开了,这样做有几个好处,可以让你更容易更改触发特定过程的事件,其次可以在不附加到事件的情况下测试代码,使其更易创建单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则:

  1. 勿将event对象传给其他方法;只传来着event对象中所需要的数据;

  2. 任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。

  3. 任何时间处理程序都应该处理事件,然后将处理转交给应用逻辑。

  • 避免全局变量

这样会让脚本执行一致和可维护,最多创建一个全局变量。类似jQuery一样,所以方法属性都在$对象当中,避免对全局变量造成过多的污染。

  • 尽量使用常量

数据和使用它的逻辑进行分离要注意一下几点:

  1.  重复值

  2. 用户界面字符串

  3.  url

  4. 任意可能会更改的值

  • 其他优化

  1. 多变量声明时用一条语句逗号隔开声明

  2. 对dom的操作的优化

  3. 对dom进行html代码插入尽量在最后一次添加到dom对象中。

  4. innerHTML的效率要比appendChild的效率高,以为innerHTML会创建一个HTML解析器,然后使用内部的DOM调用来创建DOM结构,而非基于JavaScript的DOM调用,由于内部方法是编译好的而非解释执行,所以执行快的多。

  5. 使用事件委托减少绑定的事件数量。

  6. 尽量少用到返回HTMLCollection语句。

相关文章

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

16

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

136

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

7

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作
windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

6

2026.01.26

2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

122

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表
个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例,应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元,专项扣除 1000 元,专项附加扣除 2000 元,当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元,对应税率为 3%,速算扣除数为 0,则当月应纳税额为 2000×3% = 60 元。

35

2026.01.26

oppo云服务官网登录入口 oppo云服务登录手机版
oppo云服务官网登录入口 oppo云服务登录手机版

oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时,可以随时将这些存储在云端的数据快速恢复到手机中。

121

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号