All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| function shuffle(array){ | |
| for(var i = array.length-1; i > 0; i--) { | |
| var rnd = Math.floor(Math.random() * (i+1)); | |
| var tmp = array[i]; | |
| array[i] = array[rnd]; | |
| array[rnd] = tmp; | |
| } | |
| } | |
| function isInOrder(array) { | |
| for(var i = 0; i < array.length-1; i++) |
| [ | |
| { | |
| name:"HTML5", | |
| uri:"http://www.w3.org/TR/html5/single-page.html", | |
| category:"markup" | |
| }, | |
| { | |
| name:"HTML 5.1", | |
| uri:"http://www.w3.org/TR/html51/single-page.html", | |
| category:"markup" |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Magnifier Demo</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } |
| //JavaScript callee 用法示例 | |
| function factorial(num) { | |
| if (num <= 1) { | |
| return 1; | |
| } else { | |
| return num * arguments.callee(num - 1); | |
| } | |
| } | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>前端试题：CSS3 文字放大效果</title> | |
| </head> | |
| <style> | |
| a { | |
| display: table-cell; | |
| width: 220px; |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Nine Grid</title> | |
| <style> | |
| ul { | |
| width: 165px; | |
| padding: 30px; | |
| } |
| myArray = []; // bad | |
| myArray.length = 0; // good! |
| .mod { | |
| position: absolute; | |
| width: 300px; | |
| background: #eee; | |
| border: 1px solid #eee; | |
| padding: 0 50px; | |
| -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.2); | |
| -moz-box-shadow: 0 0 4px 0 rgba(0,0,0,0.2); | |
| box-shadow: 0 0 4px 0 rgba(0,0,0,0.2); | |
| top: 50%; |
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>css</title> | |
| <style> | |
| a{display:table-cell;background:green;vertical-align:bottom;padding-left:10px;padding-bottom:5px;height:130px;width:250px;} | |
| a:hover{-moz-transition:all ease-in 1s;-webkit-transition:all ease-in 1s;transition:all ease-in 1s;background:#8fc;font-size:40px;} | |
| </style> | |
| </head> |
