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
| // Usage | |
| var workerFibo = createPromiseWorker(function(x){ | |
| return (function fibo(n){ | |
| if (n > 1) { | |
| return fibo(n - 1) + fibo(n - 2); | |
| } else { | |
| return 1; | |
| } | |
| })(x) | |
| }); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>Site Title</title> | |
| <link rel="stylesheet" href="/assets/css/style.min.css"> |