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的地址栏
② 前进、后退按钮
③ 书签选项
④ 用于刷新及暂停当前加载文档的刷新、暂停按钮
⑤ 用于到达主页的主页按钮
浏览器的主要构成
浏览器的主要组件包括:
- 用户界面
- 浏览器引擎—用来查询及操作渲染引擎的接口
- 渲染引擎—用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来
- 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作
- UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
- JS解释器- 用来解释执行JS代码
- 数据存储- 属于持久层,浏览器需要在硬盘中保存类似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主流程