JavaScript加载方式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/user_ccg/article/details/78526338

<script type="text/javascript">
       function sayHi(){
             alert("Hi!");
}
</script>

方法二：利用此标签的src属性引入外部的JavaScript文件。

<script type="text/javascript" src="example.js"></script>

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</head>
<body>

</body>
</html>

注意点：
一：如果使用了defer属性

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="example1.js defer="defer" "></script>
    <script type="text/javascript" src="example2.js defer="defer" "></script>
</head>
<body>

</body>
</html>

按照HTML5规范要求是延迟脚本按照它们出现的先后顺序执行，因此第一个会在第二个前执行（两个都在DOMContentLoaded事件前执行），但是这在实际情况中是不一定的，不一定按照顺序执行。所以最好只有一个延迟脚本。
二：如果使用了async属性

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="example1.js async"></script>
    <script type="text/javascript" src="example2.js async"></script>
</head>
<body>

</body>
</html>

使用了async属性的母的是不让页面等到两个脚本的执行，从而异步加载页面其它内容，值得注意的是例子中的JavaScript文件实际运行先后是根据实际情况定的，而且最好是不要再加载期间修改DOM。
位置二：放在结束标签前

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
         <!--这里放内容-->
    <script type="text/javascript" src="example1.js async"></script>
    <script type="text/javascript" src="example2.js async"></script>
</body>
</html>

放在body后面保证了HTML和CSS的渲染。

引用JavaScript方法的讨论

内部引用：
优点：
1.便于观看。
2.如果代码很少，并且在高并发环境下有不错的效果。
缺点：
1.不利于后期维护。
2.清晰浏览器渲染。

外部文件调用：
优点：
1.避免在 JavaScript 代码里使用。
2.避免使用难看的 CDATA。
3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护。
4.HTML 文档更小，利于搜索引擎收录。
5.可以压缩、加密单个 JavaScript 文件。
6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次）。
7.避免使用复杂的 HTML 实体，如可以直接使用 document.write(2>1) 而无需写作 document.write(2<1)。