浏览器的运行原理

一、什么是浏览器

浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件。

浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档,也可以是 PDF、 图片或其他的类型。资源的位置由用户使用URI(统一资源标符)指定。

目前使用的主流浏览器有五个:Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。

1. 浏览器按照引擎分类
Trident引擎:Internet Explorer

Webkit引擎:Chrome(28版本后基于blink,blink是webkit的一个分支)和Safar

Gecko引擎:Firefox

Presto引擎:早期Opera采用,后用webkit引擎

二、浏览器的主要构成

浏览器的主要组件包括:

  1. 用户界面:包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
  2. 浏览器引擎:用来查询及操作渲染引擎的接口。
  3. 渲染引擎:用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。
  4. 网络:用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。
  5. UI后端:用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。
  6. JS解释器:用来解释执行JS代码。
  7. 数据存储:属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术。

浏览器组成部分如图所示:

三、浏览器内核工作原理简介

渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。

默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,可以显示PDF格式,将由专门一章讲解插件及扩展,这里   只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程:

解析html以构建dom树 ->    构建render树       ->        布局render树        ->         绘制render树

渲染引擎开始解析html,并将标签转化为内容树中的dom节点。接着,它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后,将会执行布局过程,它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。

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

四、前端处理流程简介

(仅供参考,欢迎指正):

1、输入url

2、查看浏览器缓存,看是否有缓存,如果有缓存,继续查看缓存是否过期,如果没有过期,直接返回缓存页面,如果没有缓存或者缓存过期,发送一个请求。

3、浏览器解析url地址,获取协议、主机名、端口号和路径。

4、获取主机ip地址过程

(1)浏览器缓存

(2)主机缓存

(3)hosts文件

(4)路由器缓存

(5)DNS缓存

(6)DNS递归查询

5、浏览器发起和服务器的TCP连接,执行三次握手

6、三次握手连接后,浏览器发送一个http请求

7、服务器收到请求,转到相关的服务程序,期间可能需要连接并操作数据库

8、服务器看是否需要缓存,服务器处理完请求,发出一个响应

9、服务器并根据请求头包含信息决定是否需要关闭TCP连接

10、浏览器对接收到的响应进行解码

11、浏览器解析收到的响应并根据响应的内容进行构建DOM树,构建render树,渲染render树等过程

12、处理嵌入的其他资源如css文件、js文件、图片文件、音视频等文件。

原文地址:https://www.cnblogs.com/YQian/p/10604246.html

时间: 2024-10-18 18:52:13

浏览器的运行原理的相关文章

Struts2的运行原理和运行与原理

Struts2 struts2的流程图 运行机制 1.客户端发送请求.通过ActionContextCleanUp调用FilterDispatcher(struts) 2.FilterDispatcher通过ActionMapper来决定这个Request需要调用哪个Action 3.如果ActionMapper决定调用某个Action,FilterDispatcher把请求的处理交给ActionProxy 4.ActionProxy根据ActionMapping和ConfigurationMa

浏览器运行原理

(一)介绍 浏览器可以说是使用最广泛的软件,而且前端工程师很有必要了解浏览器的工作原理 目前使用的主流浏览器有5个, 1.按照引擎分类如下: Trident引擎:Internet Explorer Webkit引擎:Chrome(28版本后基于blink,blink是webkit的一个分支)和Safari Gecko引擎:Firefox Presto引擎:早期Opera采用,后用webkit引擎 其中Firefox.Chrome及Safari,Safari是部分开源的.而根据W3C(World

html的运行原理

     html的运行原理      1.本地运行       html 文件 使用 浏览器(软件)        视频文件   使用 暴风软件       2,远程访问运行          在100%情况(除了自己测试外)是远程访问html文件        html的基本结构         不管这个html 文件有多复杂,它的基本结构式          <元素 属性='属性值'...>内容</元素>          如果没有内容,可以这样写          <

Nginx FastCGI的运行原理

一.FastCGI 1.介绍 CGI全称通用网关接口 Commmon Gateway Interface 用于HTTP服务上的程序服务通信交流的一种工具,CGI程序须运行在网络服务器上. 传统CGI接口方式性能较差,由于每次HTTP服务器遇到动态程序需要重启解析器来执行解析,然后结果被返回给HTTP服务器.这在处理高并发时,几乎是不可能的,因此诞生了FastCGI.另外传统的CGI接口方式安全性也很差 一个可伸缩地.高速地在HTTP服务器和动态脚本语言间通信的接口 接口在linux下是socke

Web的运行原理

1.web工作原理 我是学习PHP网站建设的,那么网站在客户端和服务端的运行是网站运行的根本所在,那个这个运行过程是怎样的呢?我们一探就将! Web:万维网(WorldWideWeb) 服务器:我们把提供(响应)服务的计算机称作服务器(Server).  客户端:接受(请求)服务的计算机称作客户机(Client),也叫工作站(Workstations). 1.1服务器端和客户端连接原理 很简明的意思,就是在客户端请求数据,然后把服务的请求执行结果反馈给客户端. 客户机/服务器的这种计算机间的协作

Web程序的运行原理及流程(一)

自己做Web程序的开发也有两年多了 从最开始跟风学框架  到第一用上框架的欣喜若狂 我相信每个程序员都是这样过来的 在大学学习一门语言 学会后往往很想做一个实际的项目出来  我当时第一次做WEB项目看的书是struts2 + spring + hibernate 从入门到精通 迷迷糊糊的看完了  顺着步骤一步步搭建环境  也不知道花了多久才跑通  其实框架帮我做了很多事情 我自己那个时候都不知道 现在 我建议使用框架的同时 多注意框架到底帮你做了什么 这对一个web程序员的进阶非常重要 以后也会

第一节 环境的配置,网站运行原理,模式,代码风格

一.学习php之前所需要做哪些准备呢? 安装phpstudy 测试配置环境是否安装成功 个人电脑安装phpstudy时将站点默认为www目录,在根目录下面新建一个(ceshi.php)页面用来测试环境是否配置成功. 访问站点文件,切莫直接点击打开页面,这样不属于服务器站点访问. 在浏览器地址栏中输入localhost/ceshi.php即可访问.(由于站点默认为www,所以只需要输入localhost/ceshi.php) 二.网站的运行原理 访客-----请求----DNS服务器---指向服务

WAMP运行原理

Apache运行原理 Apache的诸多功能都是通过模块进行加载的,自己本身并不具备那么多功能. php文件动态网页请求原理 请求步骤: 1. 用户在浏览器中输入需要访问的网站的域名以及具体要请求的网页文件 2. 域名解析:先找本地hosts文件,再找互联网上的DNS 3. web服务器接收请求,获取请求文件index.php 4. 将index.php文件交给php引擎处理 5. php引擎解析php代码,如果要连接数据库的话就调用mysql扩展,去操作数据库,最终解析完变成html文件 6.

JavaScript运行原理解析

写在前面的话: 发现使用了那么长时间的Javascript,但是对其运行原理还是不清晰,今天特意总结一下,把大神们的理论和自己的总结都记录到下面: 1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够"读懂"JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2. 学过编译原理的人都知道,对于静态语言来