一些新的web性能優化技術

一、IconFont：圖標字體，這是近年來新流行的一種以字體代替圖片的技術。它能夠適應任何分辨率而不會出現圖片模糊問題，與圖片相比它具備更小的容量，更高的靈活性（像字體同樣能夠設置圖標大小、顏色、透明度、hover狀態、反轉等），IE8以上的瀏覽器都支持該技術。在使用IconFont以前，你首先要肯定你選則的字體庫是不是收費。

 

二、PC 時代的性能優化工程化產品 -- StyleCombine

    StyleCombine 咱們稱其爲服務端的模塊加載器，這是一個爲前端性能而生的極致化產品。以工程化的方式自動實現了雅虎 34 條守則中的 10 條，可輕鬆部署到 Nginx/Apache 服務器上，且無視你的應用類型（ java、php、nodejs 通吃 ）。

    它的極致在於甚至能夠在服務端解析 AMD/CMD 模塊的依賴關係，將子模塊的 url 自動進行請求合併。

  它的極致在於已發展爲 1688 後臺服務器的默認配置模塊，經歷過千億次訪問的反覆考驗，試問有幾個前端產品能夠如此深入地影響到後端架構？

    這是值得咱們驕傲的前端工程化產品，也值得咱們對其不斷地優化和完善！

styleCombine 系統原理圖：

 

 

三、無線時代的性能優化工程化產品 -- H5增量包機制 & Style Diff Center

    性能體驗是無線產品的命根子，可通過 PC 端性能優化工程化的錘鍊以後，咱們已不知足於單個頁面性能上的修修補補，而目標在於性能優化成果的框架下沉和工程複用。因而有了 H5 增量包機制，同時也有了 Style Diff Center，而工程化的思路也最終徹底下沉到 1688 主客 Wing 框架中。

    可是無線 H5 應用性能優化的工程化之路，咱們只是剛剛開始，還遠未到極致。 當你看過騰訊同窗的這套字節級別的增量更新機制時，相信你在感嘆極致的同時，也會意識到咱們能作的事情還有許多...

附上 H5 增量更新機制工做原理圖：

 

 

四、

• 模塊的異步加載，關鍵模塊優先加載

• 圖片的懶加載，用戶滑動的時候在加載，圖片尺寸的控制

 

五、爲了讓頁面可以流暢地渲染，技術上下點功夫那是必須的！站在用戶體驗的角度去思考，其實不少問題都會迎刃而解：

• 首屏必定要快
• 滾屏必定要流暢
• 能不加載的先別加載
• 能不執行的先別執行
• 漸進展示、圓滑展示

 

參考文章：

一、前端性能優化工程化進階

二、web前端性能優化進階路

三、淘寶首頁性能優化實踐

四、一塊兒來看看淘寶首頁的個性化