脚本宝典收集整理的这篇文章主要介绍了

窥探 Script 标签(步入现代 Web 开发的魔法世界)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">窥探 Script 标签</h2> <h3 id="articleHeader1">0x01 什么是 script 标签?</h3> <p>script 标签允许你包含一些动态脚本或数据块到文档中,script 标签是非闭合的,你也可以将动态脚本或数据块当做 script 的文本节点。就是内联脚本。</p> <p>一般我们最常用的就是写一些 JavaScript 脚本在 script 标签里,但是 script 也可以用来存储一些数据,比如当你设置 type="<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>/react" 的 script 时就可以在里面放 react 代码,但是游览器是不会执行它无法识别的 type 的,因此 script 还可以用来存放一些临时 APP 数据。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script src=&quot;game-engine.js&quot;></script><br /> <script type=&quot;text/x-game-map&quot;> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"game-eng<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>e.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/x-game-map"</span>&gt;</span><span class="undefined"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>也可以通过 <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cuments.scripts[0].text 获取到第一个脚本的内容,可以修改它,但是不会有任何作用。</p> <h3 id="articleHeader2">0x02 src 属性</h3> <p>当你指定了 src 属性时,外部脚本的内容是不受<a href="https://html.spec.whatwg.org/dev/scripting.html#restrictions-for-contents-of-script-elements" rel="nofollow noreferrer" target="_blank">脚本内容限制</a>的;同时你的 script 标签内必须是空的。如果没有指定 src,就称这段脚本是内联的,内联脚本受到脚本内容限制。</p> <p>什么是脚本内容限制?</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>('hello <script') // 报错, <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 解析器会认为 <script 是一个 script 标签开头 <a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>('hello <!--') // 报错,<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 解析器会认为 <!-- 是一个注释开头 <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> (1<script) { } // 报错,<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> 解析器会认为 <script 是一个 script 标签开头 <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> (x<!--y ) { } // 报错,DOM 节气息会认为 <!-- 是一个注释开头 <a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>('hello <script') // 正常,添加了转义 alert('hello <!--') // 正常,添加了转义 </script>" title="" data-original-title="复制"></span> </div> </div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> alert(<span class="hljs-string">'hello &lt;script'</span>) <span class="hljs-comment">// 报错, DOM 解析器会认为 &lt;script 是一个 script 标签开头</span> alert(<span class="hljs-string">'hello &lt;!--'</span>) <span class="hljs-comment">// 报错,DOM 解析器会认为 &lt;!-- 是一个注释开头</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (<span class="hljs-number">1</span>&lt;script) { } <span class="hljs-comment">// 报错,DOM 解析器会认为 &lt;script 是一个 script 标签开头</span> <span class="hljs-keyword">if</span> (x&lt;!--y ) { } <span class="hljs-comment">// 报错,DOM 节气息会认为 &lt;!-- 是一个注释开头</span> alert(<span class="hljs-string">'hello &lt;script'</span>) <span class="hljs-comment">// 正常,添加了转义</span> alert(<span class="hljs-string">'hello &lt;!--'</span>) <span class="hljs-comment">// 正常,添加了转义</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>所以看得出来,如果你使用打包工具,为了减少 <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=zh-cn" rel="nofollow noreferrer" target="_blank">CRP</a> 而将脚本内联到文档里,代码要注意是否符合脚本内容限制;如果你还压缩了代码,更需要注意这一点。</p> <h3 id="articleHeader3">0x03 defer 和 async 属性</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="<script defer=defer src=&quot;xxx&quot;></script> <!-- 这段脚本不会阻塞 DOM 解析,会并发的下载脚本,并在 DOM 解析完成之后才会执行 --><br /> <script async src=&quot;xxx&quot;></script> <!-- 这段脚本不会阻塞 DOM 解析,会并发的下载脚本,并在脚本下载完成后暂停 DOM 解析,然后执行脚本 -->" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">defer</span>=<span class="hljs-string">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"xxx"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- 这段脚本不会阻塞 DOM 解析,会并发的下载脚本,并在 DOM 解析完成之后才会执行 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"xxx"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- 这段脚本不会阻塞 DOM 解析,会并发的下载脚本,并在脚本下载完成后暂停 DOM 解析,然后执行脚本 --&gt;</span></code></pre> <h3 id="articleHeader4">0x04 type=module和 nomodule 属性</h3> <p>在 script 中,默认的 type="text/<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script",还可以是 <a href="https://html.spec.whatwg.org/dev/scripting.html#scriptingLanguages" rel="nofollow noreferrer" target="_blank">JavaScript MIME</a> 中的任意一种。如果 script 里写的是 JavaScript,推荐省略 type 属性。不指定 defer 和 async 下的经典脚本的执行会阻塞 DOM 解析。</p> <p>如果 type=module,则说明标签引用的是一个 ES 模块。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;module&quot;> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> {addTextToBody} from './utils.js';</p> <p> addTextToBody('Modules are pretty cool.'); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> {addTextToBody} <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils.js'</span>; addTextToBody(<span class="hljs-string">'Modules are pretty cool.'</span>); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>​</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// utils.js export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// utils.js</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-title">addTextToBody</span>(<span class="hljs-params">text</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> <a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.createElement(<span class="hljs-string">'div'</span>); div.textContent = text; <span class="hljs-built_in"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument</span>.body.appendChild(div); }</code></pre> <p>仅仅支持“裸导入”</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// Supported: import {foo} from 'https://jakearchibald.com/utils/bar.js'; import {foo} from '/utils/bar.js'; import {foo} from './bar.js'; import {foo} from '../bar.js'; // Not supported: import {foo} from 'bar.js'; import {foo} from 'utils/bar.js';" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// Supported:</span> <span class="hljs-keyword">import</span> {foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'https://jakearchibald.com/utils/bar.js'</span>; <span class="hljs-keyword">import</span> {foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'/utils/bar.js'</span>; <span class="hljs-keyword">import</span> {foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'./bar.js'</span>; <span class="hljs-keyword">import</span> {foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'../bar.js'</span>; <span class="hljs-comment">// Not supported:</span> <span class="hljs-keyword">import</span> {foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'bar.js'</span>; <span class="hljs-keyword">import</span> {foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'utils/bar.js'</span>;</code></pre> <p>支持 type=module 的游览器会自动忽略带有 nomodule 的 script 标签。方便你回退到不支持 module 的老式的用户代理。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;module&quot; src=&quot;module.js&quot;></script><br /> <script nomodule src=&quot;fallback.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;script type=<span class="hljs-string">"module"</span> src=<span class="hljs-string">"module.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;script nomodule src=<span class="hljs-string">"f<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>back.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>而且 type=module 默认带有 defer</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- This script will execute after… --><br /> <script type=&quot;module&quot; src=&quot;1.js&quot;></script></p> <p><!-- …this script… --><br /> <script src=&quot;2.js&quot;></script></p> <p><!-- …but before this script. --><br /> <script defer src=&quot;3.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- This script will execute after… --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- …<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> script… --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- …but be<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>e this script. --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"3.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>执行的顺序是 2.js,1.js,3.js</p> <p>即便是内联的 module,依然具有 defer 属性。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- This script will execute after… --><br /> <script type=&quot;module&quot;> addTextToBody(&quot;Inl<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>e module executed&quot;); </script></p> <p><!-- …this script… --><br /> <script src=&quot;1.js&quot;></script></p> <p><!-- …and this script… --><br /> <script defer> addTextToBody(&quot;Inl<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>e script executed&quot;); </script></p> <p><!-- …but before this script. --><br /> <script defer src=&quot;2.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- This script will execute after… --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="actionscript"> addTextToBody(<span class="hljs-string">"Inline module executed"</span>); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- …this script… --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- …and this script… --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">defer</span>&gt;</span><span class="actionscript"> addTextToBody(<span class="hljs-string">"Inline script executed"</span>); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- …but before this script. --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>模块脚本只会执行一次</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- 1.js only executes once --><br /> <script type=&quot;module&quot; src=&quot;1.js&quot;></script><br /> <script type=&quot;module&quot; src=&quot;1.js&quot;></script><br /> <script type=&quot;module&quot;> <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> &quot;./1.js&quot;; </script></p> <p><!-- Whereas normal scripts execute multiple times --><br /> <script src=&quot;2.js&quot;></script><br /> <script src=&quot;2.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- 1.js only executes once --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="actionscript"> <span class="hljs-meta"><span class="hljs-meta-keyword">import</span> "./1.js";</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Whereas normal scripts execute multiple times --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>必须符合同源策略</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- This will not execute, as it fails a CORS check --><br /> <script type=&quot;module&quot; src=&quot;https://….now.sh/no-cors&quot;></script></p> <p><!-- This will not execute, as one of its imports fails a CORS check --><br /> <script type=&quot;module&quot;> import 'https://….now.sh/no-cors';</p> <p> addTextToBody(&quot;This will not execute.&quot;); </script></p> <p><!-- This will execute as it passes CORS checks --><br /> <script type=&quot;module&quot; src=&quot;https://….now.sh/cors&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- This will not execute, as it fails a <a href="http://www.js-code.com/tag/cors" title="浏览关于“CORS”的文章" target="_blank" class="tag_link">CORS</a> check --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://….now.sh/no-cors"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- This will not execute, as one of its imports fails a CORS check --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="actionscript"> <span class="hljs-meta"><span class="hljs-meta-keyword">import</span> 'https://….now.sh/no-cors';</span> addTextToBody(<span class="hljs-string">"This will not execute."</span>); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- This will execute as it passes CORS checks --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://….now.sh/cors"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>模块脚本在跨域的时候默认是不带 credentials 的。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- Fetched with credentials (cookies etc) --><br /> <script src=&quot;1.js&quot;></script></p> <p><!-- Fetched without credentials --><br /> <script type=&quot;module&quot; src=&quot;1.js&quot;></script></p> <p><!-- Fetched with credentials --><br /> <script type=&quot;module&quot; crossorigin src=&quot;1.js?&quot;></script></p> <p><!-- Fetched without credentials --><br /> <script type=&quot;module&quot; crossorigin src=&quot;https://other-origin/1.js&quot;></script></p> <p><!-- Fetched with credentials--><br /> <script type=&quot;module&quot; crossorigin=&quot;use-credentials&quot; src=&quot;https://other-origin/1.js?&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- Fetched with credentials (cookies etc) --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Fetched without credentials --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Fetched with credentials --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">crossorigin</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.js?"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Fetched without credentials --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">crossorigin</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://other-origin/1.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Fetched with credentials--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"use-credentials"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://other-origin/1.js?"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>下图可以很好的诠释经典脚本和模块脚本加载的不同</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000010168676" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>模块脚本的依赖层级的增加会不会导致 CRP 长度的增加?</p> <p>上图可以看出,层级很深的时候,用户代理会花费大量的时间在等待依赖文件的传输和解析上,因此这会导致 CRP 长度的增加;不过 http2 push 的魔法使得用户代理下载依赖文件的时间会大幅减少,服务器会分析模块的依赖树,然后在一次请求里回传所有依赖文件给用户代理。具体的讨论可以看 <a href="https://esdiscuss.org/topic/fwd-are-es6-modules-in-browsers-going-to-get-loaded-level-by-level" rel="nofollow noreferrer" target="_blank">Are ES6 modules in brwosers going to get loaded level-by-level</a> 详细讨论了这个问题。</p> <h3 id="articleHeader5">0x05 <a href="http://www.js-code.com/tag/char" title="char" target="_blank">char</a>set 属性</h3> <p>给出脚本内容的编码方式;没有 src 的 script 不能设置该属性,模块脚本强行按 utf8 来解析。</p> <h3 id="articleHeader6">0x06 noscript 标签</h3> <p>noscript 标签告诉游览器,如果你不支持脚本或脚本被禁用,那就显示我里面的内容。通常被用作脚本被禁用的回退方案。</p> <h3 id="articleHeader7">0x07 最后</h3> <p>script 标签真的令人感到兴奋。</p> <p>如果你觉得我的文章不错,可以关注我的</p> <ul> <li> <p>知乎专栏:<a href="https://zhuanlan.zhihu.com/mrcode" rel="nofollow noreferrer" target="_blank">挽起袖子搞前端</a></p> </li> <li> <p>Segmentfault:<a href="https://segmentfault.com/blog/mrcode">mrcode的文章</a></p> </li> <li> <p>技术博客:<a href="https://blog.mrcodex.com" rel="nofollow noreferrer" target="_blank">blog.mrcodex.com</a></p> </li> <li> <p>推特:<a href="https://twitter.com/mrcodehang" rel="nofollow noreferrer" target="_blank">mrcodehang</a></p> </li> <li> <p>新浪微博:<a href="http://weibo.com/5944585010/profile?rightmod=1&amp;wvr=6&amp;mod=personinfo&amp;is_all=1" rel="nofollow noreferrer" target="_blank">Mr云航</a></p> </li> </ul> <h3 id="articleHeader8">0x08 参考文章</h3> <ul> <li> <p><a href="https://html.spec.whatwg.org/dev/scripting.html#scriptingLanguages" rel="nofollow noreferrer" target="_blank">html.spec.whatwg.org/dev/scripting.html#scriptingLanguages</a></p> </li> <li> <p><a href="https://esdiscuss.org/topic/fwd-are-es6-modules-in-browsers-going-to-get-loaded-level-by-level" rel="nofollow noreferrer" target="_blank">es6-modules-in-browsers-going-to-get-loaded-level-by-level</a></p> </li> </ul> <p></code></p>

总结

以上是脚本宝典为你收集整理的

窥探 Script 标签(步入现代 Web 开发的魔法世界)

全部内容,希望文章能够帮你解决

窥探 Script 标签(步入现代 Web 开发的魔法世界)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过