Effective Front-End Performance Optimizations: Object Caching, Object.freeze(), Preloading, and Parallel Loading

Performance optimization remains a core topic in front‑end development because it directly influences user experience and, for commercial sites, the efficiency of traffic monetization. Studies such as DoubleClick by Google show that if page load time exceeds 3 seconds, 53 % of users abandon the page, and publishers whose pages load within 5 seconds earn at least twice the ad revenue of those loading in 19 seconds.

While HTTP/2 and server‑side rendering have made many classic tips (e.g., Yahoo’s 35 rules) less relevant, there are still several pure front‑end details that are often overlooked but can yield noticeable gains, especially in Vue‑based projects.

1. Object Caching (self)

In JavaScript, caching frequently accessed objects reduces property‑access depth. A common pattern is to store const self = this (or cache a nested object) and reuse the reference. This not only avoids verbose property chains but also shrinks the minified bundle.

Example before caching:

const obj = {
    human: {
        man: {}
    }
};
obj.human.man.age = 18;
obj.human.man.name = 'Chen';
obj.human.man.career = 'programmer';

After minification the code becomes:

var ho={human:{man:{}}};ho.human.man.age=18,ho.human.man.name="Chen",ho.human.man.career="programmer";

By caching the man object:

const obj = {
    human: {
        man: {}
    }
};
const man = obj.human.man;
man.age = 18;
man.name = 'Chen';
man.career = 'programmer';

the minified result is reduced further:

var ho={human:{man:{}}},yo=ho.human.man;yo.age=18,yo.name="Chen",yo.career="programmer";

In a real‑world Vivo project containing 3 836 occurrences of this, caching reduced the compressed file size by more than 10 KB (from ~375 KB to ~364 KB).

2. Object.freeze()

Vue makes every data property reactive by defining getters/setters. If a property is non‑configurable, Vue skips the reactive conversion, saving the work of dependency collection and update cycles. This can be achieved by freezing immutable data.

Vue’s defineReactive checks the property descriptor:

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (obj, key, val, customSetter?, shallow?) {
  const dep = new Dep();
  const property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return;
  }
  ...
}

Utility functions for deep freezing and deep cloning:

/**
 * Deep freeze an object
 */
function deepFreeze(obj) {
  Object.keys(obj).forEach(key => {
    const prop = obj[key];
    typeof prop === 'object' && prop !== null && deepFreeze(prop);
  });
  return Object.freeze(obj);
}

/**
 * Simple deep clone (loses circular references)
 */
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

Benchmarks from Vue’s big‑table test show that using Object.freeze() can make rendering four times faster.

3. Pre‑loading Mechanisms

Modern browsers provide several pre mechanisms to fetch resources earlier:

Preload : Explicitly tells the browser to fetch a resource (style, script, image, font) before it is needed.

Prefetch : Low‑priority hint to download resources that might be needed for a future navigation.

DNS Prefetch : Resolves domain names in the background.

Prerender : Renders an entire page in the background.

Preconnect : Performs DNS lookup, TCP handshake, and TLS negotiation ahead of time.

HTML snippets:

<link rel="preload" as="style" href="/assets/css/app.css">
<link rel="preload" as="script" href="/assets/js/app.js">
<link rel="preload" as="image" href="/assets/images/man.png">
<link rel="preload" as="font" href="/assets/font/rom9.ttf">

<link rel="prefetch" href="/uploads/images/pic.png">
Link: </uploads/images/pic.png>; rel=prefetch

<link rel="dns-prefetch" href="//sthf.vivo.com.cn">

<link rel="prerender" href="https://www.vivo.com.cn">

<link rel="preconnect" href="//sthf.vivo.com.cn">

4. Parallel Loading

Large SPA frameworks (Vue, React, Angular) often cause a deep waterfall: HTML → CSS/JS → API → images. By initiating API requests and preloading assets before the framework finishes parsing, the levels can be overlapped, dramatically reducing overall load time.

Example of early AJAX request (plain JavaScript, ES5‑compatible):

var win = window;
var xhr = new XMLHttpRequest();
xhr.open('get', '/api/member/masterpage?t=' + Date.now(), true);
xhr.onerror = function () { win._mainPageData = {msg: '请求出错', code: 10000}; };
xhr.timeout = 10000;
xhr.ontimeout = function () { win._mainPageData = {msg: '请求超时', code: 10001}; };
xhr.onreadystatechange = function () {
  try {
    var status = xhr.status;
    if (xhr.readyState == 4) {
      win._mainPageData = (status >= 200 && status < 300) || status == 304
        ? JSON.parse(xhr.responseText)
        : {msg: '', code: 10002};
    }
  } catch (e) { /* ignore */ }
};
xhr.send(null);

Preloading images with format detection (webp vs png):

var win = window, doc = document;
win._supportsWebP = (function () {
  var mime = 'image/webp';
  var canvas = typeof doc === 'object' ? doc.createElement('canvas') : {};
  canvas.width = canvas.height = 1;
  return canvas.toDataURL ? canvas.toDataURL(mime).indexOf(mime) === 5 : false;
})();
var body = doc.body,
    fragment = document.createDocumentFragment(),
    imgPostfix = '.png' + (win._supportsWebP ? '.webp' : ''),
    linkPrefix = '//topicstatic.vivo.com.cn/f5ZUD0HxhQMn3J32/wukong/img/',
    imgPreLoad = [
      linkPrefix + '5f88483c-4d76-42d4-912d-35c8c92be8e6' + imgPostfix,
      linkPrefix + '5ee4c220-cd98-4d8c-9cdc-5fca3e103227' + imgPostfix,
      linkPrefix + '131008e1-9230-480c-934a-30f9f83e17ae' + imgPostfix,
      linkPrefix + 'cee41d4d-853d-4677-9a20-b9b5e1c4ffbenwebp' + imgPostfix,
      linkPrefix + 'ddf2cad0-d334-437a-8923-7b36a65544d1nwebp' + imgPostfix
    ];
imgPreLoad.forEach(function (link) {
  var img = doc.createElement('img');
  img.src = link;
  img.style.left = '-9999px';
  img.style.position = 'absolute';
  fragment.appendChild(img);
});
body.insertBefore(fragment, body.firstChild);

Embedding a custom font via base64‑encoded @font-face:

@font-face {
    src: url(data:font/truetype;charset=utf-8;base64,AA...省略...AK) format("truetype");
    font-style: normal;
    font-weight: normal;
    font-family: "Rom9";
    font-display: swap;
}

5. Real‑World Application

The techniques above were applied to the Vivo Gaming Membership site. After parallel‑loading optimization, the waterfall shows the former Level 2, 3, 4 resources loading concurrently. GIF comparisons illustrate a noticeably faster page‑open speed and smoother image rendering.