雙十一特輯 · 買買買的背後,電商如何做好前端優化?(一)

膜法小編發表於2016-11-10

雙十一除了幫媳婦清空購物車之外,(前提是你得有)作為開發者,雙十一狂歡的背後是技術層面的較量。小編整理了天貓前端 2015年雙十一總結,幫助你更好了解雙十一的背後,同樣關注前端,更要關注在人肉 DDOS 的背後,有強大的架構支撐!明天繼續帶來電商的架構合集!
記得關注標籤 雙十一 更快了解雙十一熱門技術文章!


雙11前端分享系列(一):活動頁面的效能優化
無線優先從去年開始推行,今年更是全面無線化,雙11無線業務成交拿到了不錯的結果,效能也邁出了一大步,對比去年雙十一頁面整體load時間提升了2s秒左右,秒開率達到了70%


雙11前端分享系列(二):天貓雙11頁面服務容災方案大揭祕
會場活動頁,承載了促銷商品導流功能,是消費者的購物入口,在雙11活動中的地位可謂重中之重。保障活動頁的快速穩定可用,是非常非常重要的。這次天貓雙11會場頁面渲染由wormhole來承擔(wormhole本身會在後續的文章中詳細介紹),下面介紹一下wormhole的容災方案。


雙11前端分享系列(三):淺談 React Native與雙11
希望能透過 react-native 的動態性,將 react native 的優勢帶入客戶端,如手淘、手貓,讓使用客戶端瀏覽體驗更佳,並且保持動態性,快速協助響應業務。


雙11前端分享系列(四):大規模 Node.js 應用
在剛剛過去的 15 年天貓雙十一中,Node.js(後文簡稱 node) 大放異彩,不僅幫助前端團隊快速、高效的解決雙十一各個業務上的頁面渲染問題,同時在效能和穩定性上也表現非常出色,大大降低了雙十一硬體成本的同時,在整個雙十一期間未出現任何一起由 node 引發的線上故障。


雙11前端分享系列(五):解密2015狂歡城
Canvas Cache就是使用一個額外的Canvas來儲存已經繪製過的內容,下一次使用的時候直接從這個Canvas上讀取,這樣就可以大大減少Canvas的繪製次數,例如原先首屏繪製次數約為75左右,使用cache後的次數約為28,減少了62.67%,在三四環會更明顯,因為沒有動畫,所有內容都可以cache。


雙11前端分享系列(六):大規模 Node.js 應用(續)
第四篇文章講述了我們是怎樣應用 Node.js 解決模板渲染的實際問題的,而這一篇我們來看看天貓是如何一步步將 node 推廣到各個業務線上的。


雙11前端分享系列(七):如何精確識別終端
首先,要先說聲抱歉,因為,其實目前我們還沒有做到精確地做到識別99%的終端設別,其中原因,一部分是因為終端型別和UA實在難以覆蓋,另外一部分原因也是因為使用了一些錯誤的識別策略。


雙11前端分享系列(八):雙11密令紅包的前端技術方案
這個玩法幾乎所有的頁面都需要適配Phone、Pad和PC。使用響應式開發,一套頁面適配所有端曾經是我們的夢想,但是也得迴歸現實。不管是從設計方面,還是技術實現方面,密令紅包的PC版本都與Phone版本存在著較大的差異,針對PC和Phone做兩套頁面的實現是無法避免的。


雙11前端分享系列(九):vue+webpack在“雙十一”導購產品的技術實踐
雙十一中,無線前端的產品可以說非常的豐富。在雙十一中,互動始終是重頭的一部分,但是與以往不一樣的地方是,導購產品在本次雙十一中有著不俗的表現。而今年的雙11導購業務佔據了5大模組裡的後三個,除了必搶,其它業務均是由手淘的同學來完成的,筆者作為導購產品的一員,選擇導購產品來給大家解讀其中的技術實踐。


雙11前端分享系列(十): 如何為使用者省電
我們要做的還有很多,怎樣在小細節上讓使用者的手機在電量上更堅挺,提升使用者瀏覽網頁的快感,讓性福與高潮更持久一點,就是今天的主題了。


雙11前端分享系列(十一): H5效能最佳實踐
手淘中大量的業務採用H5的方式開發,H5體驗好壞全面影響著手淘的使用體驗。今年手機淘寶在技術上重點解決“頓”,“卡”,“慢”的問題,並提出了“521法則” 。


好東西要分享喔,記得朋友圈分享!

相關文章