架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 7327|回复: 1

[JavaScript] javascrip{过滤}t性能优化

[复制链接]
发表于 2017-12-4 20:23:14 | 显示全部楼层 |阅读模式
1、尊重对象所有权
 不要为实例或原型添加属性;
 不要为实例或原型添加方法;
 不要重定义已存在的方法。
最佳的方法便是永远不修改不是由你所有的对象。所谓拥有对象,就是说这个对象是你创建的,比如你自己创建的自定义类型或对象字面量。而 Array 、 document 这些显然不是你的,它们在你的代码执行前就存在了。
2、避免全局变量
最多创建一个全局变量,让其他对象和函数存在其中。请看以下例子:
//两个全局量——避免!!
var name = “Nicholas”;
function sayName(){
alert(name);
}
这段代码包含了两个全局量:变量 name 和函数 sayName() 。其实可以创建一个包含两者的对象,如下例所示:
//一个全局量——推荐
var MyApplication = {
name: “Nicholas”,
sayName: function(){
alert(this.name);
}
};
3、避免与 null 进行比较
 如果值应为一个引用类型,使用 instanceof 操作符检查其构造函数;
 如果值应为一个基本类型,使用 typeof 检查其类型;
 如果是希望对象包含某个特定的方法名,则使用 typeof 操作符确保指定名字的方法存在于对象上。
(在这里推荐下我的web前端学习交流群:675498134,不管你是小白还是大神,我都欢迎你们过来学习交流,不定期分享干货,包括我自己整理的最新的前端资料和教程送给大家,每天还有技术大牛直播讲解前端知识。欢迎初学和进阶中的小伙伴,一起学习一起交流,共同进步。)
4、使用常量
尽管 Javascrip{过滤}t 没有常量的正式概念,但它还是很有用的。这种将数据从应用逻辑分离出来的思想,可以在不冒引入错误的风险的同时,就改变数据。请看以下例子:
var Constants = {
INVALID_VALUE_MSG: “Invalid value!”,
INVALID_VALUE_URL: “/errors/invalid.php”
};
function validate(value){
if (!value){
alert(Constants.INVALID_VALUE_MSG);
locatio{过滤}n.href = Constants.INVALID_VALUE_URL;
}
}
5、避免全局查找
可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大,因为要涉及作用域链上的查找。请看以下函数:
function updateUI(){
var imgs = document.getElementsByTagName(“img”);
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = document.title + ” image ” + i;
}
var msg = document.getElementById(“msg”);
msg.innerHTML = “Update complete.”;
}
该函数可能看上去完全正常,但是它包含了三个对于全局 document 对象的引用。如果在页面上有多个图片,那么 for 循环中的 document 引用就会被执行多次甚至上百次,每次都会要进行作用域链查找。通过创建一个指向 document 对象的局部变量,就可以通过限制一次全局查找来改进这个函数的性能:
function updateUI(){
var doc = document;
var imgs = doc.getElementsByTagName(“img”);
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = doc.title + ” image ” + i;
}
var msg = doc.getElementById(“msg”);
msg.innerHTML = “Update complete.”;
这里,首先将 document 对象存在本地的 doc 变量中;然后在余下的代码中替换原来的 document 。与原来的的版本相比,现在的函数只有一次全局查找,肯定更快。
6、性能的其他注意事项
 原生方法较快——只要有可能,使用原生方法而不是自己用 Javascrip{过滤}t 重写一个。原生方法是用诸如 C/C++之类的编译型语言写出来的,所以要比 Javascrip{过滤}t 的快很多很多。Javascrip{过滤}t 中最容易被忘记的就是可以在 Math 对象中找到的复杂的数学运算;这些方法要比任何用 Javascrip{过滤}t 写的同样方法如正弦、余弦快的多。
 Switch 语句较快 —— 如果有一系列复杂的 if-else 语句,可以转换成单个 switch 语句则可以得到更快的代码。还可以通过将 case 语句按照最可能的到最不可能的顺序进行组织,来进一步优化 switch 语句。
 位运算符较快 —— 当进行数学运算的时候,位运算操作要比任何布尔运算或者算数运算快。选择性地用位运算替换算数运算可以极大提升复杂计算的性能。诸如取模,逻辑与和逻辑或都可以考虑用位运算来替换。

评分

参与人数 1MB +1 贡献 +1 收起 理由
QWERTYU + 1 + 1 支持楼主发好帖,我也会发好帖!.

查看全部评分





上一篇:sql server带条件导出指定数据
下一篇:新手玩CSS中的一些黑科技
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2017-12-5 09:33:13 | 显示全部楼层
学习了            
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-3-29 06:54

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表