客户端容器 web浏览器以及跨端方案 ｜ 青训营笔记

用户5811957596722
87 阅读8分钟

0005.客户端容器 web浏览器以及跨端方案 ｜ 青训营笔记.md

[TOC]

一、浏览器架构

1.浏览器架构演进

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

2.浏览器架构对比

p9GmE9g.png

3.多进程分工

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

二、渲染进程

1.常见浏览器内核

内核浏览器JS引擎补充说明
TridentIE4-11JScript, Chakra出生于1994年，IE8以前使用Script引擎，IE9开始使用Chakra引擎
GeckoFirefoxSpiderMonkeyGecko内核主要用在Firefox浏览器上，同时是一个跨平台的内核，支持在 Windows、BSD、Linux、Mac OS X中使用
WebkitSafari, Chrome. Android浏览器JavaScriptCore由Apple公司技术团队开发，并在2005年开源
BlinkChrome. OperaV8Google基于Webkit开发的内核，在Webkit的基础上加入多进程，沙箱等 技术，于2013年开源
EdgeEdgeChakra2015年由微软发布，用于Edge浏览器上，由于性能较差，运行不稳定等 原因，2018年微软将Edge浏览器内核迁移到Chromium
Trident+Web kit(Blink)国产浏览器QQ、360、搜 狗、UC等都有都有早期银行系统都是在IE上进行开发，想要支持银行系统就切换到Trident内 核，想要体验就切到Webkit内核

2.多线程架构

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

线程功能
JS引擎负责解析is脚本，运行is程序，每个渲染进程下面只有一个js引擎线 程。与GUI渲染线程互斥，如果js任务执行事件过长，会导致页面卡顿
GUI渲染负责渲染浏览器界面，解析html.css，构建dom树和render树，布 局、绘制，和js引擎线程互斥，GUI更新会在js引擎空闲时立即执行
定时器触发定时器所在线程，setTimeout、setInterval计时完毕后，将回调添加到事件队列，等待js引擎执行
网络线程在XHR、Fetch等发起请求后新开一个网络线程请求，如果设置了回 调函数，在状态变更时，将回调放入事件队列，等待js引擎执行
事件触发由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行

3.JS引擎VS渲染引擎

  • 解析执行JS
  • XML解析生成渲染树、显示在屏幕
  • 桥接方式通信

p9GnYi8.png

4.多线程工作流程

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

p9GnWQJ.png

三、Chrome运行原理

1.如何展示网页

浏览器地址输入URL后发生了什么

p9Gaisx.png

2.输入处理

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

3.开始导航

  • 当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容
  • 请求过程中，tab处于Ioading状态

4.读取响应

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

5.寻找渲染进程

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

6.渲染进程-资源加载

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

7.渲染进程-构建渲染树

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

8.渲染进程-页面布局

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

9.渲染进程-页面绘制

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

10.前端性能performance

  • 时间都花在哪
  • 什么情况下卡顿

11.首屏优化

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

12.渲染优化

  • GPU加速
  • 减少回流、重绘
  • 离屏渲染
  • 懒加载

13.JS优化

  • 防止内存泄漏
  • 循环尽早break
  • 合理便用闭包
  • 减少Dom访间
  • 防抖、节流
  • Web Workers

四、跨端容器

1.为什么需要跨端

  • 开发成本、效率
  • 一致性体验
  • 前端开发生态

2.有哪些跨端方案

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

3.跨端容器-WebView

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

(1)常用WebView分类

常用webview， Android，IOS、国产Android

platformwebview内核
Android4.4webviewWebkit
Android4.4以上webviewchromium
Android 国内部分X5 webviewchromium 改造版
IOSUlwebviewWebkit
IOS8 以上WKwebviewWebkit

(2)使用WebView优势

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

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

==Javascript 调用Native==

  • API注入: Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截

  • 使用Webvew URLScheme 跳转栏截

  • IOS上 window.webkit.messageHandler 直接通信

==Native 调用Javascript==

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

(4)WebView<->Native 通信

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

4.跨端容器-小程序

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

5.跨端容器-React Native/WeeX

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

6.跨端容器-Lynx

  • Vue
  • JS Core /V8
  • JSBinding
  • Native UI/ Skia

7.跨端容器-Flutter

  • wideget
  • dart vm
  • skia图形库

8.跨端容器-通用原理

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

9.跨端方案对比

序号学习成本开发体验生态活跃度补充说明
webview★★★★★★★★★★★生态繁荣，标准统一，多端兼容，开发成本低，lonic、uni- app等开发框架，Native插件丰富
小程序★★★★★★★★uni-app、wepy等开发框架，强依赖平台能力，适合小型应 用，小游戏
RN★★★★★★★★★原生UI组件、React到RN无缝切换，适合React开发者
WeeX★★★★★★★★原生UI组件，主要淘系App应用
Lynx★★★★★★★原生UI组件，正考虑skia渲染，字节旗下App内应用较多
Flutter★★★★★★★★★★dart开发，学习成本最高

10.跨端容器-思考?

  • 同样是基于webvew渲染，为什么小程序体验比webview流畅
  • 未来的跨端方案会是什么
avatar
文章
阅读
粉丝