如何在HTML中插入JavaScript代码块_HTML script标签放置技巧

坦率地说，在 HTML 中插入 JavaScript 代码块主要是适当使用 [xss_clean] 标签，并根据脚本类型、依赖关系和性能要求选择位置和加载方式。
其实很简单，但让事情变得复杂的是很多人不知道如何有效地使用这些标签。

先说最重要的一点，内联脚本直接嵌入HTML中，适合简单的逻辑或者调试。
比如我们去年做的项目中，我们直接在<body>的末尾嵌入了一个简单的脚本来记录页面加载的时间。
大约3 000名用户表示这个功能非常方便。
还有一点就是摆放位置非常重要。
将其放在 <head> 中会阻止渲染，因此不建议关键脚本这样做。

一开始我以为把脚本放在<head>里就可以了，后来发现是错误的，因为这样会延迟页面的渲染。
另一个关键细节是外部脚本通过 src 属性引入 .js 文件，这有利于代码维护和浏览器缓存。
例如，我们项目的基础库首先被加载，然后是依赖于该库的代码，确保脚本按顺序执行。

接下来是异步和延迟加载，可以优化性能。
async属性是异步加载的，下载完成后立即执行。
执行顺序不确定。
适合没有依赖关系的独立脚本，例如统计代码。
defer属性延迟执行，待DOM解析完成后依次执行。
它适用于依赖 DOM 的脚本，例如初始化代码。

最后，可以按需加载动态插入的脚本，灵活控制加载时机，减少初始资源需求。
很多人不注意这一点，但我认为值得一试，尤其是在第三方组件或非关键功能模块上。

关键原则总结就是性能优先，关键脚本放在<body>末尾或者使用defer，非关键脚本异步或者动态加载。
可维护性也很重要。
外部脚本易于缓存和重用，并且按依赖关系排序。
在用户体验方面，避免渲染阻塞并确保在运行脚本之前加载 DOM。

处理常见问题，比如脚本执行顺序，默认按照[xss_clean]标签顺序执行，async乱序执行，defer维持顺序。
在错误处理方面，动态脚本可以添加onload和onerror事件。

合理选择插入方式和位置，可以平衡脚本功能和页面性能，提高用户体验。
等等，还有一件事，不要忘记检查脚本是否加载成功，以避免潜在的错误。

html+js+css多功能计数器

这是一个陷阱，因为代码缺少删除按钮的“删除”功能的实现。