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