| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <script src='./jquery-v3.0.0.js'></script> | |
| <script src='./redux-v3.6.0.min.js'></script> | |
| <title>Document</title> | |
| </head> |
| const bindViewToData = (el, data) => { | |
| Object.keys(data).forEach((k) => { | |
| let v = data[k] | |
| Object.defineProperty(data, k, { | |
| get () { | |
| return v | |
| }, | |
| set (nv) { | |
| v = nv |
| const createDOMFromString = (domString) => { | |
| const div = document.createElement('div') | |
| div.innerHTML = domString | |
| return div | |
| } | |
| class Component { | |
| constructor (props = {}) { | |
| this.props = props | |
| } |
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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()