百林哲课程

一线技术专家团队——提供关键岗位人才培养体系设计与开发等一系列研发管理培训咨询课程。用产品化、场景化、国际化的视角,分享卓越研发管理实践。具有以下鲜明特点:

1、课程研发专业迅速
2、国内顶尖一线技术专家
3、极致用户服务体验

全部课程

最新公开课

微服务架构设计与实践(二)

2019.01.12 - 2019.01.13 深圳.

课程日历

百林哲专家

携手全球知名一线技术专家团队分享软件研发技术管理实践,国内一线、一手研发管理实践,行业智库。

成为专家
用户登录
您当前的位置:首页>全部课程>JavaScript进阶及高性能web进阶

JavaScript进阶及高性能web进阶

浏览:632次

一、课程简介:

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

二、 课程周期:

     2

三、 课程大纲:

一、前端性能分识与优化实践(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 网络时间

    12.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

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

 


Evan JJ--百林哲咨询(北京)有限公司专家团队成员,现任某大型互联网公司技术总监,产品技术学院优秀讲师,前58前端技术委员会负责人

如您想参加此课程,您可以点击“我想参加”按钮提交您的需求,我们会及时与您联系
我要参加
将课程带入到您的团队,为您的团队进行一对一辅导。
预约内训

相关课程

移动开发

微信小程序开发进阶

微信小程序开发进阶主要围绕小程序特性、框架基础、前端工程化、测试方案、性能优化、未来演进等方面进行讲解,本培训将围绕这十个领域展开,即有理论支撑部分,也会有实践方案,更会介绍一线互联网公司腾讯、、美团、滴滴等在小程序方面的实战经验,有助于开发人员快速上手小程序开发、有助于业务同学少趟坑,一次将决策作对,包括小程序框架选型和未来h5/app/小程序之间技术体系演进等,将大幅提升企业开发效率、降低交付成本,

浏览:274 收藏:0
移动开发

APP H5性能优化实战

主要围绕APP能优化体系,性能优化指标定义,性能问题及核心瓶颈点诊断,APP NATIVE底层性能问题解决,既包括如何衡量和界定性能,业界APP统一性能标准是如何的,我们APP性能目前所处位置阶层,也包括性能优化以后,体验、交互、业绩数据层有提升。既有APP性能优化专业方面知识,也包括一线BAT、美团点评、携程去哪儿的APP性能优化深度实践。

浏览:376 收藏:1
语言工具

JavaScript进阶及高性能web进阶

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

浏览:632 收藏:0
移动开发

React Native最佳实践

58同城,做为亿万次并发访问的生活服务平台,每天服务千万活跃用户,在移动网络下,如何通过原生体验、web版本复用和发版节奏(一端开发、三端同步)、热更新跨平台优势来快速响应业务,本文以58转转有好货项目为例,讲述,如何基础功能建设、源码解析、监控体系建设、性能建设来将RN应用在业务实践中。

浏览:1148 收藏:0

推荐课程

敏捷数据中台建设实践
公司在17年推出了一系列大数据开源工具,在技术社区内得到了广泛关注和好评,包括大家熟悉的DBus、Wormhole、Moonbox、Davinci,并基于四大开源平台之上形成一套“敏捷大数据架构”方法论。19年,公司基于四大开源平台和敏捷方法论,建设了公司统一的“敏捷数据中台”,并在全公司推广使用。本次分享将会介绍我们从“敏捷大数据架构”到“敏捷数据中台”的建设之路,并会深入到设计、架构和实践层面进行讨论,为社区建设自己的数据
集成产品开发
中国要想在15年之内实现创新型国家的战略转移,首先必须实现“从中国制造走向中国创造”,在这个转变的过程中,“中国企业除了研发别无选择”(迈克尔·波特语)。中国企业在新产品/新服务的研发面临着如下一些长期困惑的问题: 如何平衡市场竞争的压力和客户多变的需求,快速将产品推向市场; 如何建立一个良好的决策评审体系来保证新产品“优生优育”; 如何建立一个真正的“以客户为中心、以市场为导向”的研发组织体系,快速响
Splunk大数据分析应用与实战
随着人工智能,5G等技术的飞速发展,以及智能终端、移动互联网以及物联网等信息技术的大规模应用,大数据时代已经到来,数据迅速渗透到我们生活、工作的各个领域。我们用传统的数据处理工具例如Excel来处理MB级别的业务,我们用各种数据库产品来处理结构化和半结构化数据,例如Oracle,MongoDB。但我们清醒地意识到,大数据时代不仅仅局限于MB的数据,大数据时代不是只有结构化数据,大数据时代不是只有一种数据源,大数据时代数