0

0

JavaScript性能优化小窍门

伊谢尔伦

伊谢尔伦

发布时间:2016-11-24 09:46:03

|

1651人浏览过

|

来源于php中文网

原创

javascript已经是目前最流行的语言了,它能做很多事情 - 网站界面,服务器端,游戏 ,操作系统 ,机器人 等等很多很多。

  不过,说实话,即使它这么疯狂流行,它的性能还没有达到它的极限。是的,它在改进,但是等到它在各个方面赶上本地应用之前,在做一个HYBIRD混合应用时,你还不得不使用一些伎俩来优化它的性能。

  Firefox拥有目前最快的JavaScript解析器 SpiderMonkey,

  有各种各样的让JavaScript的速度更快的努力,其中一个是asm.js. Asm.js是JavaScript是由Emscripten产生的一个子集,它为C/C++编绎成的JavaScript代码做了很多优化,编译型后的代码很难看,这就是为什么你不能自己写优化后的代码,但它运行非常快。我建议你阅读一下这篇文章

  别扯了举个例子吧!

  好了,我们的目标是写速度更快的JavaScript代码,这里有让你的代码跑得更快一些的小窍门,以及更好的内存效率。请注意,我不是严格讨论DOM和Web应用程序,它是关于JavaScript的,DOM只是一部分。

立即学习Java免费学习笔记(深入)”;

  眼见为实,我要添加为第一个添加jsperf测试用例,使用的是Firefox38和Chrome39测试。

  #1不要类型转换

  JavaScript是动态类型,但如果你想提高速度不要使用该功能。尽量保持变量的类型一致。这也适用于数组,尽管主要是由浏览器都进行了优化,但尽量不要混用不同类型的数组。这就是为何编译成 JavaScript的C/C++代码使用静态类型的原因之一。

{
  var x = '2';
  var y = 5;
  x = 2;
  x + y;
}

  测试用例

  另外: 字符串与数字类型间相互转换

  比方说,你必须将字符串转换为数字,parseInt与parseFloat是最好的方法吗?让我们来看看。

parseFloat("100")
+"100"
// 整型
parseInt("100", 10)
"100"|0
"100" >> 0
"100" << 0
// 仅适用于正数
"100" >>> 0

  parseInt 测试  ~ parseFloat 测试

  Firefox对位操作进行了优化,运行的代码比parseInt和+运算速度快约99%。而Chrome显然对位运算符没有偏爱,他们比parseInt函数还慢62%。

  parseFloat比+运算符在两种浏览器(Firefox 28%,Chrome 39%)上都要快。

  因此,如果你在写Node/Chrome或Firefox的应用程序?我认为,一般使用parseInt函数是正确的。

  #2不要重新构造对象

  重组对象不便宜,应该避免它:

  不要使用delete运算符

  删除操作比分配一个null属性慢很多。分配null在两个浏览器都快99%,但它不能修改对象的结构,但删除可以。

  编辑:我认为这里有点误导,这并不意味着你不应该使用delete操作符,delete运算符有它自己的使用情况,它可以防止对象的内存泄漏。

  delete vs null 

  不要以后再添加属性

  尽量不要在以后再添加属性,最好从一开始就定义对象的架构。这在Firefox中快100%,在Chrome中快89%。

  动态属性VS预先定义结构  

WebShop开源网上购物系统
WebShop开源网上购物系统

WebShop网上商店系统专注中小企业、个人的网上购物电子商务解决方案,淘宝商城系统用户/个人首选开店的购物系统!综合5500多用户的意见或建议,从功能上,界面美观上,安全性,易用性上等对网店系统进行了深度的优化,功能更加强大,界面模板可直接后台选择。WebShop网上商店系统特点:1 对于中小企业、个体、个人、店主和淘宝易趣等卖家,可利用WebShop快速建立购物网。2 源代码开放,利用WebS

下载

  #3字符串联连

  字符串联连是一个非常昂贵的操作,但是应该用什么方法呢?当然不是Array.prototype.join。

  +=运算符似乎比+快很多,String.prototype.concat和Array.prototype.join在两种浏览器都更快。Array.prototype.join是最慢的,符合市场预期。

  字符串连接测试 

  #4正确的使用正则表达式

  使用RegExp.prototype.exec是没有必要,不是吗?

  然而,RegExp.prototype.test和String.prototype.search之间是有性能差异的,让我们来看看哪个方法更快:

  正则表达式的方法

  RegExp.prototype.exec比String.prototype.match快了不少,但他们是不完全一样的东西,它们的区别超出了本文的范围,看这个问答。

  RegEx.prototype.test更快,可能是因为它不返回找到匹配的索引。 String.prototype.search应仅用于找到所需的匹配的索引。

  然而,你不应该使用正则表达式来查找另一个字符串的位置,你可以使用String.prototype.indexOf方法。

  String.prototype.search VS String.prototype.indexOf

  另一个有趣的基准是String.prototype.indexOf VS RegExp.prototype.test,我个人预计后者要快,这是在Firefox中发生的事情,但在Chrome中,事实并非如此。 RegExp.prototype.test在Firefox中快32%,而在Chrome中String.prototype.indexOf快33%。在这种情况下,你自己选择喜欢的方式吧。

  #5限制声明/传递变量的范围(作用域)

  假如你调用一个函数,浏览器必须做一些所谓的范围查找,它的昂贵程度取决于它要查找多少范围。尽量不要依辣全局/高范围的变量,尽量使局部范围变量,并将它们传递给函数。更少的范围查找,更少的牺牲速度。

  这个测试告诉我们,从局部范围内传递和使用变量比从更高的声明范围查找变量快,无论是Chrome和Firefox。

  内部范围VS高范围VS全局

  #6你不需要所有的东西都用jQuery

  大多数开发者使用jQuery做一些简单的任务,我的意思在一些场合你没有必要使用jQuery,你觉得用$.val()始终是必要的吗?就拿这个例子:

$('input').keyup(function() {
    if($(this).val() === 'blah') { ... }
});

  这是学习如何使用JavaScript修改DOM的最重要原因之一,这样你可以编写更高效的代码。

  用纯JavaScript100%完成同样的功能100%的速度更快,这是JSPerf基准测试

$('input').keyup(function() {
  if(this.value === 'blah') { ... }
});

相关文章

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

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

下载

相关标签:

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

相关专题

更多
Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

8

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

101

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

55

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

139

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

12

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

86

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

447

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

49

2026.01.09

热门下载

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

精品课程

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

共58课时 | 3.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.1万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

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

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