打個總結:Web性能優化

前段時間優化一個公司歷史老項目的Web性能,卻引出了一系列的問題,讓我反思良多。
我通過Chrome的Lighthouse工具可以看出一些性能參數和問題反饋,我逐一對其進行優化。
根據資源請求的不同,大致可以分為前端資源性能和後端程序性能兩個方面。
先分析一下前端資源吧:

  1. Defer offscreen images。

Chrome給出的建議是:

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more.

意思是可以考慮延遲加載一些圖片或者隱藏一些圖片在所有關鍵資源完成加載后再考慮加載,通過延遲加載來降低交互時間。
lazy-load的實現方法很多,開源框架推薦:lazysizes。
當然也可以使用npm方式安裝:

npm install lazysizes
使用方式很簡單,先引入lazysize到需要的頁面:

<script src="lazysizes.min.js" async=""></script>

然後給需要被lazyload的img標籤上加新的屬性,如下:

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

特別要注意,有時候太多background方式加載的圖片也會影響性能,lazysizes也可以處理這樣的圖片。方法如下,使用data-bg屬性即可:

<div class="lazyload" data-bg="/path/to/image.jpg"></div>
  1. Reduce JavaScript execution time

解決這個問題方法很多,第一個想到的就是壓縮資源。
比如壓縮js和css文件,可以考慮使用webpack工具或者gulp來壓縮大資源文件,合併一些文件資源請求。
還可以通過預加載來提高響應速度,可以在最重要的js資源文件的引入上加入預加載,代碼如下:

<link rel="preload" as="style" href="css/style.css">

通過增加preload
最後還可以異步加載資源,異步不會阻塞主進程,代碼調整也很小:

<script src="xxx" async></script>

除此之外JavaScript的執行時間過長還有可能是有大量邏輯運算,有很多頁面把一些邏輯判斷和計算都交給前端去計算,這樣也不利於渲染,建議還是把複雜邏輯和計算盡可能交給後端去處理,讓前端渲染更加“輕量”。
3. Backend response
數據接口返回有時候也很拖累響應時間,因為一些前端結構需要根據返回的數據進行組裝新的頁面結構。
這裏可以考慮找到性能真正的瓶頸,到底是數據庫查詢導致的慢,還是業務邏輯不清晰導致的冗餘,或者其他原因。
我遇到的是因為老項目的數據庫操作類不是單例,會每次產生一個數據庫連接句柄,且該頁面複雜又多的sql查詢。
我勇敢地修改着10多年歷史的代碼,編寫了單例模式的操作類,然後增加了必要的緩存機制。
然而後面我遇到了問題,首先單例類在一些特殊情形下不滿足之前的代碼需求,導致奇特的數據庫報錯,而async屬性導致一些js文件無法同步加載到位,而有一些依賴這些資源的php文件執行報錯。
最終在同事的幫助下,恢復了服務,我也再一次體會到了任何一種性能提升都要謹慎,特別是對一個古老的項目。
前人不敢動的代碼,可能是深淵。

PS:我的公眾號 成都有娃兒會同步發布該文章,也可以關注哦!

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司"嚨底家"!

新北清潔公司,居家、辦公、裝潢細清專業服務

※推薦評價好的iphone維修中心