1205人阅读
JavaScript（62）
web页面（18）
我的学习经验--基础（52）
setinterval 和 setTimeout调用方式以及浏览器缓存问题
js中setinterval 和 setTimeout 可以做定时器，这个大家都知道，
关于这两个方法的区别，网上也有很多文章说的很清楚。
在此我还想说一说2个问题：
1，关于调用方式的书写。
function showCallInAndOut(){
//setTimeout(&showCallInAndOut()&,1000);
//setTimeout(showCallInAndOut,1000);
上面的这两中调用方式都是对的！！！
如果第一个参数是字符串，那里面的方法名需要带括号；
如果第一个参数是变量，就直接写变量名（方法名），不能带括号。
下面是例子，包括传参的调用：
&title& New Document &/title&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&jquery-1.7.1.js& type=&text/javascript&&&/script&
&input type=&text& value=&& id=&inter&/&
var aaa=1;
function showCallInAndOut(){
$(&#inter&).val(&showCallInAndOut调用&+aaa+&次&);
var bbb=1;
function sayHi(word){
$(&#inter&).val(&sayHi调用&+bbb+&次,参数是：&+word);
//setInterval(&showCallInAndOut()&,1000);
//setInterval(showCallInAndOut,1000);
//setTimeout(&showCallInAndOut()&,1000);
//setTimeout(showCallInAndOut,1000);
//传参的调用方式
var param=&hi,gril!&;
//setInterval(&sayHi(param)&,1000);//这个方式可以传参
//setInterval(sayHi,1000); //这个方式不能传参
//setTimeout(&sayHi(param)&,1000);//这个方式可以传参
//setTimeout(sayHi(param),1000);//这个方式不能传参
传参的调用方式结果已经很明了了。
从结果我们可以猜想，如果传入字符串，那浏览器在底层可能调用了eval()方法。
如果传入变量，就直接调用这个变量，至于这个为什么不能传参，就不清楚了。
2，关于在ajax做定时器调用的问题（每个一段时间发请求）。
假如我们要刷新页面上某个值，并且需要不断地，时时的刷新，大家都会想到
利用js的定时器不断发ajax请求，在回调函数中巴页面上的值改变这个思路。
在实际项目中，我遇到一个问题：
我使用setInterval定时调用一个方法showCallInAndOut(),
这个方法就是一个ajax。奇怪的是有时候定时刷新很正常，这和我初始的思路一致，
有时候，定时刷新就没有效果，我在后台打上断点，输出打印都没反应。
开始我以为是setInterval出了问题，就在这个方法里加了一行计数：
$(&#inter&).val(&showCallInAndOut调用&+aaa+&次&);
&aaa++;
记过页面上这个aaa是一直变化的，也就是说setInterval一直正常！
那问题只能是里面的方法showCallInAndOut（）有问题！
这个方法就是ajax，没什么特别的，可就是不调用，我甚至在页面加个按钮
直接调用这个showCallInAndOut（）也没反应。
后来，我在页面初始化的时候调一下showCallInAndOut（）刷新页面某个值。
然后再调用setInterval，当然这个setInterval里面还是调用showCallInAndOut（）。
接着我再测试的时候发现，页面初始化时会调用，但是setInterval里面的却不调用！当我改变
数据库中的值，再刷新页面，这两个都不调用！
url绝对是正确的，为什么就不调用呢？由此我突然想到浏览器的缓存！
所以我在url后面加上一个随机参数。在页面初始化那个方法里不加随机参数，
在setInterval里面的方法加上随机参数。
2-1，初次进入那个页面：
&&& 页面初始化会调用，setInterval也调用。
2-2，我改变数据库的值，刷新那个页面时：
&& 页面初始化会不调用，setInterval调用！
& 而且页面首先会显示前一次的数值！过了定时的那几秒后就会显示数据库实际的数值！
& 结果很明显，js方法肯定会调用，但是ajax请求不一定走！
& 为什么呢？浏览器缓存！
在ajax中请求的url在浏览器中是会留下缓存的！如果浏览器发现新的请求和以前的请求一模一样，
浏览器就直接把缓存中的结果拿出来了，这个请求就不走了。这不是什么新鲜的问题，我以前
也遇到过，就是在做图片上传的时候，第一次用户上传一张图片，在点击提交前又想改换另外一张图片（名字
是一样的），我在后台把图片名字改成用户的名字，这样图片的url总是一样的，即使真的上传了改变后的
图片，页面上还显示改变前的那一张！在url后面加上随机参数就没有问题了。归根到底，就是
浏览器缓存的问题。他认为你的请求或者url是和前面一样的，他就直接拿结果！ajax也一样！
就像我这一次做的2-2，之所以先显示以前的值（数据库已经变值了），页面还能显示出来，后后面
setInterval请求中我都加了随机参数，结果就显示正确的，后台代码也能走，这就是很清楚了。
页面初始化的那个url已经在浏览器有了缓存，你刷新页面，走这个方法时，ajax就没走，直接从缓存中取；
后面的setInterval请求url因为有了随机参数使url每次都不一样，浏览器只能重新发送请求，这样取到的值
就是正确的，数据库实际的值。
至于为什么不加随机参数时有时候setInterval能正常走，有时候不能原因就是：
正常走的情况浏览器没有缓存，不正常的时候是有了缓存。
那什么情况下浏览器才会留下缓存呢？这个哥们就不清楚了。
页面的url和请求最好加上随机变量，这样就会很有效地避免一些“诡异”问题，算是培养
良好的编码习惯吧。
至于随机参数，在这里我也说一下吧。
其实很简单，在url后面加一个参数。
&xxxxx/voice/getCallInInfo.action?ss=aaa&;
这个ss如果是随机的，就可以。
在js中，我比较喜欢这样：
url: &&%=path%&/voice/getCallInInfo.action?ss=&+Math.random()
在jsp中，就更好办了，利用日期，随机数等等生成一个无规律的字符串加在url后面就可以。
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1188838次
积分：13787
积分：13787
排名：第816名
原创：320篇
转载：247篇
评论：91条
(1)(1)(2)(1)(1)(1)(2)(2)(3)(1)(3)(1)(2)(10)(3)(14)(13)(20)(20)(8)(12)(18)(16)(15)(16)(15)(16)(26)(49)(79)(13)(2)(19)(58)(49)(41)(14)本文主要讲解一下run-time settings（如图1所示）里各设置项的具体含义（注：标红色的选项卡是比较值得关注的，可重点看一下）：
1、General /&Run&Logic 选项卡
& &&主要用来设置运行时脚本迭代的次数，迭代次数只对run部分的脚本迭代次数有影响，而对int和end部分并没有影响。一般设置为1~3次，只会影响在单位时间内客户端向服务器提交的HTTP请求数，其他的没有影响。
　　Number&of&Iterations：说明的是反复循环的次数。&常境的时间中，如果时间设为5分钟，而实际上程序的运行只需要1分钟，而在这项中，选择的是1次的话，那程序就运行完一次后，就不会再运行。相同的，如果在这一项中选择的是3次的话，那程序在运行后第一次后，还会再运行第二次，第三次。也就是说，在规定的时间和循环次数中，程序Run模块的运行不超过规定时间时，那程序Run模块会运行到规定的时间,不设定时间也可以进行循环。&
　　Insert&Action：为模块Init,&Run和End再添加Action。
　　Insert&Block：为模块Init,&Run和End添加阻碍。添加第一次为Block0，子目录为：No&A添加第二个为Block1，子目录为：No&Actions，以此为推。&Delete:删除。删除每个模块下的Action&Move&Up:移动下面的模块到上一层&Move&Down:移动下面的模块到下一层 。
　　Properties：确定Run&logic中各Action的循环顺序和Iterations次数。
2、General /Pacing 选项卡
& &&&主要用来设置脚本迭代过程中脚本之间的时间间隔，如在第N次脚本迭代完成后，等待5s后进行第n+1次脚本迭代。
& & as soon as the previous iteration ends：在多次迭代时，上一次迭代执行结束后马上执行下一次迭代（如图2所示）
& & after the previous iteration ends：可以设置为fixed或random方式。
fixed方式表示上一次迭代执行结束后，等待一个固定时间后，再执行下一次迭代（如图3所示）；
图3（上一次结束后6s执行下一次迭代）
random方式表示上一次迭代执行结束 ，等待一个随机时间后，再执行下一次迭代，随机时间范围为设置的范围（如图4所示）。& &
& & & & & & & & & & & & & & & & & & & & & &&& & & & & & & & & & & & & & & & & &
图4（设置的随机范围为1~4s）
at fixed/random intervals。表示上一次迭代开始到下一次迭代开始之间的时间间隔，如果设置的时间达到后无论上一次迭代执行是否完成，到达规定的时间就开始执行下一次迭代，包含fixed和random两种方式。fixed表示一个固定的时间长度；random表示一个随机的时间长度，随机值范围为设置的范围。
图5（设置固定时间长度2s，上一次开始后2s执行下一次迭代）
& & 综合上述可以看出第一种选择对服务器的压力最大，因为这个选项在单位时间内所做的业务数最多，即单位时间内提交的请求数最多，所以服务器的压力最大。因此如果进行压力测试时，可以需要该选项。
3、General /Log&选项卡
& & 主要用于设置脚本回放时的日志格式。LR一共包括4类日志文件，即
replay log（回放日志）：是脚本回放时lr记录的日志信息，包括客户端与服务器之间的通信日志和HTML源码录制时的快照信息，但该日志信息的内容取决于log选项卡中extended log选项的设置情况。
recording log（录制日志）：是录制脚本时产生的日志，主要是客户端和服务器端通信时的一些交互信息。
correlation results（关联结果）：是当脚本需要关联时，在回放脚本过程中会记录录制和回放时需要关联内容的值。
generation log（生成日志）：脚本生成时产生的日志。
　　Enable&Logging:是否启动日志功能 ，即在场景运行过程中是否收集日志信息。
Log&options&
　　　　 Send&messages&only&when&an&error&occurs:&当脚本回放时出现错误信息时才收集日志，也即只收集错误日志信息。
　　　　&Always&send&messages :收集所有日志信息，不管是正确的还是错误的日志信息。
Log&message&at&the&detail&level&of&日志的详细内容：
& & &　　Standard&log&标准的日志文件
　　　　Extended&log扩展的日志文件：
　　　　　　Parameter&substitution 表示客户提交给服务器端的所有参数会记录在日志文件中。
　　　　　　Data&returned&by&server 表示不仅包括Parameter&substitution的信息，还包括服务器返回到客户端的信息也会被记录。
　　　　　　Advanced&trace&表示所有客户端提交和服务器返回的信息都会被记录。
一般情况将日志信息设置为扩展的Parameter&substitution即可 ，如果选择其他的两种，那么产生的日志信息会很多，这样日志文件很大。
4、General /Think&Time 选项卡
& & 用来设置用户操作的思考时间（思考时间是指每个HTTP请求之间的时间间隔）
　　ignore think time：运行脚本时忽略思考时间，即上一个HTTP请求结束后，直接运行下一下HTTP请求，不等待。
　　replay think time：设置脚本回放时思考时间，包括as recorded、multiply record think time by 和use random percentage of recorded think time三种方式。
　　as recorded：按录制时的思考时间来回放，即如果录制时间思考时间为9s，那么回放时也按9s来计算（如图6所示）：
　　multiply record think time by ：根据录制时思考时间的整数倍来运行（如图7所示）：
图7（按录制思考时间的2倍来回放）
　　use random percentage of recorded think time：分别设置一个最大值和一个最小值，并从中选出一个随机值，在实际使用过程中一般会选择这种模式，设置最小值为50%，最大值为150%（如图8）：
图8（按录制思考时间的0.5~1.5倍来回放）
　　limit think time to：设置think time的最大值。如果上面的设置项，在回放时使用的思考时间超过所限制的时间，那么以该限制时间为准进行回放（如图9所示）：
图9（限制思考时间为3s）
& & 综合上面的情况，设置为忽略思考时间时，对服务器的压力最大，因为在同样的场景执行时间内，HTTP请求之间的时间缩短说明向服务器提交的请求数增多了，所以服务器的压力增加，如果进行压力测试时，可以选择该项设置。
5、General /Additional&attributes&选项卡
　　添加一些不是系统本来就有的属性参数，可以获得不同客户端的值。&&
6、General /Miscellaneous&选项卡
　　是一个复合选项，涉及的功能比较复杂，包括3个设置项：
Error&Handing &（表示脚本运行出现错误时所采取的措施，默认使用缺省值）：
　　continue&on&error:即使遇到错误也继续执行脚本.&
　　Fail&open&transactions&on&lr_error_message:&当lr_error_message这个函数被transaction内部的脚本调用的时候,无法打开所有的transaction
　　Generate&snapshot&on&error:当遇到error的时候就自动产生快照.&&
Multithreading （表示运行时把虚拟用户当作进程还是线程来处理）：
& & &Run&Vuser&as&a&process:把每个vuser的运行当成一个进程.&
　　Run&Vuser&as&a&thread:允许多线程,并且每个generator可以运行多个&vuser.
在工作中应该分析系统在客户端以进程还是线程运行，再来判断选哪个设置项。
注意：当以进程方式运行虚拟用户时，在负载机中的任务管理器中可以看到，每个虚拟用户才会产生一个进程，进程名为mmdrv.exe，如果以线程的方式运行时，任务管理器中则不会有这个进行，并且每个进程都需要消耗资源，通过这项数据可以计算出每台负载机最多可以并发多少虚拟用户数。
&Automatic&Transactions（设置事务的模式）:&
　　define&each&action&as&a&transaction:自动把每个action当作一个事务.&
　　define&each&step&as&a&transaction:自动把每一个步骤当成一个事务.&&
7、Network /&Speed&Simulation 选项卡
　　Use&maximum&bandwidth:所有Vusers使用系统允许的最大网速，该项为缺省选项。&
　　Use&bandwidth：可以在预定义好的下拉框中选则Vusers使用的最大带宽限制。
　　Use&custom&bandwidth(bps)：手动输入Vusers使用的最大带宽限制。带宽单位为bits。&
8、Browser / Browser&Emulation 选项卡
　　Simulate&browser&cache:配置Vuser模拟带缓存的浏览器。缺省缓存是被允许的，可以通过禁止该选项来使得所有VUser模拟的浏览器都不带缓存。
　　Cache&URLs&requiring&content(HTMLs):设置浏览器缓存URL的上下文(比如，HTML语法，认证或校验等)，其他的URL的上下文不会被缓存，以减少内存使用。可以通过点击Advance来定义需要上下文的URLs。&
　　Check&for&newer&versions&of&stored&pages&every&visit&to&the&page:通过在header中添加If-Modified-Sinces属性来设置浏览器检查比当前存储在缓存中特定URL更新的资源。缺省情况下，浏览器不会自动检测更新的资源。&
　　Download&non-HTML&resources:设置Vusers在刷新网页时下载图片。当real&users访问网页时，需要等待图片的加载完成。如果用户想要测试整个系统，包括终端用户时间，则需要勾上该选项。如果需要提高性能且不需要模拟真实的用户，则不要选该项。&
　　Simulate&a&new&user&on&each&iteraton:设置VuGen在每个循环的init会话结束，重启多有的HTTP上下文。这样使得Vuse更加真实的模拟一个新user开始一个浏览会话。该选项缺省是被选中的。&
　　Clear&cache&on&each&iteration：当每个循环模拟一个最新访问站点的user时，则要选中该选项。当每一个循环模拟一个最近访问过站点的user，浏览器仍为该用户保留网页（从前面的循环中使用缓存页面）的情况则不要选中该选项。&
9、Internet&Protocol /&Proxy 选项卡
　　No&proxy（direct&connection&to&the&Internet）：所有的Vusers不使用代理，直接方式连接到互联网。&
　　Obtain&the&proxy&setting&from&the&default&browser:所有的Vusers使用机器上运行的浏览器的缺省代理设置。该选项为缺省选项。&
　　Use&custom&proxy:所有Vusers使用自己设置的代理方式连接到互联网。&&
10、Internet&Protocol /&Preferences 选项卡
　　Enable&Image&and&text&check：允许在执行期间检查图片或者文字的检查点。该选项仅适用于Html类型的脚本。另外，使用该选项会使用更多的内存。因此，系统默认该项是不选的。&
& & &Hits&Per&Second&and&HTTP&Codes：该选项用来显示每秒点击率以及每秒HTTP相应图。选中后，可以在场景运行的时候动态看到该图，也可以在Analysis分析中看到该图。&
　　Pages&Per&Second（Html&Mode&Only）：选择该项后，可以产生每秒页面图，可以在场景运行或者在Analysisi中看到该图。&
　　Response&Byte&per&Second：选择该项后，可以产生每秒接收字节图，可以在场景运行或者在Analysisi中看到该图。
　　Winlnet&Replay&Instead&of&Sockets（Windows&only）：仅仅用于Windows操作系统，选中该项后，使用Wininet&Replay&引擎。注意：该选项在Socket&Replay引擎失败后才可以使用。&
　　File&and&Line&in&Automatic&Transcation&names：用文件名和行号给自动化的Transction命名，该选项默认是选中的，注意该项选中会使用更多的内存。&
　　Critical&Resource&Errors&As&Warnings：非关键性的Fail作为Warning发送。例如：页面非关键的图片没有显示，或者某个非关键的JavaScript没有运行。该选项默认是选中的。&
　　Save&Snapshot&Resources&Locally：本地保存场景的运行状况。该选项可以使用户更快更精确的看到场景运行状况。
Options：&
&&&&&DNS&Catching：保存DNS的IP地址。&
&&&&&Http&Version：表明你的程序使用的Http版本。&
&&&&&Keep&Alive&Http&Connections：允许长期保存Http连接，这样可以使多个需求通过相同的TCP连接。&
&&&&&Step&Timeout&Caused&by&Resources&is&a&Warning：对于资源申请超时发布Warning而不是Error。&
&&&&&Parse&HTMLContent－Type：对于HTML，当反馈内容是text/html（HTML），’text/’(TEXT)或者Content-type（ANY）时才进行解析。注意：text/xml不会被解析为XML类型。
　　Accept&Server-Side&Compression:&表明回放的时候Server端可以接收压缩数据的情况。注意，接收压缩数据会引起额外的开销。&
　　Accept-Language&request&header:&可以接受语言中以逗号分隔。&
　　HTTP&–Request&Connect&Timeout（Sec）：对HTTP要求的连接操作时间限制，或者连接失败的时间限制。&
　　HTTP&–Request&Receive&Timeout（Sec）：对HTTP要求的接收时间限制，或者失败时间限制。&
　　Step&download&timeout(sec)：一个完成的Script功能的完成时间限制，或者失败时间限制。&
　　Network&buffet&size：Vuser可以使用的最大网络buffer大小，默认为12288。&
　　Fixed&think&time&upop&authentication&retry(mesc)：模仿用户输入用户名和密码的时间。注意，这个作为事务时间的一部分。&
　　Request&Zlib&Headers：当送到Server的需求数据是压缩的时，包含Zlib压缩库的头部。&
　　Max&Number&of&&META&Refresh&&to&the&same&page：同一个页面可以打开的个数。&
　　GUI-Mode&default&block&size&for&DOM&memory&allocations：默认的DOM&Blocak内存分配大小，太小会出现一些额外的内存调用失败以及操作，太大会造成内存浪费。&
　　GUI-Mode&single&setTimeout/setInterval&thresh&hold：超过了SetTimeout设置的值，SetInterval的设置无效。该设置模拟了用户在等待超过一定时间后会点击下一个元素。
　　GUI-Mode&Accumulative&setTimeout/setInterval&threshold：超过了SetTimeout设置的值，忽略SetInterval。
　　GUI-Mode&fail&on&javascript&error：对于Javacript的错误，如果选择Yes，提交一个Fail；如果选择No，提交一个Warning。&
　　GUI-Mode&History&Support：是否支持历史记录。如果选择Auto，则仅仅记录第一次循环的情况。&
　　GUI-Mode&Maximum&history&size：最到可以保存在历史记录中的步骤。&&
11、Internet&Protocol /&Download&Filters 选项卡
　　如果选择Include&Only&Addresses&In&List，&表示重放只能限制在列出的WebSite或者是hosts中。&
　　Exclude&Address&in&lists：重放地址要排除列出的Website或者是hosts。&ContentCheck：&
&&&&&Enable&ContentCheck&During&Replay：选择该项可以是用户得到Web&Server发送回的Error。
12、Internet&Protocol /&ContentCheck 选项卡
　　Enable&ContentCheck&During&Replay：选择该项可以是用户得到&Web&Server&发送回的&Error。
阅读(...) 评论()继前篇&&,我们知道JavaScript引擎是单线程的，所有的js的代码都将在这个单线程中执行。像浏览器事件、计时器等异步只是个幌子，异步时js并没有多个线程在执行，而是都排列在一个待执行队伍中。
setTimeout的使用方法
setTimeout(function(){},time)--可以正确执行。
setTimeout("js语句",time)--可以正确执行。 js语句可以是多条语句。
setTimeout(fun,time)
只引用函数名字，也可运行，但是要注意的是：如果fun是某个对象的方法，则fun函数内的this此时被当做window。
"p1": "obj的属性p1",
"fun": function () {
alert(this.p1);
setTimeout(obj.fun, 1000);
运行后的结果，是undefined。用函数式对象定义对象也是此种结果。用方法1则可以输出正确的结果。
setTimeout(fun(),time)--不正确使用
不能正确执行，因为fun()会立即执行，没有延迟time时间后执行。
当页面初始化时，setTimeout与setInterval的回调与队列中其它回调执行次序是怎样的？《JavaScript权威指南》中介绍的，setTimeout的回调发生在所有的事件都处理完，这句到底是不是对的？带着这些疑问，我们先来看个例子：
1 &!DOCTYPE html&
&title&&/title&
&meta http-equiv="content-type" content="text/charset=utf-8"&
&script type="text/javascript" src="a.js"&&/script&
&script type="text/javascript"&
before_x = 2;
&script type="text/javascript"&
var middle_x =3;
// 页面head中js执行完毕后，执行队列（页面尾部的js，定时器回调、事件回调，究竟哪个先执行，这个随机的）;
setTimeout(function(){
console.log("Timeout:"+(ax+before_x+middle_x+middle_y+bx+cx+domLoad_x+inner_x));
var inter = setInterval(function(){
console.log("Interval:"+(ax+before_x+middle_x+middle_y+bx+inner_x+domLoad_x+cx));
clearInterval(inter);
var middle_y =1;
&script type="text/javascript" src="b.js"&&/script&
23 &/head&
&input type="text" id="inp_click" onclick="inner_x =1;for(var i=0;i&1000000;i++){inner_x++};console.log('clickEvent:'+inner_x);"&
26 &/body&
27 &/html&
28 &script type="text/javascript" src="c.js"&&/script&
&script type="text/javascript"&
var start_time = new Date().getTime();
for(var i= 1;i&1000000;i++){
var end_time = new Date().getTime();
console.log('after the html,wait:'+(end_time-start_time));
var inp = document.getElementById("inp_click");
var event = document.createEvent("MouseEvent");
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
inp.dispatchEvent(event);
var domLoad_x = 4;
var ax =1;
var bx = 2;
1 var cx =3;
chrome中绝大数执行正常；
偶尔会报错，特别是在页面刚在浏览器中打开时，出现以下错误
为什么正常？这是因为计时器在所有的js都执行完后才执行，包括页面尾部的js,模拟触发的事件回调。
为什么报错？这是因为计时器在页面尾部js执行前，先执行。
结论：页面head中js执行完毕后，执行队列（页面尾部的js，定时器回调、事件回调），究竟哪个先执行，这个随机的。《JavaScript高级程序设计》介绍到DomContentLoaded事件时，提到了setTimeout(function(){　　//此处添加事件处理程序代码},0);用以弥补老式浏览器不支持DomContentLoaded。如果你们还有兴趣，我们再来看个例子，至于为什么是这样，大家自己去思考。
1 &!DOCTYPE html&
&title&&/title&
&meta http-equiv="content-type" content="text/charset=utf-8"&
&script type="text/javascript" src="a.js"&&/script&
&script type="text/javascript"&
before_x = 2;
(function(window, undefined) {
var readyList = [],
isReady = 0,
readyBound = false,
bindReady,
readyWait = 1;
init = function(wait) { // A third-party is pushing the ready event forwards
if (wait === true) {
readyWait--;
} // Make sure that the DOM is not already loaded
if (!readyWait || (wait !== true && !isReady)) { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
// 确保body元素存在，这个操作是防止IE的bug
if (!document.body) {
return setTimeout(init, 1);
} // dom渲染完成标志设置为true
isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be
if (wait !== true && --readyWait & 0) {
} // 绑定的渲染完成后的执行函数
if (readyList) { // 全部执行
var fn, i = 0,
ready = readyL // 重置
readyList = null;
while ((fn = ready[i++])) {
fn.call(document);
}; // 初始化readyList事件处理函数队列
// 兼容不同浏览对绑定事件的区别
bindReady = function() {
if (readyBound) {
readyBound = true; // $(document).ready()的嵌套调用时
// readyState: "uninitalized"、"loading"、"interactive"、"complete" 、"loaded"
if (document.readyState === "complete") { // 让它异步执行，使这个ready能延迟
return setTimeout(init, 1);
} // Mozilla, Opera and webkit
// 兼容事件，通过检测浏览器的功能特性，而非嗅探浏览器
if (document.addEventListener) { // 使用事件回调函数
document.addEventListener("DOMContentLoaded",
function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
false); // 绑定回调到load,使之能一定执行
window.addEventListener("load", init, false); // IE
} else if (document.attachEvent) { // 确保在load之前触发onreadystatechange,
// 针对iframe情况，可能有延迟
document.attachEvent("onreadystatechange",
function() { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
}); // 绑定回调到一定执行能load事件
window.attachEvent("onload", init); // 如果是IE且非iframe情况下
// 持续的检查，看看文档是否已准备
var toplevel = false;
toplevel = window.frameElement == null;
} catch(e) {}
(function() {
if (document.documentElement.doScroll && toplevel) {
if (isReady) {
try { // If IE is used, use the trick by Diego Perini
// /IEContentLoaded/
document.documentElement.doScroll("left");
} catch(e) {
setTimeout(arguments.callee, 1);
} // 执行在等待的函数
window.ready = function(fn) { // 绑定上监听事件
bindReady(); // 如果dom已经渲染
if (isReady) { // 立即执行
fn.call(document); // 否则，保存到缓冲队列，等上面的监听事件触发时，再全部执行
} else if (readyList) { // 将回调增加到队列中
readyList.push(fn);
})(window);
&script type="text/javascript"&
var middle_x =3;
// 页面head中js执行完毕后，执行队列（页面尾部的js，定时器回调、事件回调，究竟哪个先执行，这个随机的）;
setTimeout(function(){
console.log("Timeout:"+(ax+before_x+middle_x+middle_y+bx+cx+domLoad_x+inner_x));
var inter = setInterval(function(){
console.log("Interval:"+(ax+before_x+middle_x+middle_y+bx+inner_x+domLoad_x+cx));
clearInterval(inter);
var middle_y =1;
window.onload = function(event){
console.log("onloaded");
ready(function(event){
console.log("dom loaded");
&script type="text/javascript" src="b.js"&&/script&
119 &/head&
120 &body&
&input type="text" id="inp_click" onclick="inner_x =1;for(var i=0;i&1000000;i++){inner_x++};console.log('clickEvent:'+inner_x);"&
122 &/body&
123 &/html&
124 &script type="text/javascript" src="c.js"&&/script&
&script type="text/javascript"&
var start_time = new Date().getTime();
for(var i= 1;i&1000000;i++){
var end_time = new Date().getTime();
console.log('after the html,wait:'+(end_time-start_time));
var inp = document.getElementById("inp_click");
var event = document.createEvent("MouseEvent");
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
inp.dispatchEvent(event);
var domLoad_x = 4;
此时浏览器显示结果为
本文首发：/sprying/archive//3105268.html参考：/diguonianzhu/archive//2570371.html
阅读(...) 评论()