爲Web應用程序提速的50條祕技

時間 2019-11-11

標籤 web 應用程序提速祕技欄目 HTML 简体版

原文原文鏈接

1. 快速響應網絡請求。

避免重定向。排名前1000的網站中，63%使用了重定向。若是不執行重定向的話，頁面速度能夠提升10%。
避免Meta-refresh。世界上14%的URL使用了Meta-refresh。
儘量經過CDN定位用戶，使服務器響應時間最小化。
從不一樣的域下載資源，使併發鏈接的應用最大化。
複用鏈接。不要在響應請求時關閉鏈接。
確保頁面加載不會因合做夥伴網站提供的數據而延遲。
瞭解耗時的網絡組件，如重定向、緩存、DNS、請求和響應等。在IE 9和10中可使用Navigation Timing API來測量瀏覽器花在每一個操做上的時間。

加載頁面時，要儘可能減小下載的數據量。平均而言，每一個頁面要下載的數據量達777KB，其中有474KB的圖片、128KB的腳本和84KB的Flash。 html

請求gzip壓縮的內容。
將資源保存在本地的包中，好比爲Windows商店應用生成的包資源索引（Package Resource Index）文件。這樣當須要這些資源時就能夠很容易地獲取到。
使用HTML5 App Cache緩存動態資源。App Cache會只下載一次資源，從而避免屢次網絡行程。當應用的版本號發生變化時，它會自動從新下載相應資源。
儘可能在響應中使用「Expires」字段來提供可緩存的內容。
經過設定請求的If-Modified-Since字段來使用條件請求。
緩存數據請求，如HTTP、XML和JSON等，由於大約95-96%的請求不會成天變化。雖然這個想法很合理，但實際緩存接收到的請求的網站所佔比重還不到1%。
用大寫將文件命名標準化。雖然服務器可能把Icon.jpg看成 icon.jpg，可是對於Web平臺而言，它們是不一樣的資源，對應不一樣的網絡請求。

對於IE而言，請使用最新的標記標準，由於它速度最快。IE 10也能識別早期的IE6-IE9標記風格，可是其速度不如新的標記風格。 node

特定的業務Web應用可能須要強制IE運行於傳統模式，請使用HTTP頭字段「X-UA-Compatible: IE=EmulateIE7」來代替HTML標籤，這樣速度會快一些。
爲了平滑地渲染，樣式表應該連接在頁面頂部的<head>之中的<title>後面。
絕對不要在頁面底部連接樣式表。不然加載頁面時可能會出現閃爍。
對於分層樣式，不要使用「@import」，由於它是同步的，會阻塞CSS數據結構的建立和屏幕繪製。
避免樣式的嵌入和內聯，由於它會強制瀏覽器在HTML和CSS解析器之間進行上下文切換。
僅包含必要的樣式。不要下載和解析用不到的樣式。
僅在頁面底部連接JavaScript。這能夠確保腳本執行時圖片和CSS等資源已經加載，無需等待，也避免了上下文切換。
不要在頁面開頭連接JavaScript。若是某些腳本必須在開始處加載的話，請使用「defer」屬性。
不要內聯JavaScript，這樣能夠避免上下文切換。
使用「async」屬性加載JavaScript，這樣整個腳本就能夠異步加載和執行。
避免冗餘代碼。世界上52%的網頁包含100行甚至更多的冗餘代碼，好比一個JavaScript文件被連接了兩次。
將一個JS框架標準化，不管是jQuery，Dojo，Prototype.js仍是其餘框架。瀏覽器沒有必要加載多個功能基本相同的框架。
不要加載FB和Twitter等網站的腳本，只是看起來很酷而已，它們會爭用資源。

圖片是最經常使用的資源，每一個頁面平均會下載58張圖片。正則表達式

在JavaScript中進行數學運算時儘可能使用整型。JavaScript的浮點運算比相應的整型運算耗費的時間要多得多。在進行數學運算，特別是計算密集型運算時，請使用Math.floor和Math.ceil將浮點數轉換爲整型數。
下降JavaScript代碼量，這樣不但能夠減小下載的數據量，並且可以提供更好的運行時性能。
按需初始化JS。當須要時動態加載JS。
經過緩存變量（如document和body等）使DOM交互減到最少。
使用內置的DOM代碼，如element.firstChild或node.nextSibling等。這些代碼都是高度優化的，相對於第三方庫能提供更好的性能。
訪問大量DOM元素時，使用querySelectorAll。
使用.innerHTML來構建動態頁面。
批量標記更改。
維護小巧而健壯的DOM——將其元素數目控制在1000之內。.
JSON快於XML。
使用瀏覽器的JSON原生方法。
不要濫用正則表達式。

理解JavaScript定時器，瞭解setTimeout和clearInterval。除非肯定要使用定時器完成一些功能，不然不要啓動定時器。組合定時器也是如此。
若是監視器的刷新率是60Hz，請將顯式幀的定時器調整爲16.7 ms。
在IE 十、Chrome和Firefox中，圖形處理請使用requestAnimationFrame動畫函數。其繪製經過回調實現，所以不須要定時器。
使用可見性API（document.hidden和 Visibilityhange）來肯定應用程序的可見狀態，若是頁面是隱藏的，就關閉該活動。這樣能夠節省CPU和電池壽命。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。