JavaScript DOM編程藝術（讀後感一）

時間 2019-11-08

標籤 javascript dom 編程藝術讀後感欄目 JavaScript 简体版

原文原文鏈接

1.平穩退化javascript

網站訪問者徹底有可能使用的是不支持javascript的瀏覽器，或者是用戶已經禁用。若是沒有考慮這種狀況，人們在訪問網站時就有可能遇到麻煩，並所以再也不來訪問網站。若是正確的使用了javascript腳本，就可讓訪問者在他們的瀏覽器不支持javascript的狀況下仍能順利地瀏覽網站。這就是所謂的平穩退化。雖然某些功能沒法使用，但最基本的操做仍能順利完成。java

<a href="javascript:window.open("www.baidu.com");" ></a>這條語句在支持「javascript:」僞協議的瀏覽器中運行正常，較老的瀏覽器則會去嘗試打開那個連接但失敗，支持這種僞協議但禁用了javascript功能的瀏覽器會什麼也不作。總之，在HTML文檔裏經過"javascript:"僞協議調用的javascript代碼的作法很是很差。瀏覽器

<a href="#" onclick="window.open("www.baidu.com");return false"></a>由於在上面這條HTML指令使用了return false語句，這個連接不會真的被打開。「#」符號是一個僅供文檔內部使用的連接記號。在某些瀏覽器裏，「#」連接指向當前文檔的開頭。把href屬性的值設置爲「#」只是爲了建立一個空連接http://www.msdnsource.com/ 。實際工做所有由onclick屬性負責完成。這個技巧與"javascript:"僞協議代碼同樣糟糕，也不能平穩退化。用戶禁用了瀏覽器的javascript功能，這樣的連接將毫無用處。性能優化

各大搜索引擎都有相似（搜索機器人）的程序，目前，只有極少數搜索機器人可以理解javascript代碼。因此，若是你的javascript網頁不能平穩退化，它們在搜索上的排名就可能大受損害。函數

<a href="www.baidu.com" onclick="window.open("www.baidu.com");return false"></a>-----平穩退化性能

2.向後兼容優化

能夠經過對像檢測的方法，使瀏覽器不執行此方法或者屬性。網站

if (!documnet.getElementById) return false;搜索引擎

3.性能考慮spa

1) 儘可能少訪問DOM儘可能減小標記

訪問DOM的方式對腳本性能會產生很是大的影響。如下代碼爲例：

if (document.getElementByTagName("a").length > 0){ var links = document.getElementByTagName("a"); for (var i=0;i<links.length;i++){ //對每一個連接做點處理 }}搞清楚這段代碼要幹什麼，天然就會明白問題在哪裏了。首先，它取得了全部<a>元素，而後檢查它們的個數是否是大於0
if (document.getElementByTagName("a").length > 0)而後，若是大於0，它會再次取得全部<a>元素，循環遍歷這些元素並應用某些操做。
var links = document.getElementByTagName("a"); for (var i=0;i<links.length;i++){雖然這段代碼能夠運行，但它不能保持最優的性能。無論何時，只要是查詢DOM中的某些元素，瀏覽器都會搜索整個DOM樹，從中查找可能匹配的元素。這段代碼竟然使用了兩次getElementByTagName方法去執行相同的操做，浪費了一次搜索。更好的辦法是把第一次搜索的結果保存在一個變量中，而後在循環裏重用該結果，好比：<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">var links = document.getElementByTagName("a");if (links .length > 0){ for (var i=0;i<links.length;i++){ //對每一個連接做點處理 }}

在多個函數都會取得一組相似元素的狀況下，能夠考慮重構代碼，把搜索結果保存在一個全局變量裏，或者把一組元素直接以參數的形式傳遞給函數。另外一個須要注意的地方，就是要儘可能減小文檔中的標記數量。過多沒必要要的元素只會增長DOM樹的規模，進而增長遍歷DOM樹以查找特定元素的時間。

2)合併和放置腳本

把多個外部JS文件合併成一個腳本文件。這樣，就能夠減小加載頁面時發送請求數量。而減小請求數量一般都是在性能優化時首先要考慮的。

腳本在標記中的位置對頁面的初次加載時間有很大影響。傳統上，咱們都把腳本放在文檔的<head>區域，這種放置方法有一個問題。位於<head>塊中的腳本會致使瀏覽器沒法並行加載其餘文件（如圖像或其餘腳本）。通常來講，根據HTTP規範，瀏覽器每次從同一個域名中最多隻能同時下載兩個文件。而下載腳本期間，瀏覽器不會下載其餘任何文件，即便是來自不一樣域名的文件也不會下載，全部其餘資源都要等加載完畢後才能下載。因此把<script>標籤都放到文檔的末尾，</body>以前，就可讓頁面變得更快。

3)壓縮腳本