前言 页面显示到浏览器上的过程： 1.1、生成一个DOM树。 浏览器将获取到的HTML代码解析成1个DOM树，包含了所有标签，包括display:none和动态添加的节点。 1.2、生成样式结构体。 浏览器将所有样式解析成样式结构体，解析过程中会去掉浏览器不能识别的。 2、DOM树 ...

前言 今天白天的时候我们一起学习了块级元素，晚上的时候本来想继续学习CSS，但是发现还是有一点累，所以我们还是来研究点大家都感兴趣的东西，前端优化。 什么是reflow？ 这个单词字面意思就是回流，这里举一个例子： 我们这里有个dom树： 我们如果删除了其中一个节点 ...

一、前言 偶尔在面试过程中遇到过重汇与回流reflow的问题，毕竟页面优化也是考核一个开发者能力的关键之一，上篇文章聊了下documentfragment也是为了减轻回流问题，那么本篇文章好好介绍下重绘和回流。 二、重绘和回流是什么 怎么去理解这两个概念呢？从字面上理解，重绘，重新绘画，重新 ...

1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。 以下操作会引起回流： ① 改变窗口大小 ② font-size大小改变 ③ 增加 ...

最近项目排期不紧，于是看了一下之前看了好久也没看明白的chrome调试工具的timeline。但是很遗憾，虽然大概懂了每一项是做什么的，但是用起来并不能得心应手。所以今天的重点不是timeline，而是我在看timeline的时候发现的reflow.reflow,回流。什么是回流呢？看了好多文章 ...

什么是回流（reflow），什么是重绘（repaint），以及它们之间的区别？ 浏览器的渲染过程 首先我们要了解浏览器的渲染过程： 　　1.解析 HTML,生成 DOM 树，解析 CSS,生成 CSSOM树 　　2.将 DOM树 和 CSSOM树结合，生成渲染树（Render Tree ...

回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词，但是并不理解它们的含义，也没有深究过，今天看了一套网易的题目，涉及到了这两个概念，于是想要把它们俩弄清楚。。。 一、概念 首先我们要明白的是，页面的显示过程分为以下几个阶段： 1、生成DOM树(包括 ...

简介： 整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。 什么是reflow和repaint reflow ...