大前端性能优化实战

steven 查看讲师

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

曾负责滴滴出行公共前端团队负责人，带领团队完成了国内第一本Vue.js的书籍《Vue.js权威指南》，组织编写过Vue.js的公司级组件库以及构建等解决方案。组织参与了一些公司级的组件库开发和复杂业务模块的设计。

浏览：3850次

详情 DETAILS

简介

Angular 5应用程序非常快，更轻且易于使用。从材料设计能力来构建美观和直观的用户界面。一个新的 HttpClientModule被引入，这是一个完整的重写现有的 HttpModule，支持TypeScript 2.4；同样地Angular 5创建了一个示例应用程序，以获得更强安全性。此内容将 Angular JWT身份验证示例使用JWT令牌保护Angular 5应用程序，完成一个端到端的应用程序来构建Angular 5

目标

1.客户端的发版审核问题，譬如招商就内嵌了很多的 h5 作为业务快速孵化和增长点

2.如何做到体验也能接近客户端原生

3. 同时解决掉一些客户端能力外放、用户信息加密&同步

4.混合方案的落地都会遇到什么问题和如何优化

受众人群

有一定js基础或者对前端新技术感兴趣：

技术主管、架构师、各个阶段的前端开发、喜欢前端的后端开发、全栈开发

课程时长

2天（12H）

分享提纲

第一天上午	1. App 在接口层的安全 2. App 自身的请求如何加密标准 3. App 内的 h5 如何加密标准 4. App 与 h5 的用户登录信息同步 5.在登录后的 webview 如何设置 cookie 6.在登出后的 webview 如何清除 cookie 7.加密的 cookie 如何生成 8.App 给 h5 的 jsbridge 如何规范化 9.采用私有协议，同时规范传递参数，譬如： `**://bridge?name=${fn}&data=${param}&callback=${callback}` 10.客户端如何封装 11.js 如何封装
第一天下午	1、本地化真实代码案例全解析 2、核心架构设计 3、App 将 h5 本地化来实现用户访问加速相比 webview 加载一个远程地址，和浏览器打开一个远程地址类似，容器能做的优化不多，而本地化能做的是一套完整的优化方案：将 web 的静态资源由远程下载到 APP 本地 4、App 解决什么问题： 4.1通过 file:// 加载之后的 web 跨越问题 4.2入口开关和参数标准问题 4.3 下载逻辑 4.4versionCompare 最新版本和用户比对问题 5、客户端包体积优化客户端内有很多本地的静态资源文件，如何在非首屏进行资源的远程化来减少安装时候的包体积 6、静态资源包配置平台
第二天上午	1、App 和 h5 的日志统一上报相比传统的 App 日志监控，安卓和 iOS 都各自有一套，还有 web 端日志，我们如何规范并搭建统一的一套日志 2、App 配置化动态视图的 A/B 切换动态数据（侧边栏入口，webview 右上角配置、用户运营的数据拉取） 3、App 敏捷开发必备摇一摇开启开发设置入口个性化设置定位等
第二天下午	混合开发 1.1完整 RN 实战（带相机功能） -- 采用 0.61.4 的版本 1.2工具应用最早基于react-native-device-info 做基于 deviceId（无需登录）后也 react-native-we chat 微信 sdk 1.3带 cookie(react-native-cookies) 的 webview (react-native-webview) 加载服用 web 端的 vue 界面实现登录信息同步，安卓踩坑了用 NativeModules.OpenNativeModule 来调用原生的方法 CookieManager 1.4之前 App 各自封装了 2 个 NA 测肤 sdk，NativeModules.OpenNativeModule 来调用原生的方法