html5中执行javascript需通过外链或内嵌方式引入:一、外链用,支持defer/async;二、内嵌将代码写入间,推荐置于body底部;三、type属性默认可省略;四、模块化使用type="module"支持es6 import/export。
浏览器缓存机制提升加载效率。
1、在HTML5文档的
或末尾添加<script>标签。 <p>2、为<script>标签设置src属性,其值为JS文件的相对或绝对路径。<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)”; <p>3、确保JS文件以UTF-8<a style="color:#f60; text-decoration:underline;" title= "编码" href="https://www.php.cn/zt/16108.html" target="_blank">编码保存,且服务器返回正确的Content-Type(text/<a style="color:#f60; text-decoration:underline;" title= "javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript)。 <p>4、可选添加defer或async属性:defer保证脚本按顺序执行且不阻塞HTML解析;async允许异步下载并立即执行,不保证顺序。 <h2>二、在HTML5中内嵌JavaScript代码 <p>内嵌方式适用于简短、页面专属的脚本逻辑,代码直接写入HTML文档内部,无需额外HTTP请求。 <p>1、在<head>或<body>中插入<script>标签,不设置src属性。 <p>2、将JavaScript代码写入<script>与</script>之间,注意避免出现字符串导致提前闭合。3、推荐将内嵌脚本置于
底部,防止阻塞DOM渲染。4、若需在DOM加载完成前执行,应包裹于DOMContentLoaded事件监听器中。
三、使用type属性明确脚本类型
HTML5中<script>标签的type属性默认为text/<a style="color:#f60; text-decoration:underline;" title= "java" href="https://www.php.cn/zt/15731.html" target="_blank">javascript,但显式声明有助于语义清晰和兼容旧环境。</script>
1、外链引用时可写作<script type="text/javascript" src="m<a%20style=" color: text-decoration:underline title="ai" href="https://www.php.cn/zt/17539.html" target="_blank">ain.js"></script>。
2、内嵌脚本可写作<script type="text/javascript">console.log("Hello");</script>。
3、现代实践中,省略type属性是合法且推荐的做法,浏览器自动按JavaScript处理。
四、模块化引用:使用type="module"
启用ES模块语法,支持import/export,实现真正的依赖管理和作用域隔离。
1、在<script>标签中设置type="module"属性。</script>
2、模块脚本默认延迟执行(类似defer),且自动启用严格模式。
3、模块路径必须是完整URL或以./、../开头的相对路径,不能使用纯文件名如"utils.js"。
4、模块脚本具有顶层作用域,var声明不会挂载到window对象上。










