js脚本引入位置区别

2018-03-16 本文已影响0人宋乐怡

向HTML中插入JacaScript的方法主要有3种：

页面嵌入<script>标签内联
页面嵌入<script>标签外联
直接在HTML元素中加入(很不常见了，我是没这么写过)

1. 嵌入<script>标签内联

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

注意用这种方式时，标签内部不可以出现“</script>”字符串，会被认为是代码结束的标志。
解决办法：转义字符 or 分成两部分

<script type="text/javascript">
    function sayScript() {
        alert("<\/script>");//或alert('<'+'/script>');alert('</'+'script>');等
    }
    sayScript();
</script>

2.页面嵌入<script>标签外联

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>

注意：这样的用src来引入外部文件的<script>开关标签中间就不能在包含js脚本代码，写了也不执行。

3. js写在HTML标签中

<button type="submit" onclick="alert('clicked me')">提交</button>

关于引入的一些些事

<script>标签的常用属性

[async] 可选。异步脚本。立即下载脚本，不妨碍其他操作，比如下载其他资源或者加载其他脚本，只对外部脚本有效。
[charset]可选。表示通过src属性指定的代码的字符集。
[defer]可选。延迟脚本。立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行。只对外部脚本有效。
[src] 可选。路径。
[type]可选。language属性被废弃，type可以看做是替代属性，表示脚本的内容类型。

<script>标签的位置

本来应该和<link>标签放在头里，目的是把所有的外部文件都放在相同的位置。但是会导致页面加载延迟。所以我们一般把<script>放在</body>之前。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>This is a para.</p>
    <button type="submit">提交</button>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

async和defer

浏览器解析HTML是按照从上到下的顺序进行的。
浏览器加载js时会产生阻塞效果，在js文件加载完成之前不会同时加载其他文档内容。如果没有HTML和CSS，页面没有内容，js就毫无意义。
<script>标签中的async和defer就是解决这个问题的。
<script src="script.js"></script>
<script>标签中没有任何属性，此时就按照浏览器的默认方式，把js文件加载执行后，再加载页面其他内容。
<script async src="script.js"></script>
async告诉浏览器，加载js文件的时候可以同时加载页面其他内容，（加载时是异步同时进行）但js文件一旦加载完成就立即执行，不管其他内容有没有加载或解析，执行的时候其它页面内容暂停加载。
<script defer src="script.js"></script>
<script>标签中没有使用了defer属性，此时就告诉浏览器，加载JS文件的时候可以同时加载页面其它内容，（加载时是异步同时进行）JS文件加载完成后会延迟等待等待其他内容加载或解析完成后才会执。

image.png

其它注意点和执行的顺序

1.JS脚本的加载和执行分两个步骤，使用async和defer属性时，加载时都是异步加载，但执行时会有区别。
2.async和defer都只适用于外部引入的JS脚本文件。
3.有多个JS脚本时执行的顺序优先级：
4.使用async时由于加载和执行连续进行，所以是谁先加载完谁先执行，没有先后顺序。所以使用async时，各JS脚本之间最好不要有任何关联。
5.使用defer时，HTML5规范规定按照JS脚本在HTML页面中的先后顺序执行。但是现实中却并不一定是这样。所以一个HTML页面中最好只有一个使用defer的脚本。
最后的解决办法：
把所有JS脚本放在HTML页面内容最后，即</body>之前。