浏览器架构
- 单进程结构：所有模块运行在同一进程里
- 多进程架构：主进程、网络进程、渲染进程、CPU进程、插件进程分别运行
- 面向服务架构：一个独立的基础服务 ps: 单进程容易卡顿
常见浏览器内核
- 渲染进程：内部是由多线程实现，主要负责页面渲染、脚本执行、事件处理、网络请求等
谷歌浏览器工作原理——这里推荐一篇讲的还不错的文章
- 如何展示网页
输入处理-》开始导航-》读取响应-》寻找渲染流程 资源加载-》构建渲染树-》页面布局-》绘制页面
- 首屏优化方案
- 压缩、分包、删除无用代码（减少体积）
- 静态资源分离
- JS脚本非阻塞加载
- 缓存策略：延迟加载非重要部分
- SSR（服务端渲染）
- 预置loading、骨架屏
3.渲染优化：1、CPU加速 2、减少回流和重绘 3、离屏渲染 4、懒加载 这里强调一下回流和重绘的区别
- 重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
- 回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
不管怎么说都是会影响性能 4.JS 优化方案这里强调一下 防抖和节流 防抖：在单位时间内频繁触发事件，只有最后一次生效 节流：在单位时间内频繁触发事件，只生效一次（也就是只有第一次生效）
跨端容器
- 常见跨端方案
- webview:网页视图用于加载网页URL，并展示其内容控见——分类
- 小程序：双线程多webview结构、数据通信
- RN/WeeX：原生组件渲染 在React和Vue中使用
- Lynx：字节创建的暂时未开源——与其他的区别
- 首屏直出： RN 或 Weex 类型的跨平台框架是在 JS 运行时中去创建、更新 DOM 节点，js 虚拟机承担了大部分的工作。而 Lynx 是将 DOM 节点构建全部放在 Native 层，JS 运行的是业务逻辑、不阻塞 UI 展示，整体轻 JS 逻辑设计
- 精简流水线： 基于以上的机制，可以做首屏模板渲染；Lynx 开发工具打包前端产物时会将前端模版代码和 Data 编译成一个模版指令（用于生成视图的指令）直接下发到 Native，类似 Snapshot，将一部分工作在打包期间做处理，提升性能；运行时再反向绑定执行的 JS 脚本，建立和前端框架的联系，保证前端业务逻辑的执行
- 性能优化手段多： DOM 树构建，数据驱动，排版引擎等全部在 C++ 层实现，有足够多的性能分析和优化手段；全新的 Radon Diff 算法，大幅提升 Diff DOM 树的效率；自研的排版引擎 Starlight，对 Flex 排版算法的优化，以及高效的 Linear Layout 排版算法支持等，大幅提升排版效率；多线程排版和渲染支持，在特定场景下可以极大提升性能等
- 轻量化： 对比 Flutter，基于前端 DSL，入门门槛低，前端模板编译成特定的渲染引擎指令，运行期通过自研的渲染引擎虚拟机执行，产物足够轻量，性能足够高效；同时使用原生组件渲染，包体积非常小，接入成本极低。
- 场景通用： 原生组件渲染，适用于卡片、嵌入、全页等多种场景
- Flutter：是一款由 Google 开发的开源、跨平台移动端开发框架。Flutter 使用 Dart 作为开发语言，这是一门简洁、强类型的编程语言
三大部分：由 Dart 语言负责的 Framework 层；Dart 语法执行器；Skia 图像处理引擎。
