web移動端性能調優及16ms優化

時間 2019-11-08

標籤 web 移動性能 16ms 優化欄目 HTML 简体版

原文原文鏈接

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

移動端性能不及桌面瀏覽器性能的10分之1，特別是在android設備參差不齊的狀況下，性能顯得尤其重要。感受作移動端頁面，重回瞭解放前電腦仍是386的年代，呵呵。css

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

在進行毫秒級的優化時，瞭解瀏覽器的工做原理很是重要，這是晉級優秀程序員的關鍵。就像寫win客戶端軟件的，總會去了解一下計算機組成原理、操做系統原理等。而咱們作web頁面的，瞭解瀏覽器工做原理也是同樣的道理前端

瀏覽器的工做原理

瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕html5

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

Chrome 渲染優化 – 層模型android

理解WebKit和Chromium: WebKit渲染基礎git

理解WebKit和Chromium: Chromium的GPU硬件加速程序員

掌握調試方法

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

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

【譯】Android上的遠程調試

使用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

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

若是以上的文章連接打不開，那估計是別人博客down掉了，你能夠嘗試google一下文章標題，也許會找到別人轉載的文章。

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

最後，丟一個我和荔枝同窗一塊兒寫的PPT
若沒法查看可點擊連接查看

相關標籤/搜索