今天用谷歌做了个小测试

<!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测试

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

js阻碍DOM加载的更多相关文章

  1. js实现类型jq的dom加载完成

    有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...

  2. 原生JS实现AJAX、JSONP及DOM加载完成事件，并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 原生JS实现AJAX、JSONP及DOM加载完成事件

    一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  4. 高性能 js -- 无阻塞加载脚本

    参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到&l ...

  5. 关于js css html加载顺序整理

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...

  6. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

  7. jquery源码 DOM加载

    jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...

  8. 关于html，css，js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

  9. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

随机推荐

  1. ArcGIS 坐标系 整理

    刚使用ArcGIS的时候,对坐标系的点一直很混乱,今天想要整理整理. 一.地理坐标系与投影坐标系的区分 首先要能区分地理坐标系(GCS)和投影坐标系(PCS). 上面的是地理坐标系的举例,简单理解为不 ...

  2. 【转】非常好的Java反射例子

    转自 http://www.douban.com/note/306848299/ 原文: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时 ...

  3. jstree的基本应用----记录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. MFC_2.4 组合框和图片控件

    组合框和图片控件 1.拖控件 图片属性更改Type 为Bitmap 名字也要改,不能为IDC_STATIC 绑定变量控件,重命名. 2.初始化 // 设置一个定时器,用于更新图片 SetTimer(0 ...

  5. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

  6. 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥

    scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...

  7. 字符、散列、模拟--P1055 ISBN号码

    题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上的减号),最后一位是识别 ...

  8. uWSGI+nginx+django+virtualenv+supervisor部署项目

    一.前言 在部署项目前,你已有一个能够在你本机测试过,能正常启动的Django项目(毕竟本文主要讲解部署Django项目),以及掌握了Linux系统的一些基本命令. 相关链接: Centos7安装py ...

  9. Java：冒泡排序 | 二分查找

    2018-10-29 20:16:46 冒泡排序 例子(对数字排序): 假设有这样一组数字:32, 8, 128, 2, 64 现在对其进行冒泡排序(*表示下次比较的开始数字): 32>8? t ...

  10. chrome://plugins 无法打开的解决方法，同时解决“该网页已屏蔽插件-adobe flash player”

    chrome打开想要看视频时提示该网页已屏蔽插件-adobe flash player,在网上查了半天说在chrome plugins里面打开就可以了.可是chrome://plugins 无法打开, ...