Before you continue, if you don't know what IMGUI is don't bother reading this post, just ignore it, don't write anything in comments section, etc. If you're curious about IMGUI see bottom of this post, otherwise continue whatever you were doing, this post it's not for you. Thanks!
If you know what IMGUI is, for context read following presentations and blog posts:
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
| http { | |
| log_format bodylog '$remote_addr - $remote_user [$time_local] ' | |
| '"$request" $status $body_bytes_sent ' | |
| '"$http_referer" "$http_user_agent" $request_time ' | |
| '<"$request_body" >"$resp_body"'; | |
| lua_need_request_body on; | |
| set $resp_body ""; | |
| body_filter_by_lua ' |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| -- Two dashes start a one-line comment. | |
| --[[ | |
| Adding two ['s and ]'s makes it a | |
| multi-line comment. | |
| --]] | |
| ---------------------------------------------------- | |
| -- 1. Variables and flow control. | |
| ---------------------------------------------------- |
| // Add an outer click Event to an Element | |
| // http://cpojer.net/blog/Custom_outerClick_event (but this page doesn't exist anymore) | |
| Element.Events.outerClick = { | |
| base: 'click', | |
| condition: function(event){ | |
| event.stopPropagation(); | |
| return false; | |
| }, |