前端優(yōu)化已經(jīng)是一個(gè)被寫(xiě)爛的題材了。

雖千萬(wàn)人吾往矣，這里我僅分享我的一些實(shí)踐經(jīng)驗(yàn)。

歡迎一起交流

歡迎關(guān)注我的個(gè)人公眾號(hào)，不定期更新自己的工作心得。

正文如下

前端性能

1. 模塊化

嚴(yán)格來(lái)說(shuō)，代碼模塊化并不能帶來(lái)性能上的提升，但我還是將模塊化提出來(lái)，因?yàn)樗娴暮苤匾?#xff0c;重要到幾乎所有的優(yōu)化都與它息息相關(guān)。

常見(jiàn)的模塊化方案有：AMD、CMD、UMD、ES6

如何選擇？

團(tuán)隊(duì)習(xí)慣

個(gè)人偏好

業(yè)務(wù)需要

我靠！你怎么能把業(yè)務(wù)需要放在最后一個(gè)考慮？

因?yàn)闆](méi)有哪一塊業(yè)務(wù)會(huì)因?yàn)槭褂昧瞬煌哪K化方案而產(chǎn)生不同的結(jié)果。

而且我覺(jué)得 軟件開(kāi)發(fā)中的以人為本 用在這里剛好合適，其他地方就只能 呵呵了。畢竟業(yè)務(wù)高于一切，這是操守。

2. 緩存

緩存一定要加！

緩存一定要加！

緩存一定要加！

因?yàn)镃DN真的很貴。。。

沒(méi)有CDN？那就更得加緩存了！！！

緩存有很多方式，最為常見(jiàn)的就是下面這兩種了

瀏覽器304緩存

localstorage本地存儲(chǔ)

業(yè)界，一直有關(guān)于304緩存與localstorage性能的爭(zhēng)議，這里我們不討論兩者的差異，或性能問(wèn)題。

我一向以業(yè)務(wù)導(dǎo)向選擇方案，這里我選擇的是localstorage，如果你愿意，你可以通過(guò)localstorage將緩存玩出一朵花出來(lái)。

你可以這么干：

通過(guò)localstorage存儲(chǔ)js、css資源；

資源版本控制；

只要你愿意，localstorage也可以控制緩存時(shí)間！通過(guò)寫(xiě)一小段js代碼來(lái)實(shí)現(xiàn)；

在活動(dòng)期間可以提前將活動(dòng)相關(guān)資源緩存至localstorage，減輕活動(dòng)當(dāng)日的CDN消耗，同時(shí)在提升用戶訪問(wèn)速度的同時(shí)，降低服務(wù)器端壓力。

PS：localstorage針對(duì)開(kāi)發(fā)環(huán)境確實(shí)有點(diǎn)惡心，不過(guò)你可以在框架底層寫(xiě)一小段代碼來(lái)支持不同環(huán)境下的緩存控制，例如：針對(duì)開(kāi)發(fā)環(huán)境域名，禁止緩存，針對(duì)某個(gè)URL參數(shù)禁止緩存等。當(dāng)然，你也可以和我一樣寫(xiě)一個(gè)chrome插件來(lái)控制緩存，高興就好！

所以，我的建議是能使用localstorage就是盡量使用localstorage。如果你司沒(méi)事也會(huì)搞一搞大促什么的，你就知道CDN有多貴了。

后續(xù)應(yīng)該會(huì)將我們針對(duì)localstorage的一套方案開(kāi)源出來(lái)。

3. 懶加載

圖片懶加載

如果你是做Hybrid開(kāi)發(fā)，這真的有必要！

另外，寫(xiě)一個(gè)圖片懶加載插件有多難？，這里已經(jīng)有人給出答案了，點(diǎn)擊查看

JS 懶加載

模塊化帶來(lái)的其中一個(gè)好處就是我們可以針對(duì)js資源進(jìn)行懶加載控制，RequireJS、SeaJS？你高興就好。

這里我們采用的是RequireJS，要問(wèn)我為什么，也許是因?yàn)槲覀兪褂玫氖茿MD方案吧！要問(wèn)我為什么使用AMD方案，我只能告訴你，因?yàn)槲腋吲d！以人為本不是嘛~

4. 前端模板渲染

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

前端模板方案有很多。這里我推薦騰訊的 tmodjs 。他的優(yōu)勢(shì)在于可以將前端模板預(yù)編譯成js文件，同時(shí)支持模塊加載。

如果你要問(wèn)我為什么不能拼接字符串，又或者jQuery.append為什么不好，這也許是我下一篇文章的主題了。至少不是今晚的。或者你可以去研究一下瀏覽器的渲染機(jī)制呢？

5. DOM怎么寫(xiě)很重要

瀏覽器有個(gè)機(jī)制叫做重繪，任何改變dom元素位置的操作都會(huì)引發(fā)瀏覽器重繪操作，這是無(wú)法避免的。重繪是瀏覽器性能優(yōu)化的一個(gè)重點(diǎn)，特別是針對(duì)webview的優(yōu)化。

既然我們不能避免，那么我們能夠做什么呢？

雖然我們不能避免瀏覽器重繪的發(fā)生，但是我們可以通過(guò)精確的控制dom元素，來(lái)達(dá)到使瀏覽器的重繪范圍最小化的目的，這里我們可以借助瀏覽器的開(kāi)發(fā)者工具針對(duì)頁(yè)面進(jìn)行調(diào)優(yōu)。

關(guān)于調(diào)優(yōu)也可以寫(xiě)一篇文章了，如果你感興趣，我們可以私下聊一聊。

客戶端性能

代理webview發(fā)送ajax請(qǐng)求，據(jù)說(shuō)這可以省去三次握手的時(shí)間？

iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0以前的產(chǎn)物，針對(duì)iOS8.0以后的系統(tǒng)建議使用WKWebView，經(jīng)過(guò)實(shí)際測(cè)試，性能大概能夠提升40%，同時(shí)穩(wěn)定性有很大程度的提升，幾乎是質(zhì)的提升。

webview支持加載webp格式圖片。

靜態(tài)資源預(yù)加載，除了localstorage的緩存機(jī)制，我們也可以利用客戶端針對(duì)前端靜態(tài)資源進(jìn)行緩存，在WIFI環(huán)境下，我們可以預(yù)先將靜態(tài)資源下載至本地。

服務(wù)端性能

1. 服務(wù)端渲染

在一個(gè)把前后端分離奉為葵花寶典的時(shí)代，提一句服務(wù)端渲染顯然是不合適的。

可是如果考慮到客戶端弱爆了的Webview，也許這是一個(gè)不錯(cuò)的選擇，畢竟服務(wù)端的性能要好很多。針對(duì)已經(jīng)前后端分離的項(xiàng)目，我建議可以嘗試使用Node.js針對(duì)頁(yè)面進(jìn)行直出，也是一個(gè)不錯(cuò)的選擇，Node.js的性能這里就不需要我累述了吧！

By the way, 首屏數(shù)據(jù)服務(wù)端輸出，配上懶加載一起，不要太爽哦。

2. 一個(gè)快速響應(yīng)的接口

一個(gè)快速響應(yīng)的接口真的很重要！！！

你可以通過(guò)優(yōu)化代碼，優(yōu)化sql，優(yōu)化緩存（redis Or memcached?），優(yōu)化Nginx配置？double 服務(wù)器？

Come On 總有點(diǎn)能做的！

總之~不要局限了自己。We Are Developer , Not 頁(yè)面仔！OK？

3. 圖片轉(zhuǎn)webp

由于webp格式的圖片并不是所有環(huán)境都支持，這時(shí)候需要配合不同的客戶端動(dòng)態(tài)返回相應(yīng)格式的圖片。

PS：如果你對(duì)前端性能優(yōu)化有自己的想法，歡迎騷擾我。我們之間也許只差一杯焦糖瑪奇朵。

總結(jié)

以上是生活随笔為你收集整理的实践中的电商前端优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。