8816773881

Committed 24 Apr 2024 12:47PM UTC coverage: 32.028% (-0.02%) from 32.044%

Build # 8816773881

Build Type

Pull #9134

github

Committed by

Will-Howard

Commit Message

Add polyfills for requestIdleCallback, cancelIdleCallback

Pull Request Pull Request #9134: Improve startup sequence of the client bundle

Run Details

4689 of 38077 branches covered (12.31%)

Branch coverage included in aggregate %.

1 of 42 new or added lines in 5 files covered. (2.38%)

1 existing line in 1 file now uncovered.

27194 of 61471 relevant lines covered (44.24%)

181.9 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/lesswrong/client/clientStartup.ts

import '../client/publicSettings' // Must come first

// Imports required for this file:
import { runStartupFunctions } from '../lib/executionEnvironment';
import { filterConsoleLogSpam } from '../lib/consoleFilters';
import { DeferredComponentsTable, prepareComponent } from '../lib/vulcan-lib';

// Imports required for the whole app:
import '../client';

let startupCalled = false;
async function clientStartup() {
  if (startupCalled) {
    return;
  }
  startupCalled = true;

  filterConsoleLogSpam();
  require('../deferred-client-scripts.js');
  await runStartupFunctions();
}

// Starting up too early is known to compete for resources with rendering the page, causing the
// time to first meaningful paint to be delayed. This function waits until one frame has been rendered
// before starting up the client, which appears to fix the problem.
function startupAfterRendering() {
  // If for some reason the requestAnimationFrame functions don't fire (e.g. because
  // the tab is in the background), we still want to start the client reasonably quickly.
  setTimeout(() => clientStartup(), 500);

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      void clientStartup();
    });
  });
}

// Generally speaking, on fast internet connections the former condition will be true (bundle is fully
// downloaded before the page is ready), on slow connections the latter will be true
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', startupAfterRendering);
} else {
  void startupAfterRendering();
}

// While we are waiting for the main content to be downloaded, we can start importing all deferred components. "Importing"
// is a bit of a misnomer here, in that `prepareComponent` does some work to memoize and build higher order components.
// If components are not imported here, they will be imported when they are first used. Importing ahead of time speeds up
// the frontpage and post page hydration by about 25% (~100ms on an M1 mac).
//
// In the event that the main content is downloaded before all components are imported, we want to yield to the main thread
// to make sure all possible resources are available for rendering the page. The cases where this would occur are:
// 1. When the main content is served from the cache, in this case the below function doesn't even start importing
// 2. On a very slow CPU
const YIELD_MS = 25;
function importAllComponents() {
  const componentNames = Object.keys(DeferredComponentsTable);
  let index = 0;

  function importNextChunk(yieldMs: number | null = null) {
    const startTime = Date.now();

    while (index < componentNames.length && (!yieldMs || Date.now() - startTime < yieldMs)) {
      const componentName = componentNames[index];

      // window.ssrRenderedAt being present indicates that the main content has started being parsed.
      // Yield to the main thread and import all other components as an idle callback (will generally
      // run >1s later, after the main content has been rendered)
      if (yieldMs !== null && window.ssrRenderedAt) {
        requestIdleCallback(() => importNextChunk());
        return;
      }

      prepareComponent(componentName);
      index++;
    }

    if (index < componentNames.length) {
      setTimeout(() => importNextChunk(YIELD_MS), Math.floor(YIELD_MS / 2));
    }
  }

  importNextChunk(YIELD_MS);
}

importAllComponents();

NEW 1	import '../client/publicSettings' // Must come first	×
2
3	// Imports required for this file:
4	import { runStartupFunctions } from '../lib/executionEnvironment';	×
5	import { filterConsoleLogSpam } from '../lib/consoleFilters';	×
NEW 6	import { DeferredComponentsTable, prepareComponent } from '../lib/vulcan-lib';	×
7
8	// Imports required for the whole app:
NEW 9	import '../client';	×
10
NEW 11	let startupCalled = false;	×
12	async function clientStartup() {
13	if (startupCalled) {	×
14	return;	×
15	}
16	startupCalled = true;	×
17
18	filterConsoleLogSpam();	×
NEW 19	require('../deferred-client-scripts.js');	×
20	await runStartupFunctions();	×
21	}
22
23	// Starting up too early is known to compete for resources with rendering the page, causing the
24	// time to first meaningful paint to be delayed. This function waits until one frame has been rendered
25	// before starting up the client, which appears to fix the problem.
26	function startupAfterRendering() {
27	// If for some reason the requestAnimationFrame functions don't fire (e.g. because
28	// the tab is in the background), we still want to start the client reasonably quickly.
29	setTimeout(() => clientStartup(), 500);	×
30
31	requestAnimationFrame(() => {	×
32	requestAnimationFrame(() => {	×
33	void clientStartup();	×
34	});
35	});
36	}
37
38	// Generally speaking, on fast internet connections the former condition will be true (bundle is fully
39	// downloaded before the page is ready), on slow connections the latter will be true
40	if (document.readyState === 'loading') {	×
41	document.addEventListener('DOMContentLoaded', startupAfterRendering);	×
42	} else {
43	void startupAfterRendering();	×
44	}
45
46	// While we are waiting for the main content to be downloaded, we can start importing all deferred components. "Importing"
47	// is a bit of a misnomer here, in that `prepareComponent` does some work to memoize and build higher order components.
48	// If components are not imported here, they will be imported when they are first used. Importing ahead of time speeds up
49	// the frontpage and post page hydration by about 25% (~100ms on an M1 mac).
50	//
51	// In the event that the main content is downloaded before all components are imported, we want to yield to the main thread
52	// to make sure all possible resources are available for rendering the page. The cases where this would occur are:
53	// 1. When the main content is served from the cache, in this case the below function doesn't even start importing
54	// 2. On a very slow CPU
NEW 55	const YIELD_MS = 25;	×
56	function importAllComponents() {
NEW 57	const componentNames = Object.keys(DeferredComponentsTable);	×
NEW 58	let index = 0;	×
59
60	function importNextChunk(yieldMs: number \| null = null) {	×
NEW 61	const startTime = Date.now();	×
62
NEW 63	while (index < componentNames.length && (!yieldMs \|\| Date.now() - startTime < yieldMs)) {	×
NEW 64	const componentName = componentNames[index];	×
65
66	// window.ssrRenderedAt being present indicates that the main content has started being parsed.
67	// Yield to the main thread and import all other components as an idle callback (will generally
68	// run >1s later, after the main content has been rendered)
NEW 69	if (yieldMs !== null && window.ssrRenderedAt) {	×
NEW 70	requestIdleCallback(() => importNextChunk());	×
NEW 71	return;	×
72	}
73
NEW 74	prepareComponent(componentName);	×
NEW 75	index++;	×
76	}
77
NEW 78	if (index < componentNames.length) {	×
NEW 79	setTimeout(() => importNextChunk(YIELD_MS), Math.floor(YIELD_MS / 2));	×
80	}
81	}
82
NEW 83	importNextChunk(YIELD_MS);	×
84	}
85
NEW 86	importAllComponents();	×

ForumMagnum / ForumMagnum / 8816773881

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous