JavaScript学习笔记(十七)js 优化_基础知识

一直很迷惑司徒正美为什么对以下的for循环还鄙视,

for (var i = 0; i < list.length; i++) {

//循环代码

}

看了下面这篇文章终于TM明白了。。。

语言层次方面

循环

在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用。

如果要与数组的长度作比较,应该事先把数组的length属性放入一个局部变量中,减少查询次数。

所以上面的代码应该这么写:

for (var i = 0,l = list.length; i < l; i++) {

//循环代码

}

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的栈当中的。

字符串连接

如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下

var buf = new Array();

for (var i = 0; i < 100; i++) {

   buf.push(i.toString());

}

var all = buf.join("");

类型转换

类型转换是大家常犯的错误,因为JavaScript是动态类型语言,你不能指定变量的类型。

1.  把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:("" +) > String() > .toString() > new String()

String()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。

2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。另外,和第二节的对象查找中的问题不一样,Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。

3. 对于自定义的对象,如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高

使用直接量

其实这个影响倒比较小,可以忽略。什么叫使用直接量,比如,JavaScript支持使用[param,param,param,...]来直接表达一个数组,以往我们都使用new Array(param,param,...),使用前者是引擎直接解释的,后者要调用一个Array内部构造器,所以要略微快一点点。

同样,var foo = {}的方式也比var foo = new Object();快,

var reg = /../;要比var reg=new RegExp()快。

字符串遍历操作

对字符串进行循环操作,譬如替换、查找,应使用正则表达式,因为本身JavaScript的循环速度就比较慢,而正则表达式的操作是用C写成的语言的API,性能很好。

高级对象

自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用,应采用缓存的方式。

DOM相关

插入HTML

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。

对象查询

使用[“”]查询要比.items()更快,这和前面的减少对象查找的思路是一样的,调用.items()增加了一次查询和函数的调用。

创建DOM节点

通常我们可能会使用字符串直接写HTML来创建节点,其实这样做无法保证代码的有效性。

字符串操作效率低

所以应该是用document.createElement()方法,而如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,应该先准备一个样板节点。

定时器

如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval。setTimeout每次要重新设置一个定时器。

其他

脚本引擎

Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多,无论是执行速度还是内存管理上,因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化

文件优化也是一个很有效的手段,删除所有的空格和注释,把代码放入一行内,可以加快下载的速度,注意,是下载的速度而不是解析的速度,如果是本地,注释和空格并不会影响解释和执行速度。

总结

在JavaScript编程中提高JavaScript运行性能的一些方法,其实这些经验都基于几条原则:

1.直接拿手头现成的东西比较快,如局部变量比全局变量快,直接量比运行时构造对象快等等。

2.尽可能少地减少执行次数,比如先缓存需要多次查询的。

3.尽可能使用语言内置的功能,比如串链接。

4.尽可能使用系统提供的API,因为这些API是编译好的二进制代码,执行效率很高

5.一些基本的算法上的优化,同样可以用在JavaScript中,比如运算结构的调整。但是由于JavaScript是解释型的,一般不会在运行时对字节码进行优化,所以这些优化仍然是很重要的。

当然,其实这里的一些技巧同样使用在其他的一些解释型语言中,大家也可以进行参考。

时间: 2024-07-28 22:36:38

JavaScript学习笔记(十七)js 优化_基础知识的相关文章

JavaScript学习笔记之JS对象_基础知识

默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分:秒] 如:today=new Date("October 1,2008 12:00:00") 3.数值格式:公元年,月,日,[时,分,秒] 如:today=new Date(2008,10,1) 日期对象的方法: 格式:日期对象名称.方法([参数]) 使用例子: 复制代码 代码如下: <body>     <

JavaScript学习笔记之JS函数_基础知识

函数就是包裹在花括号中的代码块,前面使用了关键词function: 复制代码 代码如下: function functionName() {     这里是要执行的代码 } 函数参数 函数的参数可以任意多个,不用声明变量类型,只用给出变量名: 复制代码 代码如下: function myFunction(name, job) {     这里是要执行的代码 } 函数返回值 在函数中使用return语句,函数会停止执行,返回调用它的地方. 函数的返回值也不用声明类型,直接返回即可. 复制代码 代码

JavaScript高级程序设计(第3版)学习笔记12 js正则表达式_基础知识

需要指出的是,这里只是总结了正则表达式的常用的且比较简单的语法,而不是全部语法,在我看来,掌握了这些常用语法,已经足够应对日常应用了.正则表达式不只是应用在ECMAScript中,在JAVA..Net.Unix等也有相应应用,这篇文章则是以ECMAScript中的正则表达式为基础总结的. 一.正则表达式基础 1.普通字符:字母.数字.下划线.汉字以及所有没有特殊意义的字符,如ABC123.在匹配时,匹配与之相同的字符. 2.特殊字符:(需要时,使用反斜杠"\"进行转义) 字符 含义 字

JavaScript高级程序设计(第3版)学习笔记5 js语句_基础知识

砖瓦和水泥都有了,接下来该是砌墙了,在ECMAScript中,语句就是我们需要砌的墙了.语句也和操作符一样,对于有C背景的人来说再自然不过了,下面采用类似的形式整理一下语句的相关知识,重点突出一些ECMAScript中比较特别和个人认为比较有意思的地方,同样,没有强调的但比较基础的语句并非不重要,而是我认为你已经熟悉. 语句一览 语句 语法 简要描述 简单语句  ; 语句以分号(;)结束,在不引起歧义的情况下也可以省略分号. 语句块 {} 使用大括号({})将一组语句放一起组成一个语句块,在EC

Javascript学习笔记一 之 数据类型_基础知识

一.数据类型 Javascript是一种弱类型的脚本语言,它一共有6种数据类型,又被分为基础数据类型,特殊数据类型,复合数据类型. 1.基础数据类型:数值型,字符串型,布尔型 2.特殊数据类型:null,undefined(区别在于null需要显性赋值,而undefined表示没有赋值) 3.复合(引用)数据类型:Object(数组是特殊的对象) 注:理解基础数据类型和引用数据类型的区别.如函数参数传递 二. 包装类和基础数据类型的关系 对于基础数据类型,都有相应的包装类(Object对象)与之

JavaScript学习笔记之内置对象_基础知识

JS Window 窗口对象:http://www.w3school.com.cn/js/js_window.asp 所有浏览器都支持window对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为window对象的成员. 窗口对象的属性和方法格式: [window.]属性 [window.]方法(参数) 甚至 HTML DOM 的 document 也是 window 对象的属性之一: window.document.getElementById("heade

JavaScript学习笔记之Cookie对象_基础知识

JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据). Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt 有两种类型的cookie: (1)持久性cookie,会被存储到客户端的硬盘上. (2)会话Cookie:不

JavaScript学习笔记之Function对象_基础知识

在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念. 例子: 复制代码 代码如下: <html>        <head>               <script type="text/javascript">               function add(number)               {                     alert(n

JavaScript 学习笔记(十一)_基础知识

document对象 下表列出了BOM的document对象的一些通用属性: 属    性 说    明 alinkColor 激活的链接的颜色,如<body alink="color">定义的* bgColor 页面的背景颜色,如<body bgcolor="color">定义的* fgColor 页面的文本颜色,如<body text="color">定义的* lastModified 最后修改页面的日期,

javascript学习笔记(十一) 正则表达式介绍_基础知识

1.修饰符 . 任意一个字符 * 匹配*前面0个或多个字符 + 匹配+前面一个或多个字符 ? 匹配?前面0个或1个字符 ^ 以^后面的字符为前导 $ 以$前面的字符结尾 [] 匹配[]内的一个字符 () 分组,可以用\1 \2提取 [^] 匹配^后的以外的字符 {n} {n}前的字符有n个,n为正数 {n,} {n,}前的字符至少有n个,n为正数 {n,m} {n,m}前的字符有n~m个,n,m为正数 2.字符 \d 一个数字 \D 一个非数字 \w 一个字母或数字 \W 一个非字母和非数字 \