feat: split longest running task in half (#137)

src/lib/atomics/sync-create-messenger-atomics.ts

@@ -1,12 +1,12 @@
-import { onMessageFromWebWorker } from '../sandbox/on-messenge-from-worker';
-import { readMainPlatform } from '../sandbox/read-main-platform';
 import {
   MainAccessRequest,
   MessageFromWorkerToSandbox,
   Messenger,
   PartytownWebWorker,
   WorkerMessageType,
 } from '../types';
+import { onMessageFromWebWorker } from '../sandbox/on-messenge-from-worker';
+import { readMainInterfaces, readMainPlatform } from '../sandbox/read-main-platform';
 
 const createMessengerAtomics: Messenger = async (receiveMessage) => {
   const size = 1024 * 1024 * 1024;
@@ -18,12 +18,15 @@ const createMessengerAtomics: Messenger = async (receiveMessage) => {
     const accessReq = msg[1] as MainAccessRequest;
 
     if (msgType === WorkerMessageType.MainDataRequestFromWorker) {
-      // web worker has requested data from the main thread
-      // collect up all the info about the main thread interfaces
+      // web worker has requested the initial data from the main thread
+      // collect up the info about the main thread interfaces
       // send the main thread interface data to the web worker
       const initData = readMainPlatform();
       initData.$sharedDataBuffer$ = sharedDataBuffer;
       worker.postMessage([WorkerMessageType.MainDataResponseToWorker, initData]);
+    } else if (msg[0] === WorkerMessageType.MainInterfacesRequestFromWorker) {
+      // web worker has requested the rest of the html/svg interfaces
+      worker.postMessage([WorkerMessageType.MainInterfacesResponseToWorker, readMainInterfaces()]);
     } else if (msgType === WorkerMessageType.ForwardWorkerAccessRequest) {
       receiveMessage(accessReq, (accessRsp) => {
         const stringifiedData = JSON.stringify(accessRsp);

src/lib/sandbox/main-globals.ts

@@ -2,7 +2,7 @@ import type { MainWindow, PartytownConfig } from '../types';
 import { debug } from '../utils';
 
 export const mainWindow: MainWindow = window.parent;
-export const doc = document;
+export const docImpl = document.implementation.createHTMLDocument();
 
 export const config: PartytownConfig = mainWindow.partytown || {};
 export const libPath = (config.lib || '/~partytown/') + (debug ? 'debug/' : '');

src/lib/sandbox/read-main-platform.ts

@@ -1,26 +1,21 @@
 import {
   createElementFromConstructor,
-  debug,
   getConstructorName,
   getNodeName,
   isValidMemberName,
   len,
   noop,
 } from '../utils';
+import { config, docImpl, libPath, mainWindow } from './main-globals';
 import {
   InterfaceType,
   InterfaceInfo,
   InterfaceMember,
   InitWebWorkerData,
   StorageItem,
 } from '../types';
-import { logMain } from '../log';
-import { config, doc, libPath, mainWindow } from './main-globals';
 
 export const readMainPlatform = () => {
-  const startTime = debug ? performance.now() : 0;
-
-  const docImpl = doc.implementation.createHTMLDocument();
   const elm = docImpl.createElement('i');
   const textNode = docImpl.createTextNode('');
   const comment = docImpl.createComment('');
@@ -32,13 +27,6 @@ export const readMainPlatform = () => {
   const perf = mainWindow.performance;
   const screen = mainWindow.screen;
 
-  // get all HTML*Element constructors on window
-  // and create each element to get their implementation
-  const elms = Object.getOwnPropertyNames(mainWindow)
-    .map((interfaceName) => createElementFromConstructor(docImpl, interfaceName))
-    .filter((elm) => elm)
-    .map((elm) => [elm]);
-
   const impls: any[] = [
     // window implementations
     [mainWindow.history],
@@ -66,18 +54,9 @@ export const readMainPlatform = () => {
     [elm.style],
     [docImpl],
     [docImpl.doctype!],
-    ...elms,
-  ]
-    .filter((implData) => implData[0])
-    .map((implData) => {
-      const impl = implData[0];
-      const interfaceType: InterfaceType = implData[1] as any;
-      const cstrName = getConstructorName(impl);
-      const CstrPrototype = (mainWindow as any)[cstrName].prototype;
-      return [cstrName, CstrPrototype, impl, interfaceType];
-    });
+  ];
 
-  const $interfaces$: InterfaceInfo[] = [
+  const initialInterfaces: InterfaceInfo[] = [
     readImplementation('Window', mainWindow),
     readImplementation('Node', textNode),
   ];
@@ -94,26 +73,51 @@ export const readMainPlatform = () => {
 
   const initWebWorkerData: InitWebWorkerData = {
     $config$,
+    $interfaces$: readImplementations(impls, initialInterfaces),
     $libPath$: new URL(libPath, mainWindow.location as any) + '',
-    $interfaces$,
     $origin$: origin,
     $localStorage$: readStorage('localStorage'),
     $sessionStorage$: readStorage('sessionStorage'),
   };
 
-  impls.map(([cstrName, CstrPrototype, impl, intefaceType]) =>
-    readOwnImplementation($interfaces$, cstrName, CstrPrototype, impl, intefaceType)
+  addGlobalConstructorUsingPrototype(
+    initWebWorkerData.$interfaces$,
+    mainWindow,
+    'IntersectionObserverEntry'
   );
 
-  addGlobalConstructorUsingPrototype($interfaces$, mainWindow, 'IntersectionObserverEntry');
+  return initWebWorkerData;
+};
 
-  if (debug) {
-    logMain(
-      `Read ${$interfaces$.length} interfaces in ${(performance.now() - startTime).toFixed(1)}ms`
-    );
-  }
+export const readMainInterfaces = () => {
+  // get all HTML*Element constructors on window
+  // and create each element to get their implementation
+  const elms = Object.getOwnPropertyNames(mainWindow)
+    .map((interfaceName) => createElementFromConstructor(docImpl, interfaceName))
+    .filter((elm) => elm)
+    .map((elm) => [elm]);
 
-  return initWebWorkerData;
+  return readImplementations(elms, []);
+};
+
+const cstrs = new Set(['Object']);
+
+const readImplementations = (impls: any[], interfaces: InterfaceInfo[]) => {
+  const cstrImpls = impls
+    .filter((implData) => implData[0])
+    .map((implData) => {
+      const impl = implData[0];
+      const interfaceType: InterfaceType = implData[1] as any;
+      const cstrName = getConstructorName(impl);
+      const CstrPrototype = (mainWindow as any)[cstrName].prototype;
+      return [cstrName, CstrPrototype, impl, interfaceType];
+    });
+
+  cstrImpls.map(([cstrName, CstrPrototype, impl, intefaceType]) =>
+    readOwnImplementation(cstrs, interfaces, cstrName, CstrPrototype, impl, intefaceType)
+  );
+
+  return interfaces;
 };
 
 const readImplementation = (cstrName: string, impl: any, memberName?: string) => {
@@ -126,22 +130,25 @@ const readImplementation = (cstrName: string, impl: any, memberName?: string) =>
 };
 
 const readOwnImplementation = (
+  cstrs: Set<string>,
   interfaces: InterfaceInfo[],
   cstrName: string,
   CstrPrototype: any,
   impl: any,
   interfaceType: InterfaceType
 ) => {
-  if (cstrName !== 'Object' && !interfaces.some((i) => i[0] === cstrName)) {
+  if (!cstrs.has(cstrName)) {
+    cstrs.add(cstrName);
     const SuperCstr = Object.getPrototypeOf(CstrPrototype);
     const superCstrName = getConstructorName(SuperCstr);
     const interfaceMembers: InterfaceMember[] = [];
+    const propDescriptors = Object.getOwnPropertyDescriptors(CstrPrototype);
 
-    readOwnImplementation(interfaces, superCstrName, SuperCstr, impl, interfaceType);
+    readOwnImplementation(cstrs, interfaces, superCstrName, SuperCstr, impl, interfaceType);
 
-    Object.keys(Object.getOwnPropertyDescriptors(CstrPrototype)).map((memberName) =>
-      readImplementationMember(interfaceMembers, impl, memberName)
-    );
+    for (const memberName in propDescriptors) {
+      readImplementationMember(interfaceMembers, impl, memberName);
+    }
 
     interfaces.push([cstrName, superCstrName, interfaceMembers, interfaceType, getNodeName(impl)]);
   }

src/lib/service-worker/sync-create-messenger-sw.ts

@@ -6,7 +6,7 @@ import {
   WorkerMessageType,
 } from '../types';
 import { onMessageFromWebWorker } from '../sandbox/on-messenge-from-worker';
-import { readMainPlatform } from '../sandbox/read-main-platform';
+import { readMainInterfaces, readMainPlatform } from '../sandbox/read-main-platform';
 
 const createMessengerServiceWorker: Messenger = (receiveMessage) => {
   const swContainer = window.navigator.serviceWorker;
@@ -20,10 +20,16 @@ const createMessengerServiceWorker: Messenger = (receiveMessage) => {
 
     return (worker: PartytownWebWorker, msg: MessageFromWorkerToSandbox) => {
       if (msg[0] === WorkerMessageType.MainDataRequestFromWorker) {
-        // web worker has requested data from the main thread
-        // collect up all the info about the main thread interfaces
+        // web worker has requested the initial data from the main thread
+        // collect up info about the main thread interfaces
         // send the main thread interface data to the web worker
         worker.postMessage([WorkerMessageType.MainDataResponseToWorker, readMainPlatform()]);
+      } else if (msg[0] === WorkerMessageType.MainInterfacesRequestFromWorker) {
+        // web worker has requested the rest of the html/svg interfaces
+        worker.postMessage([
+          WorkerMessageType.MainInterfacesResponseToWorker,
+          readMainInterfaces(),
+        ]);
       } else {
         onMessageFromWebWorker(worker, msg);
       }

src/lib/types.ts

@@ -30,6 +30,7 @@ export type AssignInstanceId = InstanceId | AssignWinInstanceId;
 
 export type MessageFromWorkerToSandbox =
   | [type: WorkerMessageType.MainDataRequestFromWorker]
+  | [type: WorkerMessageType.MainInterfacesRequestFromWorker]
   | [type: WorkerMessageType.InitializedWebWorker]
   | [
       type: WorkerMessageType.InitializedEnvironmentScript,
@@ -43,6 +44,7 @@ export type MessageFromWorkerToSandbox =
 
 export type MessageFromSandboxToWorker =
   | [type: WorkerMessageType.MainDataResponseToWorker, initWebWorkerData: InitWebWorkerData]
+  | [type: WorkerMessageType.MainInterfacesResponseToWorker, interfaces: InterfaceInfo[]]
   | [type: WorkerMessageType.InitializeEnvironment, initEnvData: InitializeEnvironmentData]
   | [type: WorkerMessageType.InitializeNextScript, initScriptData: InitializeScriptData]
   | [type: WorkerMessageType.InitializedScripts, winId: WinId]
@@ -61,6 +63,8 @@ export type MessageFromSandboxToWorker =
 export const enum WorkerMessageType {
   MainDataRequestFromWorker,
   MainDataResponseToWorker,
+  MainInterfacesRequestFromWorker,
+  MainInterfacesResponseToWorker,
   InitializedWebWorker,
   InitializeEnvironment,
   InitializedEnvironmentScript,

src/lib/web-worker/index.ts

@@ -49,6 +49,15 @@ const receiveMessageFromSandboxToWorker = (ev: MessageEvent<MessageFromSandboxTo
     // initialize the web worker with the received the main data
     initWebWorker(msgValue);
 
+    // request from main that the worker needs the interfaces
+    webWorkerCtx.$postMessage$([WorkerMessageType.MainInterfacesRequestFromWorker]);
+  } else if (msgType === WorkerMessageType.MainInterfacesResponseToWorker) {
+    // received more main thread interfaces, append them to the array
+    webWorkerCtx.$interfaces$ = [...webWorkerCtx.$interfaces$, ...msgValue];
+    webWorkerCtx.$isInitialized$ = 1;
+
+    logWorker(`Initialized web worker`);
+
     // send to the main thread that the web worker has been initialized
     webWorkerCtx.$postMessage$([WorkerMessageType.InitializedWebWorker]);
 

src/lib/web-worker/init-web-worker.ts

@@ -5,7 +5,6 @@ import {
   webWorkerSessionStorage,
 } from './worker-constants';
 import type { InitWebWorkerData } from '../types';
-import { logWorker } from '../log';
 import type { PartytownConfig } from '@builder.io/partytown/integration';
 
 export const initWebWorker = (initWebWorkerData: InitWebWorkerData) => {
@@ -30,8 +29,4 @@ export const initWebWorker = (initWebWorkerData: InitWebWorkerData) => {
       config[configName] = new Function('return ' + config[configName])();
     }
   });
-
-  webWorkerCtx.$isInitialized$ = 1;
-
-  logWorker(`Initialized web worker`);
 };