第2章 HTML中的Javascript
一、<script>元素
通过它直接在网页中嵌入JavaScript代码，以及通过它在网页中包含外部JavaScript文件。
8个属性：
❑ async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
❑ charset：可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
❑ crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
❑ defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在IE7及更早的版本中，对行内脚本也可以指定这个属性。
❑ integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI, Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN, Content Delivery Network）不会提供恶意内容。
❑ language：废弃。
❑ src：可选。表示包含要执行的代码的外部文件。
❑ type：可选。代替language，表示代码块中脚本语言的内容类型（也称MIME类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"都已经废弃了。如果这个值是module，则代码会被当成ES6模块，而且只有这时候代码中才能出现import和export关键字。
行内JavaScript代码，直接把代码放在<script>元素中就行：
<script type = "text/javascript">
function () {
alert("Hello world!")
}
</script>
外部引用JavaScript
<script type = "text/javascript" src = "index.js"></script>
注意：使用了src属性的<script>元素不应该再在<script>和</script>标签中再包含其他JavaScript代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
浏览器解析JavaScript文件顺序：
不存在defer和async属性的<script>中，浏览器会按照<script>元素在HTML中出现的先后顺序进行解析。
二、标签位置
过去，都放在页面的<head>标签内。缺点就是必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染），导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。
为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面。浏览器显示空白页面的时间缩短。
三、推迟执行脚本（外部脚本）
defer属性：脚本会被延迟到整个页面都解析完毕后执行，相当于告诉浏览器立即下载脚本，但是等所有文件被解析完毕后再解析带有defer属性的<script>引入的JavaScript代码。
在实际当中，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。
四、异步执行脚本（外部脚本）
async属性：不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。
五、动态加载脚本
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
六、<noscript>元素
用在不支持JavaScript的浏览器中显示替代的内容。
小结：
❑ 要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
❑ 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
❑ 对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。
❑ 可以使用defer属性把脚本推迟到文档渲染完毕后再执行。
❑ 可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
❑ 通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。
网友评论