From 5bf85d71d89f135899324dcf7c58ab57a83ceb1d Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Fri, 9 Apr 2021 12:15:03 +0200 Subject: [PATCH] perf - warm up canvas in idle callback (#120916) * perf - warm up canvas in idle callback * also warmup for sandbox --- .../code/electron-browser/workbench/workbench.js | 14 ++++++++++++++ .../code/electron-sandbox/workbench/workbench.js | 14 ++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/src/vs/code/electron-browser/workbench/workbench.js b/src/vs/code/electron-browser/workbench/workbench.js index 64b2747c2fc..11fd33efc2d 100644 --- a/src/vs/code/electron-browser/workbench/workbench.js +++ b/src/vs/code/electron-browser/workbench/workbench.js @@ -46,6 +46,20 @@ }, beforeRequire: function () { performance.mark('code/willLoadWorkbenchMain'); + + // It looks like browsers only lazily enable + // the element when needed. Since we + // leverage canvas elements in our code in many + // locations, we try to help the browser to + // initialize canvas when it is idle, right + // before we wait for the scripts to be loaded. + // @ts-ignore + window.requestIdleCallback(() => { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + context.clearRect(0, 0, canvas.width, canvas.height); + canvas.remove(); + }, { timeout: 50 }); } } ); diff --git a/src/vs/code/electron-sandbox/workbench/workbench.js b/src/vs/code/electron-sandbox/workbench/workbench.js index 407efb520c3..2777fcc4fed 100644 --- a/src/vs/code/electron-sandbox/workbench/workbench.js +++ b/src/vs/code/electron-sandbox/workbench/workbench.js @@ -46,6 +46,20 @@ }, beforeRequire: function () { performance.mark('code/willLoadWorkbenchMain'); + + // It looks like browsers only lazily enable + // the element when needed. Since we + // leverage canvas elements in our code in many + // locations, we try to help the browser to + // initialize canvas when it is idle, right + // before we wait for the scripts to be loaded. + // @ts-ignore + window.requestIdleCallback(() => { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + context.clearRect(0, 0, canvas.width, canvas.height); + canvas.remove(); + }, { timeout: 50 }); } } );