What is Layout event in chrome timeline?

165 views
Skip to first unread message

solima...@gmail.com

unread,
May 9, 2013, 12:13:43 PM5/9/13
to google-chrome-...@googlegroups.com
I have performance issue when resizing the page, by inspecting the page in chrome timeline i found that layout event take long time.
i need to know what happen in dom when Layout event trigger? what makes it slow when resizing? is there best practice to be considered to avoid long time in layout?

Thanks

PhistucK

unread,
May 9, 2013, 1:29:57 PM5/9/13
to solima...@gmail.com, Google Chrome Developer Tools
The layout event means that the rendering engine recalculates all of the dimensions/position/appearance of the elements of the current viewport (or all of the elements).
Resizing triggers layout because it changes the width of <html>/<body> (both of them or one of them, I do not remember), for example, which can change the positions of things, or trigger media query rules and similar.


☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Tim Statler

unread,
May 9, 2013, 1:42:15 PM5/9/13
to PhistucK, solima...@gmail.com, Google Chrome Developer Tools
Here are some resources for learning about minimizing layout (also called reflow):

--
Tim Statler | Technical Writer - Chrome Developer Relations | timst...@google.com | 

solima...@gmail.com

unread,
May 10, 2013, 9:08:46 AM5/10/13
to google-chrome-...@googlegroups.com, solima...@gmail.com
I just found the issue that cause the bad performance in reflow. All text in Arabic in my site, after changing it to English the performance enhanced very much. 
Is there difference in rendering Arabic language than English? how to overcome this issue?
Reply all
Reply to author
Forward
0 new messages