解决js延迟加载的方式

最新推荐文章于 2024-07-24 20:51:04 发布

学习前端的渣渣

最新推荐文章于 2024-07-24 20:51:04 发布

阅读量2.5k

点赞数

分类专栏：前端面试题 JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/fangqi20170515/article/details/126976581

版权

前端面试题同时被 2 个专栏收录

103 篇文章

订阅专栏

JavaScript

79 篇文章

订阅专栏

本文介绍了JS延迟加载的概念及其重要性，解释了为何采用此技术能有效提升网页加载速度。文中详细探讨了两种主要的实现方式：一是将JS文件置于HTML文档底部；二是利用window.onload事件确保DOM完全加载后再执行JS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是JS延迟加载？

JS延迟加载就是页面加载完成之后再加载js文件，有助于提高页面加载速度。

因为js是单线程，会阻塞DOM解析，因此也会阻塞DOM的加载。

HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。

2、js延迟加载的方式

2.1、把JS放在页面的最底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script  type="text/javascript">
</script>
</body>
</html>

2.1、把JS内容用window.οnlοad=function(){ }包裹起来

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
<script  type="text/javascript">
    window.onload=function (){
        var oBtn = document.getElementById('btn');
        var oBox = document.getElementById('box');
        var num = 0

        function add() {
            num++;
            oBox.innerHTML = num;
            // setTimeout("add()",1000)；
            setTimeout(add, 1000);
        }
        oBtn.onclick = function () {
            add();
        };
    }
</script>
<div id="box">
</div>
<input type="button" id="btn" value="点击"/>
</body>
</html>