script标签影响页面显示
程序员文章站
2022-05-28 21:48:50
...
我们在使用<script>标签的时候,常常搞不清楚什么时候会延迟页面的显示，这里总结一下。
页面的javascript代码有两种写法，包括在页面中嵌入JavaScript代码和通过属性src引入外部代码文件。
针对这两种方式，分开阐述。
在页面给中嵌入JavaScript的方式
- 放在
<head></head>标签中时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>//代码写在head中
var i=1;
while(i){
i++;
}
</script>
</head>
<body>
<div>我很帅</div>
<div>我很帅</div>
</body>
</html>
这种情况下，两行我很帅没有显示出来
- 嵌入式放在代码中间时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>我很帅</div>
<script>
var i=1;
while(i){
i++;
}
</script>
<div>我很帅</div>
</body>
</html>
还是两行我很帅都没有打印出来
- 放
<body>元素中也页面内容的后面的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>我很帅</div>
<div>我很帅</div>
<script>
var i=1;
while(i){
i++;
}
</script>
</body>
</html>
这两行我很帅还是没有出现
由此总结，嵌入式的写法，只要代码没有完全运行得出最后结果，页面是不会显示的。
JS通过src以外部代码的形式引入时
- 写在头部的
<head>时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./study.js"></script>
</head>
<body>
<div>我很帅</div>
<div>我很帅</div>
</body>
</html>
页面仍然是没有显示任何东西
- 写在代码中间时
+ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>我很帅</div>
<script src="./study.js"></script>
<div>我很帅</div>
</body>
</html>
我们兴奋的看到出现了一个我很帅，表明第一行的我很帅被加载显示出来了
- 放
<body>元素中也页面内容的后面的时候、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>我很帅</div>
<div>我很帅</div>
<script src="./study.js"></script>
</body>
</html>
出现两行我很帅
如果，我们在引入js文件的时候，在<script>标签中写上defer属性
<script src="./study.js" defer></script>
不论这行代码写在<head>还是代码中间，还是写在<body>页面内容的后面，这两行我很帅都骄傲的出现了。
总结就是, JS通过src以外部代码的形式引入时,<script>后面的内容在<script>中的js代码执行完毕后才显示，但是<script>前面的内容不受影响，如果用了defer属性，则不管写在哪都不影响页面，也就是页面加载完毕后再执行代码。
首先，当下Web应用程序一般都把全部Javascript应用放在<body>标签元素中，页面内容的后面。