Event wanted after page is refreshed
in [JavaScript]
|
Prev: Earn Money from Home as Part Time Job!
Next: FAQ Topic - Why do I get permission denied when accessing a frame/window? (2009-12-27)
From: Hans-Georg Michna on 17 Jan 2010 05:58 On Sat, 16 Jan 2010 04:21:51 -0800 (PST), Jorge wrote: >But: >element.style.fontSize= (a different value); >var height= element.offsetHeight; //requires a reflow Sure, but the question is, when is the reflow required and when does it actually happen? The sensible thing to do for the browser is nothing, while the running JavaScript code may be adding more DOM changes, then do one reflow in the end. Hans-Georg
From: kangax on 17 Jan 2010 08:57 On 1/17/10 5:58 AM, Hans-Georg Michna wrote: > On Sat, 16 Jan 2010 11:43:10 -0500, kangax wrote: > >> So if element dimensions change while function is running, what do you >> expect to see when inspecting that element's dimensions? Same value? >> >> For example: >> >> (function(){ >> >> var offsets = []; >> >> for (var i = 100; i<= 500; i += 100) { >> document.body.style.width = i + 'px'; >> offsets.push(document.body.offsetWidth); >> } >> >> return offsets; >> >> })(); >> >> Should `offsets` now contain same values? > >>> In fact, wouldn't it be wise for the browser to wait until all >>> JavaScript processing has finished and the processor has nothing >>> better to do? > >> For repaint, sure, but not for reflow. > > You are right, but only if a reflow result is actually queried > by the JavaScript code. As long as that doesn't happen, a reflow > is not needed. Yep. > > I see that I have to change my statement. A reflow should not > happen while JavaScript code is running, with the exception that > the JavaScript code queries anything that depends on a reflow. Of course. In fact, that's exactly what (modern) Gecko and WebKit do. To quote one of Zbarsky's (senior engineer at Mozilla) replies in a WHATWG thread (<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/023209.html>): "Note that Gecko will not perform layout while your script is running, unless you ask for layout information." [...] -- kangax
From: Jorge on 17 Jan 2010 12:38 On Jan 17, 11:58 am, Hans-Georg Michna <hans- georgNoEmailPle...(a)michna.com> wrote: > On Sat, 16 Jan 2010 04:21:51 -0800 (PST), Jorge wrote: > >But: > >element.style.fontSize= (a different value); > >var height= element.offsetHeight; //requires a reflow > > Sure, but the question is, when is the reflow required and when > does it actually happen? Reflows happen as needed: either because your code is asking for data that requires (and triggers) it, or because it's time for a reDRAW. > The sensible thing to do for the browser is nothing, while the > running JavaScript code may be adding more DOM changes, then do > one reflow in the end. ....unless your code asks for some data that triggers it. Even if reflows are known to be expensive operations, simply asking for an .offsetXXX seems to be very expensive too, even when it should *not* trigger a reflow. At least that's what it looks like in this test: http://jorgechamorro.com/cljs/094/ The relative speeds I see (in a Mac) are: Reflow needed read .offsetXXX speed S O C FF Don't care NO 100% 100% 100% 100% NO YES 10% 25% 32% 42% YES YES 1.4% 2.8% 3.9% 9.5% -- Jorge.
From: Stefan Mueller on 18 Jan 2010 04:36 On Jan 14, 4:38 pm, Jorge <jo...(a)jorgechamorro.com> wrote: > On Jan 14, 9:54 am, Stefan Mueller <seekw...(a)yahoo.com> wrote: > > On Jan 13, 3:12 am, Jorge <jo...(a)jorgechamorro.com> wrote: > > > > Stefan, > > > > All you need to do is to wrap the whole thing in a setTimeout > > > (sortingCode ,0); That will warrant a redraw *before* it executes. > > > Like this: > > > > elem.onclick= function onclick () { > > > elem.onclick= null; //trash useless double-clicks > > > setTimeout(function () { > > > > //Put your sorting code here. > > > > elem.onclick= onclick; > > > }, 0);}; > > > > -- > > > Jorge. > > > Jorge, > > > I tried to implement setTimeout but I'm not sure if I did it correct > > (the way you advised me to do): > > var_this_global = this; > > var_todo_global = "function_sort(var_this_global);"; > > setTimeout(var_todo_global, 1200); > > > It only works if I set the value in setTimeout to at least 1200. It > > works if you click a second time on a column header while the sorting > > is running. But it doesn't work if you click a third time. > > Because I have to set the value to at least 1200 it always takes 1.2 > > seconds until the sorting starts. > > Ok. check this one:http://jorgechamorro.com/cljs/092/ > > Does it work for you ? > -- > Jorge. Jorge, At the weekend I've done quite a lot of testing with your code and yes your code works perfect! Many thanks for your great help. Stefan
From: Stefan Mueller on 18 Jan 2010 04:37
On Jan 15, 12:09 am, Hans-Georg Michna <hans- georgNoEmailPle...(a)michna.com> wrote: > By the way, how do you sort? Do you use JavaScript's array sort > function? If not, you probably should, for higher speed. > > Hans-Georg I'm not using the JavaScript's array sort function because I want to add additional features (empty rows should always be at the end / already sorted columns should not get mixed up while another column gets sorted / ...). Anyway, thanks for the hint. Stefan |