zoukankan      html  css  js  c++  java
  • js阻碍DOM加载

    今天用谷歌做了个小测试

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        1
        <br />
        <script>
            alert(1);
        </script>
        2
    </body>
    </html>

    根据页面的加载顺序是从上到下的,这个页面的执行顺序应该是:显示1 --> altert(1) --> 显示2

    可是打开网页的时候居然是先弹出 1,然后 显示 1 2。给人一种执行顺序不符合正常规律的错觉。

    然后使用火狐浏览器测试,发现又是按照预期显示了。

    接着又测试了safari 浏览器,显示的跟谷歌一样。这就让人很纳闷了。然后对代码又进行了相应的改动,如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        1
        <br />
        <script>
            alert(document.getElementsByTagName('body')[0].innerText);
            document.getElementsByTagName('body')[0].innerText = 'a';
            alert(document.getElementsByTagName('body')[0].innerText);
        </script>
        2
    </body>
    </html>

    谷歌测试:

     

    火狐测试:

    safari测试

    所以:之所以造成执行顺序错乱的假象是因为浏览器渲染的差异造成的。看来还是火狐君比较可爱。

  • 相关阅读:
    商业智能领域需要了解的数据库优化理论
    动态监听与静态监听(转载)
    Oracle查看表结构的几种方法
    PLSQL Developer使用技巧整理
    Oracle数据库的三种验证机制
    EAV模型
    三门问题
    第一个python实例程序
    type()
    pi
  • 原文地址:https://www.cnblogs.com/z-one/p/8555889.html
Copyright © 2011-2022 走看看