客户端容器
浏览器结构
- 单进程架构
- 多进程架构
- 面向对象架构
硬件限制出现单进程结构，会节约资源，面向对象架构很可能会在未来替代多进程架构
结构对比
渲染进程
浏览器内核
浏览器内核（Rendering Engine），是指浏览器最核心的部分，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
浏览器内核主要包括三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。JavaScript引擎是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快。
多线程架构
内部是多线程实现的，一般包括js引擎线程、GUI渲染线程、定时器线程、事件线程、网络线程
js引擎与渲染引擎
相互独立的，通过桥接方式通信，有一定延迟的
多线程工作流程
Chrome运行原理
八股文：浏览器地址输入URL后发生了什么？
- DNS解析：将域名解析成IP地址
- TCP连接：TCP三次握手
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面（下文）
- 连接结束：TCP四次挥手
浏览器主进程中：
输入处理：判断是地址还是查询
开始导航：UI线程通知网络线程发起网络请求
读取响应：收到http响应后，检查响应头媒体类型，html交给渲染进程处理
寻找渲染进程:主进程通过IPC消息告知渲染进程处理导航
前端的优化方法
首屏优化
-
压缩、分包、删除无用代码
-
静态资源分离
-
JS脚本非堵塞加载；可以放在包底部
-
缓存策略；打包软件
-
SSR渲染
-
预置loading、骨架屏（防止白屏）
渲染优化
-
GPU加速
-
减少回流、重绘
-
离屏渲染：
-
与普通渲染不同，离屏渲染的流程：APP需要渲染的数据->CPU计算->GPU渲染->离屏渲染缓冲区(Offscreen Buffer)->保存在帧缓存区(Frame Buffer)->视频控制器读取帧缓存区数据并显示在屏幕上
-
懒加载
JS优化
-
防止内存泄露
-
循环尽早break（满足条件后尽快跳出）
-
合理使用闭包
-
减少Dom访问
-
防抖、节流（在规定时间内只会执行一次)
-
Web Workers:使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。
跨端容器
跨端优点：开发成本低、效率高、一致性体验、前端开发生态过多，跨端解放客户端资源
跨端方案
Web View
可以内嵌在移动端，实现前端的混合式开发
小程序
微信、支付宝
渲染还是Webview的方案
数据通信，native转发
React Native/WeeX
通过原生组件渲染、使用React/Vue框架
Lynx
基于web view框架，使用JSBinding替换JSBridge
Flutter
基础UI组件wideget
逻辑控制引擎dart VM
跨端方案通用的原理
-
UI组件
-
渲染引擎：webview、native、自研引擎
-
逻辑控制引擎：js引擎、dart vm
-
通信桥梁
-
底层API抹平表现差异
注：都是基于Webview渲染，小程序和webview对比，小程序体验流畅，因为小程序封死了一些危险的操作，类如Dom操作
未来跨端方案可能会回归Webview
