爲什麼網站的加載速度如此慢?體驗如此差?答案在這裏

今天在知乎上瞄到一條有趣的問答,題主曰:

我是個後端RD,看上了一個前端妹子,昨天吃飯的時候她跟我抱怨她們的頁面打開很慢,如何才能快速的分析頁面加載慢的原因,在妹子面前表現一下呢?

此題目被強大的知友修改爲更加接地氣的標題:

當前端妹子跟我抱怨她們的頁面加載很慢的時候,如何在她面前優雅地裝逼?

我想這個問題應該是每個程序猿朋友們值得思考的問題,畢竟程序猿不好找女朋友的現狀擺在那裏。不過知友"姬十三"說出了不幸的真相:

你們程序員找不到女朋友的原因就是在追女孩的時候還想着技術問題!

好了,閒話少說,其實這個問題拋開把妹的因素外,作爲一名前端技術人員,應當關注的核心問題在於:當網頁加載很慢的時候,應如何分析其原因並解決問題?

且看知友“張皓”的精彩回答

看來題主你的目的是裝逼,優雅地裝逼,要讓妹子覺得你很牛逼對不對?要讓妹子聽你分析完之後就投懷送抱對不對?

首先,想裝逼就要顯得隨性、自然,看一眼就知道問題在哪。如果你需要吭吭哧哧的查半天log、分析core文件,那逼格自然就降低了許多。那如何才能隨性自然呢?答案是看網頁瀑布圖。啥是瀑布圖?這都不知道還追前端妹子?用chrome打開網頁,按住option+command+i(windows是F12,但是如果你按的是這個,那麼你怎麼敢說你要裝逼,前端團隊都是清一水的mac啊親,先換個mac再裝逼),打開開發者工具看network。
有了瀑布圖,下面纔是裝逼的重點,要故作輕鬆、輕描淡寫的掃一眼瀑布圖,然後沉思幾秒,語調略帶深沉的跟妹子說:“我知道了”。當然,你要真的知道才行,不給妹子說出個所以然來,最後死的還是你。
造成加載很慢的原因很多,但是你只需要知道一些就可以了,下面我就給你說一些常見的問題以及識別方法,如果這些情況都不是,那就只能祝你好運了哥們。

1、你們後端的問題

看到沒,第一個請求特別長、特別長,明顯比其他請求放到一起不和諧。一般網頁第一個請求是動態請求的概率比較大,如果這個請求特別耗時,那肯定不是前端的責任,不是妹子的問題,倫家的html都沒加載完呢,你怎麼就能說是前端的問題呢。作爲一個後端RD,你應該有這種覺悟,勇敢的說這是你的責任,表現出一個男人的氣魄來,讓妹子覺得你是一個負責的好男人。優化php、優化數據庫、優化一切可以優化的東西,要讓妹子覺得很爽才行。

2、請求數太多

數一下瀑布圖總共有多少行,onload之前如果有幾百行,那麼請求就太多了。問一下妹子,一下子加載那麼多資源真的好麼?跟妹子說,css,js該合併的合併,圖標該精靈的精靈,告訴妹子使用字體圖標也能提升你高大上的形象。還有,有些不重要的東西不用放到onload之前加載,放到後面也一樣嘛。網頁發請求數就跟妹子的前男友數一樣,越少越好。

3、老鼠屎

看到圖中的這個請求沒?再看看其他請求,這個請求比其他請求的時間大出一個數量級。這種情況一般是因爲某一個資源太慢了,它就是一顆老鼠屎,壞掉了整鍋湯,導致網頁整體變慢。資源慢的原因,你可以跟妹子去星巴克,兩個人採取結對編程的方式慢慢把玩這顆老鼠屎,概率比較大的幾個可能是:a)資源在第三方站點上,他們很慢;b)這個資源太大了;c)這個資源使用的域名有問題。

4、網絡問題

仔細看一下一個單獨的http請求,他們會分爲好幾段,分別是域名解析、建立連接、發送請求、等待響應和接收數據幾個階段。理論上域名解析和建立連接應該佔用的時間很小纔對,主要的時間應該用在後面幾個階段上。上圖中,淺灰色和灰色分別代表域名解析和建立連接,可以看出這兩個請求中花費在網絡層上的時間太長了,超過總時間的一半還要多。網絡層時間過長除了可能和底層網絡有關之外,還可能和站點的服務端性能有關(後端RD的事情哦)。當然,如果這種情況發生在向第三方站點發送的請求上(實際上也經常發生),你就可以建議妹子取消或者更換某些站點功能從而避免這樣的請求了。

5、接收數據時間過長

上面說了,http請求的大部分時間應該花在後面幾個階段,比如等待響應和接收數據。但是,如果接收數據的時間太長了,長到數百毫秒甚至以秒計算的時候,那也是有問題的。這種情況一般是因爲下載的內容太重了,例如大圖片、大腳本等。這類問題可以使用GZIP壓縮、圖片壓縮或者JS/CSS的minify等手段來解決。

6、js阻塞請求

圖中兩個連續的請求之間出現了一個很大的空隙,爲啥會出現這個空隙呢?可能是因爲妹子寫的js性能有問題,解析執行js花了很長時間,導致這段時間的資源加載都被阻塞住了。如果發生了這個情況,你就應該耐心安慰妹子,問一下妹子是不是在寫代碼的時候身體不舒服啊、心情不好啊之類的關心一下,切記不能直接說妹子代碼寫的不行,不然肯定沒有然後。

7、如果以上都沒有

可以和妹子一一翻看每個http請求,仔細研究每個請求頭響應頭,看看是不是沒有設置緩存啦,圖片優化的不夠好啦之類的。如果擔心自己分析不好,可以先找個工具分析一下,比如:http://speed.mmtrix.com/ ,把上面這張圖拿給妹子看看,問題一目瞭然。

寫到這裏我忽然想到了一點,妹子抱怨慢的時候你當時沒有裝逼,現在才學如何裝逼,還來得及麼?來得及麼?得及麼?及麼?麼?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章