JavaScript值延迟脚本和异步脚本

Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造。也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。但是有一种特殊情况,看如下代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="aaa.js" defer="defer"></script>
    <script src="bbb.js" defer="defer"></script>
</head>
<body>
<div id="div"></div>
</body>
</html>

上面代码有有两个外部脚本,且它们都被设置成延迟加载,HTML5的规范要求脚本按照他们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,但是,事实并非如此,延迟脚本不一定会按照顺序执行,因此最好只包含一个延迟脚本!

异步脚本:

与defer类似,async只适用与外部脚本,并告诉浏览器立即下载文件,标记为async的脚本并不保证按照他们指定的先后顺序执行。如下代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="aaa.js"  async></script>
    <script src="bbb.js"  async></script>
</head>
<body>
<div id="div"></div>
</body>
</html>

上面代码中的两个外部脚本文件,都被设置成异步加载的方式,但是第二个脚本问价可能会先于第一个脚本文件之前执行。因此,确保两者之间互不用来非常重要。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

解决jetty7.0.pre5启动时报ClassNotFoundException: javax.interceptor.InvocationContext异常的问题

一.背景介绍:最近项目在使用maven命令行运行jetty服务器时出现ClassNotFoundException: javax.interceptor.Inv...

781
来自专栏DeveWork

WordPress自定义栏目运用实例V:为加密文章添加密码提示文字

默认的话,WordPress中加密的文章时不会有任何的提示的,就一个“加密:”在文章名前面。通常的话,解决这个问题的话我都是直接将密码写在题目中的(比如说这儿,...

2028
来自专栏程序员宝库

使用 Node.js 开发简单的脚手架工具

像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们...

1702
来自专栏林德熙的博客

git subtree pull 错误 Working tree has modifications

git subtree 是不错的东西,用于 git 管理子项目。 本文记录我遇到问题和翻译网上的答案。

1461
来自专栏JackeyGao的博客

Django小技巧18: ugettext和ugettext_lazy的区别

Django API 提供了几个有用的模块来帮助你翻译你的应用程序. 它们都在django.utils.translation中使用,大多数情况下, 我们会使用...

4393
来自专栏企鹅号快讯

PHP实现定时任务的几种方式

关于定时任务,之前以前认识了一种最常用的:crontab定时任务。通过linux的定时任务去实现。今天又认识了一下php实现定时方式的其它方式,总结一下。 ? ...

4977
来自专栏小夜博客

LNMP1.3 安装 fileinfo 组件

3939
来自专栏xiaoheike

Github使用教程

你的本地Repository由 git 维护的三棵“树”组成。第一个是你的工作目录(Working dir),就是本地磁盘,例如:E:\first;第二个是缓存...

3943
来自专栏tiane12

Linux执行脚本出现Error: bin/bash^M: bad interpreter: no such file or directory问题解决方法

1643
来自专栏Linux运维学习之路

day3、Linux快捷键及vim命令快捷键

Linux命令行快捷键 快捷键: tab键  自动补全路径 目录  名字,  自动不全命令 快捷键: ctrl +l(小写) 清屏 、 ctrl +c 取消当前...

2347

扫码关注云+社区

领取腾讯云代金券