資訊專欄INFORMATION COLUMN
摘要：前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點，特別是針對的優化。如果你對前端性能優化有自己的想法，歡迎騷擾我。
前端優化已經是一個被寫爛的題材了。
雖千萬人吾往矣，這里我僅分享我的一些實踐經驗。
歡迎一起交流歡迎關注我的個人公眾號，不定期更新自己的工作心得。
正文如下
前端性能 1. 模塊化嚴格來說，代碼模塊化并不能帶來性能上的提升，但我還是將模塊化提出來，因為它真的很重要，重要到幾乎所有的優化都與它息息相關。
常見的模塊化方案有：AMD、CMD、UMD、ES6
如何選擇？
團隊習慣
個人偏好
業務需要
我靠！你怎么能把業務需要放在最后一個考慮？
因為沒有哪一塊業務會因為使用了不同的模塊化方案而產生不同的結果。
而且我覺得 軟件開發中的以人為本 用在這里剛好合適，其他地方就只能 呵呵了。畢竟業務高于一切，這是操守。
2. 緩存緩存一定要加！
緩存一定要加！
緩存一定要加！
因為CDN真的很貴。。。
沒有CDN？那就更得加緩存了！！！
緩存有很多方式，最為常見的就是下面這兩種了
瀏覽器304緩存
localstorage本地存儲
業界，一直有關于304緩存與localstorage性能的爭議，這里我們不討論兩者的差異，或性能問題。
我一向以業務導向選擇方案，這里我選擇的是localstorage，如果你愿意，你可以通過localstorage將緩存玩出一朵花出來。
你可以這么干：
通過localstorage存儲js、css資源；
資源版本控制；
只要你愿意，localstorage也可以控制緩存時間！通過寫一小段js代碼來實現；
在活動期間可以提前將活動相關資源緩存至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元素，來達到使瀏覽器的重繪范圍最小化的目的，這里我們可以借助瀏覽器的開發者工具針對頁面進行調優。
關于調優也可以寫一篇文章了，如果你感興趣，我們可以私下聊一聊。
客戶端性能代理webview發送ajax請求，據說這可以省去三次握手的時間？
iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0以前的產物，針對iOS8.0以后的系統建議使用WKWebView，經過實際測試，性能大概能夠提升40%，同時穩定性有很大程度的提升，幾乎是質的提升。
webview支持加載webp格式圖片。
靜態資源預加載，除了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：如果你對前端性能優化有自己的想法，歡迎騷擾我。我們之間也許只差一杯焦糖瑪奇朵。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50181.html
摘要：前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點，特別是針對的優化。如果你對前端性能優化有自己的想法，歡迎騷擾我。 前端優化已經是一個被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實踐經驗。 歡迎一起交流 歡迎關注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
摘要：前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點，特別是針對的優化。如果你對前端性能優化有自己的想法，歡迎騷擾我。 前端優化已經是一個被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實踐經驗。 歡迎一起交流 歡迎關注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
摘要：是一家典型的跨境電商企業，以澳洲和英國作為主要目標市場，產品大多數由國內供應商提供。跨境電商的典型架構的核心業務系統及網店系統均搭建在的平臺之上，用進行前端內容分發，而后端的數據維護平臺因為供應商在國內，所以也在國內。 Crazysales是一家典型的跨境電商企業，以澳洲和英國作為主要目標市場，產品大多數由國內供應商提供。Crazysales不但是Amazon、eBay等大型電商平臺上...
摘要：是一家典型的跨境電商企業，以澳洲和英國作為主要目標市場，產品大多數由國內供應商提供。跨境電商的典型架構的核心業務系統及網店系統均搭建在的平臺之上，用進行前端內容分發，而后端的數據維護平臺因為供應商在國內，所以也在國內。 Crazysales是一家典型的跨境電商企業，以澳洲和英國作為主要目標市場，產品大多數由國內供應商提供。Crazysales不但是Amazon、eBay等大型電商平臺上...
閱讀 2993·2021-10-12 10:17
閱讀 1596·2021-09-01 11:38
閱讀 1087·2019-08-30 15:44
閱讀 3485·2019-08-26 18:36
閱讀 515·2019-08-26 13:25
閱讀 1890·2019-08-26 10:29
閱讀 2841·2019-08-23 15:58
閱讀 765·2019-08-23 12:59
