浅谈浏览器运行原理

浅谈浏览器运行原理

我最近通过自己的学习了解到一些关于浏览器运行原理的知识，想把自己认识了解到的写下来这样既可以方便自己以后对知识的温习，也可以与大家一起交流学习。

一.浏览器简介

浏览现在使用广泛，但使用的用户最多的是：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。
而浏览器可以识别的文档有HTML,PDF以及图片和其他类型，用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置。

二.浏览器的主要组成

1.用户界面 ——包括地址栏、 前进/后退按钮、 书签、菜单，而这些都是一些最基本的东西，现在还加入了返回home、分享、收藏，甚至还可以将你经常访问的地址栏添加到地址栏下方便人们的使用。
2.浏览器引擎——连接用户界面和渲染引擎之间的接口。
3.渲染引擎——解析请求内容。如果内容为HTML，那么它就解析HTML和CSS。（当然有些书上将HTML解析器、CSS解析器、布局Layout以及JS引擎都统称为渲染引擎，而我认为JS引擎应不算渲染引擎中的一部分，因为CSS是依附于HTML上的，如果CSS离开了HTML那它将什么也不是，但JS却不一样，JS离开了HTML也可以单独存在）。
4.网络——用于网络调用，如 HTTP 请求。 其接口与平台无关，为所有平台提供底层实现。
5.用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。 其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。（目前来说现在所使用UI有这么几个：EasyUI、DWZ JUI、HUI、BUI、H+ UI等，大家如果对这些有兴趣可以去https://www.cnblogs.com/niejunchan/p/7694097.html，对界面后端有一个大概的了解。）
6.JS解释器——用来解释执行JS代码。
7.数据存储——属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

三.渲染引擎

浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，所以渲染引擎也称为浏览器内核。

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

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

解析器

1.解析器的过程可以分为两个子过程：语法解析和词法解析

词法解析是将内容分割成大量标记的过程。
语法解析解析器会向词法分析器请求一个新标记，并尝试将其与某条语法规则进行匹配。 如果发现了匹配规则，解析器会将一个对应于该标记的节点添加到解析树中，然后继续请求下一个标记。 如果没有规则可以匹配，解析器就会将标记存储到内部，并继续请求标记，直至找到可与所有内部存储的标记匹配的规则。 如果找不到任何匹配规则，解析器就会引发一个异常。 这意味着文档无效，包含语法错误。

2.HTML解析
将HTML解析成为一个树。

3.CSS解析
css属于上下文无关文法，可以用前面所描述的解析器来解析。 Css规范定义了css的词法及语法文法。 每个符号都由正则表达式定义了词法（词汇表），语法用BNF(由 John Backus 和 Peter Naur 首先引入的用来描述计算机语言语法的符号集)进行描述。

4.JS解析
JS引擎是一个专门处理JS脚本的虚拟机，专门设计来解释和执行的 JavaScript 代码。 JS引擎会加载你的源代码，把它分解成字符串，把这些字符串转换成编译器可以理解的字节码，然后执行这些字节码。不同浏览器有不同的JS引擎 ，不同浏览器的js引擎如表所示。

以上只是我对浏览器运行原理一个简单的认识，仅供大家参考。
[1]:https://www.cnblogs.com/wjlog/p/5744753.html#chapter3
[2]: https://blog.csdn.net/u014744118/article/details/80698602
[3]:https://www.cnblogs.com/niejunchan/p/7694097.htm