导入js的三种方式

最新推荐文章于 2025-10-15 15:47:16 发布

原创最新推荐文章于 2025-10-15 15:47:16 发布 · 2.5w 阅读

6 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

博客介绍了文件的导入方式，包括不推荐且不安全的行内导入，以及内嵌式、外链式。还指出外链式若将元素放在特定位置，页面可能出现短暂“白板”，应将文件放前面。同时提醒内嵌导入和外链导入不能合并。

文章目录

1 行内导入方式（不推荐，不安全）

<body>
    <span onclick="alert('第一种方式')">导入js的第一种方式，行内导入</span>
</body>

2 内嵌式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gbk">
        <title>index</title>
        <script>
		alert('第二种方式');
	</script>
    </head>
    <body>
    </body>
</html>

3 外链式

如果把script元素放在head元素里，待浏览器经过下载、解析、执行完js文件之后，才会呈现页面内容。如果一个页面需要很多个js文件，那么浏览器可能会出现短暂的“白板”，用户体验不好。所以，我们应该把js文件放在</body>的前面，这样浏览器会先展现页面给用户。type属性可以不写

<script src="/xxx.js"></script>

4 注意点

内嵌导入和外链导入不能合并到一起

<script src="/xxx.js">
	alert('这个不会被执行');
</script>