浏览器应用基础

从打开浏览器输入一个网址到页面展示网页内容的这段时间,浏览器和服务器都发生了什么?

1、在接收到用户输入网址后,浏览器会开启一个线程来处理这个请求,对用户输入的URL地址进行分析判断,如果是HTTP协议就按照HTTP方式来处理。
2、调用浏览器引擎的对应方法,比如WebView中的loadUrl方法,分析并加载URL地址
3、通过DNS解析获取该网站地址对应的IP地址,查询完成后连同浏览器的Cookie,userAgent等信息向网站目的IP发出GET请求。
4、进行HTTP协议会话,浏览器客户端向Web服务器发送报文。
5、进入网站后台上的Web服务器处理请求,如Apache、Tomcat、Node.js等服务器。
6、进入部署好的后端应用,如PHP、Java、Javascript、Python等后端程序,找到对应的请求处理逻辑,这期间可能会读取服务器缓存或查询数据库。
7、服务器处理请求并返回响应报文,此时如果浏览器访问过该页面,缓存上有对应的资源,会与服务器最后修改记录对比,一致则返回304,否则200和对应内容。
8、浏览器开始下载HTML文档(响应报头状态码为200时)或者从本地缓存读取文件内容(浏览器缓存有效或响应报头状态码为304)。
9、浏览器根据下载接收到的HTML文件解析结构建立DOM文档树,并根据HTML中的请求下载指定的MIME类型文件,同时设置缓存等内容。
10、页面开始解析渲染DOM,CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制渲染,javascript根据DOM API操作DOM,并读取浏览器缓存、执行事件绑定等,页面整个展示过程完成。


浏览器组成

用户界面、网络、Javascript引擎、渲染引擎、UI后端、Javascript解析器和持久化数据存储。
用户界面包括浏览器中可见的地址输入框、浏览器前进返回按钮、打开书签、打开历史记录等用户可操作的功能选项。
浏览器引擎可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等,是浏览器中各个部分之间相互通信的核心。
浏览器渲染引擎的功能是解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的页面,也有人称之为排版引擎,我们常说的浏览器内核主要指的就是渲染引擎。
网络功能模块是浏览器凯西网络线程发送请求或下载资源文件的模块,例如DOM树解析过程中请求静态资源首先是通过浏览器的网络模块发起的。
UI后端用于绘制基本的浏览器窗口内控件,比如组合选择框、按钮、输入框等。
Javascript解释器则是浏览器解释和执行Javascript脚本的部分,例如V8引擎。
浏览器数据持久化涉及cookie、localStorage等一些客户端存储技术,可通过浏览器引擎提供的API进行调用。


主浏览器内核
Trident内核:Internet Explorer、360浏览器、搜狗浏览器
Gecko内核:Netscape6及以上版本,Firefox
Presto内核:Opera7及以上还在使用(Opera内核原来是Presto,现使用的是Blink内核)
Webkit内核:Safari、Chrome


渲染引擎的主要工作流程

渲染引擎在浏览器中主要用于解析HTML文档和CSS文档,然后将CSS规则应用到HTML标签元素上,并将HTML渲染到浏览器窗口中以显示具体的DOM内容。
解析HTML构建DOM树,构建渲染树、渲染树布局、绘制渲染树。
解析HTML构建DOM树时渲染引擎会先将HTML元素标签解析成多个DOM元素对象节点组成的且具有节点父子关系的DOM树结构,然后根据DOM树结构的每个节点顺序提取计算使用的CSS规则并重新计算DOM树结构的样式数据,生成一个带样式描述的DOM渲染对象。
DOM渲染树生成结束后,进入渲染树的布局阶段,即根据每个渲染树节点在页面中的大小和位置,将节点固定到页面的对应位置上,这个阶段主要是元素的布局属性生效,即在浏览其中绘制页面上元素节点的位置。
绘制阶段,将渲染树节点的背景、颜色、文本等样式信息应用到每个节点上,这个阶段主要是元素的内部显示样式生效。最终完成整个DOM在页面上的绘制显示。

发布了95 篇原创文章 · 获赞 22 · 访问量 11万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章