讀《JavaScript dom編程藝術（第2版）》筆記 5

標籤：

今天看了第五章，講了許多我一直沒有考慮過的內容：平穩退化、分離JavaScript、向後相容性、效能考慮。引出這些問題的原因是：有的瀏覽器並不能支援js指令碼，或者有的瀏覽器雖然可以支援js指令碼，但是使用者關閉了js解釋功能，或者有的瀏覽器只能支援部分js指令碼。如果沒有考慮到這些情況，人們在訪問我們的網站時就有可能遇到各種各樣的麻煩，並因此不再來訪問我們的網站。

平穩退化：確保網頁在沒有JavaScript的情況下也能正常工作

如果正確使用了JavaScript指令碼，就可以讓訪問者在他們的瀏覽器不支援JavaScript的情況下仍能順利地瀏覽我們的網站，這就是所謂的平穩退化，就是說，雖然某些功能無法使用，但是最基本的操作仍能順利完成。

漸進增強：用一些額外的資訊層去包裹未經處理資料。按照“漸進增強”原則建立出來的網頁幾乎都符合“平穩退化”原則

分離JavaScript：把網頁的結構和內容與JavaScript指令碼的動作行為分開

window.onload = function() {  if (!document.getElementsByTagName) return false;  var lnks = document.getElementsByTagName("a");  for (var i=0; i<lnks.length; i++) {    if (lnks[i].getAttribute("class") == "popup") {      lnks[i].onclick = function() {        popUp(this.getAttribute("href"));        return false;      }    }  }}function popUp(winURL) {  window.open(winURL,"popup","width=320,height=480");}

 

 

 

向後相容性：確保老版本的瀏覽器不會因為你的JavaScript指令碼而死掉

對象檢測：只要把某個方法打包在一個if語句裡，就可以根據這條if語句的條件運算式的求值結果是true（這個方法存在）還是false（這個方法不存在）來決定應該採取怎樣的行動。

在使用對象檢測時，一定要刪除方法名後的圓括弧，如果不刪掉，測試的將是方法的結果，無論方法是否存在。

function myFunction(){  if(document.getElementById){    statements using getElementById  }}

雖然只是一條簡單的if語句，但是卻可以確保那些“古老的”瀏覽器不會因為我的指令碼代碼而出問題，這麼做是為了讓指令碼有良好的向後相容性。

瀏覽器嗅探技術：指通過提取瀏覽器供應商提供的資訊來解決向後相容問題。

效能考慮：確定指令碼執行的效能最優

1、盡量少訪問DOM和盡量減少標記

2、合并和放置指令碼

減少請求數量通常都是在效能最佳化是時首先要考慮的。

指令碼在標記中的位置對頁面的初次載入時間也有很大影響，根據HTTP規範，瀏覽器每次從同一個網域名稱中最多隻能同時下載兩個檔案。而在下載指令碼期間，瀏覽器不會下載其他任何檔案，即使是來自不同網域名稱的檔案也不會下載，所有其他資源都要等指令碼載入完畢後才能下載

3、壓縮指令碼

請看這篇文章

 

不得不說，從前我寫網頁檔案，從來沒有考慮過這些提高效能的問題，看了書之後受益匪淺啊！以後我會注意這方面的問題的，使自己的網站更完善，更完美！

讀《JavaScript dom編程藝術（第2版）》筆記 5