标签：body 问题 的区别 type 条件 load 禁用 完全 defer
一、<script>元素
1.1 属性
①async:可选项。表示立即下载脚本，加载后立即执行，但是不会妨碍文档的解析或其他操作（异步，即和文档解析并行，正常情况下互不打扰）。只对外部的脚本文件有效。
②defer:可选项。表示该脚本只有文档完全解析和显示之后再执行（异步，与上面的区别就是执行的顺序，会先于 DOMContentLoaded 事件）。只对外部脚本文件有效。注意：在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在 DOMContentLoaded 事件触发 前执行，因此好只包含一个延迟脚本。
③charset:可选项。表示src属性指定的代码的字符集（简单来说就是那个外部链接的字符集）。只对外部脚本文件有效。
④src:可选项。表示包含要执行的外部脚本文件。
⑤type：表示脚本语言的内容类型。比如js脚本就是 text/javascript （其实不需要这个也没关系）。
1.2 标签位置
传统做法是将所有的<script>标签全部放在<head>标签中。但是这样的后果就是只有将<head>标签中所有的脚本全部下载并且解析和执行完之后才能开始解析<body>中的内容（用户可以看到的），这无疑会导致浏览器会呈现页面显示出现很大的延迟，延迟期间浏览器窗口会是一片空白。为了避免这个问题，一般将与操作文档无关的脚本全部放在<body>元素的页面内容的后面。
还有一种解决方法就是刚刚上面说的defer属性和async属性。
二、嵌入代码与外部文件
推荐使用外部文件引用。有如下有点：
? 可维护性：遍及不同 HTML页面的 JavaScript会造成维护问题。但把所有 JavaScript文件都放在 一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及 HTML标记的情况下， 集中精力编辑 JavaScript代码。
? 可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript文件。也就是说，如果有两个 页面都使用同一个文件，那么这个文件只需下载一次。因此，终结果就是能够加快页面加载的 速度。
? 适应未来：通过外部文件来包含 JavaScript 无须使用 XHTML 或注释 hack。HTML 和 XHTML包含外部文件的语法是相同的。
三、<noscript>元素
早期浏览器有可能不支持JavaScript脚本，这就需要让页面平稳的退化（即不能什么都不显示）。于是<noscript>元素出现了，用在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在<body>中 任何元素----<script>除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：
? 浏览器不支持脚本；
? 浏览器支持脚本，但脚本被禁用。
符合上面任何一个条件，浏览器就只会显示<noscript>中的内容。其他情况下，用户永远也看不到<noscript>中的内容。
标签：body 问题 的区别 type 条件 load 禁用 完全 defer
原文地址：https://www.cnblogs.com/Falling-snow/p/11993882.html
