首页 > 代码库 > 【javascript】javascript学习之js脚本的解析步骤
【javascript】javascript学习之js脚本的解析步骤
将javascript代码加入到HTML代码中，即使用<script>标签的方式有两种：直接嵌入页面中和使用外部js文件。
使用<script>标签嵌入html代码中时，需要指定其类型:type="text/javascript"。不过在html5标准中<script>标签的type默认为"text/javascript"，可以省略不写，不过考虑到低版本的兼容问题，一般还是加上比较好。
嵌入式js代码：
添加到<script>标签内的内容会从上到下被解释。当解释器处理标签内的代码完毕前，页面的其他内容都不会被浏览器加载或显示，也就是说，在js代码处理执行完毕前，页面加载会被阻塞，直到js代码加载执行完毕。
引用外部js脚本：
在<script>标签中，可以使用"src"来引入外部javascript文件，当<script>标签用于引用外部js文件后，标签内的代码将被忽略。
和嵌入式js代码一样，当浏览器解析到<script>标签时，首先加载外部js文件代码，然后解释器会解释这些代码，在js文件代码被解释完前，浏览器页面加载会被阻塞，直到导入代码加载执行完毕。
按照惯例，<script>标签一般是写在<head>标签内，这种做法的目的是为了将所有的js文件和css文件的引用都放到一起。不过，由于外引用js代码的加载执行方式，写在<head>内的外部js文件在加载解释完毕前，整个页面是处于阻塞状态的。这样写在<body>内的DOM结构只有在head内的所有外部内容加载解释完毕后才开始加载，这样在用户看来就是空白的页面，而空白页面存在的时间越长，就会给人造成网页加载速度慢的印象。
要解决这个问题，可以把外部js文件的引入写到<body>中的DOM结构代码之后，这样页面在加载过程中，就会先加载DOM结构再开始加载解释js文件内容，这样空白页面的存在时间就会减少，也就变相的给人一种页面很快打开的感觉。
延迟脚本defer：
相应的，如果确实需要将外引用js文件的<script>标签写在<head>中，则可以使用<script>的defer属性。这个属性用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。所以，在<script>中设置defer属性，等于告诉浏览器，先下载，然后延迟执行。不过，defer属性只适用于引用外部js文件，在内嵌js中设置会被忽略。外部脚本会根据延迟的顺序顺序执行。
<script type="text/javascript" src="http://www.mamicode.com/XXXXX" defer="defer"></script>
异步脚本async：
这个属性是HTML5的新属性，类似defer属性，都是改变外部脚本执行行为的属性。标签<script>设置了async后，外部脚本将异步执行，不过无法控制几个外部脚本的执行顺序，所以如果在脚本中有改变DOM的内容，将产生不可预期的错误。
<script type="text/javascript" src="http://www.mamicode.com/XXXXX" async="async"></script>
如此一来，外部脚本的执行就会有三种方法：
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）;
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行;
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本。
【javascript】javascript学习之js脚本的解析步骤