標籤：blog ar 使用 java for strong 檔案 on div
一.什麼是平穩退化？
如果含有JS代碼的網頁在使用者瀏覽器不支援JS（或者禁用JS）時，使用者仍然能夠順利瀏覽（網站功能正常，只是視覺效果可能差一些），那麼這個網頁就能夠平穩退化
網頁能夠平穩退化是很必要的，因為JS向來名聲不好（各種廣告，各種彈窗，甚至還有XSS等等陰暗的東西），所以有一個使用者群是習慣禁用瀏覽器的JS支援的，這個使用者群可能不大，但是作為編碼人員應該盡量讓自己的代碼儘可能的完善（就像培養自己的孩子一樣），我們應該考慮到這種情況，給各種使用者完美的體驗
如果上面的理由還不夠充分，那麼可能有一點更值得重視：SEO，也就是搜尋引擎最佳化，想讓自己的網站在搜尋結果裡靠前些，就有必要做好SEO，搜尋引擎的搜尋機器人無法理解JS代碼的含義，所以搜尋機器人相當於一個堅持使用老式瀏覽器（不支援JS）的使用者，顯然，這個使用者很重要
二.怎樣才能平穩退化？
要平穩退化只需要遵循一個原則：漸進增強
所謂的“漸進增強”就是用一些原始的可靠的方法去實現最基本最重要的功能，先保證功能的完整，再用一些額外的資訊層去包裹原始頁面（實現顯示特效，實現更好的視覺效果和使用者體驗），即便衣服被屏蔽了，功能仍然完整，只是可能不好看而已
把JS代碼與HTML代碼徹底分離就可以實現“漸進增強”，HTML是功能完整的原始層，外部JS代碼是一個華麗的外衣（說起來有點像CSS，不過確實是這樣，JS功能很強大，但如果過分依賴於JS代碼就顛倒了主次）
三.什麼是向後相容？
向後相容是指JS代碼要能夠相容低版本的DOM（有些瀏覽器可能不支援最新版本的DOM，意味著某些DOM API將無法使用），例如：
最常用的DOM API可能是這些：
document.getElementById();document.getElementsByTagName();document.getElementsByClassName();//HTML5 DOM中的新特性
但可能有的瀏覽器根本不支援這些方法，或者說只支援一部分，那麼頁面將因為JS代碼出錯而無法訪問，或者頁面功能不再完整
之前有一種用來保證向後相容的方法是“瀏覽器嗅探”技術，也就是通過BOM去問瀏覽器：“你支援不支援這個DOM API？”，因為瀏覽器實在太多了，所以一句很簡單的JS代碼都需要被很多層瀏覽器嗅探程式碼封裝裹起來，導致我們的代碼變得非常臃腫
瀏覽器嗅探技術其實在CSS中依然存在，當然CSS無法通過BOM擷取瀏覽器特徵，所以採用了相對被動的一種方式：
/*設定透明度為0.75*/filter: alpha(opacity = 25); /*支援 IE 瀏覽器*/-moz-opacity: 0.25; /*支援 FireFox 瀏覽器*/opacity: 0.25; /*支援 Chrome, Opera, Safari 等瀏覽器*/
DOM發展到現在已經不需要用瀏覽器嗅探技術來保證向後相容了，我們可以這樣做：
if(document.getElementById){ document.getElementById();}if(document.getElementsByTagName){ document.getElementsByTagName();}if(document.getElementsByClassName){ document.getElementsByClassName();//HTML5 DOM中的新特性}
這種更好的方式叫做“對象檢測”技術，雖然還是不太完美（要想完美，除非瀏覽器市場被大一統了..），不過已經比瀏覽器嗅探要好很多了（至少不需要因為市場上出現一種新的瀏覽器而修改JS代碼），對象檢測不再依賴BOM，靠DOM自己檢測瀏覽器是否支援指定的DOM API
四.JS效能最佳化技巧
1.最佳化前：
for(var i = 0;i < document.getElementsByTagName("a");i++){ if(document.getElementsByTagName("a")[i].getAttribute("title") == "main"){ //do something }}
最佳化後：
var elems = document.getElementsByTagName("a");for(var i = 0;i < elems.length;i++){ if(elems[i].getAttribute("title") == "main"){ //do something }}
每次調用DOM方法擷取標籤對象內部都是對DOM樹做一次完全搜尋，這是非常昂貴的操作，盡量減少DOM訪問可以提高效能
2.最佳化前：
<div> <div> <div> <div> <div> <p> 本文 </p> </div> </div> </div> </div></div>
最佳化後：
<p>本文</p>
這個例子可能有些極端了，不過也足夠說明問題了，HTML代碼應該盡量簡潔（能夠達到預期的表現效果就好）
3.最佳化前：
<scrpit src="./scripts/A.js" type="text/javascript"></script><scrpit src="./scripts/B.js" type="text/javascript"></script><scrpit src="./scripts/C.js" type="text/javascript"></script>
最佳化後：
<scrpit src="./scripts/All.js" type="text/javascript"></script>
瀏覽器在載入頁面時每遇到一個script標籤，如果標籤指向外部指令檔，都需要發送請求載入外部檔案，如果script標籤過多，這筆開銷將是無法忽視的，所以應該把JS代碼全部放在一個外部檔案中，用一個script標籤來載入
4.最佳化前：
<head> <script></script></head>
最佳化後：
<body> html code <script></script></body>
也就是說把script標籤放在body的末尾載入最快，而且放在這裡並不影響window.onload等事件的觸發，至於為什麼放在這個位置最快，可能和瀏覽器解釋HTML代碼的順序有關（先載入head部分，如果head太大，會導致使用者等待了很久仍然看不到body內容）
5.最佳化前：
var elems = document.getElementsByTagName("p");for(var i = 0;i < elems.length;i++){ //do something}
最佳化後：
var elems=document.getElementsByTagName("p");for(var i=0;i<elems.length;i++){}
嗯，沒錯，最佳化後的代碼不是給人讀的，不過雖然不易讀，但這樣的代碼體積小，使得外部檔案體積縮小，當然能夠提高效能
P.S.這個工作有專門的工具來幫我們做，比如JSMin等等
參考資料：《JavaScript DOM變編程藝術》
JS代碼指導原則
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
