浏览器工作原理整理

hqman 发布于2019-08-30 15:44 / 2193人阅读

摘要：每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法，称为上下文无关文法。解析解析器，每个标识都有特定的正则进行解析。开发者可以将脚本标识为，以使其不阻塞文档解析，并在文档解析结束后执行。

浏览器组成

用户界面-地址栏、按钮之类的

浏览器引擎-用来查询及操作渲染引擎的接口

渲染引擎-显示请求的内容

网络-进行网络请求

ui后端-用来沪指选择框、对话框的基本组件

js解析器

数据存储

需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程

渲染引擎 主流程

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

渲染引擎开始解析html，并将标签转化胃内容树中的dom节点,接着它解析外部css文件及style标签中的样式信息，这些样式信息和html元素中的样式信息将被用来构建另一颗树---渲染树

渲染树是有一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

渲染树构建好了之后，将会执行布局过程，它将确定每个节点上在屏幕上的确切坐标，再下一步就是绘制渲染树，使用ui后端层绘制每个节点

解析

解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树，称为解析树或语法树。

文法

解析基于文档依据的语法规则——文档的语言或格式。每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法，称为上下文无关文法。人类语言不具有这一特性，因此不能被一般的解析技术所解析。

html解析器

html解析器将html标识解析成解析树，解析书是有dom元素及属性节点组成，dom是文档对象模型的缩写。解析算法 html并不是由顶向下或者自低向上的解析，
原因是：

这门语言本身的宽容特性

浏览器对一些常见的非法html有容错机制

解析过程是往复的，通常源码不会在解析过程中发生改变，但在html中，脚本标签包含的“document.write ”可能添加标签，这说明在解析过程中实际上修改了输入

浏览器为html制定了专门的解析器。

CSS解析

css解析器，css 每个标识都有特定的正则进行解析。一个规则集合具有一个或者可选个数的多个选择器

脚本解析

web的模式是同步的，开发者希望解析到一个script标签时立即解析执行脚本，并阻塞文档的解析直到脚本执行完。如果脚本是外引的，则网络必须先请求到这个资源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到。这个模式保持了很多年，并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer，以使其不阻塞文档解析，并在文档解析结束后执行。Html5增加了标记脚本为异步的选项，以使脚本的解析执行使用另一个线程。

渲染树的构造

这个比较复杂，以后多带带来写

云服务器 GPU云服务器工作原理网络工作原理爬虫工作原理 cdn工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116257.html

根据浏览器的工作原理整理前端知识体系

摘要：在这里，我根据浏览器的工作原理整理了一套自己的知识体系，方便自己学习，有很多不足的地方，希望大家多多交流。图片可以点击查看原图进行观看做前端的同学都知道，前端技术目前需要学习的知识太多了，各种框架，技术层出不穷，但只要我们自己有自己的一套知识体系，打好基础，再学习新东西就会很容易。在这里，我根据浏览器的工作原理整理了一套自己的知识体系，方便自己学习，有很多不足的地方，希望大家多多交流...

Riddler 2019-08-23 13:42 评论0 收藏0
根据浏览器的工作原理整理前端知识体系

摘要：在这里，我根据浏览器的工作原理整理了一套自己的知识体系，方便自己学习，有很多不足的地方，希望大家多多交流。图片可以点击查看原图进行观看做前端的同学都知道，前端技术目前需要学习的知识太多了，各种框架，技术层出不穷，但只要我们自己有自己的一套知识体系，打好基础，再学习新东西就会很容易。在这里，我根据浏览器的工作原理整理了一套自己的知识体系，方便自己学习，有很多不足的地方，希望大家多多交流...

xiaotianyi 2019-08-02 12:06 评论0 收藏0
根据浏览器的工作原理整理前端知识体系

摘要：在这里，我根据浏览器的工作原理整理了一套自己的知识体系，方便自己学习，有很多不足的地方，希望大家多多交流。图片可以点击查看原图进行观看做前端的同学都知道，前端技术目前需要学习的知识太多了，各种框架，技术层出不穷，但只要我们自己有自己的一套知识体系，打好基础，再学习新东西就会很容易。在这里，我根据浏览器的工作原理整理了一套自己的知识体系，方便自己学习，有很多不足的地方，希望大家多多交流...

JasonZhang 2019-08-29 17:24 评论0 收藏0
浏览器工作原理整理

摘要：每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法，称为上下文无关文法。解析解析器，每个标识都有特定的正则进行解析。开发者可以将脚本标识为，以使其不阻塞文档解析，并在文档解析结束后执行。浏览器组成用户界面-地址栏、按钮之类的浏览器引擎-用来查询及操作渲染引擎的接口渲染引擎-显示请求的内容网络-进行网络请求 ui后端-用来沪指选择框、对话框的基本组件 js解析器数据...

Dionysus_go 2019-08-26 10:48 评论0 收藏0
浏览器的工作原理整理

摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。浏览器的结构浏览器的主要组件包括：用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...

jzman 2019-08-02 12:00 评论0 收藏0