原生JS（2）<script>标签

傷城~ 2022-07-19 00:14 213阅读 0赞

**（五）script标签**

【1】标签在创建的时候可以赋予六（七）个属性（都是可选）；

①src：最重要的属性，表示链接外部的js代码文件，如果引用外部js文件的话就需要添加这个属性。附带效果，添加这个属性后的script标签内部的代码将无效。

②async：表示应该立即下载脚本，但不应妨碍页面中的其他操作，只适用于外部脚本（加载的js文件）

示例：

说明：

（1）异步加载，举例：

会先执行alert(“2”)，再提示test.js的alert(“1”)

如果不加这个属性的话，会先1后2

③defer：其效果是在页面加载完后再加载执行js文件，但仅限于对外部文件，对内部的js代码是无效的。

④charset：通过此属性来指定代码的字符集，不过现在默认都是utf8，而且大多数浏览器会忽略，基本不用。

⑤type：目前默认都是text/javascript。表示编写代码的脚本语言的内容类型。

⑥language：废弃

这是W3SCHOOL的说明：

表格：

<table> 
 <tbody> 
  <tr> 
   <td> <p>属性</p> </td> 
   <td> <p>HTML4</p> </td> 
   <td> <p>HTML5</p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>type</p> </td> 
   <td> <p>需要</p> </td> 
   <td> <p>可选</p> </td> 
   <td> <p>虽然HTML5可以不加，但个人觉得为了兼容性还是加上这个属性比较好</p> </td> 
  </tr> 
  <tr> 
   <td> <p>async</p> </td> 
   <td> <p><span style="color:red">无</span></p> </td> 
   <td> <p><span style="color:#0070C0">新增</span></p> </td> 
   <td> <p><span style="color:#0070C0">外部文件专用</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p>xml:space</p> </td> 
   <td> <p>有</p> </td> 
   <td> <p><span style="color:red">不支持</span></p> </td> 
   <td> <p><span style="color:red">因此不用</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p>charset</p> </td> 
   <td> <p>有</p> </td> 
   <td> <p>有</p> </td> 
   <td> <p>非特殊情况不加</p> </td> 
  </tr> 
  <tr> 
   <td> <p>src</p> </td> 
   <td> <p>外部文件需要</p> </td> 
   <td> <p>外部文件需要</p> </td> 
   <td> <p>最重要的属性</p> </td> 
  </tr> 
  <tr> 
   <td> <p>defer</p> </td> 
   <td> <p>有</p> </td> 
   <td> <p>有</p> </td> 
   <td> <p><span style="color:#0070C0">外部文件专用，加载完后执行js</span>文件</p> </td> 
  </tr> 
 </tbody> 
</table>

【2】有意思的问题：

①  假如通过document.createElement(“script”)来动态创建一个script标签在head部分或者body部分，然后将js代码通过innerHTML的方法写入其中，那么，这段js代码会不会执行

答：不会被执行

②   以下代码会发生什么情况：

答：输出

然后报错。解决办法：使用<\\/script> 作为替代

【3】在html文档里，不要用<script xxxxx />这种写法，原因是在IE或者其他浏览器里很可能不兼容，是XHTML的写法。

【4】script标签，可以加载来源于外部域的js文件。

举个例子，我本地html文件，可以加载来源于百度或者其他地方的某个js文件。但需要添加http://

潜在问题是，对方必须可信，否则你可能遇见恶意代码。

【5】标签的加载改善：

①   <script></script>标签的位置，一般放于</body>标签的前方，可以减少空白页面出现的时间，从而让用户感觉页面加载速度提升了。

②  或者添加defer=”defer”属性。假如有两个这样的标签A和B，且A前B后。我们**期望顺序**是：DOMContentLoaded事件——》A标签js代码——》B标签js代码。但我查的几个资料，说法有所区别。

l  在JavaScript高级程序设计（第三版）中，提到假如有多个延迟脚本，那么延迟脚本的顺序不一定按期望顺序执行，因此推荐只用一个延迟脚本。

l  但在[http://ued.ctrip.com/blog/script-defer-and-async.html][http_ued.ctrip.com_blog_script-defer-and-async.html]，这个文章中，他提到async属性的脚本会在加载完后立刻执行，顺序不确定，而延迟脚本的顺序是确定的。

l  个人倾向于后者是对的，因为在书上的小结里，又提到“延迟脚本总是按照指定他们的顺序执行”。

③   多个JS文件之间有前后依赖关系的情况下，不要使用async属性。

④   只在外部文件中使用defer，在内部文件不要使用，在IE6情况特殊，IE7、8会延迟在底部，Firefox中无效（估计chrome也无效）

⑤   异步脚本一定会在页面的load事件之前执行，但可能在DOMContentLoaded事件之前或之后执行。

【6】noscript标签

当浏览器不支持javascript脚本，或者是浏览器支持脚本但禁用了脚本功能时，我们需要做一些特殊的处理，比如说告诉用户你需要启用javascript脚本之类。

具体办法是，使用<noscript></noscript>标签，这个元素可以包含能够出现在文档<body>中的所有元素（除script标签）。

我用百度首页来举例，在百度首页中，其内容如下：

他会跳转到另外一个页面，而这个页面是没有js代码的。

具体原理我不太明白，但是效果是：刷新页面，然后跳转到url=xxxx的页面下。

[http_ued.ctrip.com_blog_script-defer-and-async.html]: http://ued.ctrip.com/blog/script-defer-and-async.html