资讯专栏INFORMATION COLUMN

【译】浏览器渲染:repaint,reflow/relayout,restyle

mating / 685人阅读

摘要:屏幕的变化就被称为或者是。而浏览器的目标之一就是减少以及的负面影响,其中的一个策略就是干脆不做,又或者说至少不是现在做。但有时脚本语句会破化浏览器优化,并使其刷新队列以及执行所有批处理的改变。

**首先说翻译这篇文章的目的其实是,之前回答的关于浏览器js渲染的问题被打脸了 ಥ_ಥ ,
不得不正视自己半路出家学前端的事实,所以这篇文章就算是自己的一个笔记吧,学而时习之,不亦乐乎,翻译错了,还请批评指正**

原文链接:Rendering: repaint, reflow/relayout, restyle

正文:

今天我们来谈谈这个从page2.0(译者注:page2.0不怎么常见,应该是作者自创的,介绍链接在文章结尾)生命周期的词:渲染,有时候它甚至发生在瀑布流当中。
那么,浏览器是如何靠着一大块html,css,javascript代码在屏幕上显示你的页面的呢?

渲染过程:

不同的浏览器有不同的实现方式,但是下边的图会展示一个当代码被下载到电脑里之后所有浏览器的共同实现(或多或少都有)

浏览器把我们的html源代码解析并且初始化成一个dom树,dom树是一个数据结构,它的特点包括,每个html标签都在这个树上有一个对应的节点,当然标签当中的文本块也在dom树上有一个相应的文本节点,这个dom树的根节点就是documentElement(也就是标签)

浏览器解析css代码,针对一些像-webkit、-moz以及一些不认识的写法做忽略,css的优先级是这样的:最基本的浏览器默认样式,然后就是来自外部引入的用户脚本,最高级的是在页面里边写在