客户端容器（完整版）｜ 青训营笔记

自然选择后退四
127 阅读5分钟

客户端容器

  • web浏览器及跨端方案

目录

  • 浏览器架构
  • 渲染进程
  • Chrome运行原理
  • 跨端容器

浏览器架构

演进

  • 单进程：所有模块在同一个进程里（早期受硬件限制，另外对于比较基础的进程还可以使用）
  • 多进程架构： （常用）主进程、网络进程、渲染进程、GPU进程、插件进程
  • 面向服务架构：将原来的UI，数据库，文件，设备和网络等作为一个个独立的基础服务，进程之间访问要先定义好接口，通过rpc通信进行交互（可能替代多进程架构）
  • 对比图：扩展性，安全性，稳定性，流畅度

多进程分工

  • 浏览器（主进程）：主要负责页面展示逻辑，用户交互，子进程管理；包括地址栏、书签、前进、后退、收藏夹等
  • GPU进程：负责UI绘制，包含整个浏览器全部UI
  • 网络进程：网络服务进程，负责网络资源加载
  • 标签页（渲染进程）：控制tab内的所有内容，将HTML、CSS和JavaScript转换为用户可交互的网页
  • 插件进程：控制网站运行的插件，比如flash，ModHeader等
  • 其他进程：适用程序Storage/Network/Audio Service等

渲染进程

常见浏览器内核

  • edge

多线程架构

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

线程

  • JS引擎：js脚本，js程
  • GUI渲染：渲染浏览器界面，解析html，css，构建dom树和render树（JS和GUI互斥）
  • 定时器触发：setTimeout
  • 网络线程：
  • 事件触发：控制事件循环，从任务堆里取出事件运行

JS引擎对比渲染引擎

  • js要去操纵dom树，需要通过bridge而不是直接操作

image.png

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

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

一道笔试题

image.png 首先执行最后一行consolelog，输出20，此时time10输出已经加入了js渲染队列，所以紧接着也输出time10，20.最后再等10ms左右输出time30.

Chrome运行原理

如何展示网页

image.png

输入处理

  • URL或者query

开始导航

  • 发出请求

读取响应

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

寻找渲染进程

image.png

资源加载

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

构建渲染树

  • 构建DOM树（转换HTML
  • 构建CSSOM树（转换CSS让浏览器理解
  • 构建渲染树

页面布局

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

页面绘制

  • 构建图层
  • 绘制图层
  • 生成图块
  • 图块栅格化（GPU加速）
  • 显示到屏幕上

首屏优化

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

渲染优化

  • GPU加速（应用：改透明度，transform动画，新建图层。一般会给元素打备注告诉浏览器这部分可能会用到GPU加速）
  • 减少回流、重绘（应用left，top，visibility，capability最好不用）
  • 离屏渲染（开一片内存缓冲区，把需要渲染的东西先在这里渲染好了，再直接显示到显示器上。例如canvas，需要用到离屏渲染）
  • 懒加载（将需要加载的资源提前添加到本地，需要显示的时候直接到缓存中去取）

JS优化

  • 防止内存泄漏
  • 循环尽早break
  • 合理使用闭包
  • 减少DOM访问
  • 防抖、节流
  • Web Workers
  • （PS.感觉这部分很实用，但是ppt上只有这些内容，老师干讲一些实践应用，专有名词听不懂）

跨端容器

为什么需要跨端

  • 降低开发成本和效率
  • 使用户体验一致
  • 前端开发生态比较百花齐放，所以跨端开发比较流行

有哪些跨端方案

  • webview
  • 小程序
  • RN/WeeX
  • Lynx（字节内部使用）
  • Flutter

WebView

  • 即网页视图，用于加载网页URL，并展示其内容的控件
  • 可以内嵌到移动端app内，实现前端混合开发，大多数混合框架都是基于WebView的二次开发，比如Ionic、Cordova

常用WebView分类

image.png

使用WebView的优势

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

WebView使用原生能力

  • JavaScript调用Native
  • Native调用JavaScript

小程序

  • 2017第一个微信小程序，随即中文互联网进入轻应用时代
  • 渲染层：webview
  • 双线程：多webview架构
  • 数据通信： Native转发

React Native/WeeX

  • 原生组件渲染
  • React/Vue框架
  • virtual dom
  • JSBridge

Lynx（没有开源哈哈）

  • 优势在于主题渲染
  • Vue
  • JS Core/V8
  • JSBinding
  • Native UI/Skia

Flutter

  • wideget（基础UI组件
  • dart vm（dart语言的虚拟运行环境
  • skia图形库
  • （学习成本比较高，谷歌搞的，国外热度比较高）

通用原理

  • UI组件
  • 渲染引擎
  • 逻辑控制引擎
  • 通信桥梁
  • 底层API抹平表现差异

跨端方案对比

image.png

总结

思维导图

image.png

心得体会

终于开始接触浏览器底层的运行原理、不同浏览器的内核、js渲染等比较偏实际的内容。或许在实战中可以将这些知识融汇贯通。 （注：文章内截图均来源于字节内部课程，如有不妥请联系作者删除）

avatar
文章
阅读
粉丝