浏览器渲染页面原理-重排重绘_页面元素变化原理_explore_void的博客-程序员秘密
技术标签： 浏览器原理
本文参考以色列开发人员塔利·加希尔的研究成果。这是原文。
我只是提炼一下文章中对我有用的知识点。
浏览器的构成
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。
3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
这篇博客主要是第三部分，渲染引擎。
浏览器在解析html文档时，是从上到下解析，把html中的标签全部转换为dom树中的节点。通过解析html创建出了dom树。
dom树的根是document对象。dom树的节点与html文档中的标签是一一对应关系。如下代码：
<html>
<body>
<p>
Hello DOM
</p>
<div><img src=”example.png” /></div>
</body>
</html>会被转化为下面的dom树
dom树的构建原理
解析html采用的是符号识别算法，简单说来，就是把html中的每个标签都识别为一个符号，规范中给每个符号定义了相对应的dom元素，所以这些符号被树构造器处理成，对应的dom元素。最后这些元素会被添加到dom树上。
对css文件解析会生成css规则，css规则与dom树结合之后生成渲染树。构建好渲染树之后是布局渲染树。最后是绘制渲染树。
这一系列过程是解析完一部分内容，就在浏览器上将其渲染出来。也就是说，浏览器并不会等html都解析完了后再去构建和布局render树。渲染引擎将会尽可能早的将内容呈现到屏幕上。
渲染树的定义
渲染树中的每个渲染对象用一个和该节点的css盒模型对应的矩形区域来表示（被称为帧或盒），包含宽高位置之类的几何信息。但是渲染对象和dom元素并不是一一对应的，比如display属性为none的dom元素，不会出现在渲染树中。
当DOM的变化影响了元素的几何属性（宽或高），比如以下这些情况：
1.添加或者删除可见的DOM元素
2.元素位置改变
3.元素尺寸改变
4.元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
5.页面渲染初始化（这个无法避免）
6.浏览器窗口尺寸改变
浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。
完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。
注意还有一些时候会触发重排重绘，就是获取布局信息的时候
比如：
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop, scrollLeft, scrollWidth, scrollHeight
- clientTop, clientLeft, clientWidth, clientHeight
- getComputedStyle() (currentStyle in IE)
以上属性和方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值。
智能推荐
MATLAB中不用循环生成圆盘（圆形）/圆环掩膜矩阵_matlab生成圆环矩阵_lvmeng987的博客-程序员秘密
由于在计算中，经常需要生成圆盘（or叫圆形？）掩膜，所以特意写了一个生成圆盘的matlab函数，当然经过修改，也可以生成圆环函数。 譬如，我们想在一个矩阵里提取以某一点为圆心，半径r内的元素，让这个圆范围外的元素都为0时，这就需要一个圆盘掩膜。但是按普通人的第一直觉都是利用对行和列的两重循环，把矩阵内的每一个元素都遍历一遍，看是否在圆内，如果在的话，赋值为1，不在的话，赋值为0 。
Soul源码总结-02-03_yawang_eric_wang的博客-程序员秘密
2月3日作业Demo测试Resilient4j插件探究Resilient4j插件总结.跑通resilienc4j插件分析源码以及resilient4j底层实现总结Demo首先启动项目soul-admin以及soul-bootstrap，以soul-examples中的soul-example-http为例，注册到soul网关上。检查soul-bootstrap的pom文件中是否引入相关依赖： <dependency> <groupId&
矩阵平方差公式成立条件的探讨_深海里的鱼(・ω<)★的博客-程序员秘密
在学线性代数的时候，初学者总是会犯一个错误。A2−B2=(A−B)(A+B)\mathbf{{A}^{2}-B^{2}=(A-B)(A+B)}A2−B2=(A−B)(A+B)其中A\mathbf{A}A,B\mathbf{B}B为两个矩阵，这个等式是不一定成立的，稍微深入一点的同学可能会认为等式是错误的，其实在满足一定条件下，等式是可以成立的，在做某些题目的时候可以大大减小计算量。下面我们来看一道题常规做法如下：AB+E=A2+B\mathbf{A} \mathbf{B}+\mathbf{E
算法题解——矩阵的最小路径和_编写一个算法,将一个n阶矩阵a的元素从左上角开始,按照蛇形方式按行优先存储到一维_就叫乾龙呀丶的博客-程序员秘密
题目描述给定一个 n * m 的矩阵 a，从左上角开始每次只能向右或者向下走，最后到达右下角的位置，路径上所有的数字累加起来就是路径和，输出所有的路径中最小的路径和。解法一 暴力解法（会超时）比较所有可以走的路径，选择和最小的路径。采用递归的方法，限制条件：在矩阵的右边界只能向下走在矩阵的下边界只能向右走在其他地方取向右或者向下最小的路径走class Solution {public: //暴力递归 超时！！ int minPathSum(vector<vecto
C#推流RTMP，摄像头、麦克风、桌面、声卡（附源码）_c# 推流_zhuweisky的博客-程序员秘密
这段时间一直都在研究推流的技术，经过断断续续将近两个月的摸索实践，终于能稳定地推流了。 这个demo的主要功能就是将采集到的摄像头或桌面的视频、以及麦克风或声卡的音频数据推到Nginx-RTMP服务器上，再由Web浏览器去拉流并播放。 接下来介绍Demo整个功能的实现原理和代码逻辑，大家可以从文末下载源码后，对照源码再来看下面的介绍就会更清晰些。一.客户端实现 客户端的界面效果图如下所示： 客户端的具体功能：可以采集摄像头或者桌面图像，也可...
mysql 先分组 后排序_mysql是先分组还是先排序_pmlptf的博客-程序员秘密
mysql 正常的逻辑 select * from table group by a order by b desc 会默认 先分组再排序但是实际的开发过程中难免会遇到先排序 后分组的情况这个时候 就要想其他的方法1 mysql 5.7以下select * from (select * from table order by b) group a2 mysql 5.7以上...
随便推点
无界鼠标(mouse without border)_清风细雨_林木木的博客-程序员秘密
1.去下载https://www.microsoft.com/en-us/download/details.aspx?id=354602.同局域网进行配置.
【深度学习】TensorFlow：“从入门到放弃”_秦乐乐的博客-程序员秘密
想跟一下深度学习的浪潮，所以在网上购买了两本深度学习的框架书，一本是《TensorFlow》，另外一本是《caffe》，因为刚刚看完了Python的基础语法，caffe书上的实例代码是用的c++，所以先读了TensorFlow这本书。TensorFlow在Pycharm中的配置还是比较简单的，使用pip install tensorflow 就可以了，但是在运行书上最简单的两个向量相加的代码的...
递归算法讲解_ch3rry的博客-程序员秘密
一. 引子 大师 L. Peter Deutsch 说过：To Iterate is Human, to Recurse, Divine.中文译为：人理解迭代，神理解递归。毋庸置疑地，递归确实是一个奇妙的思维方式。对一些简单的递归问题，我们总是惊叹于递归描述问题的能力和编写代码的简洁，但要想真正领悟递归的精髓、灵活地运用递归思想来解决问题却并不是一件容易的事情。在正式介绍递归之前，我们首先引用...
Linux文件权限管理 笔记_极梦网络无忧的博客-程序员秘密
文件权限就是文件的访问控制权限，即哪些用户和组群可以访问文件以及可以执行什么样的操作。Unix/Linux 系统是一个典型的多用户系统，不同的用户处于不同的地位，对文件和目录有不同的访问权限。为了保护系统的安全性，Unix/Linux 系统除了对用户权限作了严格的界定外，还在用户身份认证、访问控制、传输安全、文件读写权限等方面作了周密的控制。在 Unix/Linux 中的每一个文件或目录都包含有访问权限，这些访问权限决定了谁能访问和如何访问这些文件和目录。查看文件权限我们之前已经很多次用到 ls 命
如何引用GitHub的静态资源文件_雨逡泉的博客-程序员秘密
因为学校课程作业的缘故需要自己配置vpn。其中涉及了远程执行配置脚本的问题，所以记录一下如何访问GitHub的静态资源的流程。话不多说，请直接看图！在编辑代码的部分第一行右侧有三个按钮（Raw\Blame\History）。直接点击Raw就可生成静态文件的链接。以后就可以使用curl命令来引用啦。...
5. 定时器TIM_tim2->ccr2__laiwenjie的博客-程序员秘密
5. 定时器TIM 5.1 TIM结构及寄存器说明 5.2 TIM设计实例 5.2.1 1s定时程序设计 5.2.2 矩形波输出程序设计 5.2.3 矩形波测量程序设计5.1 TIM结构及寄存器说明定时器TIM2-5、基本定时器TIM6/7、实时钟RTC、独立看门狗IWDG和窗口看门狗WWDG等 高级控制定时器除了具有刹车输入BKIN、互补...