浏览器架构
- 浏览器架构演进：
-
- 单进程架构： 所有模块运行在同一个进程里、包含网络、插件、JavaScript运行环境等
- 多进程架构： 主进程、网络进程、渲染进程、GPU进程、插件进程
- 面向服务架构： 将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
- 架构对比
- 多进程分工
- 单进程架构缺点
-
- 稳定性： 由于所有模块都运行在同一个进程中，对于一些复杂的js代码或者死循环代码，如果页面渲染引擎崩溃，就会导致整个浏览器崩溃。同样，各种不稳定的第三方插件，也是导致浏览崩溃的隐患。
- 安全性： 由于插件的存在，某些恶意脚本会利用浏览器漏洞来获取系统权限，进而引发安全问题。
- 流畅性： 由于很多模块都运行在同一个线程中，如js引擎、页面渲染及插件等，那么执行某个循环任务的模块就会阻塞其他模块的任务执行，这样难免会有卡顿的现象发生。
渲染进程
- 常见的浏览器内核
- 多进程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
- 多进程工作流程
-
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
- JS引擎VS渲染引擎
-
- 解析执行JS
- XML解析生成渲染树，显示在屏幕
- 桥接方式通信
Chrome运行原理
- 浏览器输入url后发生了什么？
-
- URL解析： 判断你输入的是一个合法的URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作URL的解析
- DNS 查询： 获取到了域名对应的目标服务器IP地址
- TCP 连接： 确定目标服务器服务器的IP地址后，则经历三次握手建立TCP连接
- HTTP 请求： 建立tcp连接之后，就可以在这基础上进行通信，浏览器发送 http 请求到目标服务器
- 响应请求： 服务器接收到浏览器的请求之后，就会进行逻辑操作，处理完成之后返回一个HTTP响应消息
- 页面渲染： 浏览器接收到服务器响应的资源后，首先会对资源进行解析
-
-
- 页面的渲染过程如下：
-
-
-
-
- 解析HTML，构建 DOM 树
- 解析 CSS ，生成 CSS 规则树
- 合并 DOM 树和 CSS 规则，生成 render 树
- 布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算
- 绘制 render 树（ paint ），绘制页面像素信息
- 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成，显示在屏幕上
-
-
- 首屏优化
-
- 压缩、分包、删除无用代码
- 静态资源分离
- JS脚本非阻塞加载
- 缓存策略
- SSR
- 预置loading、骨架屏
- JS优化
-
- 防止内存泄漏
- 循环尽早break
- 合理使用闭包
- 减少Dom访问
- 防抖、节流
- Web Workers
- 渲染优化
-
- 懒加载
- 减少回流、重绘
- 离谱渲染
- GPU加速
跨端容器
- 为什么需要跨端
-
- 开发成本、效率
- 一致性体验
- 前端开发体验
- 跨端方案
- 通用原理
-
- UI组件
- 渲染引擎
- 逻辑控制引擎
- 通信桥梁
- 底层API抹平表现差异
- 跨端方案对比
