優(yōu)化網(wǎng)站加載速度方式分類
- 減少http請求
- 提升http加載速度
- 使用CDN 內(nèi)容分發(fā)網(wǎng)絡(luò)
- TCP/IP 、HTTP優(yōu)化提升http速度
- 減小網(wǎng)站加載資源的大小
- 使用緩存
- 代碼優(yōu)化
- style 放置到頭部
- script 放置到body底部
- 減少使用內(nèi)連style標(biāo)簽既棺、script標(biāo)簽
- 用戶體驗(yàn)優(yōu)化
減少http請求
減少http請求是優(yōu)化提高網(wǎng)站加載速度最核心指導(dǎo)方針朦前，因?yàn)榫W(wǎng)絡(luò)的不確定性導(dǎo)致網(wǎng)址加載速度不可控搁凸，每添加一個(gè)http請求烤咧，就增加一個(gè)不確定性，特別是核心的http請求祝迂，任意一個(gè)http請求都可能導(dǎo)致整個(gè)網(wǎng)站的奔潰婿奔。加上如今用戶設(shè)備的升級(jí)缺狠、性能的提升，代碼優(yōu)化并不是最需要考慮萍摊，代碼執(zhí)行速度往往不是最影響網(wǎng)站加載一部分挤茄。
網(wǎng)站加載速度優(yōu)化，考慮資源最小加載規(guī)則冰木，非必要資源不加載或者延遲加載驮樊，減少http請求。然后再對這些最小必要的資源進(jìn)行優(yōu)化減小文件體積或者提高加載速度。 能少發(fā)就少發(fā)請求囚衔，去掉不必要的資源挖腰，任何請求都不如沒有請求快。
減少http方式有如下幾種方式：
- icon圖片使用雪碧圖练湿，或者使用字體圖標(biāo)
- webpack代碼合并
- 小圖片轉(zhuǎn)base64嵌入到html文件中猴仑。
注意：base64編碼會(huì)導(dǎo)致文件增大33%，并會(huì)不緩存肥哎，img src圖片是會(huì)緩存的辽俗，當(dāng)文件需要重復(fù)使用時(shí)，建議使用src加載篡诽，而不是base64減少http請求
- 異步加載崖飘，非必要資源不要一次性加載
- 可以考慮把“穩(wěn)定的核心”，比如框架和庫杈女，轉(zhuǎn)移到獨(dú)立的包中朱浴，利用緩存(可達(dá)到連請求都不發(fā)送的理想狀態(tài))。
- 接口合并达椰，能合并的接口請求后端改邏輯合并請求翰蠢，堅(jiān)決拒絕前端循環(huán)發(fā)送http請求加載數(shù)據(jù)。
- 項(xiàng)目啟動(dòng)服務(wù)端渲染啰劲，vue項(xiàng)目服務(wù)端渲染梁沧，加快首屏渲染速度。理想狀態(tài)蝇裤，一個(gè)http請求就能加載渲染整個(gè)網(wǎng)站
提升http加載速度
提升http速度核心在與網(wǎng)絡(luò)優(yōu)化廷支，TCP/IP 優(yōu)化提升網(wǎng)站加載速度，這就需要對http協(xié)議栓辜，TCP/IP協(xié)議有一定的了解恋拍。措施如下：使用CDN 內(nèi)容分發(fā)網(wǎng)絡(luò)、TCP/IP 啃憎、HTTP優(yōu)化提升http速度。
使用CDN 內(nèi)容分發(fā)網(wǎng)絡(luò)
- 靜態(tài)資源使用CDN
- 可選擇使用阿里云OSS服務(wù)似炎，節(jié)省帶寬
- 不要使用不穩(wěn)定的CDN辛萍，例如直接從第三方庫官網(wǎng)復(fù)制CDN連接，往往不穩(wěn)定羡藐，不可控贩毕，推薦oss
TCP/IP 、HTTP優(yōu)化提升http速度
- 重用TCP連接 http1.0 升級(jí)到 http1.1 或 http1.0 也可配置connection:keep-alive 啟動(dòng)持久連接
- request和response中同時(shí)加上connection：keep-alive請求頭仆嗦。瀏覽器會(huì)自動(dòng)加上該請求頭辉阶。
- 避免HTTP重定向，HTTP 重定向極其耗時(shí)，特別是把客戶端定向到一個(gè)完全不同的域名的情況下谆甜，還會(huì)導(dǎo)致額外的 DNS 查詢垃僚、TCP 連接延遲，等等
- 項(xiàng)目升級(jí)到 HTTP 2.0 以提升性能
- 利用HTTP管道, http請求并行發(fā)送
- 減少http中cookie的大小规辱，非必要不傳輸cookie
- 不要CORS跨域谆棺，使用CORS跨域會(huì)導(dǎo)致多一次options請求， script src等靜態(tài)資源不影響罕袋，但是接口跨域會(huì)導(dǎo)致多一個(gè)options請求改淑，如果無法避免跨域，可選擇配置中加長CORS的保持時(shí)間浴讯。
- 合理選擇XHR朵夏、SSE（EventSource）、WebSockets榆纽、WebRTC仰猖。
- 采用域名分區(qū)，如果一次需要加載很多資源掠河，而瀏覽器http請求有并發(fā)上線亮元，以前是可以并發(fā)6個(gè)。這種情況可以采用多個(gè)域名來繞過并發(fā)上線限制唠摹。
- 提升帶寬大小爆捞，但帶寬大小并不少越大越快，只有當(dāng)訪問量達(dá)到一定數(shù)量時(shí)勾拉，才需要盡可能提升帶寬煮甥。一般個(gè)人網(wǎng)站1M、2M帶寬就夠用了藕赞。據(jù)統(tǒng)計(jì)5M帶寬能滿足大部分網(wǎng)站需求成肘。大于5M后，帶寬的利用率并不理想斧蜕。并且?guī)挼馁M(fèi)用還高双霍。
減小網(wǎng)站加載資源的大小
減小http請求資源的大小的核心在于對文件進(jìn)行壓縮，或者在可達(dá)到相同的效果中選擇合適的資源（例如：圖片中不需要透明度時(shí)批销，選擇使用jpg或jpeg）
- 使用Gzip壓縮洒闸，所有文本資源都應(yīng)該使用 Gzip 壓縮，然后再在客戶端與服務(wù)器間傳輸均芽。一般來說丘逸，Gzip 可以減少 60%~80% 的文件大小，也是一個(gè)相對簡單（只要在服務(wù)器上配置一個(gè)選項(xiàng)）掀宋，但優(yōu)化效果較好的舉措深纲。一般在服務(wù)器中配置壓縮仲锄，例如nginx啟動(dòng)壓縮。
- 使用webpack 壓縮插件壓縮代碼湃鹊，壓縮過程中去除不必要代碼儒喊，例如：console日志，注釋代碼等
- 圖片壓縮涛舍，不要傳輸大圖片澄惊。圖片進(jìn)行壓縮，使用webp圖片等富雅，在可達(dá)到相同效果時(shí)盡可能使用壓縮率大的突破類型掸驱。選擇正確的圖片格式，不需要透明度的圖片不要使用png没佑。
- 壓縮好處節(jié)省帶寬
使用緩存
- 瀏覽器緩存Cache-Control 首部用于指定緩存時(shí)間, max-age
- Cache-Control: max-age=1000; 不同于Expires毕贼，max-age 控制的是時(shí)間有效區(qū)間，例如配置有效期為一天或者一個(gè)月蛤奢；注意http1.0不支持Cache-Control鬼癣；當(dāng)同時(shí)指定max-age和Expires 時(shí)，max-age優(yōu)先級(jí)高啤贩，并重寫Expires待秃。
- Last-Modified 、 ETag 痹屹、Expires 首部提供驗(yàn)證機(jī)制
-
Last-Modified, 如果沒有改變章郁，http會(huì)響應(yīng)狀態(tài)嗎304 NotModified ，response body 響應(yīng)體不回返回 -
Expires： response header 中Expires明確指出瀏覽器緩存該資源志衍，同時(shí)指定過期時(shí)間暖庄。加載的資源未過期，則瀏覽器不會(huì)進(jìn)行http請求楼肪，直接使用緩存中的資源培廓。需要注意客戶端和服務(wù)端時(shí)間同步問題,每次調(diào)整都需要在服務(wù)端配置。
-
- nginx緩存
- 后端服務(wù)緩存
- H5緩存春叫，localStorage,sessionStorage
- 前端數(shù)據(jù)庫緩存 indexDB
- 最大限度利用瀏覽器緩存肩钠，不經(jīng)常變動(dòng)的資源（例如js庫）合并到一個(gè)文件中
代碼層面優(yōu)化
- 優(yōu)先加載css資源鏈接，link style 標(biāo)簽放到頂部
- css 文件中不使用@import暂殖，@import會(huì)延遲css文件延遲加載導(dǎo)致白屏价匠。如果有webpack配置則不影響
- 把首次繪制所需的 CSS 單獨(dú)拿出來，優(yōu)先于其他 CSS 文件發(fā)送央星；
- script標(biāo)簽放置到頁面底部霞怀，按需加載
- 非關(guān)鍵性 JavaScript 應(yīng)該推遲惫东，以避免阻塞 DOM 和 CSSOM 構(gòu)建莉给；
- 不經(jīng)常變動(dòng)的資源（例如js庫）合并到一個(gè)文件中毙石，利于瀏覽器緩存
- Doctype 文檔聲明使用標(biāo)準(zhǔn)模式，
<!DOCTYPE html> - js加載過程禁用document.write颓遏，阻塞頁面加載
- 公共組件提取
- 公共方法提取
- 代碼審核
- 打包優(yōu)化
- happyPack 工具徐矩，多線程提升打包速度
- 生產(chǎn)環(huán)境取消 source-map 打包，提升打包速度叁幢、源碼安全
- 合理的 exclude 和 include 配置
- 處理緩存滤灯，小需求的變動(dòng)，不影響其他文件打包和內(nèi)容曼玩，提升網(wǎng)站加載速度
- 項(xiàng)目文檔整理（需求文檔鳞骤，組件文檔，公共方法文檔黍判，交接文檔豫尽，技術(shù)文檔）
用戶體驗(yàn)優(yōu)化
- 執(zhí)行推測性優(yōu)化，嘗試預(yù)測用戶的下一次操作
- 加載動(dòng)畫顷帖，優(yōu)化交互
