浏览器的工作原理整理

2018-11-15 admin

浏览器的结构

浏览器的主要组件包括:

  1. 用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外,其他显示的各个部分都属于用户界面。

  2. 用户界面后端——用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与web应用无关的通用接口,而在底层使用操作系统的用户界面方法。

  3. 浏览器引擎——在用户界面和渲染引擎之间传递指令。

  4. 渲染引擎——负责显示请求的内容。如果请求的内容是HTML,它就解析HTML和css内容,并将解析后的内容显示在窗口上。

  5. 网络——用于网络调用。比如http请求。其接口与web应用无关,并为所有web应用提供底层实现。

  6. JavaScript解释器。用于解析和执行 JavaScript 代码,比如chrome的javascript解释器是V8。

  7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如cookie。新的HTML5规范定义了“网络数据库”,这是一个完整的且轻便的浏览器内数据库。

clipboard.png

值得注意的是,不同于大多数浏览器,chrome浏览器为每个标签页都分配了各自的渲染引擎实例,每个标签页都是一个独立的进程(即每个标签页都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面崩溃也不会导致其他的标签页被关闭)


浏览器进程与线程

  • 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
  • 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程可以有多个线程)

浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程)

浏览器的进程为以下几种:

  • Browser进程:浏览器的主进程(负责协调、主控),只有一个
  • 第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件的时候才创建
  • GPU进程:最多一个,用于3D绘制
  • 浏览器渲染进程(内核):默认每个tab页面一个进程,互不影响,控制页面渲染,脚本执行,事件处理等(有时会优化,如多个空白tab会合成一个进程)

clipboard.png 每一个tab页面可以看作是浏览器内核进程,然后这个进程是多线程的,他又几大类子线程:

  • GUI线程 注意:GUI渲染线程与js引擎线程是互斥的,当js引擎执行时GUI线程会被挂起(相当于被冻结),GUI更新会被保存在一个队列中等到Js引擎空闲时立即被执行
  • JS引擎线程 js引擎一直等待着任务队列中任务的到来,然后加以处理,一个tab页中无论什么时候都只有一个js线程在运行js程序
  • 事件触发线程
  • 定时器线程 setInterval与setTimeout所在的线程 浏览器定时器计数器并不是由js引擎计数的,(因为js引擎时单线程的,如果处于阻塞线程状态就会影响计时的准确) 因此通过单线程来计时并触发定时(计时完毕后,添加到事件队列中,等待js引擎空闲后执行) 注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。
  • 网络请求线程 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。

每次网络请求时都需要开辟单独的线程进行,譬如如果URL解析到http协议,就会新建一个网络线程去处理资源下载。因此浏览器会根据解析出得协议,开辟一个网络线程,前往请求资源

进程之间的通信

五种通讯方式总结:

  1. 管道:速度慢,容量有限,只有父子进程能通讯
  2. FIFO:任何进程间都能通讯,但速度慢
  3. 消息队列:容量受到系统限制,且要注意第一次读的时候,要考虑上一次没有读完的数据的问题
  4. 信号量:不能传递复杂消息,只能用来同步
  5. 共享内存区:能够很容易控制容量,速度快,但要保持同步,比如一个进程在写的时候,另一个进程要注意读写的问题,相当于线程种的线程安全,当然,共享内存区同样可以用作线程间通讯,不过没有这个必要,线程间本来就已经共享了统一进程内的一块内存。

由于浏览器每一个tab页面即为一个进程,页面间的通信即为进程的通信

  1. window.open(url,name,featrues,replace) url:(可选)为空则打开空白新窗口 name:(可选)子窗口的句柄。声明新窗口的名称。若名字已存在则在指定窗口打开。仅当同源或该脚本打开了这个窗口才可以通过名字进项指定窗口 Features (可选) 声明新窗口要显示的标准浏览器的特征(必须是打开空白窗口)。 Replace(可选) 为true的话则替换浏览历史中的当前条目(返回回不去),默认为false,创建新条目。

渲染引擎

渲染引擎也称为浏览器内核,主要时在浏览器窗口中显示所请求的内容,这是每个浏览器的核心部分。

常见的浏览器渲染引擎有两种:一是firefox使用的Gecko,这是Mozilla公司“自制”的渲染引擎。另一个是safari和chrome使用的都是webkit。

渲染流程: 渲染引擎一开始会从网络层获取请求的文档的内容,通常以8k分块的方式完成,获取了文档内容之后,渲染引擎开始正式工作 渲染引擎解析HTML文档,并将文档中的标签转化为dom节点树,同时,它会解析外部css文件以及style标签中的样式数据。这些样式信息连同HTML中的可见内容一起,被用于构建另一颗树——渲染树(RenderTree)。 渲染树由一些带有视觉属性(如颜色、大小等)的矩形组成,这些矩形将按照正确的顺序显示在屏幕上。 渲染树构建完毕之后,将会进入“布局”处理阶段,即为每一个节点分配一个屏幕坐标。再下一步就是绘制,即遍历renderTree,并使用UI后端层绘制每个节点。 注意:这个过程时逐步完成的,为了更好的用户体验,渲染引擎将会尽可能的早的将内容呈现在屏幕上,并不会等到所有的Html都解析完成之后再去构建和布局renderTree。它时解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

原文链接:https://segmentfault.com/a/1190000017019877

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45560.html

文章标题:浏览器的工作原理整理

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
回到顶部