浅谈浏览器工作原理

发布于 2021-05-17 12:40:41 字数 2185 浏览 1139 评论 0

浏览器组成

  • 人际交互部分(UI)
  • 网络请求部分(Socket)
  • Javascript引擎部分(解析执行Javascript)
  • 渲染引擎部分(渲染HTML、CSS)
  • 数据存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)

主流渲染引擎

渲染引擎 又叫 排版引擎 或 浏览器内核

主流的 渲染引擎 有

Chrom浏览器:Blink引擎(WebKit的一个分支)
Safari浏览器:WebKit引擎,windows版本2008年3月18日推出正式版,但苹果已于2012年7月25日停止开发Windows版的Safari
FireFox浏览器:Gecko引擎
Opera浏览器:Blink引擎(早起版使用Presto引擎)
Internet Exploer浏览器:Trident引擎
Microsoft Edge浏览器:EdgeHTML引擎(Trident的一个分支)

工作原理

1、解析HTML构建Dom树(Document Object Model,文档对象模型),DOM 是w3c租住推荐的处理可扩展置标语言的标准编程接口。

2、构建css规则树。

3、合并Dom树 与 css规则树 构建“渲染树”。“渲染树”并不等同于Dom树,因为向head标签 或 display: none这样的元素
就没有必要放到“渲染树”中了,但是他们在DOM树中

4、对“渲染树”进行布局,定位坐标和大小、确定是否换行、确定position、overflow、z-index等等,
这个过程叫"layout"或者“reflow”

5、绘制“渲染树”,调用操作系统底层API进行绘图操作。

Layout 和 Reflow 过程

浏览器访问网站过程

1、在浏览器地址栏中输入网址。

2、浏览器通过在地址栏中输入的URL构建HTTP请求报文。

3、浏览器发起DNS解析请求,将域名转换为IP地址。

4、浏览器将请求报文发送给服务器。

5、服务器接受请求报文,并解析。

6、服务器处理用户请求,并将处理结果封装成HTTP响应报文。

7、服务器将HTTP响应报文发送给浏览器

8、浏览器接收服务器响应的HTTP报文,并解析。

9、浏览器解析HTML页面并展示,在解析HTML页面时遇到新的资源需要再次发起请求。

10、最终浏览器展示出了页面。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

文章
评论
84963 人气
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文