总结:本章主要讲了嵌入式和外链事;以及html4.01对script定义的几个属性;还有就是用noscript对客户禁用JavaScript时候的平稳退化!

JavaScript程序是包裹在一个script标签对里面的;

JavaScript标签有两种方式;直接在页面中嵌入script代码和包含外部JavaScript文件的;(嵌入式和外链式;)

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>
<!--嵌入式-->
<script>
alert("a");
alert("b");
alert("c");
alert("d");
alert("e");
alert("f");
</script>
<!--外链式-->
<script src="a.js"></script>

嵌入式:包含在script标签对内部的JavaScript代码被从上到下依次执行;

注意:在使用script嵌入JavaScript代码时,不要在代码任何地方出现”</script>”字符串;

 

<script>
alert("a");
alert("b");//代码全部不执行了
alert("</script>");
alert("d");
alert("e");
alert("f");
</script>

如果想弹出/script只需要用转移字符”\”就可以了;如下即可:

<script>
alert("a");
alert("b");//代码全部不执行了
alert("<\/script>");
alert("d");
alert("e");
alert("f");
</script>

外链式:如果通过script元素来引入外部链接;那么src属性就是必需的;那么src属性就是必须的;这个属性的值是一个纸箱外部JavaScript的链接;

注意:***带有src属性的script标签对不应该包含额外的JavaScript代码;如果包含了嵌入式代码;只会下载并执行外部脚本文件;嵌入的代码会被忽略;

script标签对中的src也可以引入其他网站的外部链接的;为了安全考虑;如果想引入不同域的代码,那么最好有那个网站的域名;或者来源是可靠的;

JavaScript代码执行规则:无论使用外链式还是嵌入式;只有不存在defer和async属性,浏览器都会按照script元素在页面中出现的先后顺序依次执行的;

html4为script定了6种属性

  • anync:只对外部脚本有效;【可选的,未知】,表示立即下载脚本,但不妨碍页面中的其它操作;
  • charset:【可选的 不推荐写】表示通过src属性执行的代码的字符集;
  • defer:只对外部脚本有效;【可选的,未知】,表示脚本可以延迟到文档完全解析和显示之后再执行;
  • language:已废弃;无用;
  • src:引用外部脚本时候;【最常用】
  • type:可选的一般是写type=”text/javascript”;不推荐写;能不写最好不写;

其中src是最常用的;以下是关于anync和defer区别的说明,来自互联网

当浏览器碰到 script 脚本的时候:

  • <script src="script.js"></script> 没有 deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  • <script async src="script.js"></script>

    async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

  • <script defer src="myscript.js"></script>

    defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

以下几个要点:

  • deferasync 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  • 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  • 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  • async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  • 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

在script标签中设置defer属性;相当于告诉浏览器立即下载,但延迟执行;

async只适应于外部脚本文件,告诉浏览器立即下载;异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded时间出发之前或之后执行;

外链式优点

  • 可维护性:把JavaScript文件放在一个文件夹中,维护起来很轻松;而且开发者也能够在不触及HTML标记的情况下集中激励编写JavaScript代码;
  • 可缓存:浏览器能够根据具体的设置缓存链接的所有JavaScript文件;如果两个文件都是用一个JavaScript文件,浏览器只需要下载一次就可以了;可以提高速度;
  • 适应未来:通过外部文件,无序使用XHTML或注释hack;HTML和XHTML外链引入的文件语法是相同的;

平稳退化,用noscript标签对;

 

<noscript>
<h2>包含在noscript标签对中的内容只有在下面请看下才会显示出来</h2>
<p>浏览器不支持JavaScript脚本(现在浏览器,都是支持的)</p>
<p>浏览器支持脚本,但是脚本被禁用了;</p>
</noscript>

 

“““`