简析浏览器工作流程

浏览器内核

主流内核:Trident(IE)、Gecko(FireFox)、Webkit(Safari)、blink(Chrome)、Presto(opera前内核、已废弃)

浏览器内核分为两部分:渲染引擎、js引擎,随着js引擎越来越独立,内核就倾向于只指渲染引擎

  • 渲染引擎:负责对网页语法的解释(HTML、javaScript、引入css等),并渲染(显示)网页

  • js引擎:javaScript的解释、编译、执行(V8、SpiderMonkey、JavaScriptCore

2008 年,谷歌公司发布了 chrome 浏览器,浏览器使用的内核被命名为 chromium,基于苹果开源的Webkit

2013 年 ,谷歌Webkit分道扬镳,在 Chromium 项目中研发 Blink 渲染引擎,内置于 Chrome 浏览器之中

移动端webview内核

  • Android

    在Android4.4以前,webview是Android webkit 浏览器内核,很多HTML5标准语法不支持,比如indexeddb、webgl等,canvas性能也非常差 Android4.4起,变成了chromium内核,内核版本是chrome30,性能和现代语法支持大幅提升 从Android5开始,webview脱离rom可单独更新,伴随着chrome的发版,google会在google play store上同步更新Android system webview(国内存在无法更新问题)

    个别厂商会定制webview;腾讯使用X5内核(APP也可以集成,支持webrtc网页浏览器进行实时语音对话或视频对话)

    不同于PC端chromium内核的浏览器,默认与APP在同一进程,可开启独立进程运行

  • iOS

    从iOS8起,Apple推出了wkwebview,在app外的独立进程执行,使用更快的Nitro JavaScript引擎(2008 年苹果重写了JSCore,叫做 SquirrelFish,后来是 SquirrelFish Extreme,又叫 Nitro,但早期uiwebview被限制使用),由于iOS13将uiwebview列入非公开api,未来会禁止使用uiwebview的应用上架

进程架构(Chrome)

chrome提供了任务管理器,从中可以查看到正在运行的进程:

Chrome任务管理器

从上图可以看出浏览器只打开了一个标签页,但是却有十多个进程,抛开插件进程外还有5个进程

浏览器进程并不是一开始就是这样的结构,这里先不解释每一个进程的作用,而是回顾一下浏览器进程架构的演化历史

单进程浏览器时代

浏览器的所有功能模块都是运行在同一个进程里,包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。

单进程浏览器架构

优点:资源占用少,无需进程间通信

缺点:

  • 不稳定:一个模块的意外崩溃会引起整个浏览器的崩溃,早期浏览器需要借助于插件来实现诸如 Web 视频、Web 游戏等各种强大的功能,但是插件是最容易出问题的模块

  • 不流畅:所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的,这就意味着同一时刻只能有一个模块可以执行

  • 不安全:插件可以使用 C/C++ 等代码编写,通过插件可以获取到操作系统的任意资源,当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑

多进程浏览器

多进程浏览器架构
Chromium官方架构图

Chrome的页面是运行在单独的渲染进程中的,同时页面里的插件也是运行在单独的插件进程之中,而进程之间是通过 IPC 机制进行通信

稳定性:进程是相互隔离的,所以当一个页面或者插件崩溃时,影响到的仅仅是当前的页面进程或者插件进程

流畅度:JavaScript 也是运行在渲染进程中的,所以即使 JavaScript 阻塞了渲染进程,影响到的也只是当前的渲染页面,而并不会影响浏览器和其他页面

安全性:多进程架构的额外好处是可以使用安全沙箱进行进程隔离,Chrome 把插件进程和渲染进程锁在沙箱里面,这样即使在渲染进程或者插件进程里面执行了恶意程序,恶意程序也无法突破沙箱去获取系统权限

最新Chrome架构

最新Chrome架构图

最新的 Chrome 浏览器包括:1 个浏览器(Browser)主进程、1 个 GPU 进程、1 个网络(NetWork)进程、多个渲染进程和多个插件进程。他们主要负责的任务如下:

  • 浏览器进程:主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。

  • 渲染进程:核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中,默认情况下,Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑,渲染进程都是运行在沙箱模式下。

  • GPU 进程:其实,Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果,只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制,这使得 GPU 成为浏览器普遍的需求。最后,Chrome 在其多进程架构上也引入了 GPU 进程。

  • 网络进程:主要负责页面的网络资源加载,之前是作为一个模块运行在浏览器进程里面的,直至最近才独立出来,成为一个单独的进程。

  • 插件进程:主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。

再来看看文章开头的截图,不难看出图中各个进程与架构设计中一一对应关系:

Chrome任务管理器

注:这里还多了一个V8代理解析工具,是因为我开启了代理,Chrome支持使用JavaScript来写连接代理服务器脚本,又称为在线pac代理脚本。刚开始的时候Chrome是在浏览器进程里面解析pac代理脚本的,由于是JavaScript脚本,所以需要在浏览器进程里面引入V8,不过把V8运行在浏览器进程似乎不太好,于是Chrome团队后来就把这个功能独立出来一个进程了,这个进程就叫着“Utility: V8 Proxy Resolver”

FireFox的多进程架构

FireFox通过Electrolysis(e10s)项目提供多进程支持

e10s 多进程功能的发展路线综述

火狐任务管理器

网络请求

通过一张示意图来分析浏览器进行网络请求的大致流程

浏览器请求流程

缓存流程

浏览器缓存示意图
浏览器缓存获取流程

详细的缓存策略可以参考运维知识体系笔记

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349