在前端开发中，我们通常需要在页面加载完成后执行JavaScript代码。但是有时候我们希望能够在整个页面加载之前执行JavaScript代码，例如在网站性能优化中进行预加载资源或者提前获取数据等操作。那么，我们可以在整个页面加载之前运行JavaScript吗？
答案
答案是肯定的，我们可以在整个页面加载之前运行JavaScript代码。具体来说，我们可以使用以下三种方式：
1. defer属性
HTML5规范定义了一个defer属性，它可以被用于延迟脚本的执行，即使在整个文档解析完毕后才执行脚本。
<script src="example.js" defer></script>
使用defer属性的脚本不会阻塞页面的渲染和其他资源的下载，而且它们会按照它们在文档中出现的顺序执行。
需要注意的是，虽然defer属性可以确保脚本在文档结构完整之后执行，但是它并不保证脚本一定在DOMContentLoaded事件之前执行。
2. async属性
HTML5规范还定义了一个async属性，它可以被用于异步加载脚本，即使在整个文档解析过程中也能够立即开始下载脚本。
<script src="example.js" async></script>
使用async属性的脚本会在下载完成后立即执行，并且它们的执行顺序是不确定的。
需要注意的是，使用async属性加载的脚本，不一定会按照在文档中出现的顺序执行，而且它们可能在页面还没有完全加载完成时就开始执行。
3. 动态插入脚本
我们可以通过在JavaScript代码中动态创建并插入<script>标签的方式来运行JavaScript代码。
var script = document.createElement('script');
script.src = 'example.js';
document.head.appendChild(script);这种方式能够确保代码在整个页面加载之前执行，但是需要注意的是，这种方式可能阻塞了其他资源的下载和页面渲染，因此需要谨慎使用。
结论
以上三种方式都可以让我们在整个页面加载之前运行JavaScript代码，但是它们各自有不同的优缺点。在实际开发中，我们需要根据具体的场景来选择最适合的方式。
最后，需要特别强调的是，在使用这些方式的同时，我们需要遵循优秀的编码实践，以确保代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12531