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事件触发前执行,因此最好包含一个延迟脚本.
网友评论