js基础_2（页面加载和延迟脚本）
2017-09-10 本文已影响0人
奶瓶SAMA
js标签的位置：
通常都是把关于标签<script>放在<header>元素中
目的：把所有外部文件css文件和javascript文件件的引用都放在相同的地方,但是 <header>中包含js文件,只有js代码全部
下载完成后才会载入页面,但这无疑是延迟呈现页面,在延迟期间页面空白
解决：把js代码放在<body>元素中（页面内容的后面）,这样就把加载空白页面的时间缩短了.
defer属性：立即下载,但会延迟进行. 只对外部脚本文件有效
asyns属性：与defer属性相似，都可以改变处理脚本行为,但标记asyns的脚步并不能保证它们的先后执行顺序.
目的：不让页面等待两个脚本下载和执行, 会在load事件前执行,但会在DomcontentLoaded事
件触发之前或之后执行, 支持的浏览器（Firefox 3.6,safar和 Chrome）
src属性：表示包含要执行代码的外部文件.
（无论如何包含代码,只要不存在defer和asyns属性,浏览器都会按照<script>元素在页面中的出现的先后顺序对他们一次进行
解析.简单来说就是第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析.然后才是第三个,第四
个……）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>延迟脚本</title>
<script type="text/javascript" defer="defer" src="js/bootstrap.min.js"> </script>
</head>
<body>
<!--内容-->
</body>
</html>
在这个例子里为<script>标签定义了defer属性，这样脚本会被延迟到整个页面都解析完毕后在运行,因此在<script>设置了
deferi属性,相当于告诉浏览器立即下载,但延迟进行,虽然我们把<script>放在<header>中但其中包含的延迟脚本讲遇到浏览
器</html>标签再进行. HTML5规范要求脚本按照他们出现的先后顺序再进行，因此第一个延迟脚本会先于第二个延迟脚本进行,
而这两个脚本会先于DOMcontentLoaded事件触发前执行,但在现实当中,延迟脚本不应定会按照顺序执行,也不定在DOMconte
ntLoaded事件触发前执行,因此最好包含一个延迟脚本.
