Optimize preconnect callbacks

build-system/tasks/presubmit-checks.js

@@ -631,6 +631,7 @@ const forbiddenTerms = {
       'src/chunk.js',
       'src/inabox/amp-inabox.js',
       'src/runtime.js',
+      'src/custom-element.js',
     ],
   },
   'AMP_CONFIG': {

src/custom-element.js

@@ -43,6 +43,7 @@ import {isExperimentOn} from './experiments';
 import {parseSizeList} from './size-list';
 import {setStyle} from './style';
 import {shouldBlockOnConsentByMeta} from '../src/consent';
+import {startupChunk} from './chunk';
 import {toWin} from './types';
 import {tryResolve} from '../src/utils/promise';
 
@@ -584,7 +585,7 @@ function createBaseCustomElementClass(win) {
         // If we do early preconnects we delay them a bit. This is kind of
         // an unfortunate trade off, but it seems faster, because the DOM
         // operations themselves are not free and might delay
-        Services.timerFor(toWin(this.ownerDocument.defaultView)).delay(() => {
+        startupChunk(self.document, () => {
           const TAG = this.tagName;
           if (!this.ownerDocument) {
             dev().error(TAG, 'preconnect without ownerDocument');
@@ -594,7 +595,7 @@ function createBaseCustomElementClass(win) {
             return;
           }
           this.implementation_.preconnectCallback(onLayout);
-        }, 1);
+        });
       }
     }
 

test/unit/test-custom-element.js

@@ -22,6 +22,7 @@ import {ElementStub} from '../../src/element-stub';
 import {LOADING_ELEMENTS_, Layout} from '../../src/layout';
 import {ResourceState} from '../../src/service/resource';
 import {Services} from '../../src/services';
+import {chunkInstanceForTesting} from '../../src/chunk';
 import {createAmpElementForTesting} from '../../src/custom-element';
 
 describes.realWin('CustomElement', {amp: true}, env => {
@@ -115,6 +116,7 @@ describes.realWin('CustomElement', {amp: true}, env => {
         resourcesMock = sandbox.mock(resources);
         container = doc.createElement('div');
         doc.body.appendChild(container);
+        chunkInstanceForTesting(env.ampdoc);
 
         ElementClass = createAmpElementForTesting(win, 'amp-test', TestElement);
         StubElementClass = createAmpElementForTesting(
@@ -734,15 +736,14 @@ describes.realWin('CustomElement', {amp: true}, env => {
         return element.buildingPromise_.then(() => {
           expect(element.isBuilt()).to.equal(true);
           expect(testElementBuildCallback).to.be.calledOnce;
-          expect(testElementPreconnectCallback).to.have.not.been.called;
 
           // Call again.
           return element.build().then(() => {
             expect(element.isBuilt()).to.equal(true);
             expect(testElementBuildCallback).to.be.calledOnce;
-            expect(testElementPreconnectCallback).to.have.not.been.called;
-            clock.tick(1);
-            expect(testElementPreconnectCallback).to.be.calledOnce;
+            setTimeout(() => {
+              expect(testElementPreconnectCallback).to.be.calledOnce;
+            }, 0);
           });
         });
       });
@@ -968,16 +969,15 @@ describes.realWin('CustomElement', {amp: true}, env => {
         return element.build().then(() => {
           expect(element.isBuilt()).to.equal(true);
           expect(testElementLayoutCallback).to.have.not.been.called;
-          clock.tick(1);
-          expect(testElementPreconnectCallback).to.be.calledOnce;
-          expect(testElementPreconnectCallback.getCall(0).args[0]).to.be.false;
 
           const p = element.layoutCallback();
           expect(testElementLayoutCallback).to.be.calledOnce;
-          expect(testElementPreconnectCallback).to.have.callCount(2);
-          expect(testElementPreconnectCallback.getCall(1).args[0]).to.be.true;
           expect(element.signals().get(CommonSignals.LOAD_START)).to.be.ok;
           expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          setTimeout(() => {
+            expect(testElementPreconnectCallback).to.have.callCount(2);
+            expect(testElementPreconnectCallback.getCall(1).args[0]).to.be.true;
+          }, 0);
           return p.then(() => {
             expect(element.readyState).to.equal('complete');
             expect(element.signals().get(CommonSignals.LOAD_END)).to.be.ok;