web移動端效能調優及16ms最佳化

標籤：

本文只是一個索引，收集了網路上大部分關於調試及最佳化方面的文章，從中挑選了一些比較好的文章分享給大家。

移動端效能不及案頭瀏覽器效能的10分之1，特別是在android裝置良莠不齊的情況下，效能顯得尤為重要。感覺做移動端頁面，重回瞭解放前電腦還是386的年代，呵呵。

國內，16ms最佳化，60fps指標等相關的文章非常少，大部分還是翻譯國外的一些優秀文章，非常感謝這些翻譯者對web前端的貢獻，讓我等英文盲能及時瞭解前沿技術哈。

在進行毫秒級的最佳化時，瞭解瀏覽器的工作原理非常重要，這是晉級優秀程式員的關鍵。就像寫win用戶端軟體的，總會去瞭解一下電腦群組成原理、作業系統原理等。而我們做web頁面的，瞭解瀏覽器工作原理也是一樣的道理

瀏覽器的工作原理

瀏覽器的工作原理：新式網路瀏覽器幕後揭秘

頁面渲染的GPU加速技術 – 基礎：WebKit軟體渲染模式

Chrome 渲染最佳化 – 層模型

理解WebKit和Chromium: WebKit渲染基礎

理解WebKit和Chromium: Chromium的GPU硬體加速

掌握調試方法

掌握調試方法比記住別人總結的結論更重要，所謂授人以魚如授人以漁。根據實際業務發現其頁面的瓶頸，才能制定對應的最佳化方案。

調試方法主要是使用chrome的開發人員工具進行調試，學會如何使用timeline並結合Rendering選項裡的內容發現效能瓶頸

【譯】Android上的遠端偵錯

【推薦】使用Chrome DevTools的Timeline和Profiles提高Web應用程式的效能

使用Chrome工具來分析頁面的繪製狀態

Chrome DevTools

Profiling Mobile HTML5 Apps With Chrome DevTools

瀏覽器內建開發工具的秘密
裡面有寫到本地電腦如何串連手機，通過chrome查看網頁。（安裝ADB外掛程式）

Navigation Timing API

Explore and Master Chrome DevTools
幾個簡單的視頻介紹 瞭解chrome devtools的相關知識

瀏覽器開發工具的秘密

移動端效能最佳化

web效能最佳化，其實不分PC端、移動端，最佳化思路及手法都是相通的，只是目前PC端，效能問題並不明顯，很多時候被忽視了。
這裡主要強調的是渲染最佳化及滾動最佳化，是微觀層面上的毫秒級最佳化。

【推薦】16毫秒的最佳化
16毫秒的最佳化Web前端效能最佳化的微觀分析

最佳化移動體驗的HTML5技巧

開發基於web技術的高效能動畫

複雜應用的 CSS 效能分析和最佳化建議

requestAnimationFrame for Smart Animating

前端效能最佳化：高頻執行事件/方法的防抖
在移動端可使用requestanimationframe做最佳化

高效能移動端開發

rendering-without-lumps:

Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study

Web滾動效能最佳化實戰

用HTML5實現iPad應用無限平滑滾動

滾動事件防抖和Reflow-重繪迴圈

改善HTML5網頁效能-譯

減少javascript記憶體回收

Images Slowing Down Your Site? Try This One Weird Trick!

如果以上的文章連結打不開，那估計是別人部落格down掉了，你可以嘗試google一下文章標題，也許會找到別人轉載的文章。

我接觸移動端其實並不久，很多最佳化知識還僅僅停留在在理論層面，並未真正實施體驗過。移動端的最佳化路上，還有很長的路要走。

最後，丟一個我和荔枝同學一起寫的PPT
若無法查看可點選連結查看

web移動端效能調優及16ms最佳化