性能javascript,性能車是什么意思

如何優(yōu)化javascript性能優(yōu)化

前言

成都創(chuàng)新互聯(lián)專注于內(nèi)黃企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。內(nèi)黃網(wǎng)站建設(shè)公司,為內(nèi)黃等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

一直在學(xué)習(xí)javascript，也有看過《犀利開發(fā)Jquery內(nèi)核詳解與實(shí)踐》，對(duì)這本書的評(píng)價(jià)只有兩個(gè)字犀利，可能是對(duì)javascript理解的還不夠透徹異或是自己太笨，更多的是自己不擅于思考懶得思考以至于里面說的一些精髓都沒有太深入的理解。

鑒于想讓自己有一個(gè)提升，進(jìn)不了一個(gè)更加廣闊的天地，總得找一個(gè)屬于自己的居所好好生存，所以平時(shí)會(huì)有意無意的去積累一些使用jQuerry的常用知識(shí)，特別是對(duì)于性能要求這一塊，總是會(huì)想是不是有更好的方式來實(shí)現(xiàn)。

下面是我總結(jié)的一些小技巧，僅供參考。(我先會(huì)說一個(gè)總標(biāo)題，然后用一小段話來說明這個(gè)意思再最后用一個(gè)demo來簡(jiǎn)單言明)

避免全局查找

在一個(gè)函數(shù)中會(huì)用到全局對(duì)象存儲(chǔ)為局部變量來減少全局查找，因?yàn)樵L問局部變量的速度要比訪問全局變量的速度更快些

function search() {

//當(dāng)我要使用當(dāng)前頁面地址和主機(jī)域名

alert(window.location.href + window.location.host);

}

//最好的方式是如下這樣先用一個(gè)簡(jiǎn)單變量保存起來

function search() {

var location = window.location;

alert(location.href + location.host);

}

定時(shí)器

如果針對(duì)的是不斷運(yùn)行的代碼，不應(yīng)該使用setTimeout，而應(yīng)該是用setInterval，因?yàn)閟etTimeout每一次都會(huì)初始化一個(gè)定時(shí)器，而setInterval只會(huì)在開始的時(shí)候初始化一個(gè)定時(shí)器

var timeoutTimes = 0;

function timeout() {

timeoutTimes++;

if (timeoutTimes 10) {

setTimeout(timeout, 10);

}

timeout();

//可以替換為：

var intervalTimes = 0;

function interval() {

intervalTimes++;

if (intervalTimes = 10) {

clearInterval(interv);

}

var interv = setInterval(interval, 10);

字符串連接

如果要連接多個(gè)字符串，應(yīng)該少使用+=，如

s+=a;

s+=b;

s+=c;

應(yīng)該寫成s+=a + b + c；

而如果是收集字符串，比如多次對(duì)同一個(gè)字符串進(jìn)行+=操作的話，最好使用一個(gè)緩存，使用JavaScript數(shù)組來收集，最后使用join方法連接起來

var buf = [];

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

buf.push(i.toString());

}

var all = buf.join("");

避免with語句

和函數(shù)類似，with語句會(huì)創(chuàng)建自己的作用域，因此會(huì)增加其中執(zhí)行的代碼的作用域鏈的長(zhǎng)度，由于額外的作用域鏈的查找，在with語句中執(zhí)行的代碼肯定會(huì)比外面執(zhí)行的代碼要慢，在能不使用with語句的時(shí)候盡量不要使用with語句。

with (a.b.c.d) {

property1 = 1;

property2 = 2;

}

//可以替換為：

var obj = a.b.c.d;

obj.property1 = 1;

obj.property2 = 2;

數(shù)字轉(zhuǎn)換成字符串

般最好用”" + 1來將數(shù)字轉(zhuǎn)換成字符串，雖然看起來比較丑一點(diǎn)，但事實(shí)上這個(gè)效率是最高的，性能上來說：

(“” +) String() .toString() new String()

浮點(diǎn)數(shù)轉(zhuǎn)換成整型

很多人喜歡使用parseInt()，其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()

各種類型轉(zhuǎn)換

var myVar = "3.14159",

str = "" + myVar, // to string

i_int = ~ ~myVar, // to integer

f_float = 1 * myVar, // to float

b_bool = !!myVar, /* to boolean - any string with length

and any number except 0 are true */

array = [myVar]; // to array

如果定義了toString()方法來進(jìn)行類型轉(zhuǎn)換的話，推薦顯式調(diào)用toString()，因?yàn)閮?nèi)部的操作在嘗試所有可能性之后，會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String，所以直接調(diào)用這個(gè)方法效率會(huì)更高

多個(gè)類型聲明

在JavaScript中所有變量都可以使用單個(gè)var語句來聲明，這樣就是組合在一起的語句，以減少整個(gè)腳本的執(zhí)行時(shí)間，就如上面代碼一樣，上面代碼格式也挺規(guī)范，讓人一看就明了。

插入迭代器

如var name=values[i]; i++;前面兩條語句可以寫成var name=values[i++]

使用直接量

var aTest = new Array(); //替換為

var aTest = [];

var aTest = new Object; //替換為

var aTest = {};

var reg = new RegExp(); //替換為

var reg = /../;

//如果要?jiǎng)?chuàng)建具有一些特性的一般對(duì)象，也可以使用字面量，如下：

var oFruit = new O;

oFruit.color = "red";

oFruit.name = "apple";

//前面的代碼可用對(duì)象字面量來改寫成這樣：

var oFruit = { color: "red", name: "apple" };

使用DocumentFragment優(yōu)化多次append

一旦需要更新DOM,請(qǐng)考慮使用文檔碎片來構(gòu)建DOM結(jié)構(gòu)，然后再將其添加到現(xiàn)存的文檔中。

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

document.body.appendChild(el);

}

//可以替換為：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

使用一次innerHTML賦值代替構(gòu)建dom元素

對(duì)于大的DOM更改，使用innerHTML要比使用標(biāo)準(zhǔn)的DOM方法創(chuàng)建同樣的DOM結(jié)構(gòu)快得多。

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

//可以替換為：

var html = [];

for (var i = 0; i 1000; i++) {

html.push('p' + i + '/p');

}

document.body.innerHTML = html.join('');

通過模板元素clone，替代createElement

很多人喜歡在JavaScript中使用document.write來給頁面生成內(nèi)容。事實(shí)上這樣的效率較低，如果需要直接插入HTML，可以找

一個(gè)容器元素，比如指定一個(gè)div或者span，并設(shè)置他們的innerHTML來將自己的HTML代碼插入到頁面中。通常我們可能會(huì)使用字符串直接寫

HTML來創(chuàng)建節(jié)點(diǎn)，其實(shí)這樣做，1無法保證代碼的有效性2字符串操作效率低，所以應(yīng)該是用document.createElement()方法，而如

果文檔中存在現(xiàn)成的樣板節(jié)點(diǎn)，應(yīng)該是用cloneNode()方法，因?yàn)槭褂胏reateElement()方法之后，你需要設(shè)置多次元素的屬性，使用

cloneNode()則可以減少屬性的設(shè)置次數(shù)——同樣如果需要?jiǎng)?chuàng)建很多元素，應(yīng)該先準(zhǔn)備一個(gè)樣板節(jié)點(diǎn)

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

//替換為：

var frag = document.createDocumentFragment();

var pEl = document.getElementsByTagName('p')[0];

for (var i = 0; i 1000; i++) {

var el = pEl.cloneNode(false);

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

使用firstChild和nextSibling代替childNodes遍歷dom元素

var nodes = element.childNodes;

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

var node = nodes[i];

//……

}

//可以替換為：

var node = element.firstChild;

while (node) {

//……

node = node.nextSibling;

如何編寫高性能的 javascript

一．Javascript代碼執(zhí)行效率

1. DOM

1.1 使用 DocumentFragment 優(yōu)化多次 append

說明：添加多個(gè) dom 元素時(shí)，先將元素 append 到 DocumentFragment 中，最后統(tǒng)一將 DocumentFragment 添加到頁面。

該做法可以減少頁面渲染 dom 元素的次數(shù)。經(jīng) IE 和 Fx 下測(cè)試，在 append1000 個(gè)元素時(shí)，效率能提高 10%-30% ， Fx 下提升較為明顯。

服用前：

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

document.body.appendChild(el);

}

服用后：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

1.2 通過模板元素 clone ，替代 createElement

說明：通過一個(gè)模板 dom 對(duì)象 cloneNode ，效率比直接創(chuàng)建 element 高。性能提高不明顯，約為 10% 左右。在低于 100 個(gè)元素 create 和 append 操作時(shí)，沒有優(yōu)勢(shì)。

服用前：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

服用后：

var frag = document.createDocumentFragment();

var pEl = document.getElementsByTagName('p')[0];

for (var i = 0; i 1000; i++) {

var el = pEl.cloneNode(false);

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

1.3 使用一次 innerHTML 賦值代替構(gòu)建 dom 元素

說明：根據(jù)數(shù)據(jù)構(gòu)建列表樣式的時(shí)候，使用設(shè)置列表容器 innerHTML 的方式，比構(gòu)建 dom 元素并 append 到頁面中的方式，效率有數(shù)量級(jí)上的提高。

服用前：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

服用后：

var html = [];

for (var i = 0; i 1000; i++) {

html.push('

' + i + '

');

}

document.body.innerHTML = html.join('');

1.4 使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素

說明：約能獲得 30%-50% 的性能提高。逆向遍歷時(shí)使用 lastChild 和 previousSibling 。

服用前：

var nodes = element.childNodes;

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

var node = nodes[i];

……

}

服用后：

var node = element.firstChild;

while (node) {

……

nodenode = node.nextSibling;

}

2. 字符串

2.1 使用 Array 做為 StringBuffer ，代替字符串拼接的操作

說明： IE 在對(duì)字符串拼接的時(shí)候，會(huì)創(chuàng)建臨時(shí)的 String 對(duì)象；經(jīng)測(cè)試，在 IE 下，當(dāng)拼接的字符串越來越大時(shí)，運(yùn)行效率會(huì)急劇下降。 Fx 和 Opera 都對(duì)字符串拼接操作進(jìn)行了優(yōu)化；經(jīng)測(cè)試，在 Fx 下，使用 Array 的 join 方式執(zhí)行時(shí)間約為直接字符串拼接的 1.4 倍。

服用前：

var now = new Date();

var str = '';

for (var i = 0; i 10000; i++) {

str += '123456789123456789';

}

alert(new Date() - now);

服用后：

var now = new Date();

var strBuffer = [];

for (var i = 0; i 10000; i++) {

strBuffer.push('123456789123456789');

}

var str = strBuffer.join('');

alert(new Date() - now);

3. 循環(huán)語句

3.1 將循環(huán)控制量保存到局部變量

說明：對(duì)數(shù)組和列表對(duì)象的遍歷時(shí)，提前將 length 保存到局部變量中，避免在循環(huán)的每一步重復(fù)取值。

服用前：

var list = document.getElementsByTagName('p');

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

……

}

服用后：

var list = document.getElementsByTagName('p');

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

……

}

3.2 順序無關(guān)的遍歷時(shí)，用 while 替代 for

說明：該方法可以減少局部變量的使用。比起效率優(yōu)化，更能直接看到的是字符數(shù)量的優(yōu)化。該做法有程序員強(qiáng)迫癥的嫌疑。

服用前：

var arr = [1,2,3,4,5,6,7];

var sum = 0;

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

sum += arr[i];

}

服用后：

var arr = [1,2,3,4,5,6,7];

var sum = 0, l = arr.length;

while (l--) {

sum += arr[l];

}

4. 條件分支

4.1 將條件分支，按可能性順序從高到低排列

說明：可以減少解釋器對(duì)條件的探測(cè)次數(shù)。

4.2 在同一條件子的多（ 2 ）條件分支時(shí)，使用 switch 優(yōu)于 if

說明： switch 分支選擇的效率高于 if ，在 IE 下尤為明顯。 4 分支的測(cè)試， IE 下 switch 的執(zhí)行時(shí)間約為 if 的一半。

4.3 使用三目運(yùn)算符替代條件分支

服用前：

if (a b) {

num = a;

} else {

num = b;

}

服用后：

num = a b ? a : b;

5. 定時(shí)器

5.1 需要不斷執(zhí)行的時(shí)候，優(yōu)先考慮使用 setInterval

說明： setTimeout 每一次都會(huì)初始化一個(gè)定時(shí)器。 setInterval 只會(huì)在開始的時(shí)候初始化一個(gè)定時(shí)器

服用前：

var timeoutTimes = 0;

function timeout () {

timeoutTimes++;

if (timeoutTimes 10) {

setTimeout(timeout, 10);

}

timeout();

服用后：

var intervalTimes = 0;

function interval () {

intervalTimes++;

if (intervalTimes = 10) {

clearInterval(interv);

}

var interv = setInterval(interval, 10);

5.2 使用 function 而不是 string

說明：如果把字符串作為 setTimeout 和 setInterval 的參數(shù)，瀏覽器會(huì)先用這個(gè)字符串構(gòu)建一個(gè) function 。

服用前：

var num = 0;

setTimeout('num++', 10);

服用后：

var num = 0;

function addNum () {

num++;

}

setTimeout(addNum, 10);

6. 其他

6.1 盡量不使用動(dòng)態(tài)語法元素

說明： eval 、 Function 、 execScript 等語句會(huì)再次使用 javascript 解析引擎進(jìn)行解析，需要消耗大量的執(zhí)行時(shí)間。

6.2 重復(fù)使用的調(diào)用結(jié)果，事先保存到局部變量

說明：避免多次取值的調(diào)用開銷。

服用前：

var h1 = element1.clientHeight + num1;

var h2 = element1.clientHeight + num2;

服用后：

var eleHeight = element1.clientHeight;

var h1 = eleHeight + num1;

var h2 = eleHeight + num2;

6.3 使用直接量

說明：

var a = new Array(param,param,...) - var a = []

var foo = new Object() - var foo = {}

var reg = new RegExp() - var reg = /.../

6.4 避免使用 with

說明： with 雖然可以縮短代碼量，但是會(huì)在運(yùn)行時(shí)構(gòu)造一個(gè)新的 scope 。

OperaDev 上還有這樣的解釋，使用 with 語句會(huì)使得解釋器無法在語法解析階段對(duì)代碼進(jìn)行優(yōu)化。對(duì)此說法，無法驗(yàn)證。

服用前：

with (a.b.c.d) {

property1 = 1;

property2 = 2;

}

服用后：

var obj = a.b.c.d;

obj.property1 = 1;

obj.property2 = 2;

6.5 巧用 || 和布爾運(yùn)算符

重要程度： ★★★

服用前：

function eventHandler (e) {

if(!e) e = window.event;

}

服用后：

function eventHandler (e) {

ee = e || window.event;

}

服用前：

if (myobj) {

doSomething(myobj);

}

服用后：

myobj doSomething(myobj);

6.6 類型轉(zhuǎn)換

說明：

1). 數(shù)字轉(zhuǎn)換成字符串，應(yīng)用 "" + 1 ，性能上： ("" +) String() .toString() new String() ；

2). 浮點(diǎn)數(shù)轉(zhuǎn)換成整型，不使用 parseInt() ， parseInt() 是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，建議使用 Math.floor() 或者 Math.round()

3). 對(duì)于自定義的對(duì)象，推薦顯式調(diào)用 toString() 。內(nèi)部操作在嘗試所有可能性之后，會(huì)嘗試對(duì)象的 toString() 方法嘗試能否轉(zhuǎn)化為 String 。

二．內(nèi)存管理

2.1 循環(huán)引用

說明：如果循環(huán)引用中包含 DOM 對(duì)象或者 ActiveX 對(duì)象，那么就會(huì)發(fā)生內(nèi)存泄露。內(nèi)存泄露的后果是在瀏覽器關(guān)閉前，即使是刷新頁面，這部分內(nèi)存不會(huì)被瀏覽器釋放。

簡(jiǎn)單的循環(huán)引用：

var el = document.getElementById('MyElement');

var func = function () {…}

el.func = func;

func.element = el;

但是通常不會(huì)出現(xiàn)這種情況。通常循環(huán)引用發(fā)生在為 dom 元素添加閉包作為 expendo 的時(shí)候。

如：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

init 在執(zhí)行的時(shí)候，當(dāng)前上下文我們叫做 context 。這個(gè)時(shí)候， context 引用了 el ， el 引用了 function ， function 引用了 context 。這時(shí)候形成了一個(gè)循環(huán)引用。

下面 2 種方法可以解決循環(huán)引用：

1) 置空 dom 對(duì)象

服用前：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

服用后：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

el = null;

}

init();

將 el 置空， context 中不包含對(duì) dom 對(duì)象的引用，從而打斷循環(huán)應(yīng)用。

如果我們需要將 dom 對(duì)象返回，可以用如下方法：

服用前：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

return el;

}

init();

服用后：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

try{

return el;

} finally {

el = null;

}

init();

2) 構(gòu)造新的 context

服用前：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

服用后：

function elClickHandler() {……}

function init() {

var el = document.getElementById('MyElement');

el.onclick = elClickHandler;

}

init();

把 function 抽到新的 context 中，這樣， function 的 context 就不包含對(duì) el 的引用，從而打斷循環(huán)引用。

2.2 通過 javascript 創(chuàng)建的 dom 對(duì)象，必須 append 到頁面中

說明： IE 下，腳本創(chuàng)建的 dom 對(duì)象，如果沒有 append 到頁面中，刷新頁面，這部分內(nèi)存是不會(huì)回收的！

示例代碼：

function create () {

var gc = document.getElementById('GC');

for (var i = 0; i 5000 ; i++)

{

var el = document.createElement('div');

el.innerHTML = "test";

// 下面這句可以注釋掉，看看瀏覽器在任務(wù)管理器中，點(diǎn)擊按鈕然后刷新后的內(nèi)存變化

gc.appendChild(el);

}

2.3 釋放 dom 元素占用的內(nèi)存

說明：

將 dom 元素的 innerHTML 設(shè)置為空字符串，可以釋放其子元素占用的內(nèi)存。

在 rich 應(yīng)用中，用戶也許會(huì)在一個(gè)頁面上停留很長(zhǎng)時(shí)間，可以使用該方法釋放積累得越來越多的 dom 元素使用的內(nèi)存。

2.4 釋放 javascript 對(duì)象

說明：在 rich 應(yīng)用中，隨著實(shí)例化對(duì)象數(shù)量的增加，內(nèi)存消耗會(huì)越來越大。所以應(yīng)當(dāng)及時(shí)釋放對(duì)對(duì)象的引用，讓 GC 能夠回收這些內(nèi)存控件。

對(duì)象： obj = null

對(duì)象屬性： delete obj.myproperty

數(shù)組 item ：使用數(shù)組的 splice 方法釋放數(shù)組中不用的 item

2.5 避免 string 的隱式裝箱

說明：對(duì) string 的方法調(diào)用，比如 'xxx'.length ，瀏覽器會(huì)進(jìn)行一個(gè)隱式的裝箱操作，將字符串先轉(zhuǎn)換成一個(gè) String 對(duì)象。推薦對(duì)聲明有可能使用 String 實(shí)例方法的字符串時(shí)，采用如下寫法：

var myString = new String('Hello World');

如何編寫高性能的javascript

一．Javascript代碼執(zhí)行效率

1. DOM

1.1 使用 DocumentFragment 優(yōu)化多次 append

說明：添加多個(gè) dom 元素時(shí)，先將元素 append 到 DocumentFragment 中，最后統(tǒng)一將 DocumentFragment 添加到頁面。

該做法可以減少頁面渲染 dom 元素的次數(shù)。經(jīng) IE 和 Fx 下測(cè)試，在 append1000 個(gè)元素時(shí)，效率能提高 10%-30% ， Fx 下提升較為明顯。

服用前：

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

document.body.appendChild(el);

}

服用后：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

1.2 通過模板元素 clone ，替代 createElement

服用前：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

服用后：

var frag = document.createDocumentFragment();

var pEl = document.getElementsByTagName('p')[0];

for (var i = 0; i 1000; i++) {

var el = pEl.cloneNode(false);

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

1.3 使用一次 innerHTML 賦值代替構(gòu)建 dom 元素

服用前：

var frag = document.createDocumentFragment();

for (var i = 0; i 1000; i++) {

var el = document.createElement('p');

el.innerHTML = i;

frag.appendChild(el);

}

document.body.appendChild(frag);

服用后：

var html = [];

for (var i = 0; i 1000; i++) {

html.push('

' + i + '

');

}

document.body.innerHTML = html.join('');

1.4 使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素

說明：約能獲得 30%-50% 的性能提高。逆向遍歷時(shí)使用 lastChild 和 previousSibling 。

服用前：

var nodes = element.childNodes;

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

var node = nodes[i];

……

}

服用后：

var node = element.firstChild;

while (node) {

……

nodenode = node.nextSibling;

}

2. 字符串

2.1 使用 Array 做為 StringBuffer ，代替字符串拼接的操作

服用前：

var now = new Date();

var str = '';

for (var i = 0; i 10000; i++) {

str += '123456789123456789';

}

alert(new Date() - now);

服用后：

var now = new Date();

var strBuffer = [];

for (var i = 0; i 10000; i++) {

strBuffer.push('123456789123456789');

}

var str = strBuffer.join('');

alert(new Date() - now);

3. 循環(huán)語句

3.1 將循環(huán)控制量保存到局部變量

說明：對(duì)數(shù)組和列表對(duì)象的遍歷時(shí)，提前將 length 保存到局部變量中，避免在循環(huán)的每一步重復(fù)取值。

服用前：

var list = document.getElementsByTagName('p');

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

……

}

服用后：

var list = document.getElementsByTagName('p');

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

……

}

3.2 順序無關(guān)的遍歷時(shí)，用 while 替代 for

說明：該方法可以減少局部變量的使用。比起效率優(yōu)化，更能直接看到的是字符數(shù)量的優(yōu)化。該做法有程序員強(qiáng)迫癥的嫌疑。

服用前：

var arr = [1,2,3,4,5,6,7];

var sum = 0;

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

sum += arr[i];

}

服用后：

var arr = [1,2,3,4,5,6,7];

var sum = 0, l = arr.length;

while (l--) {

sum += arr[l];

}

4. 條件分支

4.1 將條件分支，按可能性順序從高到低排列

說明：可以減少解釋器對(duì)條件的探測(cè)次數(shù)。

4.2 在同一條件子的多（ 2 ）條件分支時(shí)，使用 switch 優(yōu)于 if

說明： switch 分支選擇的效率高于 if ，在 IE 下尤為明顯。 4 分支的測(cè)試， IE 下 switch 的執(zhí)行時(shí)間約為 if 的一半。

4.3 使用三目運(yùn)算符替代條件分支

服用前：

if (a b) {

num = a;

} else {

num = b;

}

服用后：

num = a b ? a : b;

5. 定時(shí)器

5.1 需要不斷執(zhí)行的時(shí)候，優(yōu)先考慮使用 setInterval

說明： setTimeout 每一次都會(huì)初始化一個(gè)定時(shí)器。 setInterval 只會(huì)在開始的時(shí)候初始化一個(gè)定時(shí)器

服用前：

var timeoutTimes = 0;

function timeout () {

timeoutTimes++;

if (timeoutTimes 10) {

setTimeout(timeout, 10);

}

timeout();

服用后：

var intervalTimes = 0;

function interval () {

intervalTimes++;

if (intervalTimes = 10) {

clearInterval(interv);

}

var interv = setInterval(interval, 10);

5.2 使用 function 而不是 string

說明：如果把字符串作為 setTimeout 和 setInterval 的參數(shù)，瀏覽器會(huì)先用這個(gè)字符串構(gòu)建一個(gè) function 。

服用前：

var num = 0;

setTimeout('num++', 10);

服用后：

var num = 0;

function addNum () {

num++;

}

setTimeout(addNum, 10);

6. 其他

6.1 盡量不使用動(dòng)態(tài)語法元素

說明： eval 、 Function 、 execScript 等語句會(huì)再次使用 javascript 解析引擎進(jìn)行解析，需要消耗大量的執(zhí)行時(shí)間。

6.2 重復(fù)使用的調(diào)用結(jié)果，事先保存到局部變量

說明：避免多次取值的調(diào)用開銷。

服用前：

var h1 = element1.clientHeight + num1;

var h2 = element1.clientHeight + num2;

服用后：

var eleHeight = element1.clientHeight;

var h1 = eleHeight + num1;

var h2 = eleHeight + num2;

6.3 使用直接量

說明：

var a = new Array(param,param,...) - var a = []

var foo = new Object() - var foo = {}

var reg = new RegExp() - var reg = /.../

6.4 避免使用 with

說明： with 雖然可以縮短代碼量，但是會(huì)在運(yùn)行時(shí)構(gòu)造一個(gè)新的 scope 。

OperaDev 上還有這樣的解釋，使用 with 語句會(huì)使得解釋器無法在語法解析階段對(duì)代碼進(jìn)行優(yōu)化。對(duì)此說法，無法驗(yàn)證。

服用前：

with (a.b.c.d) {

property1 = 1;

property2 = 2;

}

服用后：

var obj = a.b.c.d;

obj.property1 = 1;

obj.property2 = 2;

6.5 巧用 || 和布爾運(yùn)算符

重要程度： ★★★

服用前：

function eventHandler (e) {

if(!e) e = window.event;

}

服用后：

function eventHandler (e) {

ee = e || window.event;

}

服用前：

if (myobj) {

doSomething(myobj);

}

服用后：

myobj doSomething(myobj);

6.6 類型轉(zhuǎn)換

說明：

1). 數(shù)字轉(zhuǎn)換成字符串，應(yīng)用 "" + 1 ，性能上： ("" +) String() .toString() new String() ；

二．內(nèi)存管理

2.1 循環(huán)引用

簡(jiǎn)單的循環(huán)引用：

var el = document.getElementById('MyElement');

var func = function () {…}

el.func = func;

func.element = el;

但是通常不會(huì)出現(xiàn)這種情況。通常循環(huán)引用發(fā)生在為 dom 元素添加閉包作為 expendo 的時(shí)候。

如：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

下面 2 種方法可以解決循環(huán)引用：

1) 置空 dom 對(duì)象

服用前：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

服用后：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

el = null;

}

init();

將 el 置空， context 中不包含對(duì) dom 對(duì)象的引用，從而打斷循環(huán)應(yīng)用。

如果我們需要將 dom 對(duì)象返回，可以用如下方法：

服用前：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

return el;

}

init();

服用后：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

try{

return el;

} finally {

el = null;

}

init();

2) 構(gòu)造新的 context

服用前：

function init() {

var el = document.getElementById('MyElement');

el.onclick = function () {……}

}

init();

服用后：

function elClickHandler() {……}

function init() {

var el = document.getElementById('MyElement');

el.onclick = elClickHandler;

}

init();

把 function 抽到新的 context 中，這樣， function 的 context 就不包含對(duì) el 的引用，從而打斷循環(huán)引用。

2.2 通過 javascript 創(chuàng)建的 dom 對(duì)象，必須 append 到頁面中

說明： IE 下，腳本創(chuàng)建的 dom 對(duì)象，如果沒有 append 到頁面中，刷新頁面，這部分內(nèi)存是不會(huì)回收的！

示例代碼：

function create () {

var gc = document.getElementById('GC');

for (var i = 0; i 5000 ; i++)

{

var el = document.createElement('div');

el.innerHTML = "test";

// 下面這句可以注釋掉，看看瀏覽器在任務(wù)管理器中，點(diǎn)擊按鈕然后刷新后的內(nèi)存變化

gc.appendChild(el);

}

2.3 釋放 dom 元素占用的內(nèi)存

說明：

將 dom 元素的 innerHTML 設(shè)置為空字符串，可以釋放其子元素占用的內(nèi)存。

在 rich 應(yīng)用中，用戶也許會(huì)在一個(gè)頁面上停留很長(zhǎng)時(shí)間，可以使用該方法釋放積累得越來越多的 dom 元素使用的內(nèi)存。

2.4 釋放 javascript 對(duì)象

對(duì)象： obj = null

對(duì)象屬性： delete obj.myproperty

數(shù)組 item ：使用數(shù)組的 splice 方法釋放數(shù)組中不用的 item

2.5 避免 string 的隱式裝箱

var myString = new String('Hello World');

如何改進(jìn)javascript代碼的性能

而現(xiàn)在Ajax則是最為流行的一種方式。javascript是一種解釋型語言，所以能無法達(dá)到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進(jìn)他的性能，我想基于我以前給JavaScript做過的很多測(cè)試來談?wù)勛约旱慕?jīng)驗(yàn)，希望能幫助大家改進(jìn)自己的JavaScript腳本性能。

語言層次方面循環(huán)循環(huán)是很常用的一個(gè)控制結(jié)構(gòu)，大部分東西要依靠它來完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環(huán)，事實(shí)上，這三種循環(huán)中for(in)的效率極差，因?yàn)樗枰樵兩⒘墟I，只要可以就應(yīng)該盡量少用。for(;;)和while循環(huán)的性能應(yīng)該說基本(平時(shí)使用時(shí))等價(jià)。

如果是循環(huán)變量遞增或遞減，不要單獨(dú)對(duì)循環(huán)變量賦值，應(yīng)該在它最后一次讀取的時(shí)候使用嵌套的++或—操作符。

如果要與數(shù)組的長(zhǎng)度作比較，應(yīng)該事先把數(shù)組的length屬性放入一個(gè)局部變量中，減少查詢次數(shù)。

局部變量和全局變量

局部變量的速度要比全局變量的訪問速度更快，因?yàn)槿肿兞科鋵?shí)是全局對(duì)象的成員，而局部變量是放在函數(shù)的棧當(dāng)中的。

不使用Eval使用eval相當(dāng)于在運(yùn)行時(shí)再次調(diào)用解釋引擎對(duì)內(nèi)容進(jìn)行運(yùn)行，需要消耗大量時(shí)間。這時(shí)候使用JavaScript所支持的閉包可以實(shí)現(xiàn)函數(shù)模版(關(guān)于閉包的內(nèi)容請(qǐng)參考函數(shù)式編程的有關(guān)內(nèi)容)減少對(duì)象查找

因?yàn)镴avaScript的解釋性，所以a.b.c.d.e，需要進(jìn)行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達(dá)式重復(fù)出現(xiàn)，只要可能，應(yīng)該盡量少出現(xiàn)這樣的表達(dá)式，可以利用局部變量，把它放入一個(gè)臨時(shí)的地方進(jìn)行查詢。

這一點(diǎn)可以和循環(huán)結(jié)合起來，因?yàn)槲覀兂３Ｒ鶕?jù)字符串、數(shù)組的長(zhǎng)度進(jìn)行循環(huán)，而通常這個(gè)長(zhǎng)度是不變的，比如每次查詢a.length，就要額外進(jìn)行一個(gè)操作，而預(yù)先把var len=a.length，則就少了一次查詢。

字符串連接如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要連接多個(gè)字符串，應(yīng)該少使用+=，如

s+=a;s+=b;s+=c;

應(yīng)該寫成

s+=a + b + c;

以下是引用片段：

varbuf=newArray();for(vari=0;i100;i++){buf.push(i.toString());}varall=buf.join("");類型轉(zhuǎn)換類型轉(zhuǎn)換是大家常犯的錯(cuò)誤，因?yàn)镴avaScript是動(dòng)態(tài)類型語言，你不能指定變量的類型。

1. 把數(shù)字轉(zhuǎn)換成字符串，應(yīng)用"" + 1，雖然看起來比較丑一點(diǎn)，但事實(shí)上這個(gè)效率是最高的，性能上來說：

以下是引用片段：

(""+)String().toString()newString()

這條其實(shí)和下面的“直接量”有點(diǎn)類似，盡量使用編譯時(shí)就能使用的內(nèi)部操作要比運(yùn)行時(shí)使用的用戶操作要快。

String()屬于內(nèi)部函數(shù)，所以速度很快，而.toString()要查詢?cè)椭械暮瘮?shù)，所以速度遜色一些，new String()用于返回一個(gè)精確的副本。

2. 浮點(diǎn)數(shù)轉(zhuǎn)換成整型，這個(gè)更容易出錯(cuò)，很多人喜歡使用parseInt()，其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()。

另外，和第二節(jié)的對(duì)象查找中的問題不一樣，Math是內(nèi)部對(duì)象，所以Math.floor()其實(shí)并沒有多少查詢方法和調(diào)用的時(shí)間，速度是最快的。

javascript是什么意思

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語言。

Javascript腳本語言同其他語言一樣，有它自身的基本數(shù)據(jù)類型，表達(dá)式和算術(shù)運(yùn)算符及程序的基本程序框架。Javascript提供了四種基本的數(shù)據(jù)類型和兩種特殊數(shù)據(jù)類型用來處理數(shù)據(jù)和文字。而變量提供存放信息的地方，表達(dá)式則可以完成較復(fù)雜的信息處理。

JavaScript與Java的不同點(diǎn)

Java代碼必須編譯才能執(zhí)行，而JavaScript不需編譯，只需瀏覽器解釋執(zhí)行。

Java和JavaScript雖然都可以在服務(wù)器與客戶端執(zhí)行，但Java多運(yùn)行于服務(wù)器，而JavaScript多運(yùn)行于客戶端。

JavaScript使用的是松散型的數(shù)據(jù)類型，而Java則使用的是嚴(yán)謹(jǐn)?shù)臄?shù)據(jù)類型。

新聞標(biāo)題：性能javascript,性能車是什么意思
分享鏈接：http://chinadenli.net/article46/dsdeeeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、App設(shè)計(jì)、Google、App開發(fā)、品牌網(wǎng)站制作、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

性能javascript,性能車是什么意思

如何優(yōu)化javascript性能優(yōu)化

如何編寫高性能的 javascript

如何編寫高性能的javascript

如何改進(jìn)javascript代碼的性能

javascript是什么意思