浏览器工作原理(一):浏览器的进程与线程

参考:https://segmentfault.com/a/1190000012925872#articleHeader4

一、浏览器是多进程的,浏览器内核是多线程的,js引擎是单线程的

1、浏览器是多进程的,主要进程包括以下几个:

进程名 个数 作用
浏览器主进程 1个
主控进程,负责协调其他各进程

  • 负责浏览器界面显示,与用户交互。如前进,后退等
  • 负责各个页面的管理,创建和销毁其他进程
  • 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上
  • 网络资源的管理,下载
  • ……

渲染进程

一个Tab页面一个
即,浏览器内核,内部是多线程的,主要作用:

  • 页面渲染
  • 脚本执行
  • 事件处理
  • ……
插件进程 一类插件一个 当使用该插件时才创建
GPU进程 0或1个 用于3D绘制等

2、浏览器内核是多线程的,主要线程包括以下几个:

线程名 作用 线程关系
GUI渲染线程
负责渲染浏览器界面,包括

  • 解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
  • 重绘(Repaint)及回流(reflow)处理

GUI渲染线程与JS引擎线程是互斥的

  • 由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。
  • 这种互斥关系就是为了防止渲染出现不可预期的结果
  • 当JS引擎执行时GUI线程会被挂起,GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行
  • 由此也可推断,JS如果执行时间过长就会阻塞页面
JS引擎线程
也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)

  • JS引擎线程负责解析Javascript脚本,运行代码。
  • JS引擎一直等待着任务队列中任务的到来,然后加以处理
  • 一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序
事件触发线程
归属于渲染进程而不是JS引擎,用来控制事件循环

  • 当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中
  • 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理

注意:由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理,JS引擎空闲时才会执行

 
定时触发器线程
setIntervalsetTimeout所在线程

  • 浏览器定时计数器并不是由JS引擎计数的
  • js引擎是单线程的,如果处于阻塞线程状态就会影响记计时的准确,因此,通过单独的线程来计时并触发定时
  • 计时完毕后,添加到事件队列中,等待JS引擎空闲后执行

注意:W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。

 
异步http请求线程
XMLHttpRequest在连接后是通过浏览器新开一个线程请求

将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调放入事件队列中。再由JavaScript引擎执行。

 

原文地址:https://www.cnblogs.com/zs-note/p/9042282.html

时间: 2024-10-08 10:54:55

浏览器工作原理(一):浏览器的进程与线程的相关文章

[转帖]浏览器工作原理

浏览器工作原理详解 原贴地址不详 .. 这篇文章是以色列开发人员塔利·加希尔的研究成果.她在查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码.她写道: 在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了.但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网络浏览器的内幕了.呃,里面只有数以百万行计的C++ 代码… 本篇文章的英文原版:How Browsers Work: Behind the

浏览器工作原理

浏览器工作原理的实质就是实现http协议的通讯,具体过程如下: HTTP通信的流程,大体分为三个阶段:1. 连接 服务器通过一个ServerSocket类对象对8000端口进行监听,监听到之后建立连接,打开一个socket虚拟文件.2. 请求 创建与建立socket连接相关的流对象后,浏览器获取请求,为GET请求,则从请求信息中获取所访问的HTML文件名,向服务器发送请求.3. 应答 服务收到请求后,搜索相关目录文件,若不存在,返回错误信息.若存在,则想html文件,进行加HTTP头等处理后响应

了解浏览器工作原理-初步

作者:zccst 同样,先感谢同事们的技术分享,使我开始关注浏览器工作原理.(其实很早就想关注,但由于各种各样的原因一直拖延着) 先留一个链接,慢慢攒着 浏览器的工作原理:新式网络浏览器幕后揭秘(转)了解浏览器工作原理-初步,布布扣,bubuko.com

浏览器工作原理及相关内核、技术介绍

好吧,我最喜欢的就是原理方面的介绍了..好处有两个:1.了解原因更方便与工(zhuang)作(bi):2.原理都是相同的,大道归一啊(吐) 正文开始: 一.浏览器工作原理(简化版) 1.浏览器用来干什么用 浏览器的主要功能是将用户请求访问的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF.image及其他格式.用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置. HTML和CSS

[转]浏览器工作原理

作为前端,了解浏览器的工作原理还是很有必要的,这篇文章可以帮助我们把很多前端知识串起来,读了之后受益良多,所以转了过来.文章非常长,译文的排版不是很清晰,我对照原文重新排了个版,并且修正了一些明显的翻译问题,本文省略了原文中文法解析部分,因为感觉这部分太深入了,对前端工作帮助不大:如果对这部分感兴趣可以查看原文或译文原文在这里:http://taligarsiel.com/Projects/howbrowserswork1.htm译文在这里:http://blog.csdn.net/zzzaqu

浏览器工作原理——页面加载

浏览器工作大流程 来看个图: 从上面这个图中,我们可以看到那么几个事: 1)浏览器会解析三个东西: 一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree. CSS,解析CSS会产生CSS规则树. Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Render

浏览器工作原理学习记录

浏览器是我们前端开发者工作的平台,是我们最长用的软件,是我们必须要了解的知识面,做个学习记录. 现在人都离不开网络,在网上我们能干很多事情,用途最多的就是浏览器,它是一扇窗户,打开这扇窗户可以看到大千世界的变化,是人类获取信息重要的软件工具之一.对于单纯的使用者只知道怎么使用浏览器去上网冲浪,而对于前端开发者需要了解这个浏览器是怎么让我们可以自由的在网络世界遨游,它是怎么实现大千世界信息的展示的?分析开始... 什么是浏览器? 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户

浏览器工作原理简介

一.浏览器主要构成 1. 用户界面 - 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分. 2. 浏览器引擎 - 用来查询及操作渲染引擎的接口. 3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来. 4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作. 5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某

浏览器工作原理(二):浏览器渲染过程概述

参考:https://segmentfault.com/a/1190000012925872#articleHeader4 浏览器器内核拿到内容后,渲染大概可以划分成以下几个步骤: 解析html建立dom树 解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树) 布局render树(Layout/reflow),负责各元素尺寸.位置的计算 绘制render树(paint),绘制页面像素信息 浏览器会将各层的信息发送给GPU,GPU会将各层合成(com