Web Page Request Principle

                                                                                         Web页面请求的原理

浏览器与服务器之间的交互;

客户端:浏览器

当在browser中输入网址并回车后,如果是第一次访问这个网址www.evilying.cn,浏览器并不知道这个网站的IP,因此第一次请求时发向DNS服务器,服务器查询到该网址对应的IP后,再给你发回IP,然后浏览器根据IP地址向www.evilying.cn,

对应的web服务器发送请求;

服务器端(假设安装的是IIS软件):

在server端,有负责监听的Socket,当它监听到有请求到达时,它就会根据socket.accept()方法立即创建一个socket,负责与发送请求的浏览器进行通信(浏览器就是用socket与服务器进行通信的),因为监听请求的socket占用一个线程,因此我们也创建了另一个线程专门处理客户端浏览器的请求;

请求的页面的路径和页面的类型:

①   发现请求的是静态页面,那么直接读取静态页面并生成响应报文头(text/html),通过socket发回给浏览器;

②   发现请求的是图片,生成报文头(image),和图片内容一起发回给客户端,想css,js之类的都是基本一样的处理方式;

③   发现请求的是动态页面,而IIS没有直接处理动态页面的能力,那么它只能通过扩展插件来处理,当页面处理完的结果交给socket,由socket发回给浏览器;

④   客户端请求的页面不存在,服务器给客户端发回的响应报文中就会提示有错误信息404,

以及还有其他情况其他的错误信息等

                                    

五种主流浏览器

IE,Firefox(opensource),Safari(partial opensource),Chrome(opensource)以及Opera;

浏览器的主要功能:

将用户选择的web资源呈现出来,需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包含PDF,Image及其他格式;用户用URI(统一资源标识符)来指定所请求资源的位置;

浏览器的用户界面则差不多,常见的用户界面元素包括:

①   用来输入URI的地址栏

②   前进、后退按钮

③   书签选项

④   用于刷新及暂停当前加载文档的刷新、暂停按钮

⑤   用于到达主页的主页按钮

浏览器的主要构成

浏览器的主要组件包括:

  1. 用户界面
  2. 浏览器引擎—用来查询及操作渲染引擎的接口
  3. 渲染引擎—用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来
  4. 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作
  5. UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
  6. JS解释器- 用来解释执行JS代码
  7. 数据存储- 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

 

Note

不同于大部分浏览器,Chrome为每个Tab分配了各自的渲染引擎实例,每个Tab就是一个独立的进程。

渲染引擎 The rendering engine

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

默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,可以显示PDF格式,渲染引擎最主要的用途——显示应用了CSS之后的html及图片。Firefox、Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safari和Chrome都使用webkit。

Webkit是一款开源渲染引擎,它本来是为linux平台研发的,后来由Apple移植到Mac及Windows上;

渲染引擎首先通过网络获得所请求的文档的内容,以8K分块的方式完成;

渲染引擎在取得内容之后的基本流程:

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

 

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

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

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

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

webkit主流程

 

原文地址:https://www.cnblogs.com/diyingyun/p/2358839.html