前端性能

　　1.模塊化

　　嚴(yán)格來說，代碼模塊化并不能帶來性能上的提升，但還是將模塊化提出來，因為它真的很重要，重要到幾乎所有的優(yōu)化都與它息息相關(guān).
　　常見的模塊化方案有：AMD、CMD、UMD、ES6

　　如何選擇？

　　團隊習(xí)慣
　　個人偏好
　　業(yè)務(wù)需要

　　怎么把業(yè)務(wù)需要放在后一個考慮？
　　因為沒有哪一塊業(yè)務(wù)會因為使用了不同的模塊化方案而產(chǎn)生不同的結(jié)果.
　　而且軟件開發(fā)中的以人為本，用在這里剛好合適，畢竟業(yè)務(wù)高于一切.

　　2.緩存

　　緩存一定要加！
　　因為CDN真的很貴.
　　沒有CDN？那就更得加緩存了！
　　緩存有很多方式，為常見的就是下面這兩種了

　　瀏覽器304緩存
　　localstorage本地存儲

　　業(yè)界，一直有關(guān)于304緩存與localstorage性能的爭議，這里我們不討論兩者的差異，或性能問題.
　　以業(yè)務(wù)導(dǎo)向選擇方案，云梯選擇的是localstorage.

　　你可以這么干：

　　通過localstorage存儲js、css資源；
　　資源版本控制；
　　只要你愿意，localstorage也可以控制緩存時間！通過寫一小段js代碼來實現(xiàn)；
　　在活動期間可以提前將活動相關(guān)資源緩存至localstorage，減輕活動當(dāng)日的CDN消耗，同時在提升用戶訪問速度的同時，降低服務(wù)器端壓力.
　　PS：localstorage針對開發(fā)環(huán)境確實有點不夠接地氣，不過你可以在框架底層寫一小段代碼來支持不同環(huán)境下的緩存控制，例如：針對開發(fā)環(huán)境域名，禁止緩存，針對某個URL參數(shù)禁止緩存等.當(dāng)然，你也可以寫一個chrome插件來控制緩存，高興就好！
　　所以，云梯的建議是能使用localstorage就是盡量使用localstorage.如果你司沒事也會搞一搞大促什么的，你就知道CDN有多貴了.

　　3.懶加載

　　圖片懶加載
　　如果你是做Hybrid開發(fā)，這真的有必要！

　　JS懶加載
　　模塊化帶來的其中一個好處就是我們可以針對js資源進行懶加載控制，RequireJS、SeaJS？
　　這里我們采用的是RequireJS，要問我為什么，也許是因為我們使用的是AMD方案吧！

　　4.前端模板渲染

　　相比拼接字符串，jQuery.append，我們有了另一種選擇，前端模板.
　　前端模板方案有很多.這里我推薦騰訊的tmodjs.他的優(yōu)勢在于可以將前端模板預(yù)編譯成js文件，同時支持模塊加載.

　　5.DOM怎么寫很重要

　　瀏覽器有個機制叫做重繪，任何改變dom元素位置的操作都會引發(fā)瀏覽器重繪操作，這是無法避免的.重繪是瀏覽器性能優(yōu)化的一個重點，特別是針對webview的優(yōu)化.
　　既然我們不能避免，那么我們能夠做什么呢？
　　雖然我們不能避免瀏覽器重繪的發(fā)生，但是我們可以通過精確的控制dom元素，來達到使瀏覽器的重繪范圍小化的目的，這里我們可以借助瀏覽器的開發(fā)者工具針對頁面進行調(diào)優(yōu).

　　客戶端性能

　　代理webview發(fā)送ajax請求，據(jù)說這可以省去三次握手的時間？
　　iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0以前的產(chǎn)物，針對iOS8.0以后的系統(tǒng)建議使用WKWebView，經(jīng)過實際測試，性能大概能夠提升40%，同時穩(wěn)定性有很大程度的提升，幾乎是質(zhì)的提升.

　　webview支持加載webp格式圖片.

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

　　服務(wù)端性能

　　1.服務(wù)端渲染

　　在一個把前后端分離奉為寶典的時代，提一句服務(wù)端渲染顯然是不合適的.
　　可是如果考慮到客戶端弱爆了的Webview，也許這是一個不錯的選擇，畢竟服務(wù)端的性能要好很多.針對已經(jīng)前后端分離的項目，我們建議可以嘗試使用Node.js針對頁面進行直出，也是一個不錯的選擇，Node.js的性能這里就不需要我累述了吧！
　　Bytheway，屏數(shù)據(jù)服務(wù)端輸出，配上懶加載一起，不要太爽哦.

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

　　一個快速響應(yīng)的接口真的很重要！
　　你可以通過優(yōu)化代碼，優(yōu)化sql，優(yōu)化緩存（redisOrmemcached？），優(yōu)化Nginx配置？double服務(wù)器？
　　ComeOn總有點能做的！
　　總之，不要局限了自己.

　　3.圖片轉(zhuǎn)webp

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

http://ezekroy.com/jianzhanzhishi/7268.html 電商網(wǎng)站建設(shè)前端優(yōu)化實踐