參考

前端性能優化之加載技術

　　關於Preload, 你應該知道些什麽？

　　Preload，Prefetch 和它們在 Chrome 之中的優先級

對以下文章的補充

　　簡單匯總了一下web的優化方案

　　關於頁面加載

圖片處理：

　　預加載，在onload之後動態插入img標簽，使瀏覽器提前緩存該圖片

　　懶加載，使用onload之後手動設置src，src的值存放在標簽的某個屬性上即可（如data-x-src），實現策略：滾動監聽、節流函數、手動設置src值

模塊處理：

　　webpack code split

dns預解析

當瀏覽器真正請求該域中的某個資源時，DNS 的解析就已經完成了

<link rel="dns-prefetch" href="//example.com">

tcp預連接

預先建立 socket 連接，從而消除昂貴的 DNS 查找、TCP 握手和 TLS 往返開銷

<link rel="preconnect" href="http://example.com">

資源預獲取

優先級低，那就意味著瀏覽器空閑的時候才會對資源進行獲取，可輕松繞過性能瓶頸。下載的資源一般用於將來的頁面，而不是當前頁面

<link rel="prefetch" href="image.png">

預渲染

會預處理這個頁面中所有的資源，慎重使用；確保用戶會訪問這個鏈接，才去預渲染，否則可能浪費較多資源（高流量、高cpu）。

<link rel="prerender" href="http://example.com">

應用場景：用戶精確搜索出一個結果，那可以預渲染這個頁面鏈接；閱讀中，預渲染下一個頁面的內容。

preload

參考：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="preload">

瀏覽器可以正確指定優先級，即preload不會影響當前頁面重要資源的下載

有as屬性，常用的值有：script、style、image、media、document

不會阻礙window.onload的觸發

擁有自己的onload事件

提前加載一個js：

<link rel="preload" href="late_discovered_thing.js" as="script">

腳本化

var preload = document.createElement("link");
link.href = "myscript.js";
link.rel = "preload";
link.as = "script";
document.head.appendChild(link);

預加載css後馬上使之生效

<link rel="preload" as="style" href="async_style.css" onload="this.rel=‘stylesheet‘">

應用到js上

<link rel="preload" as="script" href="async_script.js"
onload="var script = document.createElement(‘script‘);
        script.src = this.href;
        document.body.appendChild(script);">

配合媒體查詢：

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

對於當前頁面很有必要的資源使用 preload，對於可能在將來的頁面中使用的資源使用 prefetch

前端加載技術