广州web培训
达内广州五羊中心

18589266248

热门课程

达内广州前端开发培训详解Script标签属性

  • 时间:2016-12-24 17:15
  • 发布:广州web培训
  • 来源:拿客

script标签是用来指定在网页上执行哪个JavaScript的。Script标签可以直接包含JavaScript代码,或者指向一个JavaScript外链URL。

Script标签按照它们出现的顺序被执行。达内广州前端开发培训下面的代码很直观地说明了这一点:

<script>

var x = 3;

</script>

<script>

alert(x);

// Will alert "3";

</script>

使用外链资源时加载次序没有那么直观,但依然是成立的:

<script src="//typekit.com/fj3j1j2.js"></script>

<!-- This second script won’t execute until typekit has executed, or timed out -->

<script src="//my.site/script.js"></script>

如果你混合使用外链和内联的JavaScript,这个规则同样适用。

这意味着如果你的网站有很慢的脚本在页面较前部分被加载,你的网页加载就会被显著拖慢。这也意味着后加载的脚本可以依赖先加载的脚本。

页面元素在它之前的所有脚本都加载完毕之前是不会执行渲染的。这意味着你可以你可以在页面加载之前在网页上做各种疯狂的事情,当然前提是你不在意因此而造成的性能问题。

然而这个规则不适用于你在网页加载完成之后通过document.appendChild之类的方法添加script标签到DOM中。这些标签会根据浏览器请求处理完成的先后执行脚本,不再保证加载顺序。

当一个script标签被执行,在它之前的HTML元素可以访问(但是在它之后的还不能用)

<html>

<head>

<script>

// document.head is available

// document.body is not!

</script>

</head>

<body>

<script>

// document.head is available

// document.body is available

</script>

</body>

</html>

你可以想象HTML解析器一个标签一个标签地访问文档,当它解析到script标签时,马上执行其中的JavaScript。这意味着只有当开始标签出现在当前脚本之前的DOM节点才可以在当前JavaScript中被访问(通过querySelectorALl,jQuery等等)。

一个有用的推论是document.head在任何写在网页上的JavaScript几乎总是可用。document.body只有当你将script标签写在 标签中或者它之后的时候才可用。

async和defer

HTML5添加了两个工具来控制脚本的执行。

async表示“不用马上执行它”。更具体地它表示:我不介意你在整个网页加载完成之后执行这个脚本,把它放在其他脚本执行之后。这对于统计分析脚本来说非常有用,因为页面上没有其他的代码需要依赖于统计脚本执行。定义一个页面需要的变量或函数在async的代码中是不行的,因为你没有方法知道什么时候async代码将会被实际执行。

defer表示“等待页面解析完成之后执行”。它大致等价于将你的脚本绑定到DOMContentedLoaded事件,或者使用jQuery.ready。当这个代码被执行,DOM中的一切元素都可用。不同于async,所有加了defer的脚本将会按照它们出现在HTML页面中的顺序执行,它只是推迟到HTML页面解析完毕后开始执行。

广州Web前端培训就到广州达内,详情请登陆广州达内Web前端培训官网(gz.web.tedu.cn)!

上一篇:Chrome 56 Beta 新特性:“Not Secure”警告
下一篇:达内广州前端开发培训详解type 属性

马上预约三天免费体验课

姓名:

电话:

微软:Win7寿命仅剩3年,企业应尽早升级

Win10 Build 15007版有这几个最抢眼的变化

Windows手机端Minecraft携带版宣布不再更新

微软推出Win10版PIX游戏调试工具Beta

选择城市和中心
江西省

贵州省

广西省

海南省