當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

如何优化网站加载时间

發(fā)布時(shí)間：2023/11/29 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了如何优化网站加载时间小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、背景

我們要監(jiān)測(cè)網(wǎng)站的加載情況，可以使用?window.performance 來(lái)簡(jiǎn)單的檢測(cè)。

window.performance?是W3C性能小組引入的新的API，目前IE9以上的瀏覽器都支持。一個(gè)performance對(duì)象的完整結(jié)構(gòu)如下圖所示：

memory字段代表JavaScript對(duì)內(nèi)存的占用。

navigation字段統(tǒng)計(jì)的是一些網(wǎng)頁(yè)導(dǎo)航相關(guān)的數(shù)據(jù)：

redirectCount:重定向的數(shù)量（只讀），但是這個(gè)接口有同源策略限制，即僅能檢測(cè)同源的重定向；

type 返回值應(yīng)該是0,1,2 中的一個(gè)。分別對(duì)應(yīng)三個(gè)枚舉值:

0 : TYPE_NAVIGATE (用戶(hù)通過(guò)常規(guī)導(dǎo)航方式訪問(wèn)頁(yè)面，比如點(diǎn)一個(gè)鏈接，或者一般的get方式)
1 : TYPE_RELOAD (用戶(hù)通過(guò)刷新，包括JS調(diào)用刷新接口等方式訪問(wèn)頁(yè)面)
2 : TYPE_BACK_FORWARD (用戶(hù)通過(guò)后退按鈕訪問(wèn)本頁(yè)面)

最重要的是timing字段的統(tǒng)計(jì)數(shù)據(jù)，它包含了網(wǎng)絡(luò)、解析等一系列的時(shí)間數(shù)據(jù)。

timing的整體結(jié)構(gòu)如下圖所示：

二、痛點(diǎn)

我們通過(guò)window.performance來(lái)檢測(cè)加載情況，并不能非常直觀的分析出影響網(wǎng)站加載速度的具體因素，因此，我們需要專(zhuān)業(yè)的工具來(lái)輔助我們完成。

三、在線監(jiān)測(cè)工具

1、GTmetrix? https://gtmetrix.com/ （不需要FQ，需要人工自己分析）

2、PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/（需要FQ，無(wú)需人工分析，會(huì)自動(dòng)分析出優(yōu)化相關(guān)內(nèi)容）

四、GTmetrix 使用簡(jiǎn)介

以淘寶網(wǎng)分析為例

?得分情況

一般互聯(lián)網(wǎng)的網(wǎng)站，得分要達(dá)到C（包含A和B）以上，最好能達(dá)到B。

切換到?PageSpeed?選項(xiàng)卡

1. 可用的用戶(hù)名2. 避免使用著陸頁(yè)面重定向3. 指定緩存驗(yàn)證4. 優(yōu)化圖片5. 利用瀏覽器Cache，加過(guò)期時(shí)間6. 請(qǐng)求最小化7. 重定向最小化8. 指定圖像尺寸9. 壓縮js10. 延遲解析js11. 壓縮html12. 啟用GZIP壓縮13. 盡早指定字符集14. 壓縮css15. 從靜態(tài)資源中刪除查詢(xún)字符串16. 如果壓縮了，指定Accept-Encoding的頭17. 避免不良請(qǐng)求18. 使用Keep-Alive19. 使用網(wǎng)上css20. ....

切換到?YSlow?選項(xiàng)卡

1. 減少HTTP請(qǐng)求次數(shù) 合并圖片、CSS、JS，改進(jìn)首次訪問(wèn)用戶(hù)等待時(shí)間。
2. 使用CDN 就近緩存==>智能路由==>負(fù)載均衡==>WSA全站動(dòng)態(tài)加速
3. 避免空的src和href 當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時(shí)候，瀏覽器渲染的時(shí)候會(huì)把當(dāng)前頁(yè)面的URL作為它們的屬性值，從而把頁(yè)面的內(nèi)容加載進(jìn)來(lái)作為它們的值。
4. 為文件頭指定Expires 使內(nèi)容具有緩存性。避免了接下來(lái)的頁(yè)面訪問(wèn)中不必要的HTTP請(qǐng)求。
5. 使用gzip壓縮內(nèi)容壓縮任何一個(gè)文本類(lèi)型的響應(yīng)，包括XML和JSON，都是值得的。舊文章
6. 把CSS放到頂部
7. 把JS放到底部防止js加載對(duì)之后資源造成阻塞。
8. 避免使用CSS表達(dá)式
9. 將CSS和JS放到外部文件中目的是緩存，但有時(shí)候?yàn)榱藴p少請(qǐng)求，也會(huì)直接寫(xiě)到頁(yè)面里，需根據(jù)PV和IP的比例權(quán)衡。
10. 權(quán)衡DNS查找次數(shù) 減少主機(jī)名可以節(jié)省響應(yīng)時(shí)間。但同時(shí)，需要注意，減少主機(jī)會(huì)減少頁(yè)面中并行下載的數(shù)量。 IE瀏覽器在同一時(shí)刻只能從同一域名下載兩個(gè)文件。當(dāng)在一個(gè)頁(yè)面顯示多張圖片時(shí)，IE 用戶(hù)的圖片下載速度就會(huì)受到影響。所以新浪會(huì)搞N個(gè)二級(jí)域名來(lái)放圖片。
11. 精簡(jiǎn)CSS和JS
12. 避免跳轉(zhuǎn) 同域：注意避免反斜杠 “/” 的跳轉(zhuǎn)；跨域：使用Alias或者mod_rewirte建立CNAME（保存域名與域名之間關(guān)系的DNS記錄）
13. 刪除重復(fù)的JS和CSS 重復(fù)調(diào)用腳本，除了增加額外的HTTP請(qǐng)求外，多次運(yùn)算也會(huì)浪費(fèi)時(shí)間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復(fù)運(yùn)算JavaScript的問(wèn)題。
14. 配置ETags 它用來(lái)判斷瀏覽器緩存里的元素是否和原來(lái)服務(wù)器上的一致。比last-modified date更具有彈性，
例如某個(gè)文件在1秒內(nèi)修改了10次，Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))，MTime(修改時(shí)間)和Size來(lái)精準(zhǔn)的進(jìn)行判斷，
避開(kāi)UNIX記錄MTime只能精確到秒的問(wèn)題。服務(wù)器集群使用，可取后兩個(gè)參數(shù)。使用ETags減少Web應(yīng)用帶寬和負(fù)載
15. 可緩存的AJAX “異步”并不意味著“即時(shí)”：Ajax并不能保證用戶(hù)不會(huì)在等待異步的JavaScript和XML響應(yīng)上花費(fèi)時(shí)間。
16. 使用GET來(lái)完成AJAX請(qǐng)求當(dāng)使用XMLHttpRequest時(shí)，瀏覽器中的POST方法是一個(gè)“兩步走”的過(guò)程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET獲取數(shù)據(jù)時(shí)更加有意義。
17. 減少DOM元素?cái)?shù)量是否存在一個(gè)是更貼切的標(biāo)簽可以使用？人生不僅僅是DIV+CSS
18. 避免404 有些站點(diǎn)把404錯(cuò)誤響應(yīng)頁(yè)面改為“你是不是要找***”，這雖然改進(jìn)了用戶(hù)體驗(yàn)但是同樣也會(huì)浪費(fèi)服務(wù)器資源（如數(shù)據(jù)庫(kù)等）。
最糟糕的情況是指向外部 JavaScript的鏈接出現(xiàn)問(wèn)題并返回404代碼。首先，這種加載會(huì)破壞并行加載；
其次瀏覽器會(huì)把試圖在返回的404響應(yīng)內(nèi)容中找到可能有用的部分當(dāng)作JavaScript代碼來(lái)執(zhí)行。
19. 減少Cookie的大小
20. 使用無(wú)cookie的域比如圖片 CSS 等，Yahoo! 的靜態(tài)文件都在主域名以外，客戶(hù)端請(qǐng)求靜態(tài)文件的時(shí)候，減少了 Cookie 的反復(fù)傳輸對(duì)主域名的影響。
21. 不要使用濾鏡 png24的在IE6半透明那種東西，別亂使，淡定的切成PNG8+jpg
22. 不要在HTML中縮放圖片
23. 縮小favicon.ico并緩存

切換到?Waterfall?選項(xiàng)卡

首先，看下頁(yè)面加載時(shí)間軸

1.URL重定向時(shí)間（Redirect duration）

包括： Redirect from a non-www to www (eg. example.com to www.example.com) Redirect to a secure URL (eg. http:// to https://) Redirect to set cookies Redirect to a mobile version of the site
說(shuō)明：一個(gè)網(wǎng)站可能會(huì)執(zhí)行多個(gè)重定向鏈，這個(gè)時(shí)間為總時(shí)間；如果沒(méi)有重定向，則為0。
優(yōu)化：即通過(guò)減少重定向

2.連接時(shí)間（Connection duration）

包括：即阻塞時(shí)間+DNS時(shí)間+連接時(shí)間+發(fā)送請(qǐng)求時(shí)間說(shuō)明：即第一個(gè)200OK的發(fā)送時(shí)間優(yōu)化：一般時(shí)間很短，無(wú)優(yōu)化！

3.后端持續(xù)時(shí)間（Backend duration）

包括：后端處理數(shù)據(jù)的時(shí)間說(shuō)明：后端響應(yīng)時(shí)間優(yōu)化：后端代碼優(yōu)化（重中之重）
推薦：Why is my page slow?

4.接收到第一個(gè)字節(jié)的時(shí)間（Time to First Byte (TTFB)）

包括：顧名思義，前三個(gè)時(shí)間的加和說(shuō)明：即從開(kāi)始測(cè)試到頁(yè)面接收到響應(yīng)的時(shí)間優(yōu)化：優(yōu)化應(yīng)用程序代碼，實(shí)施緩存機(jī)制，微調(diào)Web服務(wù)器配置或升級(jí)服務(wù)器硬件。

5.DOM交互時(shí)間點(diǎn)（DOM interactive time）（不重要）

說(shuō)明：與下面的DOM內(nèi)容加載時(shí)間點(diǎn)非常接近，沒(méi)有標(biāo)記

6.DOM內(nèi)容加載時(shí)間點(diǎn)（DOM content loaded time）

說(shuō)明：如果沒(méi)有阻止JS執(zhí)行樣式并且沒(méi)有解析器阻止JS，它將于上面的DOM interactive time 相同許多JavaScript框架使用這個(gè)時(shí)間點(diǎn)作為開(kāi)始執(zhí)行他們的代碼的起點(diǎn)。優(yōu)化：由于這個(gè)時(shí)間經(jīng)常被js用作起點(diǎn)，并且這個(gè)時(shí)間的延遲代表著延遲渲染，故確保樣式、js的加載順序和js延遲是非常重要的

推薦：?style and script order is optimized? and that parsing of JavaScript is deferred.

7.第一次渲染時(shí)間點(diǎn)（First paint time）

說(shuō)明：在這一時(shí)間點(diǎn)前，瀏覽器將只顯示一個(gè)空白頁(yè)面

8.第一個(gè)內(nèi)容被渲染完時(shí)間點(diǎn)（First contentful paint time）

說(shuō)明：當(dāng)任何內(nèi)容被渲染時(shí)，可以是文本，圖像或畫(huà)布渲染。目的是為了更好的體現(xiàn)用戶(hù)的體驗(yàn)，因?yàn)樗鼤?huì)在實(shí)際的內(nèi)容被加載到頁(yè)面上時(shí)進(jìn)行標(biāo)記，

而不僅僅是任何改變 - 但是通常可能與First Paint相同。所以這個(gè)指標(biāo)是讓你了解你的用戶(hù)什么時(shí)候收到消費(fèi)信息（文本，視覺(jué)等）

對(duì)于性能評(píng)估來(lái)說(shuō)，比背景改變或者應(yīng)用風(fēng)格更有用。如果瀏覽器沒(méi)有執(zhí)行渲染（即HTML結(jié)果為空白頁(yè)），則渲染時(shí)間可能會(huì)丟失。

9.加載完成時(shí)間點(diǎn)（Onload time）

說(shuō)明：當(dāng)頁(yè)面處理完成并且頁(yè)面上的所有資源（圖像，CSS等）已經(jīng)完成加載時(shí)。

此時(shí)，JavaScript window.onload事件觸發(fā)，括號(hào)中的時(shí)間是執(zhí)行由Onload事件觸發(fā)的JavaScript的時(shí)間

五、?PageSpeed?Insights?使用簡(jiǎn)介