Grundlegende Kenntnisse für WEB-Programmierer über das -Tag

Wie Sie wahrscheinlich wissen, wird das <script>-Tag verwendet, um anzugeben, welches JavaScript auf einer Webseite ausgeführt werden soll. Das <script>-Tag kann JavaScript-Code direkt enthalten oder auf eine externe JavaScript-URL verweisen. </script>

<script>-Tags werden in der Reihenfolge ausgeführt, in der sie erscheinen </script>

Der folgende Code veranschaulicht dies intuitiv:

<script>
  var x = 3;
</script>
<script>
  alert(x);
  // Will alert &#39;3&#39;;
</script>

Bei der Verwendung externer Linkressourcen gibt es keine Ladereihenfolge. Sehr intuitiv , aber immer noch wahr:

<script src="//typekit.com/fj3j1j2.js"></script>

<!-- This second script won’t execute until typekit has executed, or timed out -->
<script src="//my.site/script.js"></script>

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Wenn Sie externe Links und Inline-Links mischen. Für JavaScript gilt die gleiche Regel gilt.

Das bedeutet, dass Ihre Seite deutlich langsamer geladen wird, wenn Ihre Website über langsame Skripte verfügt, die früher auf der Seite geladen werden. Dies bedeutet auch, dass später geladene Skripte von zuerst geladenen Skripten abhängen können.

Ein Seitenelement wird erst gerendert, wenn alle Skripte davor geladen wurden. Das bedeutet, dass Sie alle möglichen verrückten Dinge auf Ihren Webseiten tun können, bevor sie geladen werden, solange Sie sich nicht um die dadurch verursachten Leistungsprobleme kümmern.

Diese Regel gilt jedoch nicht, wenn Sie das <script>-Tag über Methoden wie <code>document.appendChild zum DOM hinzufügen, nachdem die Webseite geladen wurde. Diese Tags führen die Skripte in der Reihenfolge aus, in der die Verarbeitung der Browseranforderung abgeschlossen ist, und die Ladereihenfolge ist nicht mehr garantiert. &lt;/script&gt;&lt;/p&gt; &lt;h3 id=&quot;-script-html-&quot;&gt;Wenn ein &lt;script&gt;-Tag ausgeführt wird, sind die HTML-Elemente davor zugänglich (die danach jedoch noch nicht) &lt;/script&gt; &lt;/h3&gt;&lt;pre class='brush:php;toolbar:false;'&gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script&amp;gt; // document.head is available // document.body is not! &amp;lt;/script&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;script&amp;gt; // document.head is available // document.body is available &amp;lt;/script&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;&lt;/pre&gt;&lt;p&gt;Sie können sich den HTML-Parser Tag für Tag vorstellen Greifen Sie mit Tags auf das Dokument zu und führen Sie beim Parsen des &lt;script&gt;-Tags das darin enthaltene JavaScript aus. Dies bedeutet, dass im aktuellen JavaScript nur auf DOM-Knoten zugegriffen werden kann, deren Start-Tag vor dem aktuellen Skript erscheint (über &lt;code&gt;querySelectorALl, jQuery usw.). &lt;/script&gt;&lt;/p&gt; &lt;p&gt;Eine nützliche Konsequenz ist, dass &lt;code&gt;document.head</code> fast immer in jedem auf einer Webseite geschriebenen JavaScript verfügbar ist. <code>document.body</code> ist nur verfügbar, wenn Sie das <script>-Tag innerhalb oder nach dem <code>&lt;body&gt;-Tag schreiben. &lt;/script&gt;&lt;/p&gt; &lt;h3 id=&quot;-async-defer-&quot;&gt; &lt;code&gt;async</code> und <code>defer</code> </h3> <p>HTML5 fügt zwei Tools zur Steuerung der Ausführung von Skripten hinzu. </p> <ul> <li> <code>async</code> bedeutet „Mach es nicht gleich“. Genauer gesagt heißt es: Es macht mir nichts aus, wenn Sie dieses Skript ausführen, nachdem die gesamte Seite geladen wurde, und es nach anderen Skripten einfügen. Dies ist für statistische Analyseskripte sehr nützlich, da kein anderer Code auf der Seite von der Ausführung des Statistikskripts abhängig sein muss. Das Definieren von Variablen oder Funktionen, die für eine Seite erforderlich sind, innerhalb des <code>async</code>-Codes ist nicht möglich, da Sie nicht wissen können, wann der <code>async</code>-Code tatsächlich ausgeführt wird. </li> <li> <code>defer</code> bedeutet „Warten Sie, bis die Seite analysiert wurde, bevor Sie sie ausführen“. Dies entspricht in etwa dem Binden Ihres Skripts an das <code>DOMContentedLoaded</code>-Ereignis oder der Verwendung von <code>jQuery.ready</code>. Wenn dieser Code ausgeführt wird, sind alle Elemente im DOM verfügbar. Im Gegensatz zu <code>async</code> werden alle Skripte mit <code>defer</code> in der Reihenfolge ausgeführt, in der sie auf der HTML-Seite erscheinen. Dies wird lediglich verschoben, bis die HTML-Seite analysiert ist. </li> </ul> <h3 id="-type-"> <code>type</code>Attribute </h3> <p>Historisch gesehen (seit der Geburt von Netsacpe 2) spielte es keine Rolle, ob <code>type=text/javascript</code> auf dem <script>-Tag geschrieben wurde. Wenn Sie über <code>type einen Nicht-JavaScript-MIME-Typ festlegen, wird dieser vom Browser nicht ausgeführt. Das ist cool, wenn Sie Ihre eigene Sprache definieren möchten: &lt;/script&gt;&lt;/p&gt;&lt;pre class='brush:php;toolbar:false;'&gt;&amp;lt;script type=&amp;quot;text/emerald&amp;quot;&amp;gt; make a social network but for cats &amp;lt;/script&amp;gt;&lt;/pre&gt;&lt;p&gt;Das tatsächliche Ausführungsergebnis dieses Codes liegt bei Ihnen, zum Beispiel: &lt;/p&gt;&lt;pre class='brush:php;toolbar:false;'&gt;&amp;lt;script&amp;gt; var codez = document.querySelectorAll(&amp;amp;#39;script[type=&amp;quot;text/emerald&amp;quot;]&amp;amp;#39;); for (var i=0; i &amp;lt; codez.length; i++) runEmeraldCode(codez[i].innerHTML); &amp;lt;/script&amp;gt;&lt;/pre&gt;&lt;p&gt;Definieren Sie die &lt;code&gt;runEmeraldCode</code>-Funktion, um Sie zu verlassen Jungs als Übung. </p> <p>Wenn Sie besondere Anforderungen haben, können Sie auch den Standardwert <code>type</code> für das <script>-Tag auf der Seite überschreiben, indem Sie ein <code>meta-Tag übergeben: &lt;/script&gt;&lt;/p&gt;&lt;pre class='brush:php;toolbar:false;'&gt;&amp;lt;meta http-equiv=&amp;quot;Content-Script-Type&amp;quot; content=&amp;quot;text/vbscript&amp;quot;&amp;gt;&lt;/pre&gt;&lt;p&gt; oder eine Anfrage zurückgibt ein &lt;code&gt;Content-Script-Type</code>-Header. </p> <p>Eine kurze Geschichte seltsamer Skriptsprachen im Web können Sie in diesem Artikel lesen, der detailliertere Informationen zur Verwendung von <code>type</code> enthält. </p> <h3 id="Attribut-code-integrity-code-verwenden-Das-Attribut">Attribut <code>integrity</code> verwenden? Das Attribut </h3> <p><code>integrity</code> ist Teil der neuen Spezifikation für die Integrität von Unterressourcen. Es ermöglicht Ihnen, einen Hash für den Inhalt bereitzustellen, den die Skriptdatei enthalten wird. Dadurch kann verhindert werden, dass Inhalte während der Übertragung verloren gehen oder böswillig verändert werden. Diese Angabe ist auch bei Verwendung von SSL sinnvoll, da es sich bei der Ressource, die Sie laden möchten, manchmal um eine externe Ressource handelt, über die Sie keine Kontrolle haben, z. B. <code>code.jquery.com</code>. </p> <p>Wenn Sie es verwenden möchten, müssen Sie einen Hash-Typ und einen Hash-Wert in das <script>-Tag einfügen, getrennt durch einen Bindestrich. Es sieht ungefähr so ​​aus: </script>

<script
  src="//code.jquery.com/jquery.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC">
</script>

我还没有看到有人用了它，然而如果你知道有哪个网站用了，可以在下面评论。

还可以用 crossorigin！

虽然还没有完全被标准化，但是一些浏览器支持 crossorigin 属性。基本的想法是，浏览器会限制对非同源资源的使用（同源资源是指相同的协议、hostname 以及端口，例如： `http://google.com:80）。

这是为了防止你，例如，向你的竞争对手网站发请求，注销你的用户在对方网站的账号（这不好！）。这个问题牵扯到 <script>标记虽然有点意外，但如果实现了 <code>crossorigin，你只要加一个 handler 到 &lt;code&gt;window.onerror 事件上，就能在看控制台上看到一些警告信息，提示你引入了一个不该引入的外站脚本。在安全的浏览器下，&lt;em&gt;除非你指定 &lt;code&gt;crossorigin 属性，不然加载外站脚本不会出错。&lt;/script&gt;&lt;/p&gt; &lt;p&gt;&lt;code&gt;crossorgin</code> 不是一个神奇的安全手段，它所做的只是让浏览器启用正常的 CORS 访问检查，发起一个 <code>OPTIONS</code> 请求并检查 <code>Access-Control</code> header。</p> <h3 id="code-document-currentScript-code"><code>document.currentScript</code></h3> <p>IE 不支持的一个新奇的东西是个叫做 <code>document.currentScript</code> 的属性。它指向当前正在被执行的脚本。如果你想要从你嵌入的 <script>标记中拿一些属性来用，它会非常有用。我个人非常高兴它还没有被完全支持，否则它会让我们在一部分工作中渴望嵌入更复杂的代码。</script>

onafterscriptexecute?!

这个超没用，因为它只被 Firefox 支持。使用 onbeforescriptexecute 能让你绑定事件到每一个脚本的执行前和执行后，这很酷。

如果你对这个感到好奇，你可以研究下。event 对象包含一个被执行的脚本的引用，而 before 事件能通过 perventDefault() 取消脚本的执行。

for / event

到今天， HTML5 规范包含了一个很少见的，以前是 IE 特殊的方法来绑一段代码到一个事件。你应该能向下面这样让一段代码不被执行直到页面加载完成：

<script for="window" event="onload">
  alert("Hi!")
</script>

这段代码在 Chrome 或者 Firefox 下不能实际工作，但是它依然能够在 IE 下工作。

NOSCRIPT

如同你父母一样，很难相信 JavaScript 也曾经年少过。曾经有过这样一段时间你不能确定是否一个浏览器支持 JavaScript。更糟的是，你甚至不能确定那个浏览器能识别 script 标记。而如果一个浏览器不能识别标记，它应该会将它渲染成一个 inline 元素，意味着你所有 JavaScript 代码会被作为文本渲染在页面上！

幸运地是，规范已经能足够有效地避免这个情况发生，你只需要将你的代码包在 HTML 注释里，那些不支持脚本的浏览器会把下面的文本当做注释：

<script>
<!--  to hide script contents from old browsers

  // You would probably be pasting a ‘rollover’ script
  // you got from hotscripts.net here

// end hiding contents from old browsers  -->
</script>

当然，像很多事情一样，XHTML将这变得更糟。XML用特殊的方法来转义可能包含结束标记的内容，这是 CDATA 的来历：

<script>
//<![CDATA[

    // Is this the right incantation to get this to pass
    // the XHTML validator?

//]]>
</script>

像上面这样写，你的代码可以是一个规范的 XHTML。它对实际功能没有什么影响，但是它对你作为一个 Web 开发者的荣誉也许很重要（现在这个时代，谁还用 XHTML 啊——译者注）。

浏览器也包含一个有用的方法来让你把那些不支持 JavaScript 人赶走，通过 noscript 标记。<noscript></noscript> 标记里的内容只有浏览器不支持脚本的时候才会被渲染出来：

<noscript>
  Please use Internet Explorer 5.5 or above.
</noscript>
<script>
  exploitInternetExplorer0Day();
</script>

如果你有敏锐的观察力，你会意识到 noscript 不接受 type 参数，这使得那些使用别的 type 类型的脚本的页面上如果出现 noscript 会显得有点歧义。noscript 实际行为在各个浏览器下有所不同。

<script>标记和 <code>innerHTML&lt;/script&gt;&lt;/h3&gt; &lt;p&gt;通过 DOM 动态添加到页面上的 &lt;script&gt;标记会被浏览器执行：&lt;/script&gt;&lt;/p&gt;&lt;pre class='brush:php;toolbar:false;'&gt;var myScript = document.createElement(&amp;amp;#39;script&amp;amp;#39;); myScript.textContent = &amp;amp;#39;alert(&amp;quot;✋&amp;quot;)&amp;amp;#39;; document.head.appendChild(myScript);&lt;/pre&gt;&lt;p&gt;通过 &lt;code&gt;innerHTML</code> 动态添加到页面上的 <script>标记则不会被执行：</script>

document.head.innerHTML += &#39;<script>alert("✋")</script>&#39;;

为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 <script>标记在 Chrome 代码检查器中显示但不实际执行？”你可以利用这个来对你的同事做恶作剧。</script>

Das obige ist der detaillierte Inhalt vonGrundlegende Kenntnisse für WEB-Programmierer über das -Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!