前言
今天是九月的第一天，祖國(guó)的花朵開學(xué)了咱台，我也的加倍努力多學(xué)點(diǎn)東西了络拌。
不求能多牛逼，只求自己能每天進(jìn)步一點(diǎn)回溺，不管是那方面的春贸，能看到自己的成長(zhǎng)是最幸福的事情，才不負(fù)自己這么多年吃的飯馅而！
格式
我初學(xué)JS祥诽，網(wǎng)上查閱了一些資料譬圣，準(zhǔn)備著手從JavaScript_DOM編程藝術(shù)第二版這本書入手瓮恭，期間還會(huì)用喜馬拉雅聽聽陪你讀書（JavaScript WEB前端培訓(xùn)教程）。
我印象最深刻的是厘熟，js是一個(gè)從上到下的弱類型語言屯蹦，所以格式特別重要。比如語句后面記得加分號(hào)绳姨，變量命名要統(tǒng)一格式登澜、嚴(yán)格區(qū)分大小寫、必要的地方加上備注等等飘庄。
一個(gè)好的編程習(xí)慣可以讓你的代碼更易讀脑蠕，更好的融入團(tuán)隊(duì)中，所以必須嚴(yán)格的要求自己的編寫習(xí)慣跪削。
向后兼容
不同的瀏覽器對(duì)js的支持程度不一樣谴仙，絕對(duì)多數(shù)的瀏覽器都或多或少的支持js，而絕對(duì)多數(shù)的現(xiàn)代瀏覽器對(duì)DOM的支持都非常不錯(cuò)碾盐。但比較老的瀏覽器很可能不能理解DOM提供的方法和屬性晃跺。
這點(diǎn)應(yīng)該和CSS在不同瀏覽器中兼容性的問題類似
盡量減少DOM的訪問次數(shù)
訪問DOM的方式對(duì)腳本的性能影響非常大，如：
if(document.getElementsByTagName("a").length>0){
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length;i++){
//...
}
}
這段腳本首先取得頁面所有的<a>標(biāo)簽毫玖，然后檢查它們的個(gè)數(shù)是不是大于0掀虎。然后如果大于0，它會(huì)再次取得所有<a>標(biāo)簽付枫，然后循環(huán)到不符合條件為止烹玉。
雖然這段代碼可以運(yùn)行，但它不是最優(yōu)的選擇阐滩。不管什么時(shí)候二打，只要是查詢DOM中的某些元素，瀏覽器都會(huì)對(duì)整個(gè)頁面的DOM樹進(jìn)行查詢叶眉。這段腳本中用了兩次getElementsByTagName的方法來查詢址儒，顯然不是最優(yōu)的選擇芹枷。更好的辦法是把第一次搜索的結(jié)果保存到一個(gè)變量里，然后在循環(huán)里重用這個(gè)結(jié)果莲趣，如：
var links = document.getElementsByTagName("a");
if(links.length>0){
for(var i=0;i<links.length;i++){
//...
}
}
這樣鸳慈，腳本功能沒有變化，但DOM次數(shù)由兩次變?yōu)榱艘淮涡 Ｔ俦热缬幸粋€(gè)函數(shù)是檢查每個(gè)鏈接中的popup類走芋，而另一個(gè)函數(shù)是檢查每個(gè)鏈接中的hover類，那同樣會(huì)造成DOM浪費(fèi)潘鲫。在多個(gè)函數(shù)都會(huì)取得一組類似元素的情況下翁逞，可以考慮重寫代碼，把搜索結(jié)果放置到一個(gè)全局變量里溉仑，或者把一組元素直接以參數(shù)的形式傳遞給函數(shù)挖函。
另一個(gè)值得注意的地方是在寫HTML的時(shí)候，盡量減少文檔中標(biāo)簽的數(shù)量浊竟，過多不必要的元素只會(huì)增加DOM書的規(guī)模怨喘，延遲DOM查找元素的時(shí)間。
如：
<p><a href="#"><span style="color: red;">我是一個(gè)紅色的超鏈接</span></a></p>
//上面這段代碼只是想得到一個(gè)紅色的鏈接振定，但卻使用了三個(gè)元素必怜，我們可以直接簡(jiǎn)化成下面這種形式
<a href="#" style="color: red;">我是一個(gè)紅色的超鏈接</a>
//使用一個(gè)<a>元素就達(dá)到了想要的效果
合并和放置腳本
使用腳本，最佳的方式是使用外部腳本文件后频，與HTML分離開梳庆，這樣比較容易維護(hù)修改。現(xiàn)在的瀏覽器會(huì)對(duì)頁面中的css和腳本文件進(jìn)行緩存卑惜，多個(gè)頁面如果使用的是相同的文件時(shí)膏执，瀏覽器就會(huì)自動(dòng)重用緩存的相同的文件。所以残揉，如果一個(gè)腳本文件用在一個(gè)網(wǎng)站的不用頁面時(shí)胧后，請(qǐng)調(diào)用同一個(gè)文件名，如：
<script src="function.js" type="text/javascript" charset="utf-8"></script>
//一樣的腳本在不同頁面只需要調(diào)用同一個(gè)文件即可抱环，以下的方式不可取
<script src="functionA.js" type="text/javascript" charset="utf-8"></script>
<script src="functionB.js" type="text/javascript" charset="utf-8"></script>
<script src="functionC.js" type="text/javascript" charset="utf-8"></script>
放置腳本的位置也是有講究的壳快，我以前第一次使用Bootstrap的時(shí)候就好奇，為什么js腳本要放置在</body>前镇草，而不是包含在<head></head>中眶痰。
因?yàn)閖s腳本在加載的時(shí)候是不允許同時(shí)加載其他文件的（比如圖像和其他腳本），所以放在頭部可能會(huì)出現(xiàn)頁面刷新后前面一段時(shí)候頁面是空白的梯啤。
正確的方式是放在文檔</body>前竖伯，會(huì)使提升頁面載速度，但可能會(huì)出現(xiàn)短暫的頁面變形的錯(cuò)誤（幻燈片、滾動(dòng)條等由為明顯）七婴，但這個(gè)根據(jù)網(wǎng)速因人而異祟偷，一般情況的網(wǎng)速都是不容易察覺的，但這個(gè)確實(shí)存在打厘，因?yàn)閖s腳本最后才讀取修肠，而這個(gè)時(shí)候你的幻燈片里的圖已經(jīng)下載完畢等著js腳本去控制。
壓縮腳本
這個(gè)一般出現(xiàn)在腳本編寫調(diào)試完畢后才做的工序户盯，它是把腳本中不必要的字節(jié)給去掉（空格嵌施、換行、注釋）莽鸭，達(dá)到腳本文件小巧吗伤，加載速度快的目的。同樣是Bootstrap的例子：
其中有兩個(gè)js硫眨，一個(gè)為68KB足淆，一個(gè)為36KB，但他們的功能都是一樣的捺球。
同理css也是可以進(jìn)行壓縮的缸浦。
我還見過HTML也壓縮的夕冲。
不過氮兵，這個(gè)工序一般是調(diào)試和修改完畢后再做，并且需備份好源文件歹鱼，保證以后修改的時(shí)候方便泣栈。
下面這是pdf書里的原話，工具現(xiàn)在已經(jīng)不局限于這些了弥姻，百度自行搜索南片，有更多更好用的！
