性能javascript,性能車是什么意思
如何優化javascript性能優化
前言
成都創新互聯專注于內黃企業網站建設,成都響應式網站建設,電子商務商城網站建設。內黃網站建設公司,為內黃等地區提供建站服務。全流程定制設計，專業設計，全程項目跟蹤，成都創新互聯專業和態度為您提供的服務
一直在學習javascript，也有看過《犀利開發Jquery內核詳解與實踐》，對這本書的評價只有兩個字犀利，可能是對javascript理解的還不夠透徹異或是自己太笨，更多的是自己不擅于思考懶得思考以至于里面說的一些精髓都沒有太深入的理解。
鑒于想讓自己有一個提升，進不了一個更加廣闊的天地，總得找一個屬于自己的居所好好生存，所以平時會有意無意的去積累一些使用jQuerry的常用知識，特別是對于性能要求這一塊，總是會想是不是有更好的方式來實現。
下面是我總結的一些小技巧，僅供參考。(我先會說一個總標題，然后用一小段話來說明這個意思 再最后用一個demo來簡單言明)
避免全局查找
在一個函數中會用到全局對象存儲為局部變量來減少全局查找，因為訪問局部變量的速度要比訪問全局變量的速度更快些
function search() {
//當我要使用當前頁面地址和主機域名
alert(window.location.href + window.location.host);
}
//最好的方式是如下這樣 先用一個簡單變量保存起來
function search() {
var location = window.location;
alert(location.href + location.host);
}
定時器
如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval，因為setTimeout每一次都會初始化一個定時器，而setInterval只會在開始的時候初始化一個定時器
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);
字符串連接
如果要連接多個字符串，應該少使用+=，如
s+=a;
s+=b;
s+=c;
應該寫成s+=a + b + c；
而如果是收集字符串，比如多次對同一個字符串進行+=操作的話，最好使用一個緩存，使用JavaScript數組來收集，最后使用join方法連接起來
var buf = [];
for (var i = 0; i 100; i++) {
buf.push(i.toString());
}
var all = buf.join("");
避免with語句
和函數類似 ，with語句會創建自己的作用域，因此會增加其中執行的代碼的作用域鏈的長度，由于額外的作用域鏈的查找，在with語句中執行的代碼肯定會比外面執行的代碼要慢，在能不使用with語句的時候盡量不要使用with語句。
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
//可以替換為：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
數字轉換成字符串
般最好用”" + 1來將數字轉換成字符串，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：
(“” +) String() .toString() new String()
浮點數轉換成整型
很多人喜歡使用parseInt()，其實parseInt()是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()
各種類型轉換
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()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之后，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高
多個類型聲明
在JavaScript中所有變量都可以使用單個var語句來聲明，這樣就是組合在一起的語句，以減少整個腳本的執行時間，就如上面代碼一樣，上面代碼格式也挺規范，讓人一看就明了。
插入迭代器
如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 = /../;
//如果要創建具有一些特性的一般對象，也可以使用字面量，如下：
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";
//前面的代碼可用對象字面量來改寫成這樣：
var oFruit = { color: "red", name: "apple" };
使用DocumentFragment優化多次append
一旦需要更新DOM,請考慮使用文檔碎片來構建DOM結構，然后再將其添加到現存的文檔中。
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賦值代替構建dom元素
對于大的DOM更改，使用innerHTML要比使用標準的DOM方法創建同樣的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('p' + i + '/p');
}
document.body.innerHTML = html.join('');
通過模板元素clone，替代createElement
很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找
一個容器元素，比如指定一個div或者span，并設置他們的innerHTML來將自己的HTML代碼插入到頁面中。通常我們可能會使用字符串直接寫
HTML來創建節點，其實這樣做，1無法保證代碼的有效性2字符串操作效率低，所以應該是用document.createElement()方法，而如
果文檔中存在現成的樣板節點，應該是用cloneNode()方法，因為使用createElement()方法之后，你需要設置多次元素的屬性，使用
cloneNode()則可以減少屬性的設置次數——同樣如果需要創建很多元素，應該先準備一個樣板節點
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代碼執行效率
1. DOM
1.1 使用 DocumentFragment 優化多次 append
說明：添加多個 dom 元素時，先將元素 append 到 DocumentFragment 中，最后統一將 DocumentFragment 添加到頁面。
該做法可以減少頁面渲染 dom 元素的次數。經 IE 和 Fx 下測試，在 append1000 個元素時，效率能提高 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
說明：通過一個模板 dom 對象 cloneNode ，效率比直接創建 element 高。性能提高不明顯，約為 10% 左右。在低于 100 個元素 create 和 append 操作時，沒有優勢。
服用前：
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 賦值代替構建 dom 元素
說明：根據數據構建列表樣式的時候，使用設置列表容器 innerHTML 的方式，比構建 dom 元素并 append 到頁面中的方式，效率有數量級上的提高。
服用前：
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% 的性能提高。逆向遍歷時使用 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 在對字符串拼接的時候，會創建臨時的 String 對象；經測試，在 IE 下，當拼接的字符串越來越大時，運行效率會急劇下降。 Fx 和 Opera 都 對字符串拼接操作進行了優化；經測試，在 Fx 下，使用 Array 的 join 方式執行時間約為直接字符串拼接的 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. 循環語句
3.1 將循環控制量保存到局部變量
說明：對數組和列表對象的遍歷時，提前將 length 保存到局部變量中，避免在循環的每一步重復取值。
服用前：
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 順序無關的遍歷時，用 while 替代 for
說明：該方法可以減少局部變量的使用。比起效率優化，更能直接看到的是字符數量的優化。該做法有程序員強迫癥的嫌疑。
服用前：
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 將條件分支，按可能性順序從高到低排列
說明：可以減少解釋器對條件的探測次數。
4.2 在同一條件子的多（ 2 ）條件分支時，使用 switch 優于 if
說明： switch 分支選擇的效率高于 if ，在 IE 下尤為明顯。 4 分支的測試， IE 下 switch 的執行時間約為 if 的一半。
4.3 使用三目運算符替代條件分支
服用前：
if (a b) {
num = a;
} else {
num = b;
}
服用后：
num = a b ? a : b;
5. 定時器
5.1 需要不斷執行的時候，優先考慮使用 setInterval
說明： setTimeout 每一次都會初始化一個定時器。 setInterval 只會在開始的時候初始化一個定時器
服用前：
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 的參數，瀏覽器會先用這個字符串構建一個 function 。
服用前：
var num = 0;
setTimeout('num++', 10);
服用后：
var num = 0;
function addNum () {
num++;
}
setTimeout(addNum, 10);
6. 其他
6.1 盡量不使用動態語法元素
說明： eval 、 Function 、 execScript 等語句會再次使用 javascript 解析引擎進行解析，需要消耗大量的執行時間。
6.2 重復使用的調用結果，事先保存到局部變量
說明：避免多次取值的調用開銷。
服用前：
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 雖然可以縮短代碼量，但是會在運行時構造一個新的 scope 。
OperaDev 上還有這樣的解釋，使用 with 語句會使得解釋器無法在語法解析階段對代碼進行優化。對此說法，無法驗證。
服用前：
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
服用后：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
6.5 巧用 || 和 布爾運算符
重要程度： ★★★
服用前：
function eventHandler (e) {
if(!e) e = window.event;
}
服用后：
function eventHandler (e) {
ee = e || window.event;
}
服用前：
if (myobj) {
doSomething(myobj);
}
服用后：
myobj doSomething(myobj);
6.6 類型轉換
說明：
1). 數字轉換成字符串，應用 "" + 1 ，性能上： ("" +) String() .toString() new String() ；
2). 浮點數轉換成整型，不使用 parseInt() ， parseInt() 是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，建議使用 Math.floor() 或者 Math.round()
3). 對于自定義的對象，推薦顯式調用 toString() 。內部操作在嘗試所有可能性之后，會嘗試對象的 toString() 方法嘗試能否轉化為 String 。
二．內存管理
2.1 循環引用
說明：如果循環引用中包含 DOM 對象或者 ActiveX 對象，那么就會發生內存泄露。內存泄露的后果是在瀏覽器關閉前，即使是刷新頁面，這部分內存不會被瀏覽器釋放。
簡單的循環引用：
var el = document.getElementById('MyElement');
var func = function () {…}
el.func = func;
func.element = el;
但是通常不會出現這種情況。通常循環引用發生在為 dom 元素添加閉包作為 expendo 的時候。
如：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();
init 在執行的時候，當前上下文我們叫做 context 。這個時候， context 引用了 el ， el 引用了 function ， function 引用了 context 。這時候形成了一個循環引用。
下面 2 種方法可以解決循環引用：
1) 置空 dom 對象
服用前：
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 中不包含對 dom 對象的引用，從而打斷循環應用。
如果我們需要將 dom 對象返回，可以用如下方法：
服用前：
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) 構造新的 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 就不包含對 el 的引用，從而打斷循環引用。
2.2 通過 javascript 創建的 dom 對象，必須 append 到頁面中
說明： IE 下，腳本創建的 dom 對象，如果沒有 append 到頁面中，刷新頁面，這部分內存是不會回收的！
示例代碼：
function create () {
var gc = document.getElementById('GC');
for (var i = 0; i 5000 ; i++)
{
var el = document.createElement('div');
el.innerHTML = "test";
// 下面這句可以注釋掉，看看瀏覽器在任務管理器中，點擊按鈕然后刷新后的內存變化
gc.appendChild(el);
}
}
2.3 釋放 dom 元素占用的內存
說明：
將 dom 元素的 innerHTML 設置為空字符串，可以釋放其子元素占用的內存。
在 rich 應用中，用戶也許會在一個頁面上停留很長時間，可以使用該方法釋放積累得越來越多的 dom 元素使用的內存。
2.4 釋放 javascript 對象
說明：在 rich 應用中，隨著實例化對象數量的增加，內存消耗會越來越大。所以應當及時釋放對對象的引用，讓 GC 能夠回收這些內存控件。
對象： obj = null
對象屬性： delete obj.myproperty
數組 item ：使用數組的 splice 方法釋放數組中不用的 item
2.5 避免 string 的隱式裝箱
說明：對 string 的方法調用，比如 'xxx'.length ，瀏覽器會進行一個隱式的裝箱操作，將字符串先轉換成一個 String 對象。推薦對聲明有可能使用 String 實例方法的字符串時，采用如下寫法：
var myString = new String('Hello World');
如何編寫高性能的javascript
一．Javascript代碼執行效率
1. DOM
1.1 使用 DocumentFragment 優化多次 append
說明：添加多個 dom 元素時，先將元素 append 到 DocumentFragment 中，最后統一將 DocumentFragment 添加到頁面。
該做法可以減少頁面渲染 dom 元素的次數。經 IE 和 Fx 下測試，在 append1000 個元素時，效率能提高 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
說明：通過一個模板 dom 對象 cloneNode ，效率比直接創建 element 高。性能提高不明顯，約為 10% 左右。在低于 100 個元素 create 和 append 操作時，沒有優勢。
服用前：
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 賦值代替構建 dom 元素
說明：根據數據構建列表樣式的時候，使用設置列表容器 innerHTML 的方式，比構建 dom 元素并 append 到頁面中的方式，效率有數量級上的提高。
服用前：
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% 的性能提高。逆向遍歷時使用 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 在對字符串拼接的時候，會創建臨時的 String 對象；經測試，在 IE 下，當拼接的字符串越來越大時，運行效率會急劇下降。 Fx 和 Opera 都 對字符串拼接操作進行了優化；經測試，在 Fx 下，使用 Array 的 join 方式執行時間約為直接字符串拼接的 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. 循環語句
3.1 將循環控制量保存到局部變量
說明：對數組和列表對象的遍歷時，提前將 length 保存到局部變量中，避免在循環的每一步重復取值。
服用前：
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 順序無關的遍歷時，用 while 替代 for
說明：該方法可以減少局部變量的使用。比起效率優化，更能直接看到的是字符數量的優化。該做法有程序員強迫癥的嫌疑。
服用前：
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 將條件分支，按可能性順序從高到低排列
說明：可以減少解釋器對條件的探測次數。
4.2 在同一條件子的多（ 2 ）條件分支時，使用 switch 優于 if
說明： switch 分支選擇的效率高于 if ，在 IE 下尤為明顯。 4 分支的測試， IE 下 switch 的執行時間約為 if 的一半。
4.3 使用三目運算符替代條件分支
服用前：
if (a b) {
num = a;
} else {
num = b;
}
服用后：
num = a b ? a : b;
5. 定時器
5.1 需要不斷執行的時候，優先考慮使用 setInterval
說明： setTimeout 每一次都會初始化一個定時器。 setInterval 只會在開始的時候初始化一個定時器
服用前：
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 的參數，瀏覽器會先用這個字符串構建一個 function 。
服用前：
var num = 0;
setTimeout('num++', 10);
服用后：
var num = 0;
function addNum () {
num++;
}
setTimeout(addNum, 10);
6. 其他
6.1 盡量不使用動態語法元素
說明： eval 、 Function 、 execScript 等語句會再次使用 javascript 解析引擎進行解析，需要消耗大量的執行時間。
6.2 重復使用的調用結果，事先保存到局部變量
說明：避免多次取值的調用開銷。
服用前：
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 雖然可以縮短代碼量，但是會在運行時構造一個新的 scope 。
OperaDev 上還有這樣的解釋，使用 with 語句會使得解釋器無法在語法解析階段對代碼進行優化。對此說法，無法驗證。
服用前：
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
服用后：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
6.5 巧用 || 和 布爾運算符
重要程度： ★★★
服用前：
function eventHandler (e) {
if(!e) e = window.event;
}
服用后：
function eventHandler (e) {
ee = e || window.event;
}
服用前：
if (myobj) {
doSomething(myobj);
}
服用后：
myobj doSomething(myobj);
6.6 類型轉換
說明：
1). 數字轉換成字符串，應用 "" + 1 ，性能上： ("" +) String() .toString() new String() ；
2). 浮點數轉換成整型，不使用 parseInt() ， parseInt() 是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，建議使用 Math.floor() 或者 Math.round()
3). 對于自定義的對象，推薦顯式調用 toString() 。內部操作在嘗試所有可能性之后，會嘗試對象的 toString() 方法嘗試能否轉化為 String 。
二．內存管理
2.1 循環引用
說明：如果循環引用中包含 DOM 對象或者 ActiveX 對象，那么就會發生內存泄露。內存泄露的后果是在瀏覽器關閉前，即使是刷新頁面，這部分內存不會被瀏覽器釋放。
簡單的循環引用：
var el = document.getElementById('MyElement');
var func = function () {…}
el.func = func;
func.element = el;
但是通常不會出現這種情況。通常循環引用發生在為 dom 元素添加閉包作為 expendo 的時候。
如：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();
init 在執行的時候，當前上下文我們叫做 context 。這個時候， context 引用了 el ， el 引用了 function ， function 引用了 context 。這時候形成了一個循環引用。
下面 2 種方法可以解決循環引用：
1) 置空 dom 對象
服用前：
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 中不包含對 dom 對象的引用，從而打斷循環應用。
如果我們需要將 dom 對象返回，可以用如下方法：
服用前：
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) 構造新的 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 就不包含對 el 的引用，從而打斷循環引用。
2.2 通過 javascript 創建的 dom 對象，必須 append 到頁面中
說明： IE 下，腳本創建的 dom 對象，如果沒有 append 到頁面中，刷新頁面，這部分內存是不會回收的！
示例代碼：
function create () {
var gc = document.getElementById('GC');
for (var i = 0; i 5000 ; i++)
{
var el = document.createElement('div');
el.innerHTML = "test";
// 下面這句可以注釋掉，看看瀏覽器在任務管理器中，點擊按鈕然后刷新后的內存變化
gc.appendChild(el);
}
}
2.3 釋放 dom 元素占用的內存
說明：
將 dom 元素的 innerHTML 設置為空字符串，可以釋放其子元素占用的內存。
在 rich 應用中，用戶也許會在一個頁面上停留很長時間，可以使用該方法釋放積累得越來越多的 dom 元素使用的內存。
2.4 釋放 javascript 對象
說明：在 rich 應用中，隨著實例化對象數量的增加，內存消耗會越來越大。所以應當及時釋放對對象的引用，讓 GC 能夠回收這些內存控件。
對象： obj = null
對象屬性： delete obj.myproperty
數組 item ：使用數組的 splice 方法釋放數組中不用的 item
2.5 避免 string 的隱式裝箱
說明：對 string 的方法調用，比如 'xxx'.length ，瀏覽器會進行一個隱式的裝箱操作，將字符串先轉換成一個 String 對象。推薦對聲明有可能使用 String 實例方法的字符串時，采用如下寫法：
var myString = new String('Hello World');
如何改進javascript代碼的性能
而現在Ajax則是最為流行的一種方式。javascript是一種解釋型語言，所以能無法達到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進他的性能，我想基于我以前給JavaScript做過的很多測試來談談自己的經驗，希望能幫助大家改進自己的JavaScript腳本性能。
語言層次方面循環循環是很常用的一個控制結構，大部分東西要依靠它來完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環，事實上，這三種循環中for(in)的效率極差，因為他需要查詢散列鍵，只要可以就應該盡量少用。for(;;)和while循環的性能應該說基本(平時使用時)等價。
如果是循環變量遞增或遞減，不要單獨對循環變量賦值，應該在它最后一次讀取的時候使用嵌套的++或—操作符。
如果要與數組的長度作比較，應該事先把數組的length屬性放入一個局部變量中，減少查詢次數。
局部變量和全局變量
局部變量的速度要比全局變量的訪問速度更快，因為全局變量其實是全局對象的成員，而局部變量是放在函數的棧當中的。
不使用Eval使用eval相當于在運行時再次調用解釋引擎對內容進行運行，需要消耗大量時間。這時候使用JavaScript所支持的閉包可以實現函數模版(關于閉包的內容請參考函數式編程的有關內容)減少對象查找
因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重復出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。
這一點可以和循環結合起來，因為我們常常要根據字符串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。
字符串連接如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要連接多個字符串，應該少使用+=，如
s+=a;s+=b;s+=c;
應該寫成
s+=a + b + c;
以下是引用片段：
varbuf=newArray();for(vari=0;i100;i++){buf.push(i.toString());}varall=buf.join("");類型轉換類型轉換是大家常犯的錯誤，因為JavaScript是動態類型語言，你不能指定變量的類型。
1. 把數字轉換成字符串，應用"" + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：
以下是引用片段：
(""+)String().toString()newString()
這條其實和下面的“直接量”有點類似，盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。
String()屬于內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用于返回一個精確的副本。
2. 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。
另外，和第二節的對象查找中的問題不一樣，Math是內部對象，所以Math.floor()其實并沒有多少查詢方法和調用的時間，速度是最快的。
javascript是什么意思
JavaScript是一種基于對象和事件驅動并具有安全性能的腳本語言。
Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較復雜的信息處理。
JavaScript與Java的不同點
Java代碼必須編譯才能執行，而JavaScript不需編譯，只需瀏覽器解釋執行。
Java和JavaScript雖然都可以在服務器與客戶端執行，但Java多運行于服務器，而JavaScript多運行于客戶端。
JavaScript使用的是松散型的數據類型，而Java則使用的是嚴謹的數據類型。
新聞標題：性能javascript,性能車是什么意思
分享鏈接：http://vcdvsql.cn/article46/dsdeeeg.html
成都網站建設公司_創新互聯，為您提供小程序開發、App設計、Google、App開發、品牌網站制作、虛擬主機
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 網上的言論人云亦云，模板網站OR定制網站？ 2013-05-13
- 定制網站開發費用貴嗎？ 2016-09-28
- 在深圳建一個定制網站要多少錢呢 2021-10-25
- 定制網站不僅限于設計還包括功能欄目及定位體驗等諸多方面 2022-05-24
- 深圳定制網站制作哪家好 2021-12-23
- 定制網站有什么好處? 2023-02-12
- 定制網站和模板網站有什么區別 2023-03-04
- 河南定制網站需要具備哪些特點？ 2021-01-06
- 定制網站設計的驗收標準有哪些 2021-10-09
- 企業做普通網站和定制網站的區別是什么？ 2022-09-29
- 定制網站怎么才算有價值？ 2023-03-02
- 成都網站建設全面解析：定制網站的優劣，這一次終于全明白了! 2022-08-07