标签: repaint
回流和重绘之间有什么区别？
我对reflow + repaint之间的区别有点不清楚(如果有什么不同的话)
似乎reflow可能会改变各种DOM元素的位置,其中重绘只是渲染一个新对象.例如,在移除元素时会发生重排,并且在更改其颜色时会发生重新绘制.
这是真的？
推荐指数
解决办法
查看次数
如何通过浏览器应用CSS,并重新受其影响？
假设我们有一个带有单个样式表的HTML页面<link>.浏览器如何获取此样式表中的规则并将其应用于HTML？我不是在问如何让它更快,我想知道渲染本身是如何处理的.
它是否逐个应用每个规则,因为它会解析样式表并逐步呈现结果？或者,CSS文件的内容是否已完全下载,然后进行全面评估,然后立即应用于HTML？或者是其他东西？
我问这个上张贴一个答案较早之后关于影响渲染速度CSS规则的顺序问题,与样式被渲染的假设作为加载的样式,所以第一个规则会在最后的前应用,而不是一下子.我不确定我在哪里接受这个想法,这只是我一直想到的.
我在我的服务器上尝试了一个看起来像这样的演示:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body></body>
</html>
test.css 内容:
html { background:green }
/* thousands of lines of irrelevant CSS to make the download slow */
html { background:red }
在Firefox 5中进行测试,我希望首先看到绿色,然后变为红色.它没有发生.我尝试使用两个具有冲突规则的单独样式表并获得相同的结果.很多组合后,我得到了它工作的唯一途径是内嵌<style>在块<head>,与冲突的规则从未来<link>的<body>(身体本身完全除外链接标记为空).即使style在<html>标记上使用内联属性,然后加载此样式表也不会创建我期望的闪烁.
重绘是否受到CSS的任何影响,或者是在下载整个样式表后是否同时应用了最终输出,并且计算了最终输出应该是什么规则？CSS文件是否与HTML本身一起下载或阻止它(如脚本标签那样)？这实际上是如何工作的？
我不是在寻找优化技巧,我正在寻找有关该主题的权威参考资料,以便我将来可以引用它们.如果没有大量不相关的材料,就很难搜索这些信息.摘要:
- 是否在应用任何 CSS内容之前下载了所有CSS内容？(请参考)
- 这会受到
@import多个<link>内联样式属性,<style>头部块和不同渲染引擎等因素的影响？ - 下载CSS内容是否会阻止HTML文档本身的下载？
推荐指数
解决办法
查看次数
如何从Java中的JFrame中删除所有组件？
我正在编写一个程序,我有一个JFrame,我想从中删除所有组件,然后只添加一个组件并重新绘制框架.到目前为止我所拥有的是类似下面的代码(在实现JFrame的对象中调用,其中StartPanel实现JPanel):
removeAll();
startPanel = new StartPanel();
startPanel.setVisible(true);
add(startPanel);
revalidate();
repaint();
但是,当我运行代码时,它显示一个空窗口(不是startPanel),当我最小化/调整窗口大小时,窗口变黑.如果我遗漏了removeAll()JFrame上已有的元素,那么它就会显示startPanel.关于如何实际删除所有内容,然后让新面板仍然出现的任何想法？
推荐指数
解决办法
查看次数
<img rel="nofollow noreferrer" /> vs background-image(css)的性能
我正在构建一个使用滚动插件的网站,该插件基本上可以动画滚动.我非常担心性能,好像我在网站中插入一些图像,滚动/动画时看起来很不稳定.
我可以用图像检测到的主要问题是回流/重绘问题,当图像没有正确的尺寸因此被缩放(我必须处理这个,我知道最佳实践).
记住这个说法(图像将被缩放).什么应该更好,图像元素或div与那些图像作为性能的背景？
我在我的Chrome浏览器内存工具中制作了这个jsFiddles,显示背景图像选项使用更少的内存.
<img />:http://jsfiddle.net/ek6Xn/
<img src="..." />
background-image:http://jsfiddle.net/ek6Xn/1/
<div></div>
div {
background:url(...);
background-size:100% 100%;
}
参考文献:
推荐指数
解决办法
查看次数
控制并精确测量图像的显示时间
对于反应时间研究(如果您感兴趣,请参阅此问题)我们希望控制和测量图像的显示时间.我们想说明在不同用户的机器上重绘所需的时间.
编辑:最初,我只使用内联执行进行计时,并认为我不能相信它可以准确地测量图片在用户屏幕上可见的时间,因为绘画需要一些时间.
后来,我发现了事件" MozAfterPaint ".它需要在用户的计算机上运行配置更改,并且相应的WebkitAfterPaint没有成功.这意味着我无法在用户的计算机上使用它,但我将它用于我自己的测试.我粘贴了相关的代码片段和我下面的测试结果.
我还在Chrome中使用SpeedTracer手动检查了结果.
// from the loop pre-rendering images for faster display
var imgdiv = $('<div class="trial_images" id="trial_images_'+i+'" style="display:none"><img class="top" src="' + toppath + '"><br><img class="bottom" src="'+ botpath + '"></div>');
Session.imgs[i] = imgdiv.append(botimg);
$('#trial').append(Session.imgs);
// in Trial.showImages
$(window).one('MozAfterPaint', function () {
Trial.FixationHidden = performance.now();
});
$('#trial_images_'+Trial.current).show(); // this would cause reflows, but I've since changed it to use the visibility property and absolutely positioned images, to minimise reflows
Trial.ImagesShown = …推荐指数
解决办法
查看次数
Java中的paint()和repaint()
我花了最近两个小时浏览和阅读这些方法和Graphics类,也许我很蠢,哈哈,但我只是不理解它们.它们适用于什么？我知道他们应该在屏幕上重绘或更新组件,但我从未理解为什么这是必需的(我是新手).例如,如果我在屏幕上移动JLabel,则调用setLocation()会将其移动得很好.这是不需要repaint()的场景吗？它在哪些场景中有用,为什么？
如果您认为这是一个可以使用搜索功能解决的问题,请道歉,但无论出于何种原因,我都没有得到它.
推荐指数
解决办法
查看次数
在开发工具时间轴中,空绿色矩形是什么？
在Chrome开发工具时间轴中,填充的绿色矩形(代表绘画操作)和空的绿色矩形(显然也代表绘画操作......)之间有什么区别？
推荐指数
解决办法
查看次数
为什么Chrome不需要在更改时重新绘制整个图层？
我试图在实践中理解Chrome的布局→绘图→复合管道是如何工作的.在我的测试中,我对Chrome在以下情况下的行为感到困惑.(Codepen)
var button = document.querySelector('button');
var red = document.querySelector('.red');
var blue = document.querySelector('.blue');
button.addEventListener('click', function() {
red.classList.toggle('test');
}).wrapper {
height: 100%;
width: 100%;
background-color: teal;
position: static;
}
.square {
height: 200px;
width: 200px;
position: static;
transition: transform 0.3s ease,
opacity 0.3s ease,
width 0.3s ease,
height 0.3s ease,
box-shadow 0.3s ease;
}
.red {
/* position: absolute; */
background-color: red;
top: 100px;
left: 100px;
/* will-change: transform; */
opacity: 1;
}
.blue {
background-color: blue;
z-index: 3; …推荐指数
解决办法
查看次数
如何提高DataGridView的绘画性能？
(抱歉英文不好)
我重新涂漆时的性能存在很大问题DataGridView.
我正在使用a DataGridView来显示来自外部应用程序流的日志.来自流的消息以高频率(小于1毫秒)进入.如果我DataGridView在每条新消息到来时立即添加新行,DataGridView则在下一条消息到来之前没有时间重新绘制自己.
一种可能的解决方案是使用队列来收集消息,并使用队列中的消息DataGridView每100毫秒重新绘制一次.这很好但是DataGridView当它自动滚动到最后一行时闪烁.(禁用平滑滚动)
你能帮助我改善DataGridView表现吗？
推荐指数
解决办法
查看次数
update()或repaint()无法触发paintEvent()
我有一个QScrollArea,它是一个很棒的滚动小部件.我喜欢在各种场合对内容进行更新.
为此,我做了一个覆盖paintEvent(QPaintEvent *).然后,每当我想要它完成时,我就会调用update()小部件.
问题: paintEvent()这个从未被调用过!
到目前为止我在故障排除中尝试过的
- 用
repaint()而不是update().应该立即打电话.不幸的是没有. - 测试
isVisible()和updatesEnabled - 测试我的覆盖是否正确.调整窗口大小调用我的函数.只有我的手动更新(),repaint()调用失败.
- 实现QTimer以每500ms触发update()或repaint().触发器提供文本输出,不调用该函数.
有人知道接下来要检查什么？什么可以使repaint()不调用paintEvent()？
推荐指数
解决办法
查看次数