浏览器运行原理

本文介绍了浏览器的基本概念、构成,详细解析了浏览器的运行原理,包括渲染引擎的工作流程:获取内容、解析HTML构建DOM树、构建Render树、布局和绘制。还讲述了HTML、CSS和JS的解析过程,以及浏览器的布局、绘制阶段。最后简要概述了前端处理流程,从输入URL到页面展示的整个过程。
摘要由CSDN通过智能技术生成

**

浏览器运行原理

一.浏览器的概念
浏览器是一种可视化图形界面的浏览软件,是一个把在互联网上找到的文本文档(和其它类型的文件)翻译成网页,网页可以包含图形、音频和视频,还有文本;其主要作用是接受用户的请求,到相应的网站获取网页并显示出来。
目前主流浏览器:Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera

二.浏览器的构成

  1. 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,就是能看到的除了用来显示你所请求页面的主窗口之外的其他部分。
  2. 浏览器引擎 - 用来查询及操作渲染引擎的接口。
  3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。
  4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。
  5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。
  6. JS解释器 - 用来解释执行JS代码。
  7. 数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

三.浏览器运行原理

1.渲染引擎
渲染引擎在浏览器窗口中显示所请求的内容,浏览器内核分成两部分:渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎,所以渲染引擎也称为浏览器内核。渲染引擎一开始会从网络层获取请求文档的内容,通常以8K分块的方式完成。 获取了文档内容之后,渲染引擎开始正式工作。下面是渲染引擎在取得内容之后的基本流程:

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

渲染引擎解析HTML文档,并将文档中的标签转化为DOM节点树,即” 内容树” 。 同时,它也会解析外部CSS文

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值