学习node.js前,浏览器的一些工作原理知识的补充

    技术2022-07-11  109

    浏览器概述

    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、最终浏览器渲染出完整页面
    Processed: 0.012, SQL: 9