第22题：介绍下重绘和回流（Repaint&Reflow），以及如何进行优化？ 答：关于重绘和回流 第23题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景？ 答：观察者模式和发布订阅模式 第24题：聊聊Redux和Vuex的设计思想？ 答： 把组件之间需要共享的状态抽取出来，遵循特定的 ...
分类：
其他好文 时间：
2019-08-22 13:25:45
阅读次数：
104
1. 浏览器渲染机制 浏览器采用流式布局模型（Flow Based Layout） 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后 ...
分类：
其他好文 时间：
2019-08-19 19:36:07
阅读次数：
117
基础概念： paintEvent(QPaintEvent*)函数是QWidget类中的虚函数，用于ui的绘制，会在多种情况下被其他函数自动调用，比如update()时。 运行时机： 一个重绘事件用来重绘一个部件的全部或者部分区域，下面几个原因的任意一个都会发生重绘事件： （1）repaint()函数 ...
分类：
其他好文 时间：
2019-06-12 19:48:36
阅读次数：
119
之前几篇博客里的例子，大家运行过的话，就能看出来，界面是需要刷新的。 JPanel里的绘制方法是paintComponent，界面上的东西都是这个方法画出来的。 JPanel对象有一个repaint方法，从字面意思大家也看的懂，这个是重绘方法。 可以粗浅的这么认为：每调用一次repaint，就会执行 ...
分类：
编程语言 时间：
2019-04-25 10:28:55
阅读次数：
159
回流与重绘这两个词语经常见到，面试中这两个词语的出现的频率也比较高，每每别人谈到回流与重绘时，哦，这个我知道，但是让我讲个因果所以然，好像嗯。。。好像我并不是懂的很彻底 什么是回流（reflow）？ Render树中部分或全部元素的尺寸、结构、或某些属性（如边距）发生改变时，浏览器重新渲染部分或全部 ...
分类：
其他好文 时间：
2019-03-10 16:13:44
阅读次数：
214
浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使 ...
分类：
其他好文 时间：
2019-01-24 23:30:10
阅读次数：
286
一、前言 偶尔在面试过程中遇到过重汇与回流reflow的问题，毕竟页面优化也是考核一个开发者能力的关键之一，上篇文章聊了下documentfragment也是为了减轻回流问题，那么本篇文章好好介绍下重绘和回流。 二、重绘和回流是什么 怎么去理解这两个概念呢？从字面上理解，重绘，重新绘画，重新上色，较 ...
分类：
其他好文 时间：
2018-12-12 00:32:21
阅读次数：
444
js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件（例如页面 scroll ，屏幕 resize，监听用户输入等），这些事件会频繁触发浏览器的重拍（reflow）和重绘（repaint）这会严重耗费浏览器性能，造成页面 卡顿。 举几个例子：比如说我们在滚动事件中要做一个复杂的计算 ...
分类：
Web程序 时间：
2018-11-20 10:23:20
阅读次数：
210
1.浏览器的渲染引擎工作原理： （1）解析HTML，生成DOM树。解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。 （2）构建渲染树，解析Style，生成Style Rules，解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择 ...
分类：
其他好文 时间：
2018-10-02 14:12:46
阅读次数：
233
