jQuery Requesting Fonts (and Failing to Retrieve Them)

[GlennHS]

Describe the bug
Non-breaking, more raising out of my own curiosity than anything and to keep track of it

To Reproduce
Steps to reproduce the behavior:

1. Load page and open up dev console
2. Go to Network
3. Start running network profiling and refresh the page
4. See that jQuery has sent a GET request to fonts.gstatic.com and failed

Expected behavior
I'm fairly certain jQuery shouldn't be trying to load fonts, especially as there's no reference to them outside of the SASS files

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox (Latest Version)

Additional context
@ssddanbrown I don't suppose you have any clue what's going on here because after an hour of Googling I've found nothing

[ssddanbrown]

The mention of jQuery in the initiator isn't saying that jQuery is loading a font, but alludes that something that's running via jQuery is causing the fonts to be loaded. Sounds similar but there's some nuance there.

Browsers are smart, yet technically complex, when it comes to loading fonts since they can be chonky resources. They wont load a font file until there's some text that requires that font. A change of HTML content (Caused by some jQuery or other code) may introduce HTML that would then cause a font to load, hence that JavaScript may show as an initiator.

In this case, I think the initiator shown may be some mis-reporting due to the exact complexity of the scenario. I suspect it's a best guess but incorrect in this case. In terms of this scenario, The way the theme handling is done appears to technically load all themes to begin with (With their related fonts also). The theme handling JavaScript then kicks in after a delay (Due to page load order) which then can cause a delayed reload of stylesheet and related resources. The addTaskToDom function is then calling a .focus() which is an event that can affect the DOM and styles. The browser is then relating this event to the loaded font files since the event occurred at a very similar delayed timing to those fonts files being loaded.

I tested this out by changing the document.onload function to the below:

  document.onload = async function() {
    legacyTasklistHandling();
    setTheme();
    document.querySelector('input').focus();
    // getStorage();
    // if(tasks.length === 0) { addTask() };
  }()

This would then report my raw document.querySelector('input').focus(); line as the initiator, adding further weight to the above theory. Commenting out the setTheme function would then prevent this initiator attribution.

I wouldn't worry about things too much here, it's mostly a situation on first load which is being re-emulated in your testing due to disabling the cache.

If I was looking to improve on this I'd look to update the theme handling system to handle resources a bit more predictably.
I'd be cautious of using the disabled link attribute right now tbh, It looks like it was only added to the whatwg spec last year which is relatively recent in terms of web features, and the MDN compatibility chart for this is advising poor browser support. Instead I'd maybe just load/swap the URL for a single stylesheet reference. Doing this earlier on would also help. At the moment it's all done at document.onload which can be fairly late in the page load lifecycle. The load event is fired after the HTML has been loaded and initial external resources such as images and styles have been loaded. Instead, DOMContentLoaded will fire after loading the page HTML and building the DOM. Alternatively, to be even earlier, you could use a script in the head to get the right style loading before the page is built from the HTML. It would still have to load the stylesheet but the load would start much earlier and help prevent loading unneeded resources from other themes.

[GlennHS]

Thanks Dan, that's really interesting, thank you so much for taking a look. I'm currently working on widgets, one of which is a theme selector so while doing that I'll redev theme switching to work off of a single stylesheet that gets its 'src' changed instead of lots of stylesheets with disabled attributes :)