1、浏览器架构

• 浏览器架构演进

  • 单进程架构

    • 所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等

  • 多进程架构

    • 主进程、网络进程、渲染进程、GPU进程、插件进程

  • 面向服务架构

    • 将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

      

• 浏览器架构对比

  

• 浏览器架构

  • 任务管理器

    

  • 多进程分工

    

2、渲染进程

• 常见浏览器内核

  

• 渲染进程

  • 多线程架构

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

      
      • JS引擎 VS 渲染引擎
        • 解析执行JS
        • XML解析生成渲染书，显示在屏幕
        • 桥接方式通信

  • 多线程工作流程

    • 网络线程负责加载网页资源

    • JS引擎解析JS脚本并且执行

    • 用户交互、定时器操作等产生回调函数放入任务队列中

    • 时间线程进行时间循环，将队列里的任务取出交给JS引擎执行

      

3、Chrome运行原理

• 如何展示网页

  

• 输入处理

  • 用户URL框输入内容更后，UI线程会判断输出的是一个URL地址，还是一个query查询条件

  • 如果是URL，直接请求站点资源

  • 如果是query，将输入发送给搜索引擎

• 开始导航

  • 当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容

  • 请求过程中，tab处于loading状态

• 读取响应

  • 网络线程接受HTTP响应后，先检查响应头的媒体类型(MIME type)

  • 如果响应主题是一个HTML文件，浏览器将内容交给渲染进程处理

  • 如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理

    

• 寻找渲染进程

  • 网络进程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程

  • 主进程通过IPC消息告知渲染进程去处理本次导航

  • 渲染进程开始接受数据并告知主进程自己已开始处理，导航借书，进入文档加在数据

  • 渲染进程

    • 加载资源

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

    • 构建渲染树

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

    • 页面布局

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

    • 页面绘制

      • 构建图层：为特定的节点生成专用图层
      • 绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
      • 合成线程接受惠玲生成图块
      • 栅格线程将图块进行栅格化
      • 展示在屏幕上
        

• 前端性能performance

  • 首屏优化

    • 压缩、分包、删除无用代码

    • 静态资源分离

    • JS脚本非阻塞加载

    • 缓存策略

    • SSR

    • 预置loading、骨架屏

  • 渲染优化

    • GPU加速

    • 减少回流、重绘

    • 离屏渲染

    • 懒加载

  • JS优化

    • 防止内存泄露

    • 循环尽早break

    • 合理使用闭包

    • 减少Dom访问

    • 防抖、节流

    • Web Workers

4、跨端容器

• 为什么需要跨域

  • 开发成本、效率

  • 一致性体验

  • 前端开发生态

    

• 跨端方案

  • webview

    • Webview，即网页视图，用于加载网页url，并展示其内容的空件。

    • 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发

    • 常用分类

      

    • 优势

      • 一次开发，处处使用，学习成本第
      • 随时发布，即时更新，不用下载安装包
      • 移动设备性能不断提升，性能有保障
      • 通过JSBridge和原生系统交互，实现复杂功能

    • WbeView使用原生能力

      • Javascript调用Native
        • API注入：Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截
        • 使用Webview URL Scheme跳转拦截
        • IOS上window.webkit.messageHandler直接通信
      • Native调用Javascript
        • 直接通过webview暴露的API执行JS代码
        • IOS webview.stringByEvaluatingJavaScriptFromString
        • Android webview .evaluateJavascript
      • WebView和Native通信
        • JS环境中提供通信的JSBridge
        • Native端提供SDK响应JSBridge发出的调用
        • 前端和客户分别实现对应功能模块
          
        • 实现一个简易JSBridge
          
          

  • 小程序

    • 渲染层-webview

    • 双线程，多webview架构

    • 数据通信，Native转发

      

  • RN/WeeX

    • 原生组件渲染

    • React/Vue框架

    • virtual dom

    • JSBridge

      

  • Lynx

    • Vue

    • JS Core / V8

    • JSBinding

    • Native UI / Skia

      

  • Flutter

    • wideget

    • dart vm

    • skia图形表

      

• 通用原理

  • UI组件

  • 渲染引擎

  • 逻辑控制引擎

  • 通信桥梁

  • 底层API抹平表现差异

    

• 跨端方案对比

  

4、总结