本文探讨了在前端开发中如何有效地利用script标签，包括放置位置（<head>与<body>内）、defer与async属性的使用，以及动态加载和preload策略，以提升网页加载与执行效率。
更加熟悉并了解script标签放的位置与属性的合理使用，也是前端进阶的一部分
前言
在html网页上写js代码，经常需要引入外部是js文件，script标签就是用来引入js文件的。其中他的位置有时候也很关键
放在<head>标签里面
- 在head里面代表先把js解析完成后，才开始渲染页面
放在<body>标签里面
- 如果script放在html代码前，那就是先执行完了js再把html标签渲染出来
- 放在html代码后，那就是把html渲染了再执行script。
- 所以比较好的做法是把script放在body的最后面，因为js代码一般都是伴随着操作dom结点，所以先让dom出来这个逻辑比较符合
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码展示</title>
</head>
<body>
<h1>xxxxxxx</h1>
<script>
console.log("xxxxx")
</script>
</body>
</html>
用defer属性
- 这个属性是推迟执行脚本，只可以用在引入外部js文件的script标签中使用，也就是有src才可以
- 加了后就相当于：让script的内容先下载，但要等全部执行完再执行这个
<head>
<meta charset="UTF-8">
<meta http
最低0.47元/天 解锁文章
扫一扫
1645
到【灌水乐园】发言
