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测试
所以：之所以造成执行顺序错乱的假象是因为浏览器渲染的差异造成的。看来还是火狐君比较可爱。
js阻碍DOM加载的更多相关文章
- js实现类型jq的dom加载完成
有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件，并提供对应方法
JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 高性能 js -- 无阻塞加载脚本
参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到&l ...
- 关于js css html加载顺序整理
1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- jquery源码 DOM加载
jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...
- 关于html，css，js三者的加载顺序问题
<head lang="en"> <meta charset="utf-8"> <title></title> ...
- js的异步加载你真的懂吗
面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ? 1 , 创建document对象, 开始解析页面, ...
随机推荐
- SpringBoot+Mybatis 自动创建数据表（适用mysql）
Mybatis用了快两年了,在我手上的发展史大概是这样的 第一个阶段 利用Mybatis-Generator自动生成实体类.DAO接口和Mapping映射文件.那时候觉得这个特别好用,大概的过程是这样 ...
- CAD得到范围内实体（网页版）
主要用到函数说明: IMxDrawSelectionSet::Select 构造选择集.详细说明如下: 参数 说明 [in] MCAD_McSelect Mode 构造选择集方式 [in] VARIA ...
- Spring框架系列(四)--IOC控制反转和DI依赖注入
背景: 如果对象的引用或者依赖关系的管理由具体对象完成,代码的耦合性就会很高,代码测试也变得困难.而IOC可以很好的解决这个问题,把这 些依赖关系交给框架或者IOC容器进行管理,简化了开发. IOC是 ...
- Java必知必会的20种常用类库和API
转载:https://blog.csdn.net/u011001084/article/details/79216958 个人感觉工具类对日常开发是很重要的,所以推荐一下这篇文章,虽然有的类库过时了 ...
- JavaScipt30(第八个案例)（主要知识点：canvas）
承接上文,这是第8个案例,要实现的效果是按住鼠标不放,进行拖动时可以在画布上画出不同粗细不同颜色的曲线. 附上项目链接: https://github.com/wesbos/JavaScript30 ...
- Luogu P4016 「 网络流 24 题 」负载平衡问题
吐槽题目难度,这个题建模好像比前两个都要难,但是难度评级却比第二个要低. 解题思路 依旧是考虑如何建模和建立源点汇点.每个点的货物数量到最后都一样的话肯定是等于他们的平均值.用 $num$ 数组存储原 ...
- [USACO] 奶牛混合起来 Mixed Up Cows
题目描述 Each of Farmer John's N (4 <= N <= 16) cows has a unique serial number S_i (1 <= S_i & ...
- 调用OpenSSL实现RSA加解密和签名操作
调用OpenSSL实现RSA加解密和签名操作 RSA公钥可以从证书和公钥文件,RSA私钥可以从私钥文件中提取.OpenSSL使用了一种BIO抽象IO机制读写所用文件,可以打开文件相关联的BIO,通过B ...
- response对象处理HTTP文件头（禁用缓存、设置页面自动刷新、定时跳转网页）
response对象处理HTTP文件头 制作人:全心全意 禁用缓存 在默认情况下,浏览器将会对显示的网页内容进行缓存.这样,当用户再次访问相关网页时,浏览器会判断网页是否有变化,如果没有变化则直接显示 ...
- 转一篇GCC相关的文章
http://blog.csdn.net/dadoneo/article/details/8201403 Glibc辅助运行库 (C RunTime Library): crt0.o,crt1.o,c ...