預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的應用，所以我們可以對我們的核心資源使用該技術。在前端
效能優化
裡，我們首先會聯想到檔案的合併、壓縮，檔案快取和開啟伺服器端的 gzip 壓縮等，這使得頁面載入更快，使用者可以盡快使用我們的 web 應用來達到他們的目標。
那麼資源預載入是另乙個效能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。
這種做法曾經被稱為 prebrowsing，但這並不是一項單一的技術，可以細分為幾個不同的技術：dns-prefetch、subresource 和標準的 prefetch、preconnect、prerender。
dns 預解析 dns-prefetch
通過 dns 預解析來告訴瀏覽器未來我們可能從某個特定的 url 獲取資源，當瀏覽器真正使用到該域中的某個資源時就可以盡快地完成 dns 解析。例如，我們將來可能從 example.com 獲取或音訊資源，那麼可以在文件頂部的 標籤中加入以下內容：
當我們從該 url 請求乙個資源時，就不再需要等待 dns 的解析過程。該技術對使用第三方資源特別有用。
通過簡單的一行**就可以告知那些相容的瀏覽器進行 dns 預解析，這意味著當瀏覽器真正請求該域中的某個資源時，dns 的解析就已經完成了。
這似乎是乙個非常微小的效能優化，顯得也並非那麼重要，但事實並非如此 – chrome 一直都做了類似的優化。當在瀏覽器的位址列中輸入 url 的一小段時，chrome 就自動完成了 dns 預解析(甚至頁面預渲染)，從而為每個請求節省了至關重要的時間。
預連線 preconnect
與 dns 預解析類似，preconnect 不僅完成 dns 預解析，同時還將進行 tcp 握手和建立傳輸層協議。可以這樣使用：
現代瀏覽器都試著****將來需要哪些連線，然後預先建立 socket 連線，從而消除昂貴的 dns 查詢、tcp 握手和 tls 往返開銷。然而，瀏覽器還不夠聰明，並不能準確**每個**的所有預鏈結目標。好在，在 firefox 39 和 chrome 46 中我們可以使用 preconnect 告訴瀏覽器我們需要進行哪些預連線。
預獲取 prefetching
如果我們確定某個資源將來一定會被使用到，我們可以讓瀏覽器預先請求該資源並放入瀏覽器快取中。例如，乙個和指令碼或任何可以被瀏覽器快取的資源：
注意：要測試資源的預獲取有點困難，但在 chrome 和 firefox 的網路面板中都有資源預獲取的記錄。還需要記住，預獲取的資源沒有同源策略的限制。
subresources
這是另乙個預獲取方式，這種方式指定的預獲取資源具有最高的優先順序，在所有 prefetch項之前進行：
根據 chrome 文件：
rel=prefetch 為將來的頁面提供了一種低優先順序的資源預載入方式，而 rel=subresource 為當前頁面提供了一種高優先順序的資源預載入。
所以，如果資源是當前頁面必須的，或者資源需要盡快可用，那麼最好使用 subresource 而不是 prefetch。
預渲染 prerender
這是乙個核**，因為 prerender 可以預先載入文件的所有資源：
所有預載入技術都存在乙個潛在的風險：對資源**錯誤，而預載入的開銷(搶占 cpu 資源，消耗電池，浪費頻寬等)是高昂的，所以必須謹慎行事。雖然很難確定使用者下一步將訪問哪些資源，但高可信的場景確實存在：
如果使用者完成乙個帶有明顯結果的搜尋，那麼結果頁面很可能會被載入
如果使用者進入到登陸頁面，那麼登陸成功的頁面很可能會被載入
最後，使用 page visibility api 可以防止頁面真正可見前被執行。
preload
preload 是乙個新規範，與 prefetch 不同(可能被忽略)的是，瀏覽器一定會預載入該資源：
雖然該規範還沒有被所有瀏覽器相容，但其背後的思想還是非常有意思的。
）
1V公升壓5V和1 5V公升壓5V的積體電路晶元
1.5v和1v輸入，要公升壓輸出5v的積體電路晶元合適？乾電池標準電壓是1.5v，放電電壓後面在0.9v 1v左右，如果要選用乾電池1.5v公升壓到5v的合適的晶元，需要滿足低壓1v或者0.9v更好的低壓輸入範圍的公升壓晶元。pw5100是輸入電壓範圍在0.7v低壓，到5v的寬範圍輸入電壓。適用於乾...
css硬體加速提公升網頁效能
你知道我們可以在瀏覽器中用css開啟硬體加速，使gpu graphics processing unit 發揮功能，從而提公升效能嗎？現在大多數電腦的顯示卡都支援硬體加速。鑑於此，我們可以發揮gpu的力量，從而使我們的 或應用表現的更為流暢。css animations,transforms 以及 ...
三個提公升網頁效能技巧
1 display屬性設定 先將元素設為display none 需要1次重排和重繪 然後對這個節點進行100次操作，最後再恢復顯示 需要1次重排和重繪 這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重...