script标签在html文档中位置

最新推荐文章于 2023-09-27 18:45:50 发布

52小HH

最新推荐文章于 2023-09-27 18:45:50 发布

阅读量785

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_40613615/article/details/104701056

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

script标签在html文档中位置的区别?

一.写在中

在head标签中写script标签分为两种情况

1.通过script标签src属性引入外部js文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="demo.js"></script>
    </head>
    <body> 
    </body>
</html>

我们可以在不同的文件中引入公共的js文件，但是如果在此script标签内写代码，浏览器会忽略。
引入外部js文件也可以使用到浏览器的缓存机制。

2.通过script标签src属性引入外部js文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
			alert('hello')
		</script>
    </head>
    <body> 
    </body>
</html>

此时浏览器会等待js文件下载、解析、执行完毕后再进行页面加载，这样可能会造成页面的有一段时间空白显示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" defer="defer">
			alert('hello')
		</script>
    </head>
    <body> 
    </body>
</html>

script标签的defer属性（只适用于外部脚本文件）用途是规定脚本会延迟到整个页面都解析完毕后再运行，也就是说立即下载，延迟执行。
浏览器是否支持：
菜鸟教程
在这里插入图片描述
w3school

这里暂时比较困惑，查阅资料后再来更新。

二.写在中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="demo.js"></script>
        <script type="text/javascript">
            alert('hello')
        </script>
    </body>
</html>

为了避免上面提到的浏览器先加载执行js脚本文件而导致的页面空白，一般将全部javascript引用放在body标签中页面元素内容后面，这样能够有效提升用户体验感。

52小HH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
script标签在html文档中位置

script标签在html文档中位置的区别?一.写在中在head标签中写script标签分为两种情况1.通过script标签src属性引入外部js文件<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>&...
复制链接

扫一扫