gpt4 book ai didi

javascript - 加载脚本会动态阻塞渲染吗?

转载 作者:行者123 更新时间:2023-11-28 06:11:06 25 4
gpt4 key购买 nike

我正在尝试加载 bootstrap.min.js 文件。我有两个选择。第一个是从远程服务器加载它:

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>

第二个是从我的服务器加载它:

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>

在第一种情况下,脚本将异步加载,这意味着我的页面的渲染不会被阻止。在第二种情况下,脚本将阻止我的页面的渲染。我说得对吗?

如果我尝试这样做,blootstrap.min.js 将如何加载(异步或同步):

<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>

还有这个:

<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>

我有预感,在这两种情况下渲染都不会被阻止。你怎么认为?谢谢!

最佳答案

如果您将源加载代码放在 <body> 的末尾标签,渲染不会被阻止,即使新的 script标签附加到头部。这是因为当您到达该部分时,大部分渲染已经完成。

In newer browsers ,您可以添加 async属性到 script 标签,这不会阻塞渲染。因此,我怀疑通过 JS 异步加载文件也不会阻止渲染,即使您在文件顶部附近执行此操作。

关于javascript - 加载脚本会动态阻塞渲染吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36384275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com