前端性能優化最佳實踐

前端性能優化最佳實踐 馬上咨詢

    金老師  一線互聯網前端專家 

    58集團前端技術委員會主席,曾帶領團隊完成58集團公司級重點項目,前后端解耦和奧林匹亞性能優化,為公司帶來巨大商業收益;碩士畢業于中國人民大學,2006年校招入職百度,見證了百度前端團隊從5人到1000人的過程;在百度期間,擔任百度技術leader,負責百度文庫團隊研發管理工作;多年的前端開發和團隊管理經驗,在HTML5深度開發實踐、前端性能優化、前后端開發模式變革優化、Webview技術等方面具有豐富的實戰經驗。


    課程大綱

    課程內容
    一、前端性能分識與優化實踐(12h)

    1.1 前端性能優化意義(1h)

        1.1.1 體驗提升

        1.1.2 數據轉化提升

        1.1.3 用戶留存

        1.1.4 業績數據提升

        1.1.5 深度剖析前端性能意義

        1.1.6 前端性能意義實驗

    1.2 前端性能指標(2h)

        1.2.1 影響因素

        1.2.2 度量標準

        1.2.3 基礎指標

         1.2.3.1  首屏時間

        1.2.3.2 白屏時間

        1.2.3.3 可操作時間

        1.2.3.4 load時間

        1.2.3.5 網絡時間

         1.2.3.6 服務性能

        1.2.3.7 幀率

        1.2.4 spa下首屏

        1.2.5 深度剖析性能指標

        1.2.6 性能指標實驗

    1.3 性能收集上報(1h)

         1.3.1手動打點

         1.3.2 無埋點上報

         1.3.3 性能sdk

         1.3.4 圖片測速

         1.3.5 app上報

         13.6 深度剖析性能收集上報

         1.3.7 性能收集上報實驗

    1.4 性能分析診斷(2h)

         1.4.1同比環比數據

         1.4.2 排行數據

         1.4.3 單條時間流

         1.4.4 dns解析時間

            1.4.5 白屏時間

         1.4.6 靜態資源耗時

         1.4.7 可操作時間

         1.4.8 接口耗時

         1.4.9 首屏時間

         1.4.10 dom解析

         1.4.11 圖片加載耗時

         1.4.12 load時間

         1.4.13 本地診斷

         1.4.14 診斷清單

         1.4.15 深度剖析性能分析診斷

         1.4.16 性能分析診斷實驗

    1.5 性能瓶頸優化(1h)

         1.5.1業務層優化

         1.5.2 webview層優化

         1.5.3 渲染層優化

         1.5.4 打包層面優化

         1.5.5 網絡層面優化

         1.5.6 黑科技

    1.6 性能效果評估(1h)

         1.6.1 ABtest

         1.6.2業務數據

         1.6.3 可視化展現

         1.6.4 動畫對比

    1.7 前端性能體系演進(2h)

         1.7.1 百度

         1.7.2 騰訊

         1.7.3 阿里巴巴

         1.7.4 美團點評

         1.7.5 專項測試

         1.7.6 魔方平臺

         1.7.7 RN

         1.7.8 PWA

            1.7.9 小程序

         1.7.10 全棧性能

         1.7.11 性能體系

         1.7.12 技術體系

         1.7.13 人員規劃

    1.8 前端性能分識優化實踐(以奧林匹亞項目為例)(2h)

         1.8.1 任務分解

         1.8.2 奧林匹亞項目調研

         1.8.3 奧林匹亞項目規劃

         1.8.4 奧品匹亞項目立項

         1.8.5 項目收益

         1.8.6 深度剖析前端性能分識優化實踐

         1.8.7 前端性能分識優化實踐實驗

    二、前端自動化測試實踐(4h)

    2.1 自動化測試意義

          2.1.1適合場景

          2.1.2 收益

    2.2 自動化測試方向(1h)

          2.2.1界面回歸測試

          2.2.2 功能測試

          2.2.3 性能測試

          2.2.4 頁面特性檢測

    2.3 界面回歸測試(1h)

          2.3.1 像素對比

          2.3.3 開源工具使用

          2.3.4 多瀏覽器支持

          2.3.5 響應式頁面測試

          2.3.4 dom結構對比

          2.3.5 page-monitor使用

    2.4 功能測試

          2.4.1 用戶操作測試

          2.4.2 兼容性測試

          2.4.3 智能測試case

          2.4.4 Phantomflow工具

    2.5 性能測試

          2.5.1 FE單元測試

          2.5.2 QA專項測試

          2.5.3 線上性能測試

    2.6 頁面特性檢測(2h)

          2.6.1 廣告部署檢測

              2.6.2 自動化測試銜接

          2.63 運營商劫持解決

          2.6.4 配置化

          2.6.5 CI結合

    2.7 自動化測試趟坑實踐

    2.8  深度剖析前端自動化測試

    2.9 前端自動化測試實驗

    三、前端持續集成(2h)

           3.1 gitlab代碼管理

             3.2 web hook

             3.3 jenkins job

             3.4 karma單元測試

             3.5 編譯打包

             3.6 遠程部署

             3.7 npm

             3.8 webpack

             3.9 整體流程

             3.10 前端持續集成趟坑實踐

             3.11 深度剖析前端持續集成

             3.12 前端持續集成實驗

    四、狀態管理(2h)

           4.1 狀態管理應用場景

       4.2 狀態管理意義

       4.3 狀態管理實現原理

             4.3.1SOC原則

             4.3.2 訂閱者模式

    4.5通用事件中心模型

           4.5.1 Immutable.js

           4.5.2 Grancentral

    4.6 基于vue的vuex狀態管理實踐

           4.6.1 轉轉優品驗機平臺

           4.6.2 轉轉圖書系統

       4.7 基于react的redux狀態管理實踐

              4.7.1 Action Creator

              4.7.2 Store

              4.7.3 Reducer

       4.8 狀態管理之趟坑實踐

       4.9 深度剖析狀態管理

       4.10 狀態管理實驗

    五、前端異常監控(4h)

            5.1 前端異常監控意義

       5.2 前端異常監控指標(2h)

              5.2.1 異常信息

              5.2.2 文件位置

              5.2.3 終端類型

              5.2.4 異常時間

              5.2.5 文件源碼

        5.3  前端異常監控上報

        5.4  前端異常監控平臺處理

        5.5  前端異常監控數據分析

        5.6   前端異常監控預警

        5.7   基于badjs的實踐

              5.7.1騰訊

              5.7.2 騰訊系公司

        5.8 基于sentry的實踐

              5.8.1 facebook

              5.8.2 google

        5.9  深度剖析前端異常監控系統

        5.10 前端異常監控系統實驗

    六、前端代碼度量(2h)

    6.1 語言代碼度量

              6.1.1代碼行數

              6.1.2 注釋比例

              6.1.3 函數深度

              6.1.4 函數復雜度

        6.2  bug缺陷密度度量

        6.3 異常度量

        6.4 性能度量

        6.5 工程效率度量

        6.6 前端代碼度量趟坑實踐

        6.7 深度剖析前端代碼度量

        6.8 前端代碼度量實驗


    久久综合久久综合九色_人妻媚药中出中文字幕电影_亚洲伊人成综合人影院