JavaScript进阶及高性能web进阶

Evan JJ 查看讲师

百林哲咨询（北京）有限公司专家团队成员

现任某大型互联网公司技术总监，产品技术学院优秀讲师，前58前端技术委员会负责人，年的前端开发和团队管理经验，在前端技术架构、前端性能优化、前后端开发模式变革优化、移动web开发技术等方面具有丰富的实战经验

浏览：5261次

详情 DETAILS

简介

javascript进阶主要围绕前端性能优化体系，前端工程化（自动化测试、持续集成）、前端状态管理难题的解决，更包括异常监控体系，前端代码度量等方面，本培训将围绕这六个领域展开，即有理论支撑部分，也会有实践方案，更会介绍一线互联网公司BAT是如何解决这些问题的

目标

1、系统性掌握前端性能优化指标、收集上报、分析诊断、瓶颈优化、效果评估及前端性能体系

2、掌握界面回归测试、功能测试、性能测试、页面特性检测

3、了解如何实现前端持续集成

4、了解基于vue的vuex状态管理与基于react的redux状态管理

5、掌握前端异常监控系统上报、平台处理、数据分析、监控预警流程

6、了解bug缺陷密度度量、异常度量、性能度量、工程效率度量

受众人群

前端工程师、技术开发者

课程时长

2天（12H）

分享提纲

一、前端性能分识与优化实践(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 前端代码度量实验