面试官：对于 JavaScript 的加载问题你怎杨理解？

最新推荐文章于 2023-07-04 15:00:11 发布

御弟謌謌

最新推荐文章于 2023-07-04 15:00:11 发布

阅读量127

点赞数

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/abraham_ly/article/details/109629391

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

面试官：“对于 JavaScript 的加载问题你怎杨理解？”

在我们学习 js 引入方式的时候，相信大家都会遇到遇到下方代码这类问题，它的写法和我们引入css的方式基本相同，但是不管我们如何运行，js代码就是不会运行，就很烦人，那么出现这样的问题到底是什么引起的呢？我们该如何解决呢？下面我们一一来进行讲解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js数据类型</title>
    <script>
        console.log(document.getElementById("myh2"));
    </script>
</head>

<body>
	<h2 id="myh2"></h2>
</body>

</html>

1、js代码加载不出来的原因？

在我们系统的学习任何一门编程语言的时候，相信大家可能都知道，我们的代码是从上往下逐条被执行的，尤其针对于编译语言或者脚本语言而言。

在HTML文档被浏览器加载的时候，渲染引擎和 JS 引擎在同时工作，而上方代码中 JS 模块放在比 HTML 标签模块靠前的位置，所以加载的时候首先加载的 JS 模块，但是此时 JS模块没有获取到 id属性为 myh2 的元素，所以出现了 js 代码加载不出来的情况。

2、如何解决 js 代码加载不出来的问题？

方法一：

当渲染引擎和 JS 引擎同时工作时，如果 js 中遇到需要使用HTML标签的时候，务必要保证渲染引擎完成渲染之后，再进行 JS 引擎的工作，因此规定：标准的 JS 模块位置应在 body 标签的最下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js数据类型</title>
</head>

<body>
	<h2 id="myh2"></h2>
     <script>
     	console.log(document.getElementById("myh2"));
    </script>
</body>

</html>

方法二：

如果将内嵌的 JS 标签写在了非标准的位置，我们可以使用 window 的 onload 函数来处理，这个函数就是加载函数，等当前浏览器窗口加载完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js数据类型</title>
</head>

<body>
	<h2 id="myh2"></h2>
     <script>
         //作用：当文档内容或浏览器窗口加载完之后立即执行相应的函数
     	window.onload=function(){
                console.log(document.getElementById("myh2"));
            }
    </script>
</body>

</html>

御弟謌謌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
面试官：对于 JavaScript 的加载问题你怎杨理解？

面试官：“对于 JavaScript 的加载问题你怎杨理解？” 在我们学习 js 引入方式的时候，相信大家都会遇到遇到下方代码这类问题，它的写法和我们引入css的方式基本相同，但是不管我们如何运行，js代码就是不会运行，就很烦人，那么出现这样的问题到底是什么引起的呢？我们该如何解决呢？下面我们一一来进行讲解。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
复制链接

扫一扫