Background description

The project wants to evaluate the loading time of an asynchronously loaded component (essentially a JS file) before it goes live. To get a more complete picture of loading, we need the following three pieces of data:

  1. Average loading time
  2. First load time (shows the user’s worst case load experience)
  3. The loading time after a cache hit

There are many ways to measure the load speed of a resource. The problem is how to tell whether the load of a resource is returned after hitting the cache (browser cache, 304 negotiated cache) or is pulled from an online server after missing the cache.

Discussion & the actual test results are as follows, synchronize with you, interested students can discuss further.

The solution

Principle: The load information returned in PerformanceTiming (the start time of each load phase) is used to distinguish between cache loads and network loads.

Solution a:

TTFB = responsestart-requestStart; TTFB = responsestart-requestStart; TTFB = responseStart; TTFB = responsestart-requestStart; TTFB = responsestart-requestStart; TTFB = responsestart-requestStart; IsCached = TTFB < 10.

Scheme 2:

The transferSize is 0 when the cache is hit, and the transferSize is the specific package size when network loading is required.

Pay attention to

  1. TTFB < 10ms, 10ms is the empirical value. The TTFB will be greater than 10ms when the local I/o is blocked.
  2. TransferSize (TTFB, TTFB, TTFB, TTFB, TTFB, TTFB, TTFB) Specific reference is as follows:

Solutions for cross-domain resources

  1. Push CDN server configuration return header: Timing- allow-origin: *
  2. [Degradation solution] [Only for a single resource] After the resource is loaded, the resource link is written to localstorage. If the resource link does not exist before localstorage, it is the first time; otherwise, it is not the first time (but it cannot be confirmed that the non-first time must hit the cache). It can be concluded that the average loading time and the first loading time can also partially meet my requirements

The test data

Not configured to support cross-domain timing – Not cached

You can see TTFB in the browser load panel and PerformanceTiming calculates 0.

Cross-domain Timing is configured

PerformanceTiming responseStart and transferSize are not 0

  1. Not cache

  1. cached

The last

If there is another way, welcome to discuss.

Winter is coming, grow together.