浏览器概述
1、人机交互(UI)
2、网络请求部分(Socket)
3、JavaScript引擎(解析执行JavaScript)
4、渲染引擎(渲染HTML,CSS)又叫排版引擎或浏览器内核
5、数据库存储(cookie、HTML5的本地存储Localstorage、SessionStorage)
渲染引擎
主流的渲染引擎有
Chrome浏览器:Blink引擎 (WebKit的一个分支) .
Safari浏览器:WebKit引擎,(windows版本2008年3月18日推 出正式版,但苹果已于2012年7月25日停止开发Windows版的Safari.)
FireFox浏览器: Gecko引擎
Opera浏览器: Blink引擎(早期版使用Presto引擎,后改为Blink引擎)
Internet Explorer浏览器: Trident引擎 。(最后一个版本 IE 11)
Microsoft Edge浏览器: EdgeHTML引擎(Trident的一个分支)
工作原理
1.解析HTML构建Dom树(Document object Model,文档对象模型),DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口
渲染引擎会将页面所有CSS解析生成CSS规则树
渲染树=DOM树+CSS规则树
2.构建渲染树,渲染树并不等同于Dom树,因为像head标签或display: none这样的元素就没有必要放到渲染树
中了,但是它们在Dom树。(渲染树剔除一些没有必要显示的元素)
3.对渲染树进行布局,定位坐标和大小、确定是否换行、确定position、 overflow- z- index等等, 这个过程叫"layout"(先布局) 或"reflow"(后进行重新调整)
"注意:尽量避免频繁使用layout和reflow,会影响性能"
4.绘制渲染树,调用操作系统底层API进行绘图操作。
解析DOM树---->构建渲染树---->渲染树布局---->绘制渲染树
浏览器访问网站过程
1、浏览器中输入网址
2、浏览器对URL网址请求报文封装
3、浏览器发起DNS解析请求,将域名转为IP地址
4、浏览器将请求报文发送到服务器
5、服务器接收请求报文,并解析
6、服务器处理用户请求,并将处理结果封装成HTTP响应报文。
7、服务器将HTTP响应报文发送给浏览器
8、浏览器接收到服务器响应的HPPT报文,并解析
9、浏览器解析HTML页面并渲染,在解析HTML页面时遇到新的资源需要再次发起请求
10、最终浏览器渲染出完整页面
转载请注明原文地址:https://ipadbbs.8miu.com/read-16363.html