window加载优化-onload和DOMContentLoaded

最新推荐文章于 2025-03-14 10:53:20 发布

原创最新推荐文章于 2025-03-14 10:53:20 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #jquery

这篇文章介绍了JavaScript中的两个重要事件：onload和DOMContentLoaded。onload事件在所有资源，包括图片和CSS都加载完成后触发，而DOMContentLoaded事件则在DOM结构加载完成时触发，不等待其他资源，因此执行效率更高。这两个事件在网页性能优化中起到关键作用。

window加载优化-onload和DOMContentLoaded

<script>
        // load是等所有内容包括图片、css，等加载完毕之后再执行以下代码
        window.addEventListener('load',function() {
            alert('33');
        })

        // DOMContentLoaded只需要等DOM加载完毕之后就可以执行一下代码，图片、css等可以再之后加载，效率比load更高
        document.addEventListener('DOMContentLoaded', function() {
            alert('22');
        })

</script>