客户端容器
浏览器架构
演进
- 单进程架构： 所有模块运行在同一进程
- 多进程架构： 主进程、网络进程、渲染进程、GPU进程、插件进程等。
- 面向服务架构： 多进程架构的升级，UI、数据库、文件、网络、设备作为独立的基础服务。
多进程分工
- 主进程
- GPU进程
- 网络进程
- 标签页进程（渲染进程）
- 插件进程
- 其他进程
渲染进程
- 多线程实现，负责页面渲染、脚本执行、事件处理、网络请求等。
- JS引擎： 解析js脚本，运行js程序，与GUI渲染进程互斥。
- GUT渲染：解析html、css，构建dom树和render树。
- 定时器触发：定时器所在线程，将回调函数添加到事件队列。
- 网络线程：在xhr、fetch发起请求后新开一个网络线程请求，如果设置回调，在状态变更时会被加入事件队列。
- 事件触发：控制事件循环。
js引擎和渲染引擎，通过桥接方式通信。
Chrome运行原理
如何展示网页
- 输入处理
- 开始导航
- 读取响应
- 寻找渲染进程：资源加载、构建渲染树、页面布局、页面绘制
前端性能优化
首屏优化
- 压缩、分包、删除无用代码
- 静态资源分离
- JS脚本非阻塞加载
- 缓存策略（强缓存）
- SSR （服务端渲染，防止白屏）
- 预置loading、骨架屏
渲染优化
- GPU加速 （opacity、transform做动画）
- 减少回流重绘 （不要用table，display:none用visibility代替）
- 离屏渲染（会开辟一段内存先渲染）
- 懒加载
JS优化
- 防止内存泄漏（严格模式，自己定义定时器，用完就清除）
- 循环尽早break
- 合理使用闭包
- 减少dom访问（style通过类名控制，只访问一次；常用的dom用变量缓存）
- 防抖、节流
- web workers （和js引擎不冲突，可用在图片、音频、视频处理上）
跨端容器
方案
- webview
- 小程序
- RN/WeeX
- Lynx
- Flutter
原理
- UI组件
- 渲染引擎
- 逻辑控制引擎
- 通信桥梁
- 底层API抹平差异
