script标签影响页面显示

最新推荐文章于 2024-06-25 22:00:00 发布

Tery_Hang

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量689

点赞数

文章标签： javascript 特效实例前端 css

本文链接：https://blog.csdn.net/SHIYULANGMAN/article/details/107163167

版权

我们在使用<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>

我们兴奋的看到出现了一个我很帅，表明第一行的我很帅被加载显示出来了
引入JS代码写在代码中间的情况

放<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>标签元素中，页面内容的后面。

Tery_Hang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
script标签影响页面显示

我们在使用<script>标签的时候,常常搞不清楚什么时候会延迟页面的显示，这里总结一下。页面的javascript代码有两种写法，包括在页面中嵌入JavaScript代码和通过属性src引入外部代码文件。针对这两种方式，分开阐述。在页面给中嵌入JavaScript的方式放在<head></head>标签中时<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫