reflow | 易学教程

Why does a transition occur when showing an element after setting a property while the element is hidden?

阅读更多关于 Why does a transition occur when showing an element after setting a property while the element is hidden?

问题 A live example can be seen here. A red square (showing) is directly above a green square (hidden as overflow). Click on the square, and both colored squares are instantly made fully transparent. Additionally, the height of the red square is set to 0; this fires a transition, but the transition goes unseen because the red square is now transparent. Before clicking the square again, examine the toggle function. Looking at the JavaScript, I would expect the height of the red square to be reset

cssText or individual stylename?

阅读更多关于 cssText or individual stylename?

问题 When we are applying a lot of style changes using JavaScript to a single element, phpied & Writing Efficient JavaScript (slide 87) suggests: instead of applying styles one by one using style.stylename, apply everything in one go using cssText or changing classname as it'll reduce reflows/repaints Which is better when there's only a single style change? document.getElementById('myid').style.cssText += ";color:#999;"; OR document.getElementById('myid').style.color = "#999"; jsperf.com/csstext

How can I visualize that reading element.offsetWidth causes a recalc/reflow

阅读更多关于 How can I visualize that reading element.offsetWidth causes a recalc/reflow

问题 It's written everywhere that reading element.offsetWidth causes a recalculation (or even a reflow?) of the element's dimensions. However, I'm struggling with making this effect visible. In chrome I would expect I would be able to make it visible with 3 simple steps: open the Chrome dev tools Go to the element tab and select an element that you want to cause a recalc/reflow on Go to the timeline tab and start recording Go to the console and type $0.offsetWidth Now if I go to the timeline tab I

How can I visualize that reading element.offsetWidth causes a recalc/reflow

阅读更多关于 How can I visualize that reading element.offsetWidth causes a recalc/reflow

It's written everywhere that reading element.offsetWidth causes a recalculation (or even a reflow?) of the element's dimensions. However, I'm struggling with making this effect visible. In chrome I would expect I would be able to make it visible with 3 simple steps: open the Chrome dev tools Go to the element tab and select an element that you want to cause a recalc/reflow on Go to the timeline tab and start recording Go to the console and type $0.offsetWidth Now if I go to the timeline tab I would assume to see a reflow drawn. However, I see nothing. So I must have gotten something wrong.

Is it possible to “buffer” DOM changes that happen in a loop (to increase performance)?

阅读更多关于 Is it possible to “buffer” DOM changes that happen in a loop (to increase performance)?

To make it clear what I'm asking, here is my example ( fiddle ). I have a list of ~500 random names. I have an input at the top that has live-style searching. On every keyup , the value of the input is taken, and every item in the list is matched against it. Items that don't match are hidden. Subjectively, the performance is okay , but not great. If you type quickly there is a noticeable pause before the list updates. I haven't profiled the code, but the bottleneck is almost certainly the changes to the DOM and the reflows it causes. I wonder if it's possible to “queue up” these changes and

When is Element.getBoundingClientRect guaranteed to be updated / accurate?

阅读更多关于 When is Element.getBoundingClientRect guaranteed to be updated / accurate?

问题 I am working on some code that uses Element.getBoundingClientRect (gBCR), coupled with inline style updates, to perform calculation. This is not for a general website and I am not concerned or interested in if there are "better CSS ways" of doing this task. The JavaScript is run synchronously and performs these steps: The parent's gBCR is fetched Calculations are performed and; A child element of the parent has inline CSS styles (eg. size and margins) updated The parent's gBCR is fetched

Does touching the DOM trigger a reflow and repaint even if nothing changes?

阅读更多关于 Does touching the DOM trigger a reflow and repaint even if nothing changes?

问题 I am working on a small JavaScript template engine, and I have two possible approaches for dealing with updates to the DOM when the model changes: Check if the DOM update is really needed before doing it. This has the benefit of not risking unnecessary updates, but I am wasting space on keeping track of old values. if (oldValue !== newValue) { element.textContent = newValue; } Just do it. This is obviously simpler, but I am afraid that I will be triggering repaints and reflows for no reason.

Does touching the DOM trigger a reflow and repaint even if nothing changes?

阅读更多关于 Does touching the DOM trigger a reflow and repaint even if nothing changes?

I am working on a small JavaScript template engine, and I have two possible approaches for dealing with updates to the DOM when the model changes: Check if the DOM update is really needed before doing it. This has the benefit of not risking unnecessary updates, but I am wasting space on keeping track of old values. if (oldValue !== newValue) { element.textContent = newValue; } Just do it. This is obviously simpler, but I am afraid that I will be triggering repaints and reflows for no reason. element.textContent = newValue; Note that I am also manipulating the DOM by calling setAttribute ,

How can I force reflow after DHTML change in IE7?

阅读更多关于 How can I force reflow after DHTML change in IE7?

问题 I have a page where the user can dynamically add file upload boxes. Adding the boxes changes the height of the div they are in, but certain elements of the div below it stay in the same place, so they start to overlap with the new DOM elements. This works correctly in IE8, Firefox, Chrome. How can I force IE7 to reflow the page with the new DHTML? The best solution I worked out was this: window.resizeBy(1, 0); setTimeout(UndoResize, 0); But it doesn't work with a maximized window (it restores

How can I force reflow after DHTML change in IE7?

阅读更多关于 How can I force reflow after DHTML change in IE7?

I have a page where the user can dynamically add file upload boxes. Adding the boxes changes the height of the div they are in, but certain elements of the div below it stay in the same place, so they start to overlap with the new DOM elements. This works correctly in IE8, Firefox, Chrome. How can I force IE7 to reflow the page with the new DHTML? The best solution I worked out was this: window.resizeBy(1, 0); setTimeout(UndoResize, 0); But it doesn't work with a maximized window (it restores the window). Try: element.className = element.className; on the modified div (or possibly its parent,