資訊專(zhuān)欄INFORMATION COLUMN
摘要：一盡可能減少請(qǐng)求什么是請(qǐng)求官方回答從客戶(hù)端到服務(wù)器端的請(qǐng)求消息包括消息首行中對(duì)資源的請(qǐng)求方法資源的標(biāo)識(shí)符及使用協(xié)議菜鳥(niǎo)回答當(dāng)你打開(kāi)網(wǎng)頁(yè)的時(shí)候所看到的文字圖片多媒體等都是從服務(wù)器獲取的每一個(gè)內(nèi)容的獲取就是請(qǐng)求把圖片合并二使用內(nèi)容分發(fā)網(wǎng)絡(luò)官方回
一、盡可能減少Http請(qǐng)求
什么是Http請(qǐng)求？
官方回答：從客戶(hù)端到服務(wù)器端的請(qǐng)求消息包括消息首行中對(duì)資源的請(qǐng)求方法 資源的標(biāo)識(shí)符及使用協(xié)議
菜鳥(niǎo)回答：當(dāng)你打開(kāi)網(wǎng)頁(yè)的時(shí)候 所看到的文字圖片多媒體等 都是從服務(wù)器獲取的 每一個(gè)內(nèi)容的獲取 就是http請(qǐng)求
把圖片、js、css合并
二、使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）官方回答：內(nèi)容分發(fā)網(wǎng)絡(luò) 意思是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié) 使內(nèi)容傳輸?shù)母?、更穩(wěn)定
：在離你最近的距離、最快的速度獲取內(nèi)容
阿帕奇開(kāi)啟了expire模塊 當(dāng)瀏覽器發(fā)送資源請(qǐng)求的時(shí)候 阿帕奇返回資源的同時(shí) 會(huì)返回一個(gè)名為expire的Http頭
expire頭的內(nèi)容是一個(gè)時(shí)間值 值就是資源在本地的過(guò)期時(shí)間、這個(gè)值會(huì)存在本地
在本地緩存階段找到一個(gè)本地對(duì)應(yīng)的資源值
當(dāng)前時(shí)間還沒(méi)超過(guò)資源的過(guò)期時(shí)間 就直接使用這一個(gè)資源 不會(huì)發(fā)送Http請(qǐng)求
Cache-Control四、啟用Gzip壓縮
是Http協(xié)議中常用的頭部之一
顧名思義 它是負(fù)責(zé)控制頁(yè)面的緩存機(jī)制 如果該頭部指示緩存
緩存的內(nèi)容也不會(huì)存在本操作流程和expire相似
但也有不同的地方 cache-control有更多的選項(xiàng)
而且也有更多的處理方式
什么是Gzip壓縮：文件先放服務(wù)器壓縮 然后在存儲(chǔ) 存儲(chǔ)完畢以后 瀏覽器在對(duì)壓縮過(guò)得內(nèi)容進(jìn)行解壓縮 并執(zhí)行
目前的瀏覽器都能很好的支持Gzip
所有的文本內(nèi)容都要進(jìn)行Gzip壓縮
Cascading Style Sheets（層疊樣式表單）
為了提高瀏覽器的渲染性能 避免頁(yè)面空白或閃爍的問(wèn)題
如果js出現(xiàn)問(wèn)題 不會(huì)出現(xiàn)空白影響用戶(hù)瀏覽
七、避免在css中使用 Expressions什么是css Expressions：
css Expressions 俗稱(chēng) css表達(dá)式
是用來(lái)把css屬性 和 js表達(dá)式關(guān)聯(lián)起來(lái)
（這里的css屬性可以是固有屬性 也可以是自定義屬性
就是說(shuō)css屬性后面可以是js表達(dá)式 css的值 = js表達(dá)式計(jì)算的結(jié)果）
css Expressions 計(jì)算頻率很高
在頁(yè)面顯示和縮放、頁(yè)面滾動(dòng)、鼠標(biāo)移動(dòng)的時(shí)候都會(huì)從新計(jì)算一次
所有使用css Expressions 瀏覽器會(huì)不停的計(jì)算 以至于嚴(yán)重影響性能 及 用戶(hù)體驗(yàn)
八、把js和css放到外部文件中多帶帶提?。?/strong>
提高了js和css的復(fù)用性 減少頁(yè)面體積 提高js和css的可維護(hù)性
寫(xiě)在頁(yè)面里：
減少請(qǐng)求 提升頁(yè)面渲染速度
寫(xiě)在頁(yè)面內(nèi)的情況：
1、js和css只應(yīng)用于一個(gè)頁(yè)面
2、一個(gè)不經(jīng)常被訪(fǎng)問(wèn)的頁(yè)面
3、腳本和樣式很少的情況（不多于20、30行）
如：用戶(hù)打開(kāi) www.a.com 這個(gè)網(wǎng)址時(shí) 計(jì)算機(jī)是不知道它是什么、在哪里 必須通過(guò)一種轉(zhuǎn)換機(jī)制才能到達(dá)這個(gè)頁(yè)面
這種機(jī)制能夠?qū)?www.a.com 對(duì)應(yīng)到一個(gè)IP地址 10.96.141.1（一個(gè)計(jì)算機(jī)理解的地址）
在通過(guò)這個(gè)IP地址（使用DNS查找）對(duì)應(yīng)到 www.a.com 這個(gè)網(wǎng)站
整個(gè)過(guò)程就是DNS查找過(guò)程
查找的過(guò)程中瀏覽器是得不到任何資源的（這期間瀏覽器是一片空白）
所以要對(duì)這個(gè)過(guò)程進(jìn)行緩存 緩存之后就可以減少這種查找過(guò)程
不同瀏覽區(qū)緩存時(shí)間不同 （IE：30m 火狐：60s 谷歌：60s）
當(dāng)緩存時(shí)間長(zhǎng)時(shí)：減少DNS的重復(fù)查找 節(jié)省時(shí)間
當(dāng)緩存時(shí)間短時(shí)：瀏覽器會(huì)及時(shí)檢查網(wǎng)站服務(wù)器的變化 保證正確性
根據(jù)自身情況進(jìn)行緩存時(shí)間的長(zhǎng)短十、壓縮js 和 css
多域：網(wǎng)址 圖片 js 分別使用不同的域名
單域：網(wǎng)址 圖片 js 使用同一域名
1、去除不必要的空白符、格式符、注釋?zhuān)ùa格式化）
2、簡(jiǎn)寫(xiě)方法名參數(shù)名壓縮js腳本
建議：在正式上線(xiàn)前 將js、css都進(jìn)行壓縮 使線(xiàn)上版本是最輕量級(jí)的 大幅提升網(wǎng)址性能
十一、避免重定向重定向：用戶(hù)原始請(qǐng)求被重新轉(zhuǎn)向到了其他請(qǐng)求（用戶(hù)想訪(fǎng)問(wèn)的頁(yè)面a 被重新 指向了頁(yè)面b）
重定向狀態(tài)碼：
301 Moved Permanently：用戶(hù)請(qǐng)求的頁(yè)面被移動(dòng)到另外的位置（永久重定向）
302 Found：用戶(hù)請(qǐng)求的頁(yè)面被找到了但不在原始位置（臨時(shí)重定向）
對(duì)用戶(hù)沒(méi)有什么影響 但對(duì)搜索引擎影響就大了 都是從a 跳到 b
301 會(huì)識(shí)別一次 第二次就會(huì)直接跳到 b
302 每次都是 先找a 再跳到 b
為什么避免重定向
無(wú)論301還是302都增加了服務(wù)器的往返次數(shù)
當(dāng)用戶(hù)發(fā)起訪(fǎng)問(wèn) a 網(wǎng)站的請(qǐng)求時(shí) 服務(wù)器收到 由于a 重定向到 b 所以服務(wù)器返回一個(gè)重定向信息（301 或 302）
并把這個(gè)信息寫(xiě)在 header 中 并在 header 中返回一個(gè)新的地址（b 的地址）
但是body中是空白的 用戶(hù)端在收到這個(gè)反饋后 就知道地址改了
所以用戶(hù)的瀏覽器會(huì)再一次請(qǐng)求 請(qǐng)求到b 然后才打開(kāi)網(wǎng)頁(yè) 下載資源
用戶(hù)多了一次獲取新地址的過(guò)程 必然會(huì)增加瀏覽器到服務(wù)器的返回次數(shù)
（要盡量減少Http請(qǐng)求 所以要避免使用）
//外部引入代碼
number++;
document.getElementById("test").value = number;
//外部引入兩遍 會(huì)影響value值
十三、配置實(shí)體標(biāo)簽（ETag）
全稱(chēng)Entity Tag（實(shí)體標(biāo)簽） 它包含在響應(yīng)頭部中 屬于Http協(xié)議 受web服務(wù)支持
它是使用特殊字符串 來(lái)標(biāo)識(shí)某個(gè)請(qǐng)求資源版本
當(dāng)用戶(hù)通過(guò)瀏覽器來(lái)服務(wù)器請(qǐng)求資源的時(shí)候 服務(wù)器會(huì)進(jìn)行比較
如果兩遍的ETag一致 那就代表瀏覽器和服務(wù)器的ETag一致 這就意味著該資源沒(méi)有修改過(guò) 和以前是一樣的
這時(shí)候服務(wù)器會(huì)返回一個(gè)304碼 告訴瀏覽器對(duì)比一致 可以使用本地緩存的版本 會(huì)幫助服務(wù)器減輕很多負(fù)擔(dān)
這就是配置ETag的好處
ajax：不重新加載頁(yè)面的情況下 使客戶(hù)端與服務(wù)器交換數(shù)據(jù) 可使網(wǎng)站數(shù)據(jù)分批加載 也可局部更新
post：每次都執(zhí)行 不能被緩存
get：同一地址不重復(fù)執(zhí)行 可以被緩存
輔助工具 Yslow
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106717.html
摘要：軍規(guī)重要的幾點(diǎn)也是常用的幾點(diǎn)來(lái)個(gè)總結(jié)減少請(qǐng)求減輕服務(wù)器壓力圖片合并合并合并使用內(nèi)容分發(fā)網(wǎng)絡(luò)需要花錢(qián)買(mǎi)副本服務(wù)器定義盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母旄€(wěn)定。 今天的雞湯來(lái)自有書(shū)共讀——《你好好說(shuō)話(huà)會(huì)死嗎？》 是，不是你心情不好，全世界都得陪你哭；不是你心情不好，周?chē)娜硕嫉萌淌苣愕囊磺?。不是你身懷鋒芒，手藏匕首，就有資格在難過(guò)的時(shí)候，刺向你最...
摘要：避免重定向重定向用和狀態(tài)碼，下面是一個(gè)有狀態(tài)碼的頭瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來(lái)，性能優(yōu)化是開(kāi)發(fā)的重中之中，而提及 前端...
摘要：避免重定向重定向用和狀態(tài)碼，下面是一個(gè)有狀態(tài)碼的頭瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來(lái)，性能優(yōu)化是開(kāi)發(fā)的重中之中，而提及 前端...
摘要：避免重定向重定向用和狀態(tài)碼，下面是一個(gè)有狀態(tài)碼的頭瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來(lái)，性能優(yōu)化是開(kāi)發(fā)的重中之中，而提及 前端...
閱讀 1863·2021-09-26 09:46
閱讀 3095·2021-09-22 15:55
閱讀 2676·2019-08-30 14:17
閱讀 3096·2019-08-26 11:59
閱讀 1880·2019-08-26 11:35
閱讀 3217·2019-08-26 10:45
閱讀 3223·2019-08-23 18:28
閱讀 1279·2019-08-23 18:21
