Thanks English author Jake Archibald technology-sharing
For each browser ES6 module import, export support case
- Safari 10.1.
- Chrome 61.
- Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config.
- Edge 16.
ES6 import and export in the browser among
1. Display declaration type = "module"
script inside to add type = "module", so that the browser will be the related code to be treated as a module ES6
<script type="module">
import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.');
</script>2. Do not write "naked" path such as:
<script type="module">
import {addTextToBody} from 'utils.js'; // error
addTextToBody('Modules are pretty cool.');
</script>Direct write 'utils.js' will complain
you can write absolute and relative paths, but can not write the file name directly, even if the same level following file. Also add './name.js'
file name suffix .js must be, otherwise the browser does not recognize the path.
3. How backward compatible
Use "nomodule" keyword to achieve backward compatible browser
<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>I understand it this way, older browsers themselves do not recognize type = "module" js, will not have to go there to perform type = "module" js code (but still download ha).
Not recognized nomodule keyword, so it ignores nomodule, that is, normal execution this has js nomodule identified.
The support type = "module" of the browser, it will automatically go there nomodule perform keyword js. Even under not to download.
So backward compatible functionality through the left (this we try to use a different browser, you can immediately understand)
The only problem, there is a class browser that supports type = "module" of the ES6 features, but it does not support nomodule keyword. In other words, even if there nomodule logo, it would go to download and execute the js. Even though it has been carried out type = "module" of js.
These browsers
- Firefox doesn't support nomodule (issue). Fixed in Firefox nightly!
- Edge doesn't support nomodule (issue). Fixed in Edge 16!
- Safari 10.1 doesn't support nomodule. Fixed in Safari 11!
4. The default loading
type = "module" is used by default defer loading of loading.
About defer and async: defer and async loading code are asynchronous. But defer to wait until the entire page in memory, rendering normal end (DOM structure is completely generated, as well as other script execution is complete), will be performed. async Once downloaded, the rendering engine will break rendering, after implementation of the script, and then continue rendering. Sentence, defer a "complete re-rendering execution", async is "downloaded on the implementation." In addition, if there are multiple defer the script, it will appear in order of pages loaded in accordance with them, and there is no guarantee multiple async script loading order.
<!-- This script will execute after… -->
<script type="module" src="1.js"></script>
<!-- …this script… -->
<script src="2.js"></script>
<!-- …but before this script. -->
<script defer src="3.js"></script>Inline <script> loading mode are used defer
<!-- This script will execute after… -->
<script type="module">
addTextToBody("Inline module executed");
</script>
<!-- …this script… -->
<script src="1.js"></script>
<!-- …and this script… -->
<script> //这里默认采用defer，避免歧义，建议手动加上
addTextToBody("Inline script executed");
</script>
<!-- …but before this script. -->
<script defer src="2.js"></script>And if it is a traditional inline js script, calling the js file in the back, then error.
<!-- This script will throw error… -->
<script defer> //这里就算采用defer也会报错
addTextToBody("Inline module executed");
</script>
<script>
addTextToBody("Inline script executed");
</script>
5. Support of async loading
type = "module" may be used to load async manner (including import its inline), js ordinary equivalents employed async loading of
<script type="module" async></script> Browser issues
Firefox doesn't support async on inline module scripts (issue)
6. Perform only once
<Script type = "module"> performed only once with the loading mechanism for ES6, it will be treated as a multiple import import process
<!-- 1.js 只会被加载执行一次-->
<script type="module" src="1.js"></script>
<script type="module" src="1.js"></script>
<script type="module">
import "./1.js";
</script>
<!-- 普通JS 也只会被加载一次，但是会被执行多次-->
<script src="2.js"></script>
<script src="2.js"></script>Browser issues
Edge executes modules multiple times (issue). Fixed, but not yet shipped (expect Edge 17 to ship with the fix).
7. About CORS
type = "module" by default does not support cross-domain, which is a little traditional js or picture is completely different. Traditional js or default picture is to support cross-domain. If you want to type = "module" support cross-domain. Need in header returned from the server to give the show a valid statement CORS
Access-Control-Allow-Origin: *
Browser issues
Firefox fails to load the demo page (issue).
Edge loads module scripts without CORS headers (issue). Fixed in Edge 16!
9.Mime-types
Unlike traditional <scripts>, <script type = "module"> A valid javascript MIME types to the browser.
Otherwise, the request to the module does not execute javascript
Browser issues
Edge executes scripts with invalid MIME types (issue).
Finally I would like to say
没想到任何一个小功能，仔细去研究都有这么多的知识点。码文不易，各位给个赞可好。
转载请注明出处