> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 연구 노트(17) js 최적화_기본 지식

JavaScript 연구 노트(17) js 최적화_기본 지식

WBOY
풀어 주다: 2016-05-16 18:35:23
원래의
939명이 탐색했습니다.

一直很迷惑司徒正美为什么对以下的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() 메서드를 사용해야 하고, 문서에 미리 만들어진 템플릿 노드가 있는 경우 createElement() 메서드를 사용한 후에는 cloneNode() 메서드를 사용해야 합니다. 여러 요소를 설정해야 합니다. cloneNode()를 사용하면 속성 설정 수를 줄일 수 있습니다. 마찬가지로 많은 요소를 생성해야 하는 경우 먼저 템플릿 노드를 준비해야 합니다.

타이머

계속 실행되는 코드를 대상으로 하는 경우 setTimeout을 사용하지 말고 setInterval을 사용하면 됩니다. setTimeout은 매번 타이머를 재설정합니다.

기타

스크립트 엔진

Microsoft의 JScript는 현재 기본적으로 JScript가 업데이트되지 않기 때문에 실행 속도와 메모리 관리 측면에서 Mozilla의 Spidermonkey에 비해 효율성이 훨씬 떨어집니다. 하지만 SpiderMonkey는 ActiveXObject를 사용할 수 없습니다

파일 최적화

파일 최적화도 매우 효과적인 방법입니다. 공백과 주석을 모두 삭제하고 코드를 한 줄에 넣으면 다운로드 속도가 아니라 로컬인 경우입니다. , 주석 및 공백은 해석 및 실행 속도에 영향을 미치지 않습니다.

요약

JavaScript 프로그래밍에서 JavaScript 실행 성능을 향상시키는 몇 가지 방법은 실제로 다음과 같은 몇 가지 원칙을 기반으로 합니다.

1. 미리 만들어진 것을 직접 사용하는 것이 더 빠릅니다. 예를 들어 로컬 변수는 전역 변수보다 빠르고, 직접 변수는 런타임에 객체를 생성하는 것보다 빠릅니다.

2. 여러 쿼리가 필요한 항목을 먼저 캐싱하는 등 실행 횟수를 최대한 줄입니다.

3. 문자열 링크 등 내장된 언어 기능을 최대한 활용하세요.

4. 시스템에서 제공하는 API는 컴파일된 바이너리 코드로 실행 효율성이 높기 때문에 최대한 활용하세요

5. 작업 구조 조정과 같은 일부 기본 알고리즘 최적화는 JavaScript에서도 사용할 수 있습니다. 그러나 JavaScript는 해석되므로 바이트코드는 일반적으로 런타임에 최적화되지 않으므로 이러한 최적화는 여전히 매우 중요합니다.

물론 여기에 나온 기술 중 일부는 다른 통역 언어에서도 사용되며 참고할 수도 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿