客户端容器 | 青训营笔记

柿柿
99 阅读10分钟

浏览器架构

浏览器架构演进

  1. 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
  2. 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
  3. 面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

浏览器架构对比

image.png

浏览器架构-任务管理器

任务管理器主要负责以下几方面的功能：

  1. 进程监控：任务管理器可以实时查看浏览器中的各个进程，包括标签页进程、插件进程和扩展进程等。它可以展示各个进程的资源使用情况，如内存占用、CPU使用率和网络活动等。

  2. 进程管理：任务管理器负责启动和关闭浏览器的进程。当用户打开一个新的标签页或启动一个插件时，任务管理器会创建相应的进程。当标签页被关闭或插件停止运行时，任务管理器会结束相应的进程，以释放系统资源。

  3. 资源分配：任务管理器根据各个进程的资源需求，动态地分配系统资源。例如，对于需要大量CPU资源的进程，任务管理器会分配更多的CPU时间片。同时，任务管理器还可以确保关键进程（如用户界面进程）始终获得足够的资源，从而保证整个浏览器的流畅运行。

  4. 进程隔离：为了提高浏览器的安全性，任务管理器会对各个进程进行隔离。这意味着一个进程无法直接访问另一个进程的内存空间。进程隔离可以防止潜在的安全漏洞影响到整个浏览器系统。

  5. 异常处理：任务管理器负责检测和处理进程中的异常情况。当某个进程发生崩溃或无响应时，任务管理器会尝试自动恢复该进程。如果无法恢复，任务管理器会提示用户关闭相应的标签页或插件，以防止整个浏览器崩溃。

为什么会有单进程架构

单进程架构在早期的浏览器中出现，当时的Web技术相对较为简单，浏览器需要处理的任务和复杂性远不及现在。在这个背景下，单进程架构具有一些优势：

  1. 简单性：单进程架构更易于实现和维护，因为它不需要处理多进程间的通信和资源分配问题。对于早期的浏览器开发者来说，单进程架构提供了一种快速实现浏览器功能的方法。
  2. 资源消耗：相较于多进程架构，单进程架构在内存和CPU资源消耗方面较低。因为多进程架构中，每个进程都需要占用一定的系统资源，而单进程架构只需要维护一个进程。在计算机硬件资源有限的早期，这一点是非常重要的。
  3. 兼容性：早期的Web技术和标准相对较为简单，单进程架构在兼容性方面表现优秀。因为不需要处理多进程间的兼容性问题，单进程浏览器更容易支持不同的操作系统和硬件平台。

面向服务架构是否会替代多进程架构

面向服务架构在某种程度上可以看作是多进程架构的一种演进和优化。这种架构将浏览器的各个功能模块化，作为独立的服务来运行和维护。这样可以进一步提高浏览器的稳定性、安全性和性能，同时优化资源利用率。

渲染进程

常见浏览器内核

image.png

渲染进程-多线程架构

进程是一个独立的程序执行实例，它包括程序的代码、数据以及运行时所需的系统资源（如文件描述符、内存空间等）。每个进程都有自己的独立地址空间，操作系统会为每个进程分配和管理资源。

JS引擎 VS 渲染引擎

  1. 解析执行JS
  2. XML解析生成渲染树，显示在屏幕
  3. 桥接方式通信

渲染进程 - 多线程工作流程

  1. 网络线程负责加载网页资源
  2. JS引擎解析JS脚本并且执行
  3. JS解析引擎空闲时，渲染线程立即工作
  4. 用户交互、定时器操作等产生回调函数放入任务队列中
  5. 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行

Chrome运行原理

输入处理

  1. 用户Url框输入内容的后，UI线程会判断输入的是一个URL地址呢，还是一个query查询条件
  2. 如果是URL,直接请求站点资源
  3. 如果是query,将输入发送给搜索引擎

开始导航

  1. 当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容
  2. 请求过程中，tab处于loading(转圈等待)状态

读取响应

  1. 网络线程接收到HTTP响应后，先检查响应头的媒体类型(MIME Type)
  2. 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
  3. 如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理

寻找渲染进程

  1. 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
  2. 主进程通过IPC消息告知渲染进程去处理本次导航
  3. 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段

渲染进程 - 资源加载

  1. 收到主进程的消息后，开始加载HTML文档
  2. 除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本

渲染进程 - 构建渲染树

  1. 构建DOM树，将HTML文本转化成浏览器能够理解的结构
  2. 构建CSSOM树，浏览器同样不认识CSS,需要将CSS代码转化为可理解的CSSOM
  3. 构建渲染树，渲染树是DOM树和CSSOM树的结合

渲染进程 - 页面布局

  1. 根据渲染树计算每个节点的位置和大小
  2. 在浏览器页面区域绘制元素边框
  3. 遍历渲染树，将元素以盒模型的形式写入文档流

渲染进程 - 页面绘制

  1. 构建图层：为特定的节点生成专用图层
  2. 绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程(减少绘制次数)
  3. 合成线程接收指令生成图块
  4. 栅格线程将图块进行栅格化
  5. 展示在屏幕上

首屏优化

  1. 压缩、分包、删除无用代码

    • 通过压缩代码、分包加载和删除无用代码等技术，可以减小页面的体积，加快页面的加载速度。

  2. 静态资源分离

    • 将页面中的静态资源（如CSS、JavaScript和图像等）与HTML文档分离，可以使得浏览器可以并行加载这些资源，从而提高页面的加载速度

  3. JS脚本非阻塞加载

    • 将JS脚本异步加载，可以减少页面的渲染阻塞，从而提高页面的加载速度。可以使用defer和async等属性来实现JS的非阻塞加载

  4. 缓存策略

    • 合理地设置缓存策略，可以减少对服务器的请求，加快页面的加载速度。可以使用HTTP响应头中的Cache-Control和Expires等属性来设置缓存策略

  5. SSR

    • 服务器端渲染（Server Side Rendering）可以在服务器端生成HTML文档，减少客户端渲染的工作量，从而提高页面的加载速度。SSR适用于复杂的单页面应用或对SEO有要求的应用

  6. 预置loading、骨架屏

    • 在页面加载过程中，可以预置一个loading动画或骨架屏，以提高用户体验。这些技术可以在页面加载完成之前，先显示一些占位元素，给用户一个等待的感觉，从而减少用户等待的焦虑和不安

综合利用这些技术，可以大大提高页面的加载速度和用户体验。在进行首屏优化时，需要综合考虑页面的性能、体验和功能等方面，找到最合适的优化方案

渲染优化

  1. GPU加速

    • 将复杂的图形处理任务交给GPU来处理，可以加快页面的渲染速度。可以使用CSS3的transform和opacity等属性来开启GPU加速

  2. 减少回流、重绘

    • 回流和重绘是影响页面性能的主要因素之一。可以通过避免使用影响布局的属性、批量修改DOM元素等技术来减少回流和重绘操作

  3. 离屏渲染

    • 离屏渲染是将页面中的部分内容在单独的图层中进行渲染，从而减少对主渲染线程的阻塞。可以使用CSS3的transform和position等属性来开启离屏渲染。

  4. 懒加载

    • 将页面中的非必要资源（如图片和视频等）延迟加载，可以加快页面的加载速度。可以使用Intersection Observer和Lazyload等技术来实现懒加载

JS优化

  1. 防止内存泄漏
  2. 循环尽早break
  3. 合理使用闭包
  4. 减少Dom访问
  5. 防抖、节流
  6. Web Workers

跨端容器

为什么需要跨端

  1. 开发成本、效率
  2. 一致性体验
  3. 前端开发生态

跨端方案

  • webview
  • 小程序
  • RN/WeeX
  • Lynx
  • Flutter

跨端容器 - WebView

  1. Webview,即网页视图，用于加载网页Url,并展示其内容的控件
  2. 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发；比如lonic、Cordova

跨端容器 - 常用WebView分类

image.png

跨端容器 -WebView使用原生能力

Javascript调用Native

  • API注入：Native获取]avascript3环境上下文，对其挂载的对象或者方法进行拦截
  • 使用Webview URL Scheme跳转拦截
  • IOS上window.webkit.messageHandler直接通信

Native调用Javascript

  • 直接通过webview暴露的API执行JS代码
  • IOS webview.stringByEvaluatingJavaScriptFromString
  • Android webview.evaluateJavascript

跨端容器 - WebView< - >Nactive 通信

  1. JS环境中提供通信的 JSBridge
  2. Native端提供 SDK 响应 JSBridge 发出的调用
  3. 前端和客户端分别实现对应功能模块

跨端容器 - 小程序

  1. 微信、支付宝、百度小程序、小米直达号
  2. 渲染层-webview
  3. 双线程，多webview架构
  4. 数据通信，Native转发

跨端容器 - React Native/WeeX

  1. 原生组件渲染
  2. React/Vue框架
  3. virtual dom
  4. JSBridge

跨端容器 - Lynx

  1. 基于Vue框架
  2. 绑定于JS Core / V8
  3. JSBinding
  4. Native UI /Skia

跨端容器 - Flutter

  1. wideget
  2. dart vm
  3. skia图形库

跨端容器 - 通用原理

  1. UI组件
  2. 渲染引擎
  3. 逻辑控制引擎
  4. 通信桥梁
  5. 底层API抹平表面差异

over

avatar
文章
阅读
粉丝