在此先感谢您的帮助。
我正在尝试推迟加载 jquery-3.2.1.min.js 文件以修复渲染阻塞。所以,我尝试了以下方法:
<script>
window.addEventListener('DOMContentLoaded', (event) => {
let script0 = document.createElement('script');
let script1 = document.createElement('script');
let script2 = document.createElement('script');
let script3 = document.createElement('script');
let script4 = document.createElement('script');
let script5 = document.createElement('script');
let script6 = document.createElement('script');
let script7 = document.createElement('script');
script0.src = "<?php echo BASE; ?>assets/plugins/owlcarousel/dist/owl.carousel.min.js";
script1.src = "<?php echo BASE; ?>assets/plugins/vendors/bootstrap.bundle.min.js";
script2.src = "<?php echo BASE; ?>assets/plugins/vendors/jquery.sparkline.min.js";
script3.src = "<?php echo BASE; ?>assets/plugins/vendors/selectize.min.js";
script4.src = "<?php echo BASE; ?>assets/js/core.js";
script5.src = "<?php echo BASE; ?>assets/plugins/jquery-toast/js/jquery.toast.js";
script6.src = "<?php echo BASE; ?>assets/js/process.js";
script7.src = "<?php echo BASE; ?>assets/js/general.js";
script0.defer = true;
script1.defer = true;
script2.defer = true;
script3.defer = true;
script4.defer = true;
script5.defer = true;
script6.defer = true;
script7.defer = true;
document.head.appendChild(script0);
document.head.appendChild(script1);
document.head.appendChild(script2);
document.head.appendChild(script3);
document.head.appendChild(script4);
document.head.appendChild(script5);
document.head.appendChild(script6);
document.head.appendChild(script7);
});
</script>
而且效果很好!我知道这不是最好的代码,但可以工作。
现在,如果我推迟 jquery-3.2.1.min.js : <script defer src="<?php echo BASE; ?>assets/plugins/vendors/jquery-3.2.1.min.js"></script>
... 依赖于 jquery 的文件,仍然不断中断。
调查时,我在几个线程中读到,在延迟的 JS 中,尽管被延迟,但应该尊重顺序。但是,如果我不使用上面的代码,而是使用另一个代码,那么依赖 jQuery 的 JS 也会中断:
<script defer src="<?php echo BASE; ?>assets/plugins/vendors/jquery-3.2.1.min.js"></script>
<script defer src="<?php echo BASE; ?>assets/plugins/owlcarousel/dist/owl.carousel.min.js"></script>
<script defer src="<?php echo BASE; ?>assets/plugins/vendors/bootstrap.bundle.min.js"></script>
<script defer src="<?php echo BASE; ?>assets/plugins/vendors/jquery.sparkline.min.js"></script>
<script defer src="<?php echo BASE; ?>assets/plugins/vendors/selectize.min.js"></script>
<script defer src="<?php echo BASE; ?>assets/js/core.js"></script>
<!-- toast -->
<script defer src="<?php echo BASE; ?>assets/plugins/jquery-toast/js/jquery.toast.js"></script>
<!-- general JS -->
<script defer src="<?php echo BASE; ?>assets/js/process.js"></script>
<script defer src="<?php echo BASE; ?>assets/js/general.js"></script>
有什么指导吗?谢谢!!