Detailed explanation of the use of base tag in HTML

In requireJS, there is a property called baseURL. By setting the baseURL, we can write the file path to be loaded relative to the project instead of the current page.

For example: suppose our project directory is /myproject/, and there are two pages in it, one is /myproject/one.html, the other is /myproject/html/other.html, and they both need to load /myproject/js/some.js. If we set the baseURL to /myproject/, then when we load the js, both pages can use the path ./js/some relative to the project, instead of using different relative paths because of different page paths.

But if we don't use requireJS, can we achieve functionality similar to baseURL?

base tag
In fact, there is a base tag in HTML that can produce similar functions. For example:

The base tag can add a default path or a default opening method to the link of the page.

Here is an example of setting the default opening method:

Chrome loads fine.

Firefox is not loading properly.

Why?

We haven't found a good explanation for this. Our analysis is that the browser optimizes resource loading, which causes the browser to pre-load resources when the dynamically inserted base tag does not take effect. As a result, an error occurs, and then the base tag takes effect and loads the correct resource.

How to avoid it? There will be no problem if you do not write the base tag dynamically. If you need to write the base tag dynamically, all external resources referenced by the page need to be loaded dynamically through Javascript.