浏览器的工作原理整理
浏览器的结构
浏览器的主要组件包括:
- 用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外,其他显示的各个部分都属于用户界面。
用户界面后端——用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与web应用无关的通用接口,而在底层使用操作系统的用户界面方法。
浏览器引擎——在用户界面和渲染引擎之间传递指令。
渲染引擎——负责显示请求的内容。如果请求的内容是HTML,它就解析HTML和css内容,并将解析后的内容显示在窗口上。
网络——用于网络调用。比如http请求。其接口与web应用无关,并为所有web应用提供底层实现。
JavaScript解释器。用于解析和执行 JavaScript 代码,比如chrome的javascript解释器是V8。
- 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如cookie。新的HTML5规范定义了“网络数据库”,这是一个完整的且轻便的浏览器内数据库。
值得注意的是,不同于大多数浏览器,chrome浏览器为每个标签页都分配了各自的渲染引擎实例,每个标签页都是一个独立的进程(即每个标签页都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面崩溃也不会导致其他的标签页被关闭)
浏览器进程与线程
- 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
- 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程可以有多个线程)
浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程)
浏览器的进程为以下几种:
- Browser进程:浏览器的主进程(负责协调、主控),只有一个
- 第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件的时候才创建
- GPU进程:最多一个,用于3D绘制
- 浏览器渲染进程(内核):默认每个tab页面一个进程,互不影响,控制页面渲染,脚本执行,事件处理等(有时会优化,如多个空白tab会合成一个进程)
每一个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协议,就会新建一个网络线程去处理资源下载。因此浏览器会根据解析出得协议,开辟一个网络线程,前往请求资源
进程之间的通信
五种通讯方式总结:
- 管道:速度慢,容量有限,只有父子进程能通讯
- FIFO:任何进程间都能通讯,但速度慢
- 消息队列:容量受到系统限制,且要注意第一次读的时候,要考虑上一次没有读完的数据的问题
- 信号量:不能传递复杂消息,只能用来同步
- 共享内存区:能够很容易控制容量,速度快,但要保持同步,比如一个进程在写的时候,另一个进程要注意读写的问题,相当于线程种的线程安全,当然,共享内存区同样可以用作线程间通讯,不过没有这个必要,线程间本来就已经共享了统一进程内的一块内存。
由于浏览器每一个tab页面即为一个进程,页面间的通信即为进程的通信
- 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。它时解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
浏览器的工作原理整理相关推荐
- 史上最全!图解浏览器的工作原理
可能每一个前端工程师都想要理解浏览器的工作原理. 我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么: 我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优 ...
- How browsers work -Behind the scenes of modern web browsers 浏览器到底是怎么工作的、浏览器的工作原理(完整中文翻译)
How browsers work -Behind the scenes of modern web browsers 有空翻译一下这篇必读的文章 -浏览器到底是怎么工作的.浏览器的底层原理是啥.浏览 ...
- 前端必读:浏览器内部工作原理
前端必读:浏览器内部工作原理 作者: Tali Garsiel 发布时间: 2012-02-09 14:32 阅读: 2133 次 原文链接 全屏阅读 [收藏] http://kb.c ...
- 现代浏览器的工作原理
英文原文:Tali Garsiel,编译:zzzaquarius 简介 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.com到你看到goo ...
- 【转载】现代浏览器的工作原理
原文:http://taligarsiel.com/Projects/howbrowserswork1.htm 编译:zzzaquarius http://blog.jobbole.com/1274 ...
- 从渲染页面的角度来聊一聊浏览器的工作原理
从渲染页面的角度来聊一聊浏览器的工作原理 页面内容快速加载和流畅的交互是用户希望得到的Web体验,因此,开发者应力争实现这两个目标. 了解如何提升性能和感知性能,有助于了解浏览器的工作原理. 概述 快 ...
- WEB HTTP:浏览器HTTP协议漫谈、请求对象Httprequest、响应对象HttpResponse、浏览器内部工作原理(待完善)
0 系列目录 WEB请求处理 WEB请求处理一:浏览器请求发起处理 WEB请求处理二:Nginx请求反向代理 WEB请求处理三:Servlet容器请求处理 WEB请求处理四:Tomcat配置实践 WE ...
- javascript教程系列20: 前端必读,浏览器内部工作原理(转)
目录 一.介绍 二.渲染引擎 三.解析与DOM树构建 四.渲染树构建 五.布局 六.绘制 七.动态变化 八.渲染引擎的线程 九.CSS2可视模型 英文原文:How Browsers Work: Beh ...
- 前端必经之路:浏览器底层工作原理
今天要写的是一篇关于浏览器底层工作原理的技术科普文,作为一个前端爱好者,在平时的日常工作中,最常打交道的莫过于浏览器了.不过,大多数人并不知道,在我们打开浏览器并浏览一个网页时,浏览器底层具体进行了什 ...
最新文章
- 泰尔指数r语言_还在用Excel算区位基尼系数?用geo.gini吧!
- TFS的Web门户工作项(七)
- 【小白学PyTorch】18.TF2构建自定义模型
- ML in Action 决策树
- xml mysql 模糊查询_mybatis+Spring mysql的模糊查询问题
- mysql8双机热备高可用配置
- Centos7配置本地yum安装源出现错误
- python中提取pdf文件某些页_付费?是不可能的!处理 PDF 只需几行代码,彻底解放双手!...
- maven打包报错:Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.5:test
- github API 实例 python源码 爬取用户信息
- windows 屏幕保护色设置
- 利用身体记忆GRE词汇
- 使用健康档案数据计算OLT的用户光衰不合格率
- 【前端冷知识】冷门函数之Math.hypot
- 判断一个数能否同时被3和5整除
- 做个什么网站可以赚钱,这6种网站最好赚钱!
- 刚写完的 基于微信的房产中介预约看房小程序 毕业设计毕设源码
- ASCII Grid
- 有哪些道理是你毕业多年后才明白的?
- BSCI验厂考勤资料工资作假不一致解决方案
热门文章
- Python urllib – Python 3 urllib
- .net 编译、反编译、查壳、脱壳、反混淆工具
- 在pcduino开发板上写驱动控制板载LED的闪烁
- 开课吧Java课堂:字符串如何处理?
- 6.相对与绝对目录 cd mkdir rmdir rm
- ssl客户端与服务端通信的demo
- varnish在Debian9.4安装和配置
- Java IO 之 介质流
- 查询软件和硬件列表清单[将文章里代码另存为 list.vbs,双击运行就会出现一个html页面]...
- 【DP + 卖股票】LeetCode 714. Best Time to Buy and Sell Stock with Transaction Fee