前端性能

　　1.模塊化

　　嚴(yán)格地說，代碼模塊化不能提高性能，但它仍然提出模塊化，因?yàn)樗浅Ｖ匾瑤缀跛械膬?yōu)化都與它密切相關(guān).

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

網(wǎng)站建設(shè)公司" />

　　如何選擇？

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

　　個(gè)人偏好

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

　　如何把業(yè)務(wù)放在后面？

　　由于使用不同的模塊化為使用不同的模塊化方案而產(chǎn)生不同的結(jié)果.

　　而且軟件開發(fā)中的以人為本，用在這里剛好合適，畢竟業(yè)務(wù)高于一切.

　　2.緩存

　　一定要加緩存！

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

　　沒有CDN？那就更慢存了！

　　緩存的方法有很多，以下兩種是常見的

　　瀏覽器304緩存

　　localstorage本地存儲(chǔ)

　　關(guān)于304緩存和行業(yè)localstorage在這里，我們不討論兩者的區(qū)別或性能問題.

　　選擇以業(yè)務(wù)為導(dǎo)向的方案，選擇沙漠風(fēng)localstorage.

　　可以這樣做：

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

　　資源版控制；

　　只要你愿意，localstorage還可以控制緩存時(shí)間！寫一小段js實(shí)現(xiàn)代碼；

　　活動(dòng)期間可提前緩存活動(dòng)相關(guān)資源localstorage，減少活動(dòng)當(dāng)天CDN在提高用戶訪問速度的同時(shí)，降低服務(wù)器端壓力.

　　PS：localstorage開發(fā)環(huán)境確實(shí)有點(diǎn)不夠腳踏實(shí)地，但你可以在框架底部寫一個(gè)小代碼來支持不同環(huán)境的緩存控制，例如：禁止緩存開發(fā)環(huán)境域名URL參數(shù)禁止緩存等.當(dāng)然，你也可以寫一個(gè)chrome控制緩存的插件，開心就好！

　　因此，建議使用沙漠風(fēng)localstorage盡量使用localstorage.如果你無事可做，你就知道了CDN有多貴了.

　　3.懶加載

　　圖片懶加載

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

　　JS懶加載

　　模塊化的好處之一是我們可以針對(duì)它js懶加載控制資源，RequireJS、SeaJS？

　　我們?cè)谶@里采用的是RequireJS，問我為什么，也許是因?yàn)槲覀兪褂盟麬MD方案吧！

　　4.渲染前端模板

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

　　前端模板方案有很多.我在這里推薦騰訊tmodjs.他的優(yōu)點(diǎn)是可以預(yù)編譯前端模板js支持模塊加載文件.

　　5.DOM怎么寫很重要

　　瀏覽器有一種叫做重繪的機(jī)制，任何變化dom元素位置的操作會(huì)導(dǎo)致瀏覽器重繪操作，這是不可避免的.重繪是瀏覽器性能優(yōu)化的重點(diǎn)，尤其是webview的優(yōu)化.

　　既然我們無法避免，我們能做什么？

　　雖然我們不能避免瀏覽器重繪，但我們可以通過精確的控制dom為了降低瀏覽器的重繪范圍，我們可以使用瀏覽器的開發(fā)者工具來調(diào)整頁面.

　　客戶端性能

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

　　iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0以前的產(chǎn)品，針對(duì)iOS8.建議使用0后的系統(tǒng)WKWebView，實(shí)際測(cè)試后，性能可提高40%左右，穩(wěn)定性大大提高，幾乎是質(zhì)的提高.

　　webview支持加載webp格式圖片.

　　除靜態(tài)資源預(yù)加載外，靜態(tài)資源預(yù)加載localstorage我們還可以利用客戶端緩存前端靜態(tài)資源WIFI在環(huán)境下，我們可以提前將靜態(tài)資源下載到當(dāng)?shù)?

　　服務(wù)端性能

　　1.服務(wù)端渲染

　　在一個(gè)將前后端分離為寶典的時(shí)代，提到服務(wù)端渲染顯然是不合適的.

　　但是，如果考慮到客戶端的弱爆炸，Webview，也許這是個(gè)不錯(cuò)的選擇，畢竟服務(wù)端的性能要好得多.對(duì)于前后分離的項(xiàng)目，我們建議嘗試使用Node.js對(duì)頁面進(jìn)行直出，也是不錯(cuò)的選擇，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總有一點(diǎn)能做的！

　　總之，不要局限于自己.

　　3.圖片轉(zhuǎn)webp

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