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对象, 开始解析页面, ...
随机推荐
- POJ_1163_The triangle
The Triangle Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40079 Accepted: 24144 De ...
- Vue-prop
HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab- ...
- 生成count个[0-n)不重复的随机数
代码来自:https://www.cnblogs.com/ningvsban/p/3590722.html,感觉实现的方式不错(做了一点小小修改) public static ArrayList ge ...
- ThinkPHP---layer插件
[概论] (1)layer是基于jquery开发的一款美化弹框的插件,主要用于弹框效果的交互.但其他功能和组件也日益完善 官网:http://layer.layui.com 在线手册:http://w ...
- ERROR: Field 'PostId' doesn't have a default value Exception in thread "main" org.hibernate.exception.GenericJDBCException: could not execute statement
例子: Post p = new Post(); p.setPostId(3); p.setPostName("技术"); 在执行数据保持时提示session.save(p); 的 ...
- flex 三列布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- xfce 安装文泉驿字体
下载文泉驿字体 #拷贝字体到目录/usr/share/fonts/wqy#创建字体缓存 mkfontscale # 在当前目录下生成fonts.scale文件 mkfontdir # 在当前目录下生成 ...
- LINUX-YUM 软件包升级器 - （Fedora, RedHat及类似系统）
yum install package_name 下载并安装一个rpm包 yum localinstall package_name.rpm 将安装一个rpm包,使用你自己的软件仓库为你解决所有依赖关 ...
- PAT 1138 Postorder Traversal
Suppose that all the keys in a binary tree are distinct positive integers. Given the preorder and in ...
- FJoi2017 1月20日模拟赛 恐狼后卫(口糊动规)
Problem 1 恐狼后卫(wolf.cpp/c/pas) [题目描述] 著名卡牌游戏<石炉传说>中有一张随从牌:恐狼后卫.恐狼后卫的能力是使得相邻随从的攻击力提高. 现在有n张恐狼后卫 ...