摘要:但這些加載器對于瀏覽器的加載優先級隊列完全束手無策,這也使得他們不得不屈服于同樣的性能問題。
參考文章:https://developer.mozilla.org...先簡單介紹下 link 標簽作用
你可以在頁面 元素內部使用 標簽書寫一些聲明式的資源獲取請求preload (預加載)
有些資源是在頁面加載完成后即刻需要的,對于這種即刻需要的資源,你可能希望在頁面加載的生命周期的早期階段就開始獲取,在瀏覽器的主渲染機制介入前就進行預加載。preload 基本用例
這一機制使得資源可以更早的得到加載并可用,且更不易阻塞頁面的初步渲染,進而提升性能。
preload 使用 as 指定預加載的內容的類型,將使得瀏覽器能夠JS and CSS preload example
as 可選參數更精確地優化資源加載優先級
匹配未來的加載需求,在適當的情況下,重復利用同一資源
為資源應用正確的內容安全策略
為資源設置正確的 Accept 請求頭
跨域獲取audio: 音頻文件
document: 一個將要被嵌入到 或
embed: 一個將要被嵌入到
fetch: 那些將要通過 fetch 和 XHR 請求來獲取的資源,比如一個 ArrayBuffer 或 JSON 文件
font: 字體文件
image: 圖片文件
object: 一個將會被嵌入到
script: JavaScript 文件
style: 樣式表
track: WebVTT 文件
worker: 一個 JavaScript 的 web worker 或 shared worker
video: 視頻文件
如果你已經有了一個可以正確工作的 CORS 設置,那么你也可以同樣成功的預加載那些跨域資源,只需要你在 元素中設置好 crossorigin 屬性即可
注意:如果你需要獲取的是字體文件,那么即使是非跨域的情況下,也需要應用這一屬性
包含媒體Web font example ...
元素有一個很棒的特性是它們能夠接受一個media屬性。它們可以接受媒體類型或有效的媒體查詢作為屬性值,這將令你能夠使用響應式的預加載!
Responsive preload example My site
上面是一個簡單的例子,我們可以通過媒體查詢,來根據屏幕的大小預加載不同的圖片
這一特性將使另一種情況成為可能——字體在隨著頁面渲染完成的時候即可使用,減少了FOUC (無樣式字體閃爍)等問題
值得注意的是,這一特性并不僅限于圖片,或其他有著同樣類型的文件,還有更多想象空間。比如,你可以在用戶僅有較窄的屏幕,CPU 和帶寬資源較為有限的情況下預加載并展示一個簡單的 SVG 圖表,而在用戶資源較為充裕的時候再去加載一系列復雜的 JavaScript 文件以顯示一個有交互功能的 3D 模型
腳本化與預加載另一項很棒的關于預加載的事情是,如果需要,你可以完全以腳本化的方式來執行這些預加載操作。例如,我們在這里創建一個 HTMLLinkElement 實例,然后將他們附加到 DOM 上:
var preloadLink = document.createElement("link"); preloadLink.href = "myscript.js"; preloadLink.rel = "preload"; preloadLink.as = "script"; document.head.appendChild(preloadLink);
這意味著瀏覽器將預加載這個JavaScript文件,但并不實際執行它
當你需要預加載一個腳本,但需要推遲到需要的時候才令其執行時,這種方式會特別有用
如果要對其加以執行,在需要的時候,你可以執行:
var preloadedScript = document.createElement("script"); preloadedScript.src = "myscript.js"; document.body.appendChild(preloadedScript);其他資源預加載機制 還存在一些其他預加載機制,但沒有哪個會比在大多數情況下更符合你的需要和預期:
已經被許多瀏覽器支持了相當長的時間,但它是意圖預獲取一些資源,以備下一個導航 / 頁面使用(比如,當你去到下一個頁面時)。這很好,但對當前的頁面并沒有什么助益。此外,瀏覽器會給使用 prefetch 的資源一個相對較低的優先級——與使用 preload 的資源相比。畢竟,當前的頁面比下一個頁面相對更加重要
被 Chrome 支持了有一段時間,并且已經有些搔到預加載當前導航 / 頁面(所含有的資源)的癢處了。但它有一個問題——沒有辦法處理所獲取內容的優先級(as也并不存在),所以最終,這些資源會以一個相當低的優先級被加載,這使得它能提供的幫助相當有限
除以上這些意外,還有大量的基于腳本的資源加載器。但這些加載器對于瀏覽器的加載優先級隊列完全束手無策,這也使得他們不得不屈服于同樣的性能問題。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54154.html
摘要:表示當所有資源都加載完后,開始預加載這里指定的資源,有最低的優先級。其他方面的測試,目前還沒有很好的方案,暫且只能通過查看瀏覽器是否緩存來測試。警告這些特定還是實驗性質的,將來可能改變。權利越大,責任越大,不要濫用參考鏈接 原文:HTML5 Prefetch 作者:Luis Vieira 譯文:HTML5 prefetch 譯者:@賴小賴小賴 聲明:此文帶著自己的理解,不完全按...
摘要:在某些情況下,延遲能減少一秒鐘。在某些瀏覽器中這個預讀取的行為將會與頁面實際內容并行發生而不是串行。在某些圖片較多的頁面中,在發起圖片加載請求之前預先把域名解析好將會有至少的圖片加載速度提升。 1. 使用dns預解析 DNS 請求需要的帶寬非常小,但是延遲卻有點高,這點在手機網絡上特別明顯。預讀取 DNS 能讓延遲明顯減少一些,例如用戶點擊鏈接時。在某些情況下,延遲能減少一秒鐘。 在某...
閱讀 1565·2021-11-02 14:42
閱讀 2308·2021-10-11 10:58
閱讀 656·2021-09-26 09:46
閱讀 2908·2021-09-08 09:35
閱讀 1403·2021-08-24 10:01
閱讀 1228·2019-08-30 15:54
閱讀 3597·2019-08-30 15:44
閱讀 1792·2019-08-30 10:49