In the last 10 years, I have seen websites evolve from ugly looking text-based websites to fancy (but extremely heavy) Flash-based websites to CSS3-enabled lightweight yet attractive websites. In the last few years a new genre of websites have sprung up called Web apps.
Tag: css
Understanding CSS Timing Functions
People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!
6 Best Practices to Minimize Reflow
- Avoid setting multiple inline styles; avoid setting styles individually. These trigger a reflow for each dynamic style change.
- Use classNames of elements, and do so as low in the DOM tree as possible. Changing the class attribute lets you apply multiple styles to an element with a single reflow. But since this reflows all the element’s children, that means you don’t want to change the class on a wrapper div if you’re only targeting its first child.
- Batch your DOM changes and perform them “offline”. ”Offline” means removing the element from the active DOM (e.g.
$.detach()), performing your DOM changes and then re-appending the element to the DOM. - Avoid computing styles too often. If you must then cache those values. E.g. store
var offsetHt = elem.offsetHeightonce instead of calling it multiple times. - Apply animations with position fixed or absolute. So the animation doesn’t affect the layout of other elements.
- Stay away from table layouts, they trigger more reflows than block layouts because multiple passes must be made over the elements.
source via: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom-responsibly