實踐中的電商前端優化

前端優化已是一個被寫爛的題材了。

雖千萬人吾往矣，這裏我僅分享個人一些實踐經驗。

歡迎一塊兒交流

歡迎關注個人我的公衆號，不按期更新本身的工做心得。

正文以下

前端性能

1. 模塊化

嚴格來講，代碼模塊化並不能帶來性能上的提高，但我仍是將模塊化提出來，由於它真的很重要，重要到幾乎全部的優化都與它息息相關。

常見的模塊化方案有：AMD、CMD、UMD、ES6

如何選擇？

1. 團隊習慣

2. 我的偏好

3. 業務須要

我靠！你怎麼能把業務須要放在最後一個考慮？

由於沒有哪一塊業務會由於使用了不一樣的模塊化方案而產生不一樣的結果。

並且我以爲 軟件開發中的以人爲本 用在這裏恰好合適，其餘地方就只能 呵呵了。畢竟業務高於一切，這是操守。

2. 緩存

緩存必定要加！

緩存必定要加！

緩存必定要加！

由於CDN真的很貴。。。

沒有CDN？那就更得加緩存了！！！

緩存有不少方式，最爲常見的就是下面這兩種了

1. 瀏覽器304緩存

2. localstorage本地存儲

業界，一直有關於304緩存與localstorage性能的爭議，這裏咱們不討論二者的差別，或性能問題。

我一貫以業務導向選擇方案，這裏我選擇的是localstorage，若是你願意，你能夠經過localstorage將緩存玩出一朵花出來。

你能夠這麼幹：

1. 經過localstorage存儲js、css資源；

2. 資源版本控制；

3. 只要你願意，localstorage也能夠控制緩存時間！經過寫一小段js代碼來實現；

4. 在活動期間能夠提早將活動相關資源緩存至localstorage，減輕活動當日的CDN消耗，同時在提高用戶訪問速度的同時，下降服務器端壓力。

PS：localstorage針對開發環境確實有點噁心，不過你能夠在框架底層寫一小段代碼來支持不一樣環境下的緩存控制，例如：針對開發環境域名，禁止緩存，針對某個URL參數禁止緩存等。固然，你也能夠和我同樣寫一個chrome插件來控制緩存，高興就好！

因此，個人建議是能使用localstorage就是儘可能使用localstorage。若是你司沒事也會搞一搞大促什麼的，你就知道CDN有多貴了。

後續應該會將咱們針對localstorage的一套方案開源出來。

3. 懶加載

圖片懶加載

若是你是作Hybrid開發，這真的有必要！

另外，寫一個圖片懶加載插件有多難？，這裏已經有人給出答案了，點擊查看

JS 懶加載

模塊化帶來的其中一個好處就是咱們能夠針對js資源進行懶加載控制，RequireJS、SeaJS？你高興就好。

這裏咱們採用的是RequireJS，要問我爲何，也許是由於咱們使用的是AMD方案吧！要問我爲何使用AMD方案，我只能告訴你，由於我高興！以人爲本不是嘛~

4. 前端模板渲染

相比拼接字符串，jQuery.append ，咱們有了另外一種選擇，前端模板。

前端模板方案有不少。這裏我推薦騰訊的 tmodjs 。他的優點在於能夠將前端模板預編譯成js文件，同時支持模塊加載。

若是你要問我爲何不能拼接字符串，又或者jQuery.append爲何很差，這也許是我下一篇文章的主題了。至少不是今晚的。或者你能夠去研究一下瀏覽器的渲染機制呢？

5. DOM怎麼寫很重要

瀏覽器有個機制叫作重繪，任何改變dom元素位置的操做都會引起瀏覽器重繪操做，這是沒法避免的。重繪是瀏覽器性能優化的一個重點，特別是針對webview的優化。

既然咱們不能避免，那麼咱們可以作什麼呢？

雖然咱們不能避免瀏覽器重繪的發生，可是咱們能夠經過精確的控制dom元素，來達到使瀏覽器的重繪範圍最小化的目的，這裏咱們能夠藉助瀏覽器的開發者工具針對頁面進行調優。

關於調優也能夠寫一篇文章了，若是你感興趣，咱們能夠私下聊一聊。

客戶端性能

1. 代理webview發送ajax請求，聽說這能夠省去三次握手的時間？

2. iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0之前的產物，針對iOS8.0之後的系統建議使用WKWebView，通過實際測試，性能大概可以提高40%，同時穩定性有很大程度的提高，幾乎是質的提高。

3. webview支持加載webp格式圖片。

4. 靜態資源預加載，除了localstorage的緩存機制，咱們也能夠利用客戶端針對前端靜態資源進行緩存，在WIFI環境下，咱們能夠預先將靜態資源下載至本地。

服務端性能

1. 服務端渲染

在一個把先後端分離奉爲葵花寶典的時代，提一句服務端渲染顯然是不合適的。

但是若是考慮到客戶端弱爆了的Webview，也許這是一個不錯的選擇，畢竟服務端的性能要好不少。針對已經先後端分離的項目，我建議能夠嘗試使用Node.js針對頁面進行直出，也是一個不錯的選擇，Node.js的性能這裏就不須要我累述了吧！

By the way, 首屏數據服務端輸出，配上懶加載一塊兒，不要太爽哦。

2. 一個快速響應的接口

一個快速響應的接口真的很重要！！！

你能夠經過優化代碼，優化sql，優化緩存（redis Or memcached?），優化Nginx配置？double 服務器？

Come On 總有點能作的！

總之~不要侷限了本身。We Are Developer , Not 頁面仔！OK？

3. 圖片轉webp

因爲webp格式的圖片並非全部環境都支持，這時候須要配合不一樣的客戶端動態返回相應格式的圖片。

PS：若是你對前端性能優化有本身的想法，歡迎騷擾我。咱們之間也許只差一杯焦糖瑪奇朵。