【移動應(yīng)用開發(fā)技術(shù)】如何提高web前端的性能優(yōu)化

function

getCategory(age)

{

var

category

=

"";

switch

(true)

{

case

isNaN(age):

category

=

"not

an

age";

break;

case

(age

>=

50):

category

=

"Old";

break;

case

(age

<=

20):

category

=

"Baby";

break;

default:

category

=

"Young";

break;

};

return

category;

}

getCategory(5);

//Babyvar

str

=

"<div>這是一個測試字符串</div>";

/**效率低**/

var

obj

=

document.getElementsByTagName("body");

for(var

i

=

0;

i

<

100;

i++){

obj.innerHTML

+=

str

+

i;

}

/**效率高**/

var

obj

=

document.getElementsByTagName("body");

var

arr

=

[];

for(var

i

=

0;

i

<

100;

i++){

arr[i]

=

str

+

i;

}

obj.innerHTML

=

arr.join("");/**不提倡**/

var

i

=

1;

var

j

=

"hello";

var

arr

=

[1,2,3];

var

now

=

new

Date();

/**提倡**/

var

i

=

1,

j

=

"hello",

arr

=

[1,2,3],

now

=

new

Date();/**不提倡**/

var

name

=

values[i];

i++;

/**提倡**/

var

name

=

values[i++];/**不提倡**/

var

a

=

new

Array();

a[0]

=

1;

a[1]

=

"hello";

a[2]

=

45;

var

o

=

new

Obejct();

=

"bill";

o.age

=

13;

/**提倡**/

var

a

=

[1,

"hello",

45];

var

o

=

{

name

:

"bill",

age

:

13

};String()屬于內(nèi)部函數(shù)，所以速度很快。

.toString()要查詢原型中的函數(shù)，所以速度略慢。

new

String()最慢。/**效率低**/

var

divs

=

document.getElementsByTagName("div");

for(var

i

=

0;

i

<

divs.length;

i++){

...

}

/**效率高，適用于獲取DOM集合，如果純數(shù)組則兩種情況區(qū)別不大**/

var

divs

=

document.getElementsByTagName("div");

for(var

i

=

0,

len

=

divs.length;

i

<

len;

i++){

...

}try

{

for

(

var

i

=

0;

i

<

200;

i++)

{}

}

catch

(e){}函數(shù)的調(diào)用

with語句

with會創(chuàng)建自已的作用域，因此會增加其中執(zhí)行代碼的作用域的長度。

全局作用域。var

foo

=

function()

{

var

local

=

{};

};

foo();

console.log(local);

//=>

undefined

var

bar

=

function()

{

local

=

{};

};

bar();

console.log(local);

//=>

{}

/**這里我們定義了foo()函數(shù)和bar()函數(shù)，他們的意圖都是為了定義一個名為local的變量。在foo()函數(shù)中，我們使用var語句來聲明定義了一個local變量，而因?yàn)楹瘮?shù)體內(nèi)部會形成一個作用域，所以這個變量便被定義到該作用域中。而且foo()函數(shù)體內(nèi)并沒有做任何作用域延伸的處理，所以在該函數(shù)執(zhí)行完畢后，這個local變量也隨之被銷毀。而在外層作用域中則無法訪問到該變量。而在bar()函數(shù)內(nèi)，local變量并沒有使用var語句進(jìn)行聲明，取而代之的是直接把local作為全局變量來定義。故外層作用域可以訪問到這個變量。**/

local

=

{};

//

這里的定義等效于

global.local

=

{};function

foo()

{

var

val

=

'hello';

function

bar()

{

function

baz()

{

global.val

=

'world;'

};

baz();

console.log(val);

//=>

hello

};

bar();

};

foo();

/**在`JAVASCRIPT`中，變量標(biāo)識符的查找是從當(dāng)前作用域開始向外查找，直到全局作用域?yàn)橹?。所以`JAVASCRIPT`代碼中對變量的訪問只能向外進(jìn)行，而不能逆而行之。baz()函數(shù)的執(zhí)行在全局作用域中定義了一個全局變量val。而在bar()函數(shù)中，對val這一標(biāo)識符進(jìn)行訪問時，按照從內(nèi)到外的查找原則：在bar函數(shù)的作用域中沒有找到，便到上一層，即foo()函數(shù)的作用域中查找。然而，使大家產(chǎn)生疑惑的關(guān)鍵就在這里：本次標(biāo)識符訪問在foo()函數(shù)的作用域中找到了符合的變量，便不會繼續(xù)向外查找，故在baz()函數(shù)中定義的全局變量val并沒有在本次變量訪問中產(chǎn)生影響。**/3、減少作用域鏈上的查找次數(shù)/**效率低**/

for(var

i

=

0;

i

<

10000;

i++){

var

but1

=

document.getElementById("but1");

}

/**效率高**/

/**避免全局查找**/

var

doc

=

document;

for(var

i

=

0;

i

<

10000;

i++){

var

but1

=

doc.getElementById("but1");

}

/**上面代碼中，第二種情況是先把全局對象的變量放到函數(shù)里面先保存下來，然后直接訪問這個變量，而第一種情況是每次都遍歷作用域鏈，直到全局環(huán)境，我們看到第二種情況實(shí)際上只遍歷了一次，而第一種情況卻是每次都遍歷了，而且這種差別在多級作用域鏈和多個全局變量的情況下還會表現(xiàn)的非常明顯。在作用域鏈查找的次數(shù)是`O(n)`。通過創(chuàng)建一個指向`document`的局部變量，就可以通過限制一次全局查找來改進(jìn)這個函數(shù)的性能。**/function

foo()

{

var

local

=

'Hello';

return

function()

{

return

local;

};

}

var

bar

=

foo();

console.log(bar());

//=>

Hello

/**這里所展示的讓外層作用域訪問內(nèi)層作用域的技術(shù)便是閉包(Closure)。得益于高階函數(shù)的應(yīng)用，使foo()函數(shù)的作用域得到`延伸`。foo()函數(shù)返回了一個匿名函數(shù)，該函數(shù)存在于foo()函數(shù)的作用域內(nèi)，所以可以訪問到foo()函數(shù)作用域內(nèi)的local變量，并保存其引用。而因這個函數(shù)直接返回了local變量，所以在外層作用域中便可直接執(zhí)行bar()函數(shù)以獲得local變量。**/循環(huán)綁定事件，我們假設(shè)一個場景：有六個按鈕，分別對應(yīng)六種事件，當(dāng)用戶點(diǎn)擊按鈕時，在指定的地方輸出相應(yīng)的事件。

var

btns

=

document.querySelectorAll('.btn');

//

6

elements

var

output

=

document.querySelector('#output');

var

events

=

[1,

2,

3,

4,

5,

6];

//

Case

1

for

(var

i

=

0;

i

<

btns.length;

i++)

{

btns[i].onclick

=

function(evt)

{

output.innerText

+=

'Clicked

'

+

events[i];

};

}

/**這里第一個解決方案顯然是典型的循環(huán)綁定事件錯誤，這里不細(xì)說，詳細(xì)可以參照我給一個網(wǎng)友的回答；而第二和第三個方案的區(qū)別就在于閉包傳入的參數(shù)。**/

//

Case

2

for

(var

i

=

0;

i

<

btns.length;

i++)

{

btns[i].onclick

=

(function(index)

{

return

function(evt)

{

output.innerText

+=

'Clicked

'

+

events[index];

};

})(i);

}

/**第二個方案傳入的參數(shù)是當(dāng)前循環(huán)下標(biāo)，而后者是直接傳入相應(yīng)的事件對象。事實(shí)上，后者更適合在大量數(shù)據(jù)應(yīng)用的時候，因?yàn)樵贘avaScript的函數(shù)式編程中，函數(shù)調(diào)用時傳入的參數(shù)是基本類型對象，那么在函數(shù)體內(nèi)得到的形參會是一個復(fù)制值，這樣這個值就被當(dāng)作一個局部變量定義在函數(shù)體的作用域內(nèi)，在完成事件綁定之后就可以對events變量進(jìn)行手工解除引用，以減輕外層作用域中的內(nèi)存占用了。而且當(dāng)某個元素被刪除時，相應(yīng)的事件監(jiān)聽函數(shù)、事件對象、閉包函數(shù)也隨之被銷毀回收。**/

//

Case

3

for

(var

i

=

0;

i

<

btns.length;

i++)

{

btns[i].onclick

=

(function(event)

{

return

function(evt)

{

output.innerText

+=

'Clicked

'

+

event;

};

})(events[i]);

};(function()

{

//

主業(yè)務(wù)代碼

})();;(function(win,

doc,

$,

undefined)

{

//

主業(yè)務(wù)代碼

})(window,

document,

jQuery);/**RequireJS**/

define(['jquery'],

function($)

{

//

主業(yè)務(wù)代碼

});

/**SeaJS**/

define('module',

['dep',

'underscore'],

function($,

_)

{

//

主業(yè)務(wù)代碼

});function

getData(callBack){

$.ajax({

url:"",

data:{},

dataType:"json",

type:"get",

success:function(data){

callBack(null,data)

}

})

}getData(function(error,data){

console.log(data)

})var

arr

=

[1,2,3,4,5];

var

arr2

=

[];

arr[arr.length]

=