客户端容器 浏览器架构 1．单进程架构（所有模块运行在同一进程里面） 2．多进程架构 3．面向服务器架构（原来的UI，数据库，文件，设备，网络等，作为独立的基础服务）
架构对比（扩展性，安全性，稳定性，流畅度） 任务服务器
多进程分工
渲染进程（常见浏览器内核，多线程架构） JS引擎 VS 渲染引擎 1 网络线程加载资源， 2 JS脚本解析并执行 3 JS解析空闲时渲染线程开始执行 4 用户交互，定时器操作等回调函数放入任务队列中 5 事件循环，任务取出交由JS引擎执行
setTimeout回调塞入任务堆里面 死循环 console.log
Chrome运行原理 浏览器地址输入URL后发生了什么 浏览器主进程：处理导航，读取响应，渲染进程； 渲染进程： 资源加载（加载子资源，执行脚本），构建（DOM,CSSOM，渲染树），布局，绘制（图层），合成
Chrome运行原理- 输入处理
- url框输入内容后判断输入为query或者URL地址
- 输入发送至搜索引擎/请求站点资源
开始导航 发送网络请求
读取响应
- HTTP响应，检查响应头类型
- 若为HTML文件，浏览器将内容交由渲染进程处理
- 其它类型则下载管理器
寻找渲染进程(Browser通过IPC至Render)
- 检查完成后，告知主进程数据准备完毕，确认后为站点寻找渲染过程
- IPC告知渲染进程处理本次导航
- 渲染进程开始接收数据并告知主进程开始处理进度，导航结束，进入加载阶段 渲染进程
- 资源加载：收到主进程消息后开始加载HTML文档和子资源，如图片，CSS样式文件及JS脚本）
- 构建渲染树：是DOM和CSSOM的结合，即将CSS和HTML文本转为浏览器可理解的结构；
- 页面布局：根据树，计算节点位置大小，绘制边框，遍历树，文素写入文档流
- 页面绘制：构建图层·，绘制图层·，合成线程接收指令生成图块，栅格化
前端性能 时间开销，卡顿情况 首屏优化 （缓存策略，SSR，静态资源分离，压缩分包删除无用代码，预置loading，骨架屏）
渲染优化 （GPU优化；减少回流，重绘；离屏渲染；懒加载（提前加载到本地））
JS优化 （循环早break；减少Dom访问；防抖（防止多次提交只执行最后一次），节流；Web Workers；合理使用闭包；防止内存泄漏）
跨端容器
必要性： 开发成本，效率； 一致性体验； 前端开发生态 方案：webview Lynx Flutter
