一、 浏览器架构
1-1 浏览器架构演进
1.单进程架构:所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
2.多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程
3．面向服务架构:将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
1-2 浏览器架构特点
1-3 多进程分工
1-4 渲染进程-重点
1-4-1 多线程架构
1-4-2 JS引擎VS渲染引擎
1.解析执行JS
2.XML解析生成渲染树，显示在屏幕
3.桥接方式通信（它们是独立）
1-4-3 多线程流程
1.网络线程负责加载网页资源（资源包含HTML源码和CSS源码）
2.JS引擎解析JS脚本并且执行
3.JS解析引擎空闲时，渲染线程立即工作
4.用户交互、定时器操作等产生回调函数放入任务队列中
5.事件线程进行循环，将队列里的任务取出交给JS引擎执行（将任务队列中的有关页面的改变的操作和事件取出，给JS引擎去执行,渲染引擎与JS引擎通过Bridge连接）
二、Chrome浏览器运行原理
1.浏览器输入地址之后
1.浏览器的地址栏输入URL并按下回车。
2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3.DNS解析URL对应的IP。
4.根据IP建立TCP连接（三次握手）。
5.HTTP发起请求。
6.服务器处理请求，浏览器接收HTTP响应。
7.渲染页面，构建DOM树。
8.关闭TCP连接（四次挥手）。
三、前端优化手段
1. 首屏优化
1.压缩、分包、删除无用代码（构建将代码压缩，做一个单页将代码分包）
2．静态资源分离（静态资源最好是放在CDN上面,与服务进行分离，如果是同源加载默认带上cookie，速度变慢）
3． JS脚本非阻塞加载（JS放在body的底部）
4．缓存策略（常缓存）
5.SSR（前端渲染）
6.预置loading、骨架屏（防止白屏）
2. 渲染优化
1.GPU加速
2.减少回流、重绘
3.离屏渲染（非离屏渲染）
4．懒加载
3. JS优化
1.防止内存泄漏（全局变量，严格模式可以检测，DOM的引入，定时器）
2.循环尽早break
3.合理使用闭包
4．减少Dom访问
5.防抖、节流
6.Web Workers
四、跨端容器
1.为什么要跨端
1.开发成本、效率
2.一致性体验
3.前端开发生态
2.跨端方案
2-1 跨端容器 webview
2-1-1 作用
- Webview，即网页视图，用于加载网页Url，并展示其内容的控件
2.可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发;比如lonic、Cordova。
2-1-2 优点
1.一次开发，处处使用，学习成本低
2.随时发布，即时更新,不用下载安装包
3．移动设备性能不断提升，性能有保障
4．通过JSBridge和原生系统交互，实现复杂功能
2-2 小程序
1.微信、支付宝、百度小程序、小米、直达号
2．渲染层-webview
3．双线程,多webview架构
4.数据通信, Native转发
2-3 ReactNative/Weex
1.原生组件渲染
2.React/Vue框架
3.virtual dom
4.JSBridge
2-4 Lynx
1.Vue
2.JS Core / v8
3.JSBinding
4.Native UI / Skia
2-5 Flutter
1.wideget
2.dart vm
3.skia图形库
2-5 通用原理
1.UI组件
2.渲染引擎
3.逻辑控制引擎
4.通信桥梁
5.底层API抹平表现差异
