JavaScript内联是将JavaScript代码直接嵌入HTML标签中的操作。这种操作可以用来实现简单的功能，比如鼠标事件触发，或者是简单的算术运算。例如，在鼠标经过按钮时，按钮颜色会改变。如上所示，我们使用了onmouseover和onmouseout事件绑定了两个函数，分别是更改按钮背景颜色的JavaScript代码。
但是，随着功能变得复杂，使用JavaScript内联将变得十分混乱。代码变得难以阅读和维护，而且难以调试。因此，我们应该将JavaScript代码单独编写成缩减版JavaScript文件，然后在HTML文件中引入它。比如说，我们需要在网页中使用字符串中的某个字符。在内联代码中，我们可以这样做：
如果我们将其改为外联的代码，我们需要在自己的JavaScript文件中写下如下代码：点击这里
document.querySelector('p').addEventListener('click', function() {
alert('字符串中的第三个字符是'+ 'abc'[2]);
});虽然它看起来比较恶心，但这是更好的方法。这种方法使我们能够更好地将JavaScript代码与网页的其他部分分离。如果我们需要修改它，我们不必在HTML中查找代码。
此外，外联的JavaScript代码通常会更好地缓存。如果我们在多个页面使用它，浏览器可以将它缓存下来以减少加载时间。这可能会提高网站的速度。
总的来说，JavaScript的内联代码可能在某些情况下很有用，但外联代码通常会更好地服务于我们的需要。它可以使我们的代码更易于阅读和维护，并且可能会提高我们网站的性能。