js阻碍DOM加载
2024-09-05 07:11:21
今天用谷歌做了个小测试
<!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测试
所以:之所以造成执行顺序错乱的假象是因为浏览器渲染的差异造成的。看来还是火狐君比较可爱。
最新文章
- .Net 转战 Android 4.4 日常笔记(10)--PullToRefresh下拉刷新使用
- String、StringBuilder 与 StringBuffer
- ADV数字的剪切
- 【Android 界面效果14】RelativeLayout里常用的位置属性
- leetcode distinct-subsequences(DP)
- 高性能的JavaScript--加载和执行[转]
- Android OpenGL ES(十四)gl10方法解析
- JAVA基础--异常
- HDU 5547 Sudoku(DFS)
- linux crontab yum安装
- java基础--面对对象
- uva208
- Mesos源码分析(12): Mesos-Slave接收到RunTask消息
- 【Spark篇】---Spark调优之代码调优,数据本地化调优,内存调优,SparkShuffle调优,Executor的堆外内存调优
- Windows 版 SourceTree 免登录跳过初始设置的方法
- c++ 线程间通信方式
- 记一次easywechat企业付款问题
- LOJ2527 HAOI2018 染色 容斥、生成函数、多项式求逆
- DOCKER上安装HASSIO
- 【贪心】经营与开发 @upc_exam_5500
热门文章
- Android学习笔记(四) JAVA基础知识回顾
- SQL server 上机练习题
- (转) 淘淘商城系列——Redis的安装
- 网络编程基础_4.2TCP-客户端
- CAD动态绘制样条线(网页版)
- linux运行jar报错
- 一个简单的java年龄计算器
- 搜索--P1219 N皇后
- IN语句改写EXISTS
- Loading class `com.mysql.jdbc.Driver&#39;. This is deprecated. The new driver class is `com.mysql.cj.jdbc.Driver&#39;.