So können Sie uns unterstützen

The examples so far focus on coupling a single external script with inlined code. This is useful in many situations where the JavaScript framework being used is contained in a single file, such as Google Analytics and jQuery. Often, however, we have multiple external scripts and an inline script, all of which must be executed in the order specified. None of the techniques described so far, both here and in Chapter 4, provide a means to preserve order while loading multiple scripts asynchronously. There is no complete solution to this problem, primarily due to browser inconsistencies.

Hervorgehobener Text. This section describes the two best techniques for loading multiple scripts asynchronously while preserving execution order across the external scripts and inline script. The Managed XHR technique works, but it is restricted to scripts with the same domain as the main page. The DOM Element and Doc Write technique works for scripts on a different domain, but the code varies depending on the User Agent and this technique doesn’t load all resource types asynchronously across all browsers.

In order to have an example that uses multiple scripts, I created menutier.js. This new script extends the menu functionality to give a tiered or grouped menu, as shown in Figure 5-4 (notice the shaded group headings). In addition, menutier.js depends on menu.js, so their execution order must be preserved. A tiered menu is created in the inlined code by calling EFWS.Menu.createTieredMenu. This sets up the situation we’re trying to analyze: multiple external scripts and an inline script that must be executed in order. Furthermore, menutier.js is configured to return before menu.js on which it depends. Are we headed for trouble? Let’s look at how the Managed XHR and DOM Element and Doc Write techniques load the external scripts in parallel while preserving execution order.