根据具体需求选择JS嵌入方式：行内适用于简单交互但影响维护；内部JS放body末尾避免阻塞解析；外部JS配合defer、CDN、压缩等优化加载性能。
在HTML中嵌入JS代码，主要有三种方式：行内、内部和外部。行内直接在HTML标签里写，内部放在
<script></script>
标签里，外部则通过
<script src="..."></script>
引入JS文件。选择哪种方式取决于你的具体需求和代码量。
行内虽然简单，但不推荐大量使用，代码不好维护。内部适合少量JS代码，但如果页面JS代码多，会影响HTML结构的可读性。外部则是最佳实践，便于维护和复用，还能利用浏览器缓存提升性能。
如何选择合适的JS代码嵌入方式？
选择JS代码嵌入方式，需要考虑代码量、可维护性、复用性和性能。如果只是简单的交互，比如一个按钮点击事件，行内或内部都可以。但如果JS代码很多，逻辑复杂，强烈建议使用外部文件。
行内嵌入的优点是简单直接，适用于少量、简单的交互。缺点是可维护性差，HTML结构混乱，不便于复用。例如：
<button onclick="alert('Hello World!')">点击我</button>
内部嵌入的优点是方便，JS代码和HTML代码放在一起，易于理解。缺点是如果JS代码过多，会影响HTML代码的可读性，不利于维护。例如：
<title>内部JS示例</title><h1>这是一个标题</h1>
<p>这是一个段落。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11499" title="cn-json-diff"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="cn-json-diff" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11499" title="cn-json-diff" class="overflowclass">cn-json-diff</a>
<p class="overflowclass">比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。</p>
</div>
<a rel="nofollow" href="/xiazai/skill11499" title="cn-json-diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
</script><button type="button" onclick="myFunction()">点击这里</button>
<p id="demo"></p>
外部嵌入的优点是可维护性高，代码复用性强，可以利用浏览器缓存。缺点是需要额外加载JS文件，可能会稍微影响页面加载速度。例如：
<title>外部JS示例</title><script src="myScript.js"></script><h1>这是一个标题</h1> <p id="demo">这是一个段落。</p> <button type="button" onclick="myFunction()">点击这里</button>
其中
myScript.js
文件内容如下：
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
总之，选择哪种方式，需要权衡各种因素，找到最适合你的方案。
如何优化外部JS文件的加载？
优化外部JS文件的加载，主要有以下几种方式：
-
使用
async
和defer
属性：async
属性表示异步加载，JS文件加载完成后立即执行，可能会阻塞HTML解析。defer
属性也表示异步加载，但JS文件会在HTML解析完成后，按照顺序执行。通常推荐使用defer
，可以避免阻塞HTML解析，并保证JS文件的执行顺序。
<script src="myScript.js" defer></script>
将
<script></script>
标签放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
