likes
comments
collection
share

html中script脚本的存放位置项目开发久了，尤其是长期使用开发工具的快捷键实现html默认文档，突然使用txt创建

作者站长头像
站长
· 阅读数 22

项目开发久了，尤其是长期使用开发工具的快捷键实现html默认文档，突然使用txt创建html文档，竟对标签的存放位置产生了不确定性。

下面是最通用的html文档标签存放模板:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>这是标题</title>
        <meta charset="utf-8">
        <style>
        </style>
    </head>
    <body>
        <p>欢迎打开...</p>
        <script>
            console.log('页面显示成功')
        </script>
    </body>
</html>

script标签位置

html文件时自上而下的执行方式，js载入完后，是立即执行的，执行完后，body开始渲染，所以不同位置的script代码块位置影响甚大。

当需要获取文档中的dom节点时

  • script标签放在head中，这时节点就会获取不到
  • 放在body闭合标签之前，正常获取

此时还没有生成dom，所以不能将需要访问的dom元素的相关js逻辑放在body之前

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>这是标题</title>
        <meta charset="utf-8">
        <style>
        </style>
        <script>
            let theP = document.getElementByTagName('p')[0];
            console.log(theP) // undefined
        </script>
    </head>
    <body>
        <p>欢迎打开...</p>
        <script>
            console.log('页面显示成功');
            let pTag = document.getElementByTagName('p')[0];
            console.log(pTag) // 
        </script>
    </body>
</html>

js代码执行会阻塞页面渲染

js进入死循环，控制台不断打印1，页面一直是加载状态，html标签无法渲染出来

<head>
    <script>
        while(true){
            console.log(1)
        }
    </script>
<head>

script标签如果要放在head标签中

页面的实现效果，需要预先加载一些js脚本,可以使用以下方式实现

window.onload=function(){}

或者

documnet.ready=function(){}
转载自:https://juejin.cn/post/6993370351560294414
评论
请登录