Tina的js笔记一

一、在HTML中使用javascript

关于script标签
script的几个属性：

1. async：表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或者加载其他脚本，只对脚本文件有效。
2. defer：表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效，
3. src：这个就不描述了。
4. type：这个也就不描述了，其他两个属性也暂且忽略。

包含在script标签中的js代码将被从上至下依次解释解释器会解释到一个函数的定义，然后将该定义保存再自己的环境中，再解释器对script元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示。
外部加载js和内联的js会优先选择外部的
注意：
只要不存在defer和async属性，浏览器都会按照script元素再页面中出现的顺序对它们依次进行解析。

白屏问题：
如果将所有的script文件都在head标签中加载的话，意味着必须等到全部的js代码都被下载、解析和执行完成之后，才能开始呈现页面的内容，因为浏览器是在遇到body标签时才开始呈现内容的。如果需要加载的js代码很多，这就会导致浏览器在呈现页面之时出现延迟，这时浏览器窗口就会出现空白。
解决
一般是将js引用全部放在body元素中页面的内容后面。

延迟脚本

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

加上defer标签就表明脚本在执行的时候不会影响页面的构造，也就是：脚本会被延迟到整个页面都解析完毕后再运行。

异步脚本
async属性与derfer属性类似，但是async属性并不保证脚本按照标记的顺序执行：如下面的两个script脚本引入必须的的保证1.js和2.js之间没有依赖关系才能使用async。不然2.js可能会在1.js之前执行。

<script type="text/javascript" defer="defer" src="1.js"></script>
<script type="text/javascript" defer="defer" src="2.js"></script>