字节跳动青训营讲师非常用心给大家整理了课前、中、后的学习内容，同学们自我评估，选择性查漏补缺，便于大家更好的跟上讲师们的节奏，祝大家学习愉快，多多提问交流～
课程一：跨端技术概述
概述
本节课程内容会分为以下几个方面：
- 跨端是什么，给大家介绍跨端产生的背景及解决的问题
- 跨端技术方案介绍，给大家介绍目前主流的跨端技术方案（hybrid 方案/原生渲染方案/自渲染方案/小程序方案）以及对比
- 基于小程序跨端实践，带大家了解如何开发一个小程序以及优化小程序
- 总结与展望
课前
- 了解一门前端开发框架（React/Vue）, reactjs.org/, vuejs.org/
- 了解 React Native, reactnative.dev/
- 了解 Flutter, flutter.dev/
- 了解抖音小程序，developer.open-douyin.com/docs/resour…
- 了解前端和客户端通信原理
课后
- 跨端解决了什么问题？
- 常见的跨端技术方案有哪些？各方案的技术原理是什么？他们之间有什么区别？
- 跨端技术方案中有哪几个核心部分？
- 抖音开发者工具提供了哪些能力？
- 抖音小程序开发与 web 开发有哪些异同？
- 小程序性能优化会关注哪些性能指标？分为哪几个方向进行性能优化？可以使用哪些工具来提升效率？
- 小程序 setData 如何优化？
课程二：Web 调试技术
概述
本节课程主要分为四个方面：
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
课前
安装 Chrome 浏览器
【可选】 安装代理工具
- 安装 Charles
课后
调试技巧实践
- Chrome devtools 各 tab 的运用实践
- 常用代理工具的实践
课程三：Web 开发的安全之旅
课程概述
从攻击、防御两个视角，简要介绍前端范畴内常见的安全问题，包括 XSS、CSRF、SQL 注入、DOS 等。
参考资料
- 什么是分布式拒绝服务 (DDoS) 攻击？
- Safe DOM manipulation with the Sanitizer API
- Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)
- github.com
- SameSite 那些事 | 怡红院落
- Amazon.com: Web Application Security: Exploitation and Countermeasures for Modern Web Applications:
课程四：前端监控 SDK 实战学员手册
课程大纲
- 引入前端监控的概念
- 介绍前端监控的性能指标与异常
- 实战：封装用于监听性能指标与前端异常的监听器
- 实战：封装一个有完整上报能力的 sdk
课前预习
- 了解前端监控是做什么，做前端监控有什么价值
- 了解 Navigation Timing 和 Navigation Timing 2 的相关字段
- 了解 Performance 与 Performance observer 对象
- 了解 addEventListener 与 removeEventListener 这两个函数
- 了解什么叫做 hook
- 了解什么叫做链式调用
课中讲义
- 知道前端监控的意义与前世今生。
- 从用户的视角思考我们监控的性能指标与前端异常给用户带来的影响。
- 学会监听部分性能指标与前端异常，并封装成一个通用的监听器。
- 学会将监听器封装到 sdk 中，以及按需加载和链式调用的一些小技巧。
课后温习与拓展
- 复习实战中监听的性能指标，并尝试实现其他性能指标的监听，如 FMP、CLS、TTI 等。
- 复习如何借助 hook 函数实现请求错误监听，并尝试封装一个更可靠的 hook 函数以及关注慢请求指标。
- 挑战课程没有提及的用户行为监控。
- 找可靠的小伙伴一起补全 sdk 从监听到上报再到存储与消费的整个链条。
