How to Slash Front‑End Lag: Mastering GC, Closures, and Pre‑Fetch Techniques

Front‑end performance is a critical concern for any website, and the growing richness of content and heavy use of Ajax in modern web applications push browsers to their processing limits. Google engineers Colt McAnlis and Steve Soulders shared their optimization experiences, including reducing reliance on the browser’s garbage‑collection (GC) mechanism and employing page pre‑fetch techniques.

Colt McAnlis, a Google engineer focused on native client development, highlighted JavaScript performance as a major challenge because the JavaScript engine’s GC can cause noticeable slowdowns, especially on mobile devices. He warned developers not to depend on the garbage collector.

GC automatically returns memory that a program no longer needs, but the JavaScript engine runs GC at seemingly random times, causing temporary performance drops such as reduced video frame rates or latency spikes from the typical 3‑5 ms to noticeable 20 ms.

Research cited by McAnlis indicates that to keep GC invisible to users, a system needs at least six times the memory currently available on a device—a demanding requirement for memory‑constrained mobile devices.

Closures, while programmer‑friendly for extending variable scope, exacerbate memory waste; libraries like jQuery that heavily use closures can lead to significant allocation overhead.

To improve performance and manage memory more predictably, McAnlis suggested a technique similar to that used by the Emscripten middleware library: compile C/C++ code to JavaScript, allocate a fixed memory block up front, and manually release unused memory, bypassing the JavaScript engine’s GC entirely.

Programs built with this approach can run 2‑4 times faster than typical JavaScript and avoid occasional GC‑induced stalls.

Steve Soulders, responsible for Google’s web performance and open‑source initiatives, also discussed emerging browser technologies for page pre‑fetching. By adding dns‑prefetch , pre‑fetch , and pre‑render tags to hyperlinks, browsers can retrieve linked resources before the user explicitly requests them, shortening the time between request and display.

Soulders cautioned that indiscriminate use of these tags can increase bandwidth and CPU usage, but they are valuable in contexts such as login pages or search result listings where users are likely to follow certain links.

Browsers further accelerate delivery through DNS pre‑resolution and TCP pre‑connect, predicting the next site a user may visit by observing typed characters or frequently accessed domains, and “warming up” connections in advance.

Reduce HTTP requests

Use CDN technology

Set HTTP cache‑control and expiration headers

Enable Gzip compression

Place stylesheets at the top of the page

Place JavaScript at the bottom of the page

Avoid CSS expressions

Externalize JavaScript and CSS

Reduce DNS lookups

Avoid redirects

Remove duplicate scripts

Configure Etags

Cache Ajax requests