New Perspectives On Web Design

By Addy Osmani CHAPTER 6

CSS

.mover {
background: url(http://jankfree.org/velocity-europe/examples/too-
much-layout/particle.png);
height: 100px;
width: 100px;
position: absolute;
z-index: 0;
}

input {
z-index: 2;
font-size: 25pt;
height: 100px;
width: 100px;
display: inline-block;
}

analYze The ReCoRDing
Looking at the recording of the first few frames it’s clear that each one is
taking over 300ms to complete. If you hover your mouse over one of the
frames a pop-up appears showing additional details about the frame.

To improve rendering performance, Chrome usually batches layout
changes requested by pages and attempts to schedule a layout pass to asyn-
chronously calculate and render the requested changes.