学习 JavaScript（二）在 HTML 中使用 JS
基本用法
在 HTML 中使用 <script> 元素引入 Javascript ， <script> 有以下 4 个常用属性：
async: 异步加载，只对外部脚步有效。
defer: 规定是否对脚本执行进行延迟，直到页面加载为止。如果脚本不会改变文档的内容，可将 defer 属性加入到
<script>标签中，以便加快处理文档的速度，同样只对外部脚步有效。src: 引入外部脚本文件.
type：规定脚本的 MIME 类型。
MIME ：多用途Internet邮件扩展（MIME，Multipurpose Internet Mail Extensions）类型 是一种标准化的方式来表示文档的性质和格式。 MIME 类型由两部分组成：媒介类型和子类型。对于 JavaScript，其 MIME 类型是 "text/javascript"。
以上四个常用的属性，只有 type 是必选的，其他的都是可选。如果要通过引入外部脚本, 那么 src 属性是必需的。
<script type="text/javascript">function sayScript(){
alert('Hell Word')
}</script>嵌入代码和外部文件
嵌入代码就是写在 <script> 标签内部的代码，比如：
<script type="text/javascript">function sayScript(){
alert('Hell Word')
}</script>而外部文件则是通过 src 属性进行引入的，比如：
<script src='./hello.js' type="text/javascript"></script>
外部文件相比直接嵌入代码，有以下优点：
可维护，写在专门管理 JS 的文件夹下，开发人员能专心对付 JS 。
可缓存，如果有两个 HTML 引入同一个 JS 文件，就可以只让浏览器下载一次，起到缓存的作用。
但是，外部文件有它的缺点，就是外部文件如果在我们的控制范围之外，容易遭受攻击。比如，引用一个心怀不轨的人开发的组件，被他修改起来是相当容易的。
脚本解析的顺序
1.传统做法：将外部文件放在 标签中，页面等到 JavaScript 文件加载完毕，遇到 标签才开始加载页面。
<!DOCTYPE html><html lang="en"><head> <title>KurryLuo 的个人站</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script></head><body> //主体内容</body></html>
2.比较取巧的办法：将 JavaScript 代码放到 中，用户会因为看到了仅仅加载了空白的页面就会感觉到页面打开变快了。
<!DOCTYPE html><html lang="en"><head> <title>KurryLuo 的个人站</title></head><body> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script> //主体内容</body></html>
3.手动延迟加载：在 <script> 标签中加入 defer 属性，作用是让页面加载完毕后再加载 JavaScript 文件。 defer 的意思就是“推迟”，光看字面上的意思就能理解。
<!DOCTYPE html><html lang="en"><head> <title>KurryLuo 的个人站</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js" defer="defer"></script></head><body> //主体内容</body></html>
4.异步脚本：HTML5 给 <script> 标签定义了 async 属性，这个属性和 defer 的作用类似，不同的是， defer 一般是按照 <script> 的排列顺序执行加载的，而 async 不按套路走。
<!DOCTYPE html><html lang="en"><head> <title>KurryLuo 的个人站</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index1.js" defer="defer"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index2.js" defer="defer"></script></head><body> //主体内容</body></html>
上面代码中的 index2.js 可能比 index1.js 先加载，所以两者之间最好不要有任何联系，比如复用组件。同时，这两个脚步在加载时，也尽量不要修改 DOM 节点。
原文出处：https://www.cnblogs.com/kurryluo/p/9563222.html
共同学习，写下你的评论
评论加载中...
作者其他优质文章
