浏览器工作原理整理

浏览器组成

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

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

渲染引擎

主流程

解析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制定了专门的解析器。

CSS解析

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

脚本解析

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

渲染树的构造

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

原文链接:segmentfault.com

上一篇:react的一些性能优化
下一篇:纯css3漂亮的checkbox和radio美化效果插件Pretty.css插件

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    1 个月前
  • 🔥 Promise|async|Generator 实现&原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    4 个月前
  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    3 个月前
  • (HTML)下载PDF文件,而不是在浏览器中单击时打开它们。

    MikeD404Error(https://stackoverflow.com/users/137969/miked)提出了一个问题:(HTML) Download a PDF file instea...

    2 年前
  • 高性能现代浏览器超大wav音频的波形绘制方案

    在绘制大音频波形的场景(目前只支持wav格式),急着用的同学点这里(https://github.com/CofeeWithRose/WaveRolling),如果有问题可以联系我,我会尽快修复。

    1 年前
  • 项目整理11.28——路由

    1、路由基础 (1)添加路由链接 image.png(https://img.javascriptcn.com/8b6418d306cd88778316b20c...

    7 个月前
  • 项目整理11.27——axios相关

    1、配置请求的根路径 2、请求任意接口之前进行统一拦截判断 (https://img.javascriptcn.com/539d96611a9889...

    7 个月前
  • 项目整理11.26——登录相关

    1. vue引入axios 2.vue登录验证实现 image.png(https://img.javascriptcn.com/37881b743095e87e3d7e42622ce1c...

    7 个月前
  • 面试题整理- 浏览器篇

    浏览器篇 localstorage sessionstorage cookie 区别 大小限制?(某团) 生命周期: cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效 localSt...

    2 个月前
  • 面试题整理- 手撕代码篇

    手撕代码篇 考察 new 和闭包(某节) 写一个正则匹配字符转成驼峰?(某团) 实现: borderbottomcolor 》 borderBottomColor 扩展:驼峰转连字符 ...

    2 个月前

官方社区

扫码加入 JavaScript 社区