前端性能优化最佳实践

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 前端性能分识优化实践实验

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 前端自动化测试实验

       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 前端持续集成实验

       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 状态管理实验

        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 前端异常监控系统实验

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 前端代码度量实验