红色一级A片,亚洲无码手机在线播放,天天看天天射,亚洲AV成人无码www在线观看,亚洲第一福利视频,国产一级a毛一级a看免费视频野外,奇米色一区二区三区,超碰色婷婷

引子

互聯(lián)網(wǎng)有一項(xiàng)著名的8秒原則。用戶(hù)在訪(fǎng)問(wèn)Web網(wǎng)頁(yè)時(shí)，如果時(shí)間超過(guò)8秒就會(huì)感到不耐煩，如果加載需要太長(zhǎng)時(shí)間，他們就會(huì)放棄訪(fǎng)問(wèn)。大部分用戶(hù)希望網(wǎng)頁(yè)能在2秒之內(nèi)就完成加載。事實(shí)上，加載時(shí)間每多1秒，你就會(huì)流失7%的用戶(hù)。8秒并不是準(zhǔn)確的8秒鐘，只是向網(wǎng)站開(kāi)發(fā)者表明了加載時(shí)間的重要性。那我們?nèi)绾蝺?yōu)化頁(yè)面性能，提高頁(yè)面加載速度呢？這是本文主要要探討的問(wèn)題，然而性能優(yōu)化是個(gè)綜合性問(wèn)題，沒(méi)有標(biāo)準(zhǔn)答案，想要面面俱到羅列出來(lái)，并非易事。本文只關(guān)注一些核心要點(diǎn)，以下是我總結(jié)性能優(yōu)化常見(jiàn)的辦法：

一、資源壓縮與合并

主要包括這些方面：html壓縮、css 壓縮、js的壓縮和混亂和文件合并。資源壓縮可以從文件中去掉多余的字符，比如回車(chē)、空格。你在編輯器中寫(xiě)代碼的時(shí)候，會(huì)使用縮進(jìn)和注釋?zhuān)@些方法無(wú)疑會(huì)讓你的代碼簡(jiǎn)潔而且易讀，但它們也會(huì)在文檔中添加多余的字節(jié)。

1.html壓縮

html代碼壓縮就是壓縮這些在文本文件中有意義，但是在HTML中不顯示的字符，包括空格，制表符，換行符等，還有一些其他意義的字符，如HTML注釋也可以被壓縮。

如何進(jìn)行html壓縮：

使用在線(xiàn)網(wǎng)站進(jìn)行壓縮(開(kāi)發(fā)過(guò)程中一般不用)
nodejs 提供了html-minifier工具
后端模板引擎渲染壓縮

2.css代碼壓縮：

css代碼壓縮簡(jiǎn)單來(lái)說(shuō)就是無(wú)效代碼刪除和css語(yǔ)義合并

如何進(jìn)行css壓縮：

使用在線(xiàn)網(wǎng)站進(jìn)行壓縮(開(kāi)發(fā)過(guò)程中一般不用)
使用html-minifier工具
使用clean-css對(duì)css壓縮

3.js的壓縮和混亂

js的壓縮和混亂主要包括以下這幾部分：

無(wú)效字符的刪除
剔除注釋
代碼語(yǔ)義的縮減和優(yōu)化
代碼保護(hù)(代碼邏輯變得混亂，降低代碼的可讀性，這點(diǎn)很重要)

如何進(jìn)行js的壓縮和混亂

使用在線(xiàn)網(wǎng)站進(jìn)行壓縮(開(kāi)發(fā)過(guò)程中一般不用)
使用html-minifier工具
使用uglifyjs2對(duì)js進(jìn)行壓縮

其實(shí)css壓縮與js的壓縮和混亂比html壓縮收益要大得多，同時(shí)css代碼和js代碼比html代碼多得多，通過(guò)css壓縮和js壓縮帶來(lái)流量的減少，會(huì)非常明顯。所以對(duì)大公司來(lái)說(shuō)，html壓縮可有可無(wú)，但css壓縮與js的壓縮和混亂必須要有！

4.文件合并

從上圖可以看出不合并請(qǐng)求有以下缺點(diǎn)：

文件與文件之間有插入的上行請(qǐng)求，增加了N-1個(gè)網(wǎng)絡(luò)延遲
受丟包問(wèn)題影響更嚴(yán)重
keep-alive方式可能會(huì)出現(xiàn)狀況，經(jīng)過(guò)代理服務(wù)器時(shí)可能會(huì)被斷開(kāi)，也就是說(shuō)不能一直保持keep-alive的狀態(tài)

壓縮合并css和js可以減少網(wǎng)站http請(qǐng)求的次數(shù)，但合并文件可能會(huì)帶來(lái)問(wèn)題:首屏渲染和緩存失效問(wèn)題。那該如何處理這問(wèn)題呢？----公共庫(kù)合并和不同頁(yè)面的合并。

如何進(jìn)行文件合并

使用在線(xiàn)網(wǎng)站進(jìn)行文件合并
使用nodejs實(shí)現(xiàn)文件合并(gulp、fis3)

二、非核心代碼異步加載異步加載的方式

1、異步加載的方式

異步加載的三種方式——async和defer、動(dòng)態(tài)腳本創(chuàng)建

① async方式

async屬性是HTML5新增屬性，需要Chrome、FireFox、IE9+瀏覽器支持
async屬性規(guī)定一旦腳本可用，則會(huì)異步執(zhí)行
async屬性?xún)H適用于外部腳本
如果是多個(gè)腳本，該方法不能保證腳本按順序執(zhí)行

② defer方式

兼容所有瀏覽器
defer屬性規(guī)定是否對(duì)腳本執(zhí)行進(jìn)行延遲，直到頁(yè)面加載為止
如果是多個(gè)腳本，該方法可以確保所有設(shè)置了defer屬性的腳本按順序執(zhí)行
如果腳本不會(huì)改變文檔的內(nèi)容，可將defer屬性加入到script標(biāo)簽中，以便加快處理文檔的速度

③動(dòng)態(tài)創(chuàng)建script標(biāo)簽在還沒(méi)定義defer和async前，異步加載的方式是動(dòng)態(tài)創(chuàng)建script，通過(guò)window.onload方法確保頁(yè)面加載完畢再將script標(biāo)簽插入到DOM中,具體代碼如下：

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/javascript");  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag("js/index.js");  
}

2、異步加載的區(qū)別

1)defer是在HTML解析完之后才會(huì)執(zhí)行，如果是多個(gè)，按照加載的順序依次執(zhí)行

2)async是在加載完之后立即執(zhí)行，如果是多個(gè)，執(zhí)行順序和加載順序無(wú)關(guān)

其中藍(lán)色線(xiàn)代表網(wǎng)絡(luò)讀取，紅色線(xiàn)代表執(zhí)行時(shí)間，這倆都是針對(duì)腳本的；綠色線(xiàn)代表 HTML 解析。

三、利用瀏覽器緩存

對(duì)于web應(yīng)用來(lái)說(shuō)，緩存是提升頁(yè)面性能同時(shí)減少服務(wù)器壓力的利器。

瀏覽器緩存類(lèi)型

1.強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接從緩存中讀取資源，在chrome控制臺(tái)的network選項(xiàng)中可以看到該請(qǐng)求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache；

緩存的機(jī)制

強(qiáng)制緩存優(yōu)先于協(xié)商緩存進(jìn)行，若強(qiáng)制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進(jìn)行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效，那么代表該請(qǐng)求的緩存失效，重新獲取請(qǐng)求結(jié)果，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存。主要過(guò)程如下：

用戶(hù)行為對(duì)瀏覽器緩存的影響

1.地址欄訪(fǎng)問(wèn)，鏈接跳轉(zhuǎn)是正常用戶(hù)行為，將會(huì)觸發(fā)瀏覽器緩存機(jī)制；

2.F5刷新，瀏覽器會(huì)設(shè)置max-age=0，跳過(guò)強(qiáng)緩存判斷，會(huì)進(jìn)行協(xié)商緩存判斷；

3.ctrl+F5刷新，跳過(guò)強(qiáng)緩存和協(xié)商緩存，直接從服務(wù)器拉取資源。

如果想了解更多緩存機(jī)制，請(qǐng)猛戳 深入理解瀏覽器的緩存機(jī)制

四、使用CDN

大型Web應(yīng)用對(duì)速度的追求并沒(méi)有止步于僅僅利用瀏覽器緩存，因?yàn)闉g覽器緩存始終只是為了提升二次訪(fǎng)問(wèn)的速度，對(duì)于首次訪(fǎng)問(wèn)的加速，我們需要從網(wǎng)絡(luò)層面進(jìn)行優(yōu)化，最常見(jiàn)的手段就是CDN（Content Delivery Network，內(nèi)容分發(fā)網(wǎng)絡(luò)）加速。通過(guò)將靜態(tài)資源(例如javascript，css，圖片等等）緩存到離用戶(hù)很近的相同網(wǎng)絡(luò)運(yùn)營(yíng)商的CDN節(jié)點(diǎn)上，不但能提升用戶(hù)的訪(fǎng)問(wèn)速度，還能節(jié)省服務(wù)器的帶寬消耗，降低負(fù)載。

CDN是怎么做到加速的呢？

其實(shí)這是CDN服務(wù)商在全國(guó)各個(gè)省份部署計(jì)算節(jié)點(diǎn)，CDN加速將網(wǎng)站的內(nèi)容緩存在網(wǎng)絡(luò)邊緣,不同地區(qū)的用戶(hù)就會(huì)訪(fǎng)問(wèn)到離自己最近的相同網(wǎng)絡(luò)線(xiàn)路上的CDN節(jié)點(diǎn)，當(dāng)請(qǐng)求達(dá)到CDN節(jié)點(diǎn)后，節(jié)點(diǎn)會(huì)判斷自己的內(nèi)容緩存是否有效，如果有效，則立即響應(yīng)緩存內(nèi)容給用戶(hù)，從而加快響應(yīng)速度。如果CDN節(jié)點(diǎn)的緩存失效，它會(huì)根據(jù)服務(wù)配置去我們的內(nèi)容源服務(wù)器獲取最新的資源響應(yīng)給用戶(hù)，并將內(nèi)容緩存下來(lái)以便響應(yīng)給后續(xù)訪(fǎng)問(wèn)的用戶(hù)。因此，一個(gè)地區(qū)內(nèi)只要有一個(gè)用戶(hù)先加載資源，在CDN中建立了緩存，該地區(qū)的其他后續(xù)用戶(hù)都能因此而受益。

五、預(yù)解析DNS

資源預(yù)加載是另一個(gè)性能優(yōu)化技術(shù)，我們可以使用該技術(shù)來(lái)預(yù)先告知瀏覽器某些資源可能在將來(lái)會(huì)被使用到。通過(guò) DNS 預(yù)解析來(lái)告訴瀏覽器未來(lái)我們可能從某個(gè)特定的 URL 獲取資源，當(dāng)瀏覽器真正使用到該域中的某個(gè)資源時(shí)就可以盡快地完成 DNS 解析。例如，我們將來(lái)可從 example.com 獲取圖片或音頻資源，那么可以在文檔頂部的標(biāo)簽中加入以下內(nèi)容：

 rel="dns-prefetch" href="http://example.com">

當(dāng)我們從該 URL 請(qǐng)求一個(gè)資源時(shí)，就不再需要等待 DNS 的解析過(guò)程。該技術(shù)對(duì)使用第三方資源特別有用。通過(guò)簡(jiǎn)單的一行代碼就可以告知那些兼容的瀏覽器進(jìn)行 DNS 預(yù)解析，這意味著當(dāng)瀏覽器真正請(qǐng)求該域中的某個(gè)資源時(shí)，DNS 的解析就已經(jīng)完成了,從而節(jié)省了寶貴的時(shí)間。另外需要注意的是，瀏覽器會(huì)對(duì)a標(biāo)簽的href自動(dòng)啟用DNS Prefetching，所以a標(biāo)簽里包含的域名不需要在head中手動(dòng)設(shè)置link。但是在HTTPS下不起作用，需要meta來(lái)強(qiáng)制開(kāi)啟功能。這個(gè)限制的原因是防止竊聽(tīng)者根據(jù)DNS Prefetching推斷顯示在HTTPS頁(yè)面中超鏈接的主機(jī)名。下面這句話(huà)作用是強(qiáng)制打開(kāi)a標(biāo)簽域名解析

 http-equiv="x-dns-prefetch-control" content="on">

參考

Web前端性能優(yōu)化
【第887期】瀏覽器的緩存機(jī)制小結(jié)
徹底理解瀏覽器的緩存機(jī)制

最后

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：

點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。

點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了

頁(yè)面性能優(yōu)化辦法有哪些？

引子