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
extension_id=jifpbeccnghkjeaalbbjmodiffmgedin # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc"
unzip -d "$extension_id-source" "$extension_id.zip"Thx to crxviewer for the magic download URL.
| function u() { | |
| requestAnimationFrame(u); | |
| g = p ? | |
| audio.currentTime * 60 : ( | |
| audio = "RIFFdataWAVEfmt " + atob("EAAAAAEAAQAAeAAAAHgAAAEACAA") + "data", | |
| b.style.background = "radial-gradient(circle,#345,#000)", | |
| b.style.position = "fixed", | |
| b.style.height = b.style.width = "100%", |
Just jotting some notes on delivering webfonts performantly…
still an incomplete draft.
Critical fonts are neccessary for the above-the-fold content to be useful. Identify which of the fonts you NEED for the first render, as they get very different treatment vs the others.
You want the network reqs for your critical fonts to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines
Just some early draft thoughts
Increased modularity is a long-standing request of jQuery. 3.0 should deliver on that. Many authors will use jQuery 3.0 in ES6 codebases, and often alongside frameworks that have overlap in functionality.
That said, a majority of developers will use a monolithic build. jQuery 3.0 must aggressively remove API surface area and functionality from this core build to protect developers from performance footguns. The jQuery team has reasonably voiced concern that removing modules means it's less likely for people to upgrade. While some users do attempt jQuery version upgrades, many freeze their version and never revisit it. I'd like to get more data on this phenomenon as I think we're optimizing API deprecation policy for a small audience.
Lastly, it's 2015 and the gap between JavaScript developers and jQuery developers has never been bigger. Let's bridge that gap. We should encourage the developer to use modern DOM APIs (that don't suck) and polyfill as neccessary.
| /* bling.js */ | |
| window.$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function (name, fn) { | |
| this.addEventListener(name, fn); | |
| } | |
| NodeList.prototype.__proto__ = Array.prototype; |
I've heard this before:
What I really get frustrated by is that I cannot wrap
console.*and preserve line numbers
We enabled this in Chrome DevTools via blackboxing a bit ago.
If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.
| var Chrome = require('chrome-remote-interface') | |
| Chrome({ | |
| chooseTab: function(tabs) { | |
| var idx = 0 | |
| tabs.forEach(function(tab, i) { | |
| if (tab.url === 'http://localhost:9966/') | |
| idx = i | |
| }) | |
| return idx |
I hereby claim:
To claim this, I am signing this object:
| # Build arguments for the gn build | |
| # You can set these with `gn args out/Default` | |
| # ( and they're stored in src/out/Default/args.gn ) | |
| # See "gn args out/Default --list" for available build arguments | |
| # component build, because people love it | |
| is_component_build = true | |
| # release build, because its faster | |
| is_debug = true |