資訊專欄INFORMATION COLUMN
摘要：在某些情況下，延遲能減少一秒鐘。在某些瀏覽器中這個預讀取的行為將會與頁面實際內容并行發生而不是串行。在某些圖片較多的頁面中，在發起圖片加載請求之前預先把域名解析好將會有至少的圖片加載速度提升。
1. 使用dns預解析
DNS 請求需要的帶寬非常小，但是延遲卻有點高，這點在手機網絡上特別明顯。預讀取 DNS 能讓延遲明顯減少一些，例如用戶點擊鏈接時。在某些情況下，延遲能減少一秒鐘。
在某些瀏覽器中這個預讀取的行為將會與頁面實際內容并行發生（而不是串行）。正因如此，某些高延遲的域名的解析過程才不會卡住資源的加載。
這樣可以極大的加速（尤其是移動網絡環境下）頁面的加載。在某些圖片較多的頁面中，在發起圖片加載請求之前預先把域名解析好將會有至少 5%的圖片加載速度提升。
你可以通過在服務器端發送 X-DNS-Prefetch-Control 報頭，或是在文檔中使用值為 http-equiv 的 標簽：
打開和關閉 DNS 預讀取
在高級瀏覽器中a標簽是默認打開預解析的，但是在https協議中是默認關閉的，此句話是強制打開a img script等 標簽的預解析 link標簽的dns預解析 您可以通過將 content 的參數設置為“on”來改變設置。
強制查詢特定主機名
你可以通過使用 rel 屬性值為 link type 中的 dns-prefetch 的 標簽來對特定域名進行預讀取：
在這個例子中，Firefox將預解析域名"www.spreadfirefox.com"。而且， 元素也可以使用不完整的 URL 的主機名來標記預解析，但這些主機名前必需要有雙斜線：
強制對域名進行預讀取在有的情況下很有用, 比如,
在網站的主頁上，強制在整個網站上頻繁引用的域名的預解析，即使它們不在主頁本身上使用。即使主頁的性能可能不受影響，這將提高整體站點性能
2.資源壓縮合并，減少HTTP請求
通過webpack,grunt等打包工具，對于js，css文件進行打包成單個的js以及css，使用gzip進行代碼壓縮，從而減少請求文件的大小以及數量，每個js，css文件的加載都要發送一次http請求，所以通過合并js，css文件從而減少http請求次數。
3.瀏覽器緩存
1.強緩存
Expire（絕對時間，下發的服務器時間，有可能客戶端和服務端時間不一致。Expire：Thu,21 Jan 2017 23:39:02
GMT）；
//在前端標簽中設置
//在后端設置
response.setDateHeader("Expires",date.getTime()+20000); //Expires:過時期限值
response.setDateHeader("Expires", 0);//不允許瀏覽器端或緩存服務器緩存當前頁面信息。
Cache-Control（相對時間，按照客戶端時間，3600秒內使用緩存。Cache-Control:max-age=3600）
//在前端標簽中設置 //在后端設置 response.addHeader( "Cache-Control", "no-cache" );//瀏覽器和緩存服務器都不應該緩存頁面信息
在http響應頭中，如果兩個時間都有，以Cache-Control為準
2.協商緩存（問一下服務器）
Last-Modified（服務器下發的響應頭中加，Last-Modified:Thu,21 Jan 2017 23:39:02 GMT）
If-Modified-Since，（http請求頭中加，時間和Last-Modified下發的一致，缺點：文件沒變但時間過期，會再次加載
//在后端設置
response.setDateHeader("Last-Modified",date.getTime()); //Last-Modified:頁面的最后生成時間
Etag （哈希值，服務器下發的響應頭中加，文件沒改變可繼續使用緩存） If-None-Match（http請求頭中加，時間和Etag下發的一致）
//響應消息頭 Etag:"a030f020ac7c01:1e9f"
關于下面這些HTTP請求頭部字段以及相關的http知識，可以去閱讀 《圖解http》一書，對此有詳細的文字跟圖解
Expire
Cache-Control
Last-Modified
If-Modified-Since
If-Modified-Since
If-None-Match
4.異步加載
異步加載的方式：
1.動態腳本加載（動態創建節點：document.createElement("/script/")，用js創建一個標簽，再加到文檔中）；
2.defer（在script標簽中加上此屬性）；
3.async（在script標簽中加上此屬性）。
異步加載的區別：
1.defer是在HTML 解析完 之后才會執行，defer屬性規定是否對腳本執行進行延遲，直到頁面加載為止,如果是多個，按照加載的順序依次執行 ；
2.async是在加載完之后 立即執行 ，async屬性規定一旦腳本可用，則會異步執行,如果是多個，執行順序和加載順序無關。
這里來一張defer跟async，還是用圖解比較明了
此圖告訴我們以下幾個要點：defer 和 async 在網絡讀取（下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
它倆的差別在于腳本下載完之后何時執行，顯然 defer 是最接近我們對于應用腳本加載和執行的要求的 關于
defer，此圖未盡之處在于它是按照加載順序執行腳本的，這一點要善加利用 async
則是一個亂序執行的主，反正對它來說腳本的加載和執行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執行 仔細想想，async
對于應用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google
Analytics
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113215.html
摘要：在某些情況下，延遲能減少一秒鐘。在某些瀏覽器中這個預讀取的行為將會與頁面實際內容并行發生而不是串行。在某些圖片較多的頁面中，在發起圖片加載請求之前預先把域名解析好將會有至少的圖片加載速度提升。 1. 使用dns預解析 DNS 請求需要的帶寬非常小，但是延遲卻有點高，這點在手機網絡上特別明顯。預讀取 DNS 能讓延遲明顯減少一些，例如用戶點擊鏈接時。在某些情況下，延遲能減少一秒鐘。 在某...
摘要：在某些情況下，延遲能減少一秒鐘。在某些瀏覽器中這個預讀取的行為將會與頁面實際內容并行發生而不是串行。在某些圖片較多的頁面中，在發起圖片加載請求之前預先把域名解析好將會有至少的圖片加載速度提升。 1. 使用dns預解析 DNS 請求需要的帶寬非常小，但是延遲卻有點高，這點在手機網絡上特別明顯。預讀取 DNS 能讓延遲明顯減少一些，例如用戶點擊鏈接時。在某些情況下，延遲能減少一秒鐘。 在某...
摘要：相反，在討論時，面試中通常會提到三件事。而認為最后一個參賽者說了算，只要還能吃的，就重新設定新的定時器。試想，如果用戶的操作十分頻繁他每次都不等設置的時間結束就進行下一次操作，于是每次都為該用戶重新生成定時器，回調函數被延遲了不計其數次。本文不是討論最新的 JavaScript 庫、常見的開發實踐或任何新的 ES6 函數。相反，在討論 JavaScript 時，面試中通常會提到三件事。我自己...
閱讀 2398·2021-11-12 10:34
閱讀 1473·2019-08-29 16:15
閱讀 2685·2019-08-29 15:17
閱讀 1345·2019-08-23 17:09
閱讀 394·2019-08-23 11:37
閱讀 2454·2019-08-23 10:39
閱讀 473·2019-08-22 16:43
閱讀 3113·2019-08-22 14:53
