客户端容器 ｜ 青训营笔记

穿10号的赵睿
54 阅读4分钟

浏览器架构

浏览器架构演进

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

浏览器架构对比

image.png

渲染进程

常见浏览器内核

  • IE4-11：Trident
  • Gecko：Firefox
  • Webkit：Safari、Chrome、Android浏览器
  • Blink： Chrome、Opera
  • Edge：Edge

多线程架构

内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等。

image.png

JS引擎 VS 渲染引擎

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

image.png

多线程工作流程

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

image.png

Chrome运行原理

在浏览器地址栏输入地址，并按下回车键后，发生了哪些事情？

  1. 浏览器自动补全协议、端口

  2. 浏览器自动完成url编码

  3. 浏览器根据url地址查找本地缓存，根据缓存规则看是否命中缓存，若命中缓存则直接使用缓存，不再发出请求

  4. 通过DNS解析找到服务器的IP地址

  5. 浏览器向服务器发出建立TCP连接的申请，完成三次握手后，连接通道建立

  6. 若使用了HTTPS协议，则还会进行SSL握手，建立加密信道。使用SSL握手时，会确定是否使用HTTP2

  7. 浏览器决定要附带哪些cookie到请求头中

  8. 浏览器自动设置好请求头、协议版本、cookie，发出GET请求

  9. 服务器处理请求，进入后端处理流程。完成处理后，服务器响应一个HTTP报文给浏览器。

  10. 浏览器根据使用的协议版本，以及Connection字段的约定，决定是否要保留TCP连接。

  11. 浏览器根据响应状态码决定如何处理这一次响应

  12. 浏览器根据响应头中的Content-Type字段识别响应类型，如果是text/html，则对响应体的内容进行HTML解析，否则做其他处理

  13. 浏览器根据响应头的其他内容完成缓存、cookie的设置

  14. 浏览器开始从上到下解析HTML，若遇到外部资源链接，则进一步请求资源

  15. 解析过程中生成DOM树、CSSOM树，然后一边生成，一边把二者合并为渲染树（rendering tree），随后对渲染树中的每个节点计算位置和大小（reflow），最后把每个节点利用GPU绘制到屏幕（repaint）

  16. 在解析过程中还会触发一系列的事件，当DOM树完成后会触发DOMContentLoaded事件，当所有资源加载完毕后会触发load事件

首屏优化

  1. 压缩、分包、删除无用代码
  2. 静态资源分离
  3. JS脚本非阻塞加载
  4. 缓存策略
  5. SSR
  6. 预置loading、骨架屏

渲染优化

  1. GPU加速
  2. 减少回流、重绘
  3. 离屏渲染
  4. 懒加载

JS优化

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

跨端容器

跨端方案

  • webview

    1. Webview，即网页视图，用于加载网页Url，并展示其内容的控件
    2. 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发，比如 lonic、Cordova
    3. 常用webview分类：常用webview，Android，IOS、国产Android
    4. 使用WebView优势
      • 一次开发，处处使用，学习成本低
      • 随时发布，即时更新，不用下载安装包
      • 移动设备性能不断提升，性能有保障
      • 通过JSBridge和原生系统交互，实现复杂功能
    5. WebView使用原生能力
      • Javascript 调用Native
        1. API注入: Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截
        2. 使用Webview URL Scheme 跳转拦截
        3. IOS上 window.webkit.messageHandler 直接通信
      • Native 调用 Javascript
        1. 直接通过webview 暴露的 API 执行JS代码e
        2. IOS webview.stringByEvaluatingJavaScriptFromString
        3. Android webview.evaluateJavascript
    6. WebView<->Native 通信
      • JS环境中提供通信的JSBridge
      • Native 端提供 SDK 响应JSBridge 发出的调用
      • 前端和客户端分别实现对应功能模块

  • 小程序

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

  • RN/WeeX

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

  • Lynx

    1. Vue
    2. JS Core / V8
    3. JSBinding
    4. Native Ul / Skia

  • Flutter

    1. wideget
    2. dart vm
    3. skia图形库
avatar
文章
阅读
粉丝