跨端学习——青训营

对于端口的需要以下的学习

概述

在本次的学习的时候有以下的学习记录～

1. 跨端是什么，给大家介绍跨端产生的背景及解决的问题
2. 跨端技术方案介绍，给大家介绍目前主流的跨端技术方案（hybrid 方案/原生渲染方案/自渲染方案/小程序方案）以及对比
3. 基于小程序跨端实践，带大家了解如何开发一个小程序以及优化小程序
4. 总结与展望

课前

1. 了解一门前端开发框架（React/Vue）, reactjs.org/, vuejs.org/
2. 了解 React Native, reactnative.dev/
3. 了解 Flutter, flutter.dev/
4. 了解抖音小程序，developer.open-douyin.com/docs/resour…
5. 了解前端和客户端通信原理

课后

1. 跨端解决了什么问题？
2. 常见的跨端技术方案有哪些？各方案的技术原理是什么？他们之间有什么区别？
3. 跨端技术方案中有哪几个核心部分？
4. 抖音开发者工具提供了哪些能力？
5. 抖音小程序开发与 web 开发有哪些异同？
6. 小程序性能优化会关注哪些性能指标？分为哪几个方向进行性能优化？可以使用哪些工具来提升效率？
7. 小程序 setData 如何优化？

以下是解决方法：

1. 跨端解决方案主要是针对不同平台（例如iOS、Android、Web等）开发应用时出现的重复劳动和维护成本高的问题。通过使用跨端技术，开发者可以使用一套代码基底来构建多个平台上的应用，从而减少重复开发和维护的工作量。

2. 常见的跨端技术方案包括：

   • React Native：使用React框架，通过JavaScript构建原生移动应用。它通过使用虚拟DOM和JavaScript桥接实现跨平台UI渲染。
   • Flutter：使用Dart语言构建的UI工具包，可在多个平台上绘制高性能、高保真度的用户界面。Flutter使用自己的渲染引擎，可以直接绘制UI，无需桥接。
   • Xamarin：使用C#构建的跨平台移动应用开发框架，可以在不同平台上共享业务逻辑和部分UI代码。
   • Weex：阿里巴巴开源的跨平台框架，使用Vue.js进行开发，将Vue组件渲染为原生组件。
   • Taro：基于React技术栈的多端统一开发框架，通过编写React代码，生成不同平台的代码。

   这些方案的技术原理和区别主要体现在底层的渲染机制、跨平台实现方式以及开发体验上。

3. 跨端技术方案中的核心部分一般包括：

   • 统一的业务逻辑和数据层：跨平台方案鼓励在业务逻辑和数据处理上实现代码共享，从而避免重复开发。
   • 平台适配层：不同平台可能有不同的UI和功能实现方式，需要适配层来处理跨平台兼容性和差异。
   • 跨平台UI渲染引擎：一些方案使用虚拟DOM或自有渲染引擎来实现跨平台UI渲染。
   • 原生模块访问：访问特定平台的原生功能（如摄像头、传感器）通常需要桥接到原生代码。

4. 抖音开发者工具提供的能力包括：

   • 小程序开发：创建、编辑、调试抖音小程序的界面和逻辑。
   • 页面预览：实时预览小程序在不同尺寸设备上的展示效果。
   • 数据模拟：模拟用户数据，辅助调试页面。
   • 调试工具：帮助开发者定位和修复代码问题。
   • 性能分析：分析小程序的性能，如加载时间、渲染性能等。

5. 抖音小程序开发与Web开发的异同：

   相同点：

   • 都基于前端技术栈，使用HTML、CSS、JavaScript进行开发。
   • 都需要关注用户界面、交互和性能优化。
   • 都可以使用各种工具进行开发、调试和优化。

   不同点：

   • 抖音小程序是在抖音平台上运行的，具有独特的API和交互方式。
   • Web开发面向浏览器环境，而小程序开发面向特定平台的小程序引擎。
   • 小程序开发可能需要更多关注跨平台兼容性和原生功能访问。

6. 小程序性能优化关注的性能指标包括加载速度、渲染性能、用户交互响应速度等。优化方向主要分为：

   • 减少请求：减少HTTP请求和资源大小，使用合适的图片格式和压缩方式。
   • 避免重排重绘：优化CSS结构，减少DOM操作，以提高渲染性能。
   • 异步加载：使用异步加载资源，避免阻塞主线程。
   • 懒加载：延迟加载非首屏内容，提高首屏加载速度。
   • 代码分割：将代码分割为多个模块，按需加载，减小首次加载时间。
   • 图片优化：使用合适尺寸的图片，使用懒加载和预加载技术。

   工具包括性能分析工具（如Chrome开发者工具、WebPageTest）、代码分析工具（如webpack分析插件）等。

7. 小程序中的setData优化包括：

   • 减少setData调用次数：避免频繁调用setData，尽量将多个数据变更合并到一次setData中。
   • 使用对象赋值：通过设置整个对象的属性来更新数据，而不是单独更新每个属性，以减少setData次数。
   • 使用wx:key：在列表渲染时，给每个项设置唯一的wx:key，以优化列表更新性能。
   • 虚拟列表：对大型列表使用虚拟滚动技术，只渲染可见区域的内容，减少渲染量。
   • 使用setData异步选项：通过设置setData的async选项为true，将更新放入下一个事件循环，避免连续setData阻塞UI线程。

   这些优化策略可以减少setData操作的次数，从而提高小程序的性能和用户体验。

概述

本节课程主要分为四个方面：

1. Web 应用使用 Chrome devTools 调试
2. 移动端 H5 调试
3. NodeJs 应用调试
4. 常用代理工具的使用

课前

安装 Chrome 浏览器

【可选】 安装代理工具

• 安装 Charles

课后

调试技巧实践

• Chrome devtools 各 tab 的运用实践
• 常用代理工具的实践

课程概述

从攻击、防御两个视角，简要介绍前端范畴内常见的安全问题，包括 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:

课程大纲

1. 引入前端监控的概念
2. 介绍前端监控的性能指标与异常
3. 实战：封装用于监听性能指标与前端异常的监听器
4. 实战：封装一个有完整上报能力的 sdk

课前预习

1. 了解前端监控是做什么，做前端监控有什么价值
2. 了解 Navigation Timing 和 Navigation Timing 2 的相关字段
3. 了解 Performance 与 Performance observer 对象
4. 了解 addEventListener 与 removeEventListener 这两个函数
5. 了解什么叫做 hook
6. 了解什么叫做链式调用

课中讲义

1. 知道前端监控的意义与前世今生。
2. 从用户的视角思考我们监控的性能指标与前端异常给用户带来的影响。
3. 学会监听部分性能指标与前端异常，并封装成一个通用的监听器。
4. 学会将监听器封装到 sdk 中，以及按需加载和链式调用的一些小技巧。

课后温习与拓展

1. 复习实战中监听的性能指标，并尝试实现其他性能指标的监听，如 FMP、CLS、TTI 等。
2. 复习如何借助 hook 函数实现请求错误监听，并尝试封装一个更可靠的 hook 函数以及关注慢请求指标。
3. 挑战课程没有提及的用户行为监控。
4. 找可靠的小伙伴一起补全 sdk 从监听到上报再到存储与消费的整个链条。