js放到head中失效的原因与解决方法

最新推荐文章于 2024-05-09 09:43:12 发布

我要努力要变强要优秀

最新推荐文章于 2024-05-09 09:43:12 发布

阅读量1.4k

点赞数 5

分类专栏： JavaScript html css 文章标签： javascript

本文链接：https://blog.csdn.net/WXLeader/article/details/118654712

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

html css

6 篇文章 0 订阅

订阅专栏

今天写js碰到一个奇怪的问题，写好的js放到body里面执行，但是放到head中没有任何效果，为什么导致这种原因呢？

失效代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.getElementById("tri").innerHTML = "ww。";
    </script>
</head>

<body>
    <p id="tri">nihao</p>
 
</body>

</html>

解决办法：把js代码放到body中，或者利用 window.onload = function(){} 代码包裹，文档加载之后再执行，以后不建议放到head中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <p id="tri">nihao</p>
    <script>
        document.getElementById("tri").innerHTML = "ww。";
    </script>
</body>

</html>

原因：

因为文档还没加载，就读了js，js就不起作用了想在head里用的话，用window.onload = function(){//这里包裹你的代码}。（可以使html加载完成后再执行包裹的代码）

关于window.οnlοad=function()的用法详情参考链接：https://www.jianshu.com/p/df9f96936d8b

js可以分为外部的和内部的，外部的js一般放到head内。内部的js也叫本页面的JS脚本，内部的js一般放到body内，这样做的目的有很多：

1.不阻塞页面的加载(事实上js会被缓存)。

2.可以直接在js里操作dom，这时候dom是准备好的，即保证js运行时dom是存在的。

3.建议的方式是放在页面底部，监听window.onload 或 readystate 来触发js。

4.延伸：

head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。

可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。

可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。

所以在head内的js一般要先执行完后，才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作，对dom的渲染，一般原则是，样式在前面，dom文档，脚本在最后面。遵循先解析再渲染再执行script这个顺序。

参考原文转载：https://www.jb51.net/article/107727.htm

我要努力要变强要优秀

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js放到head中失效的原因与解决方法

今天写js碰到一个奇怪的问题，写好的js放到body里面执行，但是放到head中没有任何效果，为什么导致这种原因呢？失效代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
复制链接

扫一扫