浏览器工作原理整理

2019-08-15 admin

浏览器组成

  1. 用户界面-地址栏、按钮之类的
  2. 浏览器引擎-用来查询及操作渲染引擎的接口
  3. 渲染引擎-显示请求的内容
  4. 网络-进行网络请求
  5. ui后端-用来沪指选择框、对话框的基本组件
  6. js解析器
  7. 数据存储

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

渲染引擎

主流程

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

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

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

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

解析

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

文法

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

html解析器

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

  1. 这门语言本身的宽容特性
  2. 浏览器对一些常见的非法html有容错机制
  3. 解析过程是往复的,通常源码不会在解析过程中发生改变,但在html中,脚本标签包含的“document.write ”可能添加标签,这说明在解析过程中实际上修改了输入

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

clipboard.png

CSS解析

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

clipboard.png

脚本解析

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

渲染树的构造

这个比较复杂,以后单独来写

[转载]原文链接:https://segmentfault.com/a/1190000020083557

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72610.html

文章标题:浏览器工作原理整理

相关文章
透过浏览器看HTTP缓存
Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 如果客户端在请求一个文件的时候,发现自己...
2016-01-13
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
整理AngularJS中的一些常用指令
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用。 ng-init - 该指令初始化应用程序数据。 ng-model - 此指令定义的...
2017-03-24
浏览器中url存储的JavaScript实现
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来...
2017-03-27
Html5塑手机浏览器:腾讯X5谋生态链
最近,手机浏览器一系列大事件引人瞩目。 先是搜狐创始人、CEO张朝阳通过微博推荐手机QQ浏览器,而不是自家的搜狗手机浏览器,引起坊间热议。一个以X5为核心的生态圈正在悄然成型。 然后UC浏览器发出微博:“约吗?”,公开挑战其他手机浏览器。当...
2015-11-12
javascript实现控制浏览器全屏
功能很简单,代码也很简洁,这里就不多废话了 function fullScreen() { var el = document.documentElement, rfs = el.requestFullScreen || el....
2017-03-22
用OpenCV在浏览器进行人脸检测
最近picojs上了Github Trending,这是一个小巧的人脸检测库,200行JS,2K大小,性能很好,效果也还还行。于是我想有没其他的能在浏览器跑的人脸检测库,一查才发现OpenCV已经支持编译到WebAssembly,也就可以直...
2018-04-27
js去除浏览器默认底图的方法
本文实例讲述了js去除浏览器默认底图的方法。分享给大家供大家参考。具体分析如下: 我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个loading动画效果,而不是由空白到一下子出来。 在zen cart的二次开发过程...
2017-03-24
详解Vue监听数据变化原理
本人最近在学习Vue,从网上查询了很多关于Vue监听数据变化原理,稍微整理精简一下做下分享。 浅度监听 <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
整理关于Bootstrap警示框的慕课笔记
在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示: 在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框...
2017-04-01
回到顶部