在html中使用javascript

1.内嵌式：

一般在<body>标签的尾部添加<script>标签，并且指定type="text/javascript"
比如这样：

<html>
    <head>
    </head>
    <body>
        <!--内容-->
        <script type="text/javascript">
            console.log('Tag should be here');
        </scipt>
    <body>
</html>

这样的好处是：

避免脚本加载阻塞文档渲染
避免脚本操作DOM时文档流未渲染完毕导致获取DOM元素失败。

看个例子：

<html>
    <head>
        <script type = "text/javascript">
                let btn = document.getElementsByTagName('button')[0];
                // do sth with btn
                // error 
        </script>
    </head>
    <body>
        <!-- content here -->
                <button>按钮</button>
    </body>
</html>

报错:

原因是先加载了脚本内的内容，而此时文档流未渲染，并没有<button>标签存在，所以获取button得到的结果为undefined.

解决办法
将script里的内容放置到window.onload{ }里，在文档加载完成后会触发load事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了加载。

2.外部引入

外部引入JS脚本文件作为最佳实践，src作为外部引入资源的重要属性，用来指定外部资源的引入路径，可以是相对路径，也可以是绝对路径：

<html>
    <head>
        <script type = "text/javascript" src="js/相对路径.js"></script>
        <script type = "text/javascript" src="desktop/example/js/绝对路径.js"></script>
    </head>
    <body>
        <!-- content here -->
    </body>
</html>

同样，如同嵌入式JS一样，外部引入JS同样也需要考虑使得文档流优先加载的问题。

延迟脚本

使用defer表明外部引入的脚本将按照它们出现的顺序先后执行，也就是说先出现的脚本会先执行，然后再到后者。但是在现实里，延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。（顺序得不到保障，无法保证预期效果，容易出错）

<html>
    <head>
        <script type="text/javascript" defer="defer" src="我会先执行.js"></script>
        <script type="text/javascript" defer="defer" src="我会后执行.js"></script>
    </head>
    <body>
        <!-- content here -->
    </body>
</html>

异步脚本

async表示浏览器立即下载物件，但是不保证执行先后顺序，指定为async的目的是不让页面等待两个脚本的下载和执行，从而可以异步加载页面其他内容。所以设为async的脚本最好不要进行dom操作，否则有可能出现加载页面时出现错误。

<html>
    <head>
        <script type="text/javascript" defer="defer" src="我不一定第二个执行.js"></script>
        <script type="text/javascript" defer="defer" src="我不一定第二个执行.js"></script>
    </head>
    <body>
        <!-- 我不会等待两个脚本文件的加载，我会直接进行页面渲染 -->
    </body>
</html>

JS高程红宝读书笔记01 - 在html中使用javascript