您的位置：首页 > Web前端 > HTML5

html5 <script> async和defer

2017-05-01 21:16 363 查看

没有defer和async

对于如下html:



加载顺序：



script脚本并发加载，bar.js先加载完成，其次是app.js，然后html加载完成，最后是foo.js

执行顺序：按照script标签的顺序执行，不需要等待整个html解析完成即可执行，但是先加载完成的脚本必须等待它之前的脚本执行完成，它才能开始执行。bar.js加载完成后，需要等待app.js先执行，app加载并执行完成后，bar.js才开始执行。

执行顺序如下：

1. app.js

2. bar.js

3. foo.js

4. inner script

代码：

var express = require('express');
var path = require('path');
var app = express();

app.get('/', function(req, res) {
res.write('<html>' +
'<head>' +
'<meta charset="UTF-8">' +
'<title>demo</title>');

setTimeout(function() {
res.write('<script type="text/javascript" src="app.js"></script>');
}, 1000);

setTimeout(function() {
res.write('<script type="text/javascript" src="bar.js"></script>');
}, 2000);

setTimeout(function() {
res.write('<script type="text/javascript" src="foo.js"></script>');
}, 3000);

setTimeout(function() {
res.write('<script type="text/javascript">console.log("inner script");</script>');
res.write('</head><body>Hello World  ' + new Date() + '</body></html>');
res.end();
}, 5000);
});

app.get('/app.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/app.js'));
}, 3000);
});

app.get('/bar.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/bar.js'));
}, 1000);
});

app.get('/foo.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/foo.js'));
}, 5000);
});

app.listen(3000, () => {
console.log('App listening at port 3000')
});


async

对于如下html:



加载顺序：



script脚本并发加载，bar.js先加载完成，其次是app.js，然后html加载完成，最后是foo.js

执行顺序：对于增加了async的script标签，只要script加载完成立即执行，不需要其他script。

执行顺序如下：

1. bar.js

2. app.js

3. foo.js

4. inner script

代码：

var express = require('express');
var path = require('path');
var app = express();

app.get('/', function(req, res) {
res.write('<html>' +
'<head>' +
'<meta charset="UTF-8">' +
'<title>demo</title>');

setTimeout(function() {
res.write('<script type="text/javascript" src="app.js" async></script>');
}, 1000);

setTimeout(function() {
res.write('<script type="text/javascript" src="bar.js"></script>');
}, 2000);

setTimeout(function() {
res.write('<script type="text/javascript" src="foo.js"></script>');
}, 3000);

setTimeout(function() {
res.write('<script type="text/javascript">console.log("inner script");</script>');
res.write('</head><body>Hello World  ' + new Date() + '</body></html>');
res.end();
}, 5000);
});

app.get('/app.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/app.js'));
}, 3000);
});

app.get('/bar.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/bar.js'));
}, 1000);
});

app.get('/foo.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/foo.js'));
}, 5000);
});

app.listen(3000, () => {
console.log('App listening at port 3000')
});


defer

对于如下html:



加载顺序：



script脚本并发加载，bar.js先加载完成，其次是app.js，然后html加载完成，最后是foo.js

执行顺序：对于增加了defer的script标签，在脚本加载完成后不会立即执行，必须等到整个html加载完成，才开始执行。

执行顺序如下：

1. bar.js

2. foo.js

3. inner script

4. app.js

代码：

var express = require('express');
var path = require('path');
var app = express();

app.get('/', function(req, res) {
res.write('<html>' +
'<head>' +
'<meta charset="UTF-8">' +
'<title>demo</title>');

setTimeout(function() {
res.write('<script type="text/javascript" src="app.js" defer></script>');
}, 1000);

setTimeout(function() {
res.write('<script type="text/javascript" src="bar.js"></script>');
}, 2000);

setTimeout(function() {
res.write('<script type="text/javascript" src="foo.js"></script>');
}, 3000);

setTimeout(function() {
res.write('<script type="text/javascript">console.log("inner script");</script>');
res.write('</head><body>Hello World  ' + new Date() + '</body></html>');
res.end();
}, 5000);
});

app.get('/app.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/app.js'));
}, 3000);
});

app.get('/bar.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/bar.js'));
}, 1000);
});

app.get('/foo.js', function(req, res) {
setTimeout(function() {
res.sendFile(path.join(__dirname + '/static/foo.js'));
}, 5000);
});

app.listen(3000, () => {
console.log('App listening at port 3000')
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web前端 javascript
相关文章推荐
新的分享
章节导航