資訊專(zhuān)欄INFORMATION COLUMN
摘要：源碼的代碼質(zhì)量很高，非常值得我等小輩學(xué)習(xí)。上面的技巧，若有任何不對(duì)，歡迎指正，也歡迎補(bǔ)充過(guò)段時(shí)間一定要寫(xiě)源碼閱讀筆記好怕打臉逃
其實(shí)主要是性能小技巧。
循環(huán)優(yōu)化循環(huán)體是執(zhí)行最多的，所以要確保其被最大限度的優(yōu)化.
//提前計(jì)算好終止條件，存到局部變量中
for(var i=0, j = document.getElementsByTagName("a").length; i
避免 for-in 循環(huán)
for(in)的效率極差，因?yàn)樗枰樵?xún)散列鍵，只要可以，就應(yīng)該盡量少用
//要遍歷一個(gè)集合內(nèi)的元素，用for,while,do..while代替
//這是vue源碼中的一段，作者用for(;;)循環(huán)代替了for...in
var keys = Object.keys(obj);
for (var i = 0, l = keys.length; i < l; i++) {
this.convert(keys[i], obj[keys[i]]);
}
多個(gè)類(lèi)型一起聲明
var option="option";
var event="event";
var method="method";
//可替換為
var option="option",
event="event",
method="method";
類(lèi)型轉(zhuǎn)換
+"010" === 10; //+可以把字符串變成整數(shù)
Number("010") === 10;
parseInt("010", 10) === 10;
10 + "" === "10";//也可以把整數(shù)變成字符串
+new Date() // timestamp
+new Date;
使用三目運(yùn)算符替代條件分支
//將條件從最可能到最不可能進(jìn)行排列,減少探測(cè)次數(shù)
if (a > b) {
num = a;
} else {
num = b;
}
//可以替換為：
num = a > b ? a : b;
巧用||和&&布爾運(yùn)算符
//源碼中這種運(yùn)算符操作很多，尤其是jQuery源碼
item && item.$value || item;
var id = typeof asset === "function" ? asset.options && asset.options.name || asset.id : asset.name || asset.id;
用局部變量代替全局變量
無(wú)論是DOM節(jié)點(diǎn)，普通變量，還是對(duì)象屬性，若需重復(fù)使用，通通存成局部變量，避免多次取值的調(diào)用開(kāi)銷(xiāo)
//vue源碼
var p = Cache.prototype;
p.put = function (key, value) {}
//jquery源碼
var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;
DOM節(jié)點(diǎn)鏈?zhǔn)讲僮?/b>
//鏈?zhǔn)讲僮鲿?huì)自動(dòng)緩存
$(".test").find(".btn").css("backgroundColor","#f30").click();
修改CSS類(lèi)，而不是樣式
尤其是在修改多個(gè)樣式時(shí)，修改css類(lèi)只會(huì)引起一次回流，而修改樣式會(huì)引起多次回流。
插入迭代器
var name=values[i];
i++;
//替換為
var name=values[i++]
使用字面量
var aTest = new Array();
var aTest = new Object;
var reg = new RegExp();
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";
//分別替換為
var aTest = [];
var aTest = {};
var reg = /d/i; //只在有變量時(shí)才用new RegExp()
var oFruit = { color: "red", name: "apple" };
使用一次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("");
盡量使用原生方法
var container = document.createElement("div");
container.appendChild(el.cloneNode(true));
避免with語(yǔ)句
with語(yǔ)句會(huì)創(chuàng)建自己的作用域，因此會(huì)增加其中執(zhí)行的代碼的作用域鏈的長(zhǎng)度，所以能不用的時(shí)候就不要用。
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
//可以替換為：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
ps:有些代碼性能雖高，但是可能會(huì)降低閱讀性與可維護(hù)性，或者與團(tuán)隊(duì)的規(guī)范沖突，所以這個(gè)需要自己在可讀性，團(tuán)隊(duì)規(guī)范性與代碼性能之間權(quán)衡。
感言
上面羅列的都是我覺(jué)得經(jīng)常會(huì)用到的，看一遍，用心記一下，很easy～～可能以后會(huì)不定時(shí)更新，看自己get到的情況～～
我也是最近才注意到這些“潛規(guī)則”，正巧最近也在看vue的源碼，然后就發(fā)現(xiàn):基本上網(wǎng)上能查到的性能優(yōu)化的方面，或者編程的技巧都能在vue源碼中找到佐證。vue源碼的代碼質(zhì)量很高，非常值得我等小輩學(xué)習(xí)。
上面的技巧，若有任何不對(duì)，歡迎指正，也歡迎補(bǔ)充～～
過(guò)段時(shí)間一定要寫(xiě)源碼閱讀筆記（好怕打臉～～逃）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81203.html
摘要：常規(guī)寫(xiě)法速記法判斷變量是否存在速記法這可能會(huì)有些瑣碎，但是值得一提。常規(guī)寫(xiě)法速記法注意這兩個(gè)例子并不是完全相等，只要變量是一個(gè)真值，該表達(dá)式就是成立的。 19+ 個(gè) JavaScript 快速編程技巧 — SitePoint 這確實(shí)是一篇針對(duì)于基于 JavaScript 語(yǔ)言編程的開(kāi)發(fā)者必讀的文章。在過(guò)去幾年我學(xué)習(xí) JavaScript 的時(shí)候，我寫(xiě)下了這篇文章，并將其作為 JavaS...
摘要：常規(guī)寫(xiě)法速記法判斷變量是否存在速記法這可能會(huì)有些瑣碎，但是值得一提。常規(guī)寫(xiě)法速記法注意這兩個(gè)例子并不是完全相等，只要變量是一個(gè)真值，該表達(dá)式就是成立的。 19+ 個(gè) JavaScript 快速編程技巧 — SitePoint 這確實(shí)是一篇針對(duì)于基于 JavaScript 語(yǔ)言編程的開(kāi)發(fā)者必讀的文章。在過(guò)去幾年我學(xué)習(xí) JavaScript 的時(shí)候，我寫(xiě)下了這篇文章，并將其作為 JavaS...
摘要：學(xué)編程真的不是一件容易的事不管你多喜歡或是多會(huì)編程，在學(xué)習(xí)和解決問(wèn)題上總會(huì)碰到障礙。熟練掌握核心內(nèi)容，特別是和多線(xiàn)程初步具備面向?qū)ο笤O(shè)計(jì)和編程的能力掌握基本的優(yōu)化策略。 學(xué)Java編程真的不是一件容易的事,不管你多喜歡或是多會(huì)Java編程，在學(xué)習(xí)和解決問(wèn)題上總會(huì)碰到障礙。工作的時(shí)間越久就越能明白這個(gè)道理。不過(guò)這倒是一個(gè)讓人進(jìn)步的機(jī)會(huì)，因?yàn)槟阋恢辈粩嗟膶W(xué)習(xí)才能很好的解決你面前的難題...
摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
閱讀 1653·2021-09-26 09:55
閱讀 1386·2021-09-23 11:22
閱讀 2749·2021-09-06 15:02
閱讀 2658·2021-09-01 11:43
閱讀 3977·2021-08-27 13:10
閱讀 3693·2021-08-12 13:24
閱讀 2080·2019-08-30 12:56
閱讀 3009·2019-08-30 11:22
