• 整個專案週期大約為兩個禮拜,內容包括:
  • 根據活動時間判斷一鍵領取多個優惠券;
  • 九宮格式抽獎及輪播中獎資訊;
  • 根據時間軸返回每天的秒殺資料;
  • 遍歷不同的產品列表等...

  其實整個專案看起來真的沒有什麼,而且有些功能自己之前也是寫過的,但是真正自己做的時候卻漏洞百出,今天先不說那些小錯誤小漏洞,說一下自己千辛萬苦寫完的頁面遇到的最大的問題:載入速度巨慢!

  專案剛完成的時候內心非常的開心,但當上線之後發現開啟自己的頁面居然最少需要20s

  1.首先最簡單的,頁面的圖片載入速度.因為有的一些圖片UI給我的時候是很高清的圖片,很多都是大小超過2M的了,這樣的圖片載入起來真的很慢,所以就線上壓縮了一下,壓縮過後真的快了一些,推薦一個線上壓縮網站:Timog這個真的很好用,單張圖片的大小最大支援30M,完全夠用啊.

  如果是jpg檔案也可以嘗試把它用PS轉化為漸進式載入,這樣圖片是以由模糊逐漸清晰的載入的,有的時候也蠻好用的.

  當然如果專案是用jQuery開發的,那麼也可以用lazyload

  2.因為專案中有一個功能是返回使用者中獎資訊,雖然之前活動有過這個功能,這次只是在之前的基礎上改動一下,但就是這次發現了問題.之前返回的使用者中獎記錄是所有使用者的,而之前的活動一般的時間都很短,所以使用者的中獎資訊很少,但這次的活動持續的時間很長,每天都有使用者抽中獎品,大量的使用者抽獎記錄導致頁面載入的時候很慢,於是就和產品經理和後端工作人員溝通了一下改動了介面,從之前返回所有的使用者中獎記錄改成只返回最近50條使用者的中獎記錄.這樣又大大的優化了載入速度.

  3.關於產品渲染.因為這次做的專案有大量的產品渲染,很大一部分的渲染是不需要任何邏輯的只是單純的顯示,對於這部分產品資料在呼叫的時候我選擇了非同步載入"async = true"

  4.避免多次頻繁呼叫介面,尤其是會返回大量資料的介面.我的專案中就有一個介面同時給我返回兩個模組的資料,但在書寫程式碼的時候我並不是把渲染兩個模組資料的程式碼寫在同一個介面中,而是將這個介面呼叫了兩次!優化了之後提速了很多啊,然後又發現了一些其他的無用介面,刪除了之後載入速度也得到了優化.