High-performance Website Construction Guide notes

when does the js file merge? CSS and JS in the end is inline or external introduction?

The former is fast, but there is no way to cache, no way to share multiple pages, the latter is slow, requires additional requests, but can be cached, multi-page sharing.

The two-way "inline + preload +cookie logo judgment": The first time users open a webpage, there is no cookie, the server returns a page and a cookie containing inline CSS and JS, fast, the page is idle and then performs pre-loading; the second time a cookie is opened And for the first time, preloading is now possible to return an HTML with an external file because it was preloaded before, so it was fast. Note that the first time you preload, you need to work with inline code and preloaded code to prevent the two from conflicting. The way to resolve the conflict is as follows (mainly to deal with JS, because the CSS is not a problem, but the repetition of JS can cause problems):

1. Create an invisible iframe, which is blank. After the IFRAME tag onload, add a script tag or link tag to the DOM inside, because the iframe inside and outside environment is isolated, so there is no effect

2. Use attributes such as preload, prefetch, etc.

3. The most troublesome way, the logic of dealing with conflicts is embedded in the business logic. Flag a global variable to determine if the code has been executed.

High-performance Website Construction Guide notes