浏览器简介

浏览器介绍

浏览器简介

什么是浏览器

浏览器是网页浏览器(Web Browser)的简称。是一种用于检索并展示万维网信息资源的应用程序。这些信息资源包括网页、图片、影音或其他内容,这些资源信息由统一资源标识符标志。

五大主流浏览器

浏览器名称浏览器内核
IETrident内核
Chromwebkit内核》Blink内核
FirefoxGecko 内核》
Safariwebkit内核
OperaPresto 内核》webkit内核》Blink内核

浏览器的分类

根据展示设备,浏览器基本都存在对应的版本,浏览器分类包括:

  • pc端浏览器
  • 移动端浏览器
    由于手机等移动设备的普及了,也就越来越多的移动端的网页展示,目前移动端的展示主要包括webkit内核和其他浏览器。
移动端浏览器与PC端浏览器的区别
  • 排版布局
    • PC端的网页展示一般是比例固定的
    • 移动端的页面主要是需要考虑页面的自适应
      • 包括移动设备旋转导致的问题
      • 刘海屏手机的出现导致的页面遮挡或对齐问题
      • 以及全面屏手机出现将会带来的展示方面的变化
  • 兼容性问题
    • PC端主要考虑的是浏览器的兼容性
    • 移动端主要考虑的是手机的兼容性
  • 事件的触发
    • PC端主要是鼠标点击触发等
    • 移动端主要是触屏触发事件,并且移动端的输入框聚焦的时候会引发弹出键盘的行为

在移动端浏览器中,微信的内置浏览器的行为很大程度上与其他浏览器的行为存在差异,l例如微信内置浏览器不支持下载功能,很多下载功能是引导用户在第三方软件(其他浏览器中打开并下载)操作,当然桌面端版本微信可以正常下载。

移动端Andriod 版 与 IOS版 也存在差异。

浏览器页面展示不同的原因

浏览器种类有区别,而之所以存在区别的主要原因:

  • 浏览器的内核
  • 浏览器对不同语言的支持性不同
  • 同一种浏览器不同版本之间的支持性也可能存在不同

什么是浏览器内核

浏览器的核心部分是 “Rendering engine",渲染引擎,也就是我们通常所说的浏览器内核。浏览器的渲染引擎用于负责解释网页的语法(HTML标记语言,javascript 语言),并渲染(显示)网页。因为浏览器的内核决定了如何显示网页的内容以及页面的格式信息,因此不同的内核就可能对网页的解释不同,也就可能导致同一网页在不同的浏览器内核下展现不同的效果,因此我们往往需要测试同一网页在不同的浏览器的展示效果,以保证展现内容的一致性。

浏览器内核的主要技术

浏览器内核的主要技术分支包括:

  • 排版渲染引擎
    主要负责网页的内容展示以及页面的格式信息,也即我们通常所说的渲染引擎
  • JavaScript引擎
    主要是用于解析javascript语言,对javascript进行渲染,通过javascript语言的执行可以改变dom的展示,实现页面的动态变化,并且Javascript的渲染速度越快的话,动态网页的展示也会越快。
  • 其他

浏览器的主要构成

目前感觉看到的比较合理的浏览器的构成主体是:
在这里插入图片描述
详细内容包括:

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

  • 浏览器引擎
    查询和操作渲染引擎的入口,在用户界面和渲染引擎之间传送指令

  • 渲染引擎
    负责呈现请求内容。例如请求内容是HTML,渲染引擎负责解析HTML以及CSS,并且渲染解析后的内容到屏幕上。

  • 网络链接
    处理形如HTTP的网络请求。它有针对不同平台的实现接口,并为所有平台提供底层实现。

  • 用户界面的后台处理程序(UIBackend)
    用于绘制类似于bombo盒子的小部件以及一些窗口。它抛出了各个平台通用的接口。它的底层使用了操作系统的用户界面方法。

  • JS引擎
    用于解析和执行Javascrip代码。

  • 数据存储
    这是一个持久层。浏览器需要在硬盘上保存各种各样的数据,比如cookie/localStorage等。新的 HTML 规范 (HTML5)定义了’webdatabase网络数据库’,这是一个完整(但是轻便)的浏览器内数据库

浏览器与搜索引擎的区别

  • 搜索引擎
    是用来检索你需要的信息。搜索引擎可以用来帮助搜索你需要的信息,但前提是你具有一个浏览器 。搜索 引擎是根据一定的策略,用特定的计算机程序(一定的算法),从网上搜集并整理信息并通过浏览器呈现给用户,是一项检索服务。
  • 浏览器
    是用来展示检索出的内容,也即一个程序,通过这个程序可以链接互联网,浏览网页,获取服务器上的资料
  • 浏览器的搜索框
    是搜索引擎和浏览器合作的产物,为的是方便用户在浏览器上直接使用搜索

浏览器渲染的机制

值得注意的是,渲染过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

从进程与线程的角度解析浏览器的工作原理

进程与线程

进程

进程是cpu资源分配的最小单位(是拥有资源和独立运行的最小单位):学术上说,进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程,是操作系统进行资源分配和调度的一个独立单位,是应用程序运行的载体。我们这里将进程比喻为工厂的车间,它代表CPU所能处理的单个任务。任一时刻,CPU总是运行一个进程,其他进程处于非运行状态。

线程

线程是cpu调度的最小单位(线程是建立在进程的基础上的一个程序运行单位,一个进程中可以有多个线程):在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位。任务调度采用的是时间片轮转的抢占式调度方式,而进程是任务调度的最小单位,每个进程有各自独立的一块内存,使得各个进程之间内存地址相互隔离。后来,随着计算机的发展,对CPU的要求越来越高,进程之间的切换开销较大,已经无法满足越来越复杂的程序的要求了。于是就发明了线程,线程是程序执行中一个单一的顺序控制流程,是程序执行流的最小单元。这里把线程比喻一个车间的工人,即一个车间可以允许由多个工人协同完成一个任务。

进程和线程的区别和关系
  • 进程是操作系统分配资源的最小单位,线程是程序执行的最小单位。
  • 一个进程由一个或多个线程组成,线程是一个进程中代码的不同执行路线;
  • 进程之间相互独立,但同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。
  • 调度和切换:线程上下文切换比进程上下文切换要快得多。
多进程和多线程
  • 多进程:多进程指的是在同一个时间里,同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的,比如你可以听歌的同时,打开编辑器敲代码,编辑器和听歌软件的进程之间丝毫不会相互干扰。
  • 多线程是指程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务,也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。

多线程与单线程

那么浏览器是单进程还是多进程,单线程还是多线程?

打开google的任务管理器 :shift+esc
在这里插入图片描述

由上图可以看出进程主要分为:

  • 浏览器进程
    浏览器的主进程(负责协调、主控),只有一个。主要作用就是对浏览器的用户界面(详情查看浏览器的主要构成小节),包括除主体部分的显示,与用户交互。如前进,后退等。 负责各个页面的管理,创建和销毁其他进程。 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上网络资源的管理,下载等

  • GPU进程
    用于3D绘制等(可禁止掉,而且这个与页面渲染过程的Composite Layers 有关系,后面性能优化相关文章学习到再来研究一下GPU)

  • 浏览器渲染进程(也即标签页进程,内部是多线程的):每一个标签页的打开都会创建一个浏览器渲染进程(浏览器内核)。默认每个Tab页面一个进程,互不影响。主要作用为页面渲染,脚本执行,事件处理等

  • 其他进程
    其他进程包括实用程序与辅助框架(网络服务/媒体服务,百度/双击等插件进程,每个浏览器安装的插件都是一个进程)等

js引擎

单线程

解析器

什么是解析器
解析器于引擎之间的关系
html css js的解析顺序是什么,是否会相互影响

不同标签页之间存储的数据是否会相互影响

类似于已经登陆的在另一个页面刷新也是登陆状态/数据存储等/计时之间是否存在影响

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三知之灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值