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主流程