1、防止濫用JavaScript「不管你想透過JavaScript改變哪個網頁的行為,都必須三思而後行。首先要確認:為這個網頁增加這種額外的行為是否確有必要?」
我個人認為,作者的這句話放在當前幾乎無處不用JavaScript來增強Web頁面互動體驗的時代,可以理解為應該適當的使用JavaScript,而不要因為使用了實現酷炫效果的腳本導致網頁載入緩慢或相容性極差而捨本求末,導致使用者無法瀏覽和使用網站。
2.平穩退化平穩退化是指當使用者停用瀏覽器JavaScript或瀏覽器不支援JavaScript(還有嗎)時,應該讓使用者仍然可以正常的瀏覽網站。
剛看到這個問題的時候,感覺這種情況幾乎可以忽略不計,因此看了一些關於這個問題的討論(知乎)以及博文《javascript不可用的問題探究》,並拿博客園首頁做了實驗,即在禁用JavaScript的情況下瀏覽網頁,發現雖然無法評論博客、無法正常顯示分類效果、當然廣告也沒了,但是主要的功能(查看博文、分頁跳轉等)是可以正常使用的。
那麼基本上可以得出結論:在考慮平穩退化的時候,根據需要至少應該保證網站主要功能可以正常使用。對博客園來說,就是查看部落格。
3、停用"javascript:"偽協定和內嵌事件處理函數雖然在HTML中使用這兩種寫法,不會帶來什麼嚴重問題,但是它會阻止平穩退化(網頁行為不一致),並且使腳本的編寫方式混亂,增加了程式碼維護的難度。
4、性能考慮關於性能考慮的最佳實踐,還是非常容易理解的。
「盡量少訪問DOM和盡量減少標記」。少訪問DOM是因為查詢DOM的操作會非常耗費效能。多處函數的重複DOM查詢應該要重構,提取為全域變數或直接作為參數傳遞。減少標記可以減少DOM的規模,從而減少尋找DOM樹中特定元素的時間。
「合併腳本」。合併外部腳本文件,可以減少載入頁面時發送的請求次數。透過觀察Chrome開發者工具Network標籤,可以非常清楚的看到載入網頁的請求次數和時間,下圖為請求我的部落格的情況,第三方的百度分享插件是最慢被載入的,當然整體載入時間還是可以接受的。不過當引用的文件過多過大,或依賴的第三方外掛請求緩慢時,整個頁面就會一直處於載入狀態,給人的感覺就是網頁載入緩慢,體驗就會變差。
另外,「腳本在標記中的位置對頁面的初次載入時間也有很大的影響」。就像bootstrap的實例中,引用的JS插件統統放在了頁面的尾部,並加了說明。
因為根據HTTP規範,瀏覽器每次從同一個網域中最多只能同時下載兩個文件,而在腳本下載期間,瀏覽器不會下載其它任何文件,即使是來自不同網域的檔案也不會下載,所有其它的資源都要等腳本載入完畢後才會下載;而通常我們會把腳本檔案放在區塊中,此時該區塊中的腳本會導致瀏覽器無法並行加載其它文件(如圖片或其它腳本)。
把所有<script> 標籤放在文件的末尾,</script>