xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js script secrets you don’t know All In One

js script secrets you don’t know All In One

你不知道的 js 脚本秘密

https://html.spec.whatwg.org/multipage/scripting.html

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer

defer vs async

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

module

.mjs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>


// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

<script type="module">

    <script src="./libs/json5.min.js"></script>
    <script type="module">
        // const JSON5 = require('json5'); 
        import * as JSON5 from "./libs/json5.min.js";
        // JSON5.stringify(value[, replacer[, space]]);
        // JSON5.stringify(value[, options]);
    </script>

https://github.com/json5/json5/issues/187

rel="modulepreloaded"

modulepreloaded

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>

    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload

type

demos

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://dev-preview.cnblogs.com/xgqfrms/p/12371162.html

async, defer and preload

https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/

prefetch & preload & prerender

https://www.cnblogs.com/xgqfrms/p/8984852.html

dns-prefetch

https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2020-09-16 10:45  xgqfrms  阅读(126)  评论(4)  编辑  收藏  举报