美文网首页
实践出真知:JS执行顺序

实践出真知:JS执行顺序

作者: 张中华 | 来源:发表于2023-02-27 17:08 被阅读0次
<!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>
    <style>
        html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        console.log('head before Mounted:' + document.querySelector('#box')?.innerHTML);
        
        window.addEventListener('DOMContentLoaded', function (e) {
            console.log('head dom content loaded: ' + document.querySelector('#box').innerHTML);
        });

        window.onload = function (e) {
            console.log('head window onload: ' + document.querySelector('#box').innerHTML);
        }
    </script>
</head>

<body>
    <script>
        console.log('before Mounted:' + document.querySelector('#box')?.innerHTML);
    </script>
    <div id="box">box</div>[图片上传中...(image.png-1bc259-1676256319808-0)]

    <script>
        console.log('dom end: ' + document.querySelector('#box').innerHTML);
    </script>

    <script>
        window.onload = function (e) {
            console.log('window onload: ' + document.querySelector('#box').innerHTML);
        }
    </script>

    <script>
        window.addEventListener('DOMContentLoaded', function (e) {
            console.log('dom content loaded: ' + document.querySelector('#box').innerHTML);
        });      
    </script>
</body>

</html>

相关文章

  • 实践出真知:JS执行顺序

  • js执行顺序

    JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行,浏览器对于不同的方式有不同的解析顺序,详细...

  • js执行顺序

  • js代码的异步执行方式

    由于JavaScript的执行环境是单线程的,导致js代码的两种执行方式: 以js代码的先后顺序执行的顺序型 以事...

  • js 标签的属性

    浏览器执行顺序 按顺序解析执行,当遇到 、 时,浏览器开分支执行。 js执行引擎和渲染引擎不会同步执行。

  • JS预解析(变量提升)

    JS预解析(变量提升) JS的正常执行顺序是从上往下依次执行,但是JS在执行之前会读取一遍JS代码 将所有变量声明...

  • js事件轮询机制

    这段代码的执行顺序,根据执行顺序分析、JS事件轮询原理 执行逻辑 从代码执行角度来看 首先分析同步代码、在面的代码...

  • JS之执行顺序

    JS的解析过程分为两个阶段:预编译期(预处理)与执行期 预编译期 JS会对本代码块中的所有var声明的变量和函数进...

  • js执行顺序总结

    流程图 首先执行同步任务,异步任务会插入到异步队列中。同步任务执行完毕,查询是否有异步任务,回到主任务执行。 微任...

  • js执行顺序1

网友评论

      本文标题:实践出真知:JS执行顺序

      本文链接:https://www.haomeiwen.com/subject/pwcdkdtx.html