5回答
重排和重绘有什么不同？
、、、
我不太清楚回流和重绘之间的区别(如果有任何区别的话)
看起来回流可能会改变各种DOM元素的位置，而重绘只是渲染一个新的对象。例如，移除元素时会发生回流，更改颜色时会发生重绘。
这是真的吗？
浏览 3提问于2010-03-31得票数 86
回答已采纳
如果这个问题已经存在，我很抱歉，但我找不到它。
在下面的代码中，假设DOM对象在每个点都被更新，那么页面回流/重绘将在哪些点被触发？
(function() {
//POINT A
for (var a=0; a<2; a++) {
//POINT B
for (var b=0; b<2; b++) {
//POINT C
}
//POINT D
for (var b=0; b<2; b++) {
//POINT E
}
//POINT F
}
//POINT G
浏览 2提问于2014-11-29得票数 4
我知道对网页的DOM进行某些更改(通过JavaScript)会导致渲染引擎计算一个新的布局进行渲染(不确定我的术语是否正确)。
我有一个使用comet样式的长轮询请求相当频繁地更新数据的过程。其中一些更新相当频繁。我知道一个很好的通用经验法则是删除目标DOM元素，进行必要的更改，然后将其放回DOM中(这样重新呈现时只有两次命中)，但我不确定如果您遇到相同的命中，是否只替换元素的内部文本。在我的例子中，我正在更新一些表格单元格的内容，它们只是文本(而不是包装在span或div中)。
浏览 2提问于2010-10-22得票数 0
回答已采纳
1回答
我在下面的代码中编写了一个连续批量dom更新的测试：
const container = document.querySelector('#container');
const button = document.querySelector('button');
function fulfill(text) {
container.innerHTML = '';
for (let i = 0; i < 10000 * 3; i++) {
const label = do
浏览 6提问于2019-08-22得票数 2
在查找.detach() jQuery方法时，在站点的“移除元素”部分下，我看到了下面的段落：
如果要对元素进行大量操作，那么.detach()方法是非常有价值的。在这种情况下，它对页面中的元素.detach()是有益的，在代码中处理它，然后在完成后将它还原到页面上。这限制了昂贵的"DOM触摸“，同时维护元素的数据和事件。
什么是元素上“重操作”的例子，以及如何将元素从页面中分离出来，以提高代码的效率？请举一个例子说明这是什么时候有用的。
浏览 2提问于2014-03-09得票数 1
3回答
有没有web开发人员的功能/工具可以让我们知道一个浏览器做了多少次重流？
基本上，我想得到一些反馈/信息。我不知道它会是什么样子，但也许会有某种性能图来显示时间线(类似于谷歌的)，这样我就可以调查一下，当浏览器突然做了大量的回流时，我可以指出，嘿，这是一个瓶颈，一定是这里有个bug/糟糕的实现。
浏览 3提问于2011-08-10得票数 20
回答已采纳
我有一个包含3D变换元素的元素。在webkit中，直到我将鼠标悬停在父元素上时，父元素的内容才会正确重绘。
浏览 0提问于2012-01-10得票数 0
回答已采纳
到目前为止，我不是JS开发人员(实际上，根本不是开发人员)，但我想尝试编写一个小的Greasemonkey脚本来隐藏某个网页上的一些元素。一旦我开始涉足它，我决定使用jQuery，只是为了让它更容易。一切都很顺利，脚本正在工作，但是现在它已经准备好了，我开始想知道细节了。
作为脚本的一部分，我需要找到特定的元素并隐藏它，以及它的前一个和下一个兄弟元素。我最终得到的结果不是那么好读，而是一行工作：
$('div#some-weird-box').prev().toggle(w).next().toggle(w).next().toggle(w);
我在这里担心的是，我将在三个单独
浏览 0提问于2009-08-31得票数 17
回答已采纳
1回答
浏览器滚动条动画性能
、、、
简而言之：
为什么会这样：
$('body').animate({scrollLeft: 1000});
比这快得多：
$('body').animate({"margin-left": 1000});
背景：
我在一个网站上工作，有一个动画滚动。例如:当用户点击一个链接时，我会触发一个javascript，使滚动条具有动画效果。类似于此网站的内容：
我解决这个问题的第一个想法是使用jQuery.animate动画margin-left，但这被证明是非常慢的(我的网站内容非常多)。在那之后，我尝试使用CSS3甚至-webkit- left对绝
浏览 2提问于2011-12-16得票数 0
回答已采纳
1回答
我在iframe中有内容，当我滚动主页(在iframe之外)时，我在IE6中的select和flash控件中得到了iframe内部奇怪的工件。
它应该是什么样子的(在滚动外部页面之前在IE6中确实是这样的)：
在IE6中滚动外部页面后的外观：
它在其他浏览器中运行良好，包括IE7+。如果我直接在iframe中加载内容，然后滚动页面，就不会发生这种情况。只有当它嵌入到iframe中时才会发生这种情况。
似乎iframe中的某些控件正在与外部页面一起滚动。
谢谢!
浏览 3提问于2009-10-19得票数 1
回答已采纳
我在一个快速触发的处理程序中更新元素的内联样式。在我的代码中，它是用onscroll编写的(我知道什么是节流)，但为了简单起见，这里我将使用setInterval。
我要问的是-这样做：
function updateStyle (value) {
document.body.style.marginTop = value + 'px'
}
setInterval(function () {
updateStyle(15)
}, 1)
...perform不会比这更糟：
var current = null
function updateStyle (value)
浏览 0提问于2019-07-10得票数 2
因此，就页面的速度而言，我们都知道操纵页面会迫使它重新绘制，这对浏览器来说是繁重的。因此，如果我有一个应用了此css的div：
div{
position: static;
}
并将其更改为
div{
position: fixed;
}
它将刷新页面并更改布局。我的问题是，如果div已经对其应用了修复，并且我执行
jQuery('div').css('position', 'fixed');
它会导致重画吗，或者它只会看到它已经设置好了，然后继续它的快乐之路？
谢谢你的帮助！
浏览 0提问于2012-01-12得票数 2
回答已采纳
1回答
我在一个web应用程序中有一个WebGL上下文，每当它初始化时，它在(HTML5 appcache)纹理变得可见和背景变得透明之前大约50000µs是可见的黑色正方形。
这使用的是Firefox，它是我的应用程序的唯一平台。
我如何摆脱这种行为？如果不可能，我该如何解决呢？
浏览 1提问于2013-09-10得票数 0
我了解到document.appendchild()是一种移动DOM元素的好方法，因为它将它们保存在内存中，但是查看浏览器时，我注意到移动的元素正在重新绘制。有没有办法避免这种情况？也许不使用appendChild，而是使用另一个函数来移动元素，而不需要重新绘制它们？
我找到的最好的解决方案是使用transform: translate，但这并不是我想要的，它只是在屏幕上移动元素，它不会改变它在DOM中的位置。
浏览 0提问于2017-04-07得票数 0
2回答
我在Opera浏览器中遇到了一个奇怪的问题。下面是测试用例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>opera hover issues</title>
</head>
<style>
.item {
background-color:pink;
border:1px solid red;
color: maroon;
height:100px;
浏览 0提问于2010-08-19得票数 0
我读了一些介绍“布局颠簸”和“回流/重绘”的帖子，这让我感到困惑。在一些帖子中，它说“布局颠簸”和“回流”是一回事。() ()
但是在和中，导致它们的CSS属性是不同的。如果有相同的，导致每个的属性都是相同的，这是有意义的。那么“布局颠簸”和“回流”是一样的吗？
浏览 7提问于2021-03-03得票数 2
我已经成功地将此代码片段与我的数据表集成在一起。
唯一的问题是，当页面加载或刷新时，甚至在输入任何搜索/过滤器/查询字之前，屏幕上的所有表似乎都会闪烁。
我尝试过使用隐藏/显示和CSS以及在JavaScript和HTML中显示结果的变体，但没有最终的解决方案。我很想知道如何解决这个问题，并保持mark.js突出显示的效果。
var input, table, rows, markInstance;
window.onload = function init() {
input = document.getElementById("myInput");
table
浏览 1提问于2019-07-18得票数 3
2回答
我构建了一个类似于的javascript/css依赖管理器。
它允许我这样做：
Loader.DependsOn(['/scripts/jqueryui.js', '/scripts/jquery.js'])
.Css('/css/jquery.css')
.Execute(function() { //Insert script here});
Loader将在执行之前动态加载脚本和css (如果它们还没有加载)。
除了IE之外，一切都正常。通过将链接附加到文档头来加载样式表。但是，在执行此操作之前，加载器会查看所请求的
浏览 2提问于2012-01-17得票数 2
回答已采纳
我有一个Handlebars.js模板，它接受一堆数据并将其呈现到一个表中。第一次运行时，它绑定得相当快，没有任何问题。但是，任何后续时间都需要很长时间(即使是对于相同的数据！)有时还会使浏览器崩溃。会出什么问题呢？
在其最通用的形式中，该模板如下所示：
{{#each this}}
<tr>
<td>{{data}}</td>
...
<td>{{moredata}}</td>
</tr>
{{/each}}
JS中的绑定逻辑看起来像这样(同样非常通用)：
var table = $('#
浏览 4提问于2014-01-15得票数 1
1回答
在所有浏览器上加速jquery动画的一些更实用的方法是什么？我目前正在使用带有GridView(表)的jquery，它越来越滞后，使得slideUp() slideDown()无法使用。
除了jquery.com之外的其他链接也非常受欢迎。
$(document).ready(function(){
$("#GridTable td").click(function() {
$(this).parent.slideToggle("normal");
});
});
不是复杂的代码。只是太慢了。请注意，我有一个包含数百万条记录的网格视图。如果能找到一些替代方案
浏览 1提问于2009-10-21得票数 0
回答已采纳
在离屏DIV中隐藏HTML文档的复杂部分会带来什么性能影响：
<div style="position:absolute;top:-10000px;left:-10000px;">
Lots of HTML here...
</div>
与使用"display: none“或"visiblity: hidden”相比？
是否存在性能/内存使用方面的损失？情况有多糟？如果目标是移动浏览器(iPhone/Android)，这是可取的吗？
浏览 0提问于2011-08-11得票数 9
1回答
我使用的是当我将鼠标悬停在图像上时显示的div。我想使用这个div来显示图像信息。如何在div中添加几行内容？我找到的唯一解决方案是div的innerHTML属性，但这意味着我必须使用它作为我想放在div上的一个ECH值。有没有一种方法可以用一条命令把更多的内容放到div上。我想使用javascript或dojo来实现这一点。
浏览 0提问于2012-11-30得票数 0
回答已采纳
1回答
好的，我有一个固定位置的div，它有一个指定的宽度。如果内容足够长，需要在一个设备方向(横向)上溢出，但不需要在另一个方向(纵向)上溢出，则如果设备更改方向，滚动将停止工作。
iOS7出现此问题(无法测试以前的版本)
以下是示例的地址：
下面是这个问题的一个例子：
浏览 0提问于2014-05-28得票数 3
前言
我刚开始用javascript编程，目前正在做我的这个爱好网站项目。该网站应该显示充满产品图片的页面，可以向左或向右“平移”。每个“页面”包含大约24张中等大小的图片，一页几乎占满了整个屏幕。当用户选择查看下一个页面时，他需要单击“n”向左拖动(例如)，让一个新页面(通过AJAX脚本动态加载)滑入视图。
问题所在
这需要我的javascript以屏幕的宽度同步“滑动”上面提到的两个页面。这导致了一个非常低的帧率。Firefox和Opera有一点滞后，Chrome的表现尤其糟糕:1帧动画大约需要1帧。100毫秒，因此使动画看起来非常“滞后”。
我不使用jQuery，也不想使用它或任何其他库
浏览 0提问于2013-03-08得票数 6
我有一个响应式的HTML表，它根据用户的屏幕大小而变化。我使用Ajax来加载表，因为数据经常变化。当浏览器处于全屏模式时，一切都工作得很好，但是，当我将屏幕变小并且表CSS更改为响应模式时，或者我在移动设备上查看表时，每次ajax再次加载表时，全屏表在显示响应表之前都会短暂闪烁。
我对响应表使用以下脚本：
我使用的代码如下：
function table() {
$.ajax({
url: 'mytable.php',
type: 'post',
data: {
name: '
浏览 2提问于2020-03-05得票数 0
我在Chrome 16和Safari 5桌面上遇到了这个问题：
要在最大化窗口的情况下重现有问题的视图，请减小窗口高度并重新加载。
如果是全屏，帧率会受到很大影响，但如果你降低窗口高度，那么webkit似乎对图形很满意。Opera和Firefox在任何大小上都没有问题。
图形是用d3.js创建的，但我认为同样的SVG图像也会发生这种情况，因为它只是生成元素的代码。光标的移动是纯js的。
顺便提一下，我发现如果我使用translate3d(x, y, 0)而不是顶部和左侧，鼠标移动是平滑的，但我更喜欢使用这个作为最后的手段。translate(x, y)也很慢。
浏览 2提问于2012-01-17得票数 3
回答已采纳
2回答
我现在正在研究virtual-dom，我想知道virtual-dom是否真的比使用view的手动操作更快。现在我明白了，virtual-dom和diff算法可以防止不必要的重新流，例如，当我们想要改变这一点时：
<div>
<div>a</div>
<div>b</div>
</div>
对于这一条：
<div>
<div>c</div>
<div>d</div>
</div>
因此，当我们使用直接操作时，我们可能会有4
浏览 0提问于2015-01-29得票数 5
2回答
正如我们所知，更改元素外观时会发生重绘，而更改布局时会发生重排。但是，我有一个问题，当更改img src属性时，是否会导致回流。 例如，有两个不同大小的图像，分别称为A.png和B.png。 html： <button>change image src<button>
<img src="A.png"> 然后我们将img src改为js： document.querySelector('button').onclick = function() {
document.querySelector('img'
浏览 60提问于2019-04-03得票数 1
2回答
在客户web应用程序上运行内存分析后，发现他们的许多DOM元素被创建，然后保存在内存中，以加快稍后显示它们的速度。
有人说：“在内存中保留DOM元素比重新绘制它们更便宜。”
我一直在努力寻找任何支持或反对这一论点的文献。
浏览 1提问于2014-04-02得票数 0
我有一个包含数百个div元素的HTML/JS网站。这些元素中的几十个应该一次快速更新(每秒多达250次)(即，它们应该一次全部更新，而不是让浏览器逐个执行不必要的工作)。要做到这一点，最有效的方法(最小化CPU负载和内存消耗)是什么?支持现代浏览器使用纯JavaScript或简单的库(不使用或类似的库，需要我修改超出DOM处理的代码)来实现这一点？我正在寻找类似这样的东西(其中imaginaryLibrary是我未知的库，我正在寻找)：
var i, element;
for(i = 0; i < 20; i++){
element = document.getElementBy
浏览 1提问于2016-05-05得票数 25
问题是：
我通过单击一些光标图像进行jQuery .ajax调用，以便在图书目录中导航，用ajax响应(普通html)替换div的内容。有一个光标图像，它只显示图书是否有一张以上的图片，这是由php代码控制的，它直接呈现ajax回调中给定的HTML。
在FF和IE >7中，脚本工作正常。但是在Webkit浏览器中，ajax回调做得很好，但是它不能正确地呈现CSS。似乎正确的光标图像在第一次显示后被缓存，即使书中可能没有任何额外的图像。有趣的是，显示了正确的光标图像，但JS功能不起作用(因为没有额外的图像，这是应该的)，还因为当你在Chrome中打开开发人员工具时，CSS呈现得很好，就像在
浏览 1提问于2010-03-31得票数 1
回答已采纳
1回答
我试图在Processing.js中做一个物理模拟，我只想在一个框架中执行一次绘图函数。这个是可能的吗？或者还有另一种功能可以做到这一点？
浏览 1提问于2015-04-13得票数 0
回答已采纳
6回答
CSS转换未触发
、、、
我正在创建一个DOM元素(一个div)，将其添加到DOM中，然后在javascript中快速更改其宽度。从理论上讲，这应该会触发CSS3转换，但结果是直接从A到B，而不是两者之间的转换。
如果我通过单独的测试单击事件更改宽度，则一切都按预期工作。
下面是我的JS和CSS：
JS (jQuery)：
var div = $('<div />').addClass('trans').css('width', '20px');
$('#container').append(div);
div.css('
浏览 0提问于2011-08-16得票数 25
回答已采纳
我正在尝试寻找一种高效的算法来为一堆<li>动态加载背景图像，但存在一些效率问题。我目前的代码如下：
function elementInView($elem, vps, vpe) {
var elempos = $elem.position();
var pagestart = elempos.top + vps;
var pageend = elempos.top + vps + $elem.height();
var offset = 78 - Math.max(0,vps-pagestart) - Math.max(0,pageend-vp
浏览 1提问于2010-01-26得票数 0
回答已采纳
嗨，最好的看，然后说:)
当我点击视频(最后一个)时，它会闪烁/闪烁，你可以随便叫它什么。我似乎只在firefox中得到了这个。有什么办法解决这个问题吗？
谢谢:)
浏览 0提问于2011-01-28得票数 0
我开始使用gulp.js为我的个人网站创建自己的工作环境，直到我偶然发现一个我似乎无法解决的错误。
下面是我的代码：(请注意，我非常肯定错误在我的“sassCompile”任务中)
/**
* Initialize all gulp plugins
*/
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var browserSync = require('browser-sync').crea
浏览 1提问于2018-09-21得票数 0
回答已采纳
2回答
我正在尝试从实现wmd编辑器(就像这里在stackoverflow上使用的编辑器一样)，但我遇到了一个问题。
当您在文本区域中键入内容时，它将在浏览器中启动两个绘制操作。一个用于重新绘制文本区本身，另一个用于重新绘制预览面板。你可以通过打开chrome检查器，在问题栏中输入一些文本的同时使用时间线标签来观察stackoverflow上的情况。
但在我的页面上，当浏览器必须执行这些绘制操作时，它会重新绘制整个视口。这需要更长的时间。在我的页面上，每个绘制操作大约需要100ms，而在stackoverflow上大约需要1ms。
在我的测试中，这似乎是与css相关的。我可以在wmd-new exam
浏览 6提问于2011-02-25得票数 2
回答已采纳
AFAI阅读并浏览其他问题，HTML文档中显示的内容，按顺序执行的行。我认为同样的事情也适用于Javascript文件。我期望在下面的代码中，首先背景被绘制为黄色，然后立即获得readyyyy消息，但情况完全相反。alert()首先运行，然后页面为黄色。为什么？
js代码，
$('body').css("background", "yellow");
function f() {
alert("readyyyy");
}
$(f()); // same as $(document).ready(…)
html代码，
&
浏览 0提问于2019-07-23得票数 1
如果我运行类似这样的命令：
var div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
function setAnimation() {
div1.style.webkitTransform = 'matrix(1,0,0,1,1200,0)';
div2.style.webkitTransform = 'matrix(1,0,0,1,0,0)';
div1.style.webkitTra
浏览 0提问于2012-02-16得票数 3
回答已采纳
页面速度建议给出图像的高度和宽度，有人能告诉我指定图像的高度和宽度有什么好处吗？
通常，我们总是在src标签中给出图像的url，并且总是忘记指定宽度和高度。
浏览 2提问于2010-11-23得票数 2
回答已采纳
1回答
谁有一个很好的理由，为什么我看到重影时，我拖动形状周围的画布与d3.js？示例屏幕截图：
下面是代码(coffeescript，我发现它更易于阅读和编写)：
canvas = d3.select("#canvas").append("svg:svg")
.attr("width","100%")
.attr("height","100%")
# patterns
defs = canvas.append("svg:defs")
for c in ["cre
浏览 4提问于2011-10-21得票数 1
所以我在上的FlexSlider一开始加载很慢。我搜索了一些答案，发现了。当我试图实现最有用的答案时，出现了一些问题。现在我的网站似乎扭曲了图像，当图像加载时“眨眼”。(我特别在Safari和Chrome中检查过这一点。)
有没有人知道如何让它加载得更快，而不是像现在这样搞得一团糟？
浏览 1提问于2013-12-21得票数 0
所以我有一个<div></div>。我想知道一个字符串在换行到下一行之前可以容纳多少(长度)。脚本应该考虑元素的宽度(实际的clientWidth)、左边距和右边距以及左边和右边的填充。
<div id="stackoverflow"></div>
和JavaScript，假设魔术函数是calculate
calculate("#stackoverflow","the string to be inputed to the div");
// That should either output ho
浏览 2提问于2011-02-08得票数 4
回答已采纳
2回答
我已经包含了一个对此进行了深入的描述，但基本上火狐在元素中添加了左/右空白，使得感知到的填充不同于Chrome和IE。如果我修改Firebug中的值并改回原来的值，那么空白就消失了，并且按照我最初的预期工作。这是非常令人沮丧的，有什么想法吗？
请观看以获取准确的描述。
谢谢
更新1:这是一个测试服务器，你可以在上面检查代码，它可能与视频略有不同，但问题仍然是一样的。
更新2:它似乎是FF有问题的:第一个字母的伪元素。我认为这是一个实际的浏览器错误，但现在不确定如何解决这个问题。
浏览 2提问于2012-10-31得票数 5
回答已采纳
我有一些处理需要几秒钟，所以我想在处理过程中添加一个可视指示器。
.processing
{
background-color: #ff0000;
}
<div id="mydiv">
Processing
</div>
脚本：
$("#mydiv").addClass("processing");
// Do some long running processing
$("#mydiv").removeClass("processing");
我天真地认为类将应用于div，并且U
浏览 0提问于2012-03-23得票数 7
我正在为我的公司开发一个小型的内部应用程序来可视化一些业务数据。为此，我使用了带有DataViz小部件的Kendo UI mobile。我现在认识到的是，当设备翻转(例如从端口模式到横向模式)时，整个应用程序都会进行调整，但DataViz组件却不会。我试图对窗口调整大小事件做出反应，但这并没有起到作用。我知道你想看一些代码，这是你想要的：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content=
浏览 0提问于2014-05-22得票数 0
1回答
由于某些原因，我的渲染有时会卡顿。正如您在这里看到的()。使用箭头键移动。底部的画布只预渲染一次，然后每一帧都会在主要的上部画布上绘制预渲染。
这是我的代码，每一帧都会被调用：
var tick = (function() {
var lastTimestamp = 0;
return function(timestamp) {
dt = (timestamp - lastTimestamp) / 1000;
lastTimestamp = timestamp;
ctx.fillStyle = "black";
浏览 1提问于2014-06-27得票数 1
Paper.js有以这种方式统一路径的方法
const result = circle1.unite(circle2).unite(circle3)
但是要渲染结果，我需要从画布上删除它，然后再画一次。
if (result) {
result.remove();
}
result.strokeColor = new Color("red");
它会导致性能不佳，有没有办法对其进行优化？
浏览 1提问于2020-07-03得票数 0
回答已采纳
2回答
我对androids (我的设备版本是4.1.2)的原生浏览器和androids chrome有一个问题。我使用SVG和onload事件构建了一个HTML5 webapp。我像这样包含了SVG (并由W3C推荐)
<object id="svgContent" data="file.svg" onload="MyMethod();">
Your browser did not support SVG
</object>
我的JS函数如下所示
function MyMethod() {
$('#svg
浏览 1提问于2014-02-23得票数 1
当datetime xAxis的startOnTick和/或endOnTick设置为true时，向左和向右拖动导航器会将其展开，直到填满整个数据范围。
请参阅：
以下代码重复：
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http:
浏览 1提问于2013-03-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
