Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

同步HTTP请求也很温柔

  XHR对象发起HTTP同步请求时在干什么?“同步”是个很模糊的词汇,微软的很多程序对“同步”的实现都是直接使用线程消息劫持的方式,直接让线程挂起了。但是到了Web,所谓的“同步”就被像alert弹出的对话框那样给弱化了,他们不能再像从前那样暴力。
  由于规范文档中很多地方只说明了结果,并没有规定实现方式,所以很多细节的地方都存在浏览器差异。就Web的线程这个问题,我现在都混乱了。虽然著名的how browsers work中这样描述:“渲染引擎是单线程的。除了网络通信外,几乎所有的工作都是在这个线程中做的。在Firefox和Safari中它是浏览器的主线程。在Chrome中它是标签页的主线程。”,但是由于这篇文章的年代太久远,我觉得它在某些方面已经无法诠释现代浏览器了。由于HTML5和CSS3的普及,很多东西都在发生质变。
  下面我们把同步HTTP请求对线程的阻断性和JavaScript循环对线程的阻断性做个对比。这个是PHP代码,所以没法做在线运行版本了。 <style>
div {
  width:20px;height:20px;
  background:#FDD000;color:#FFF;
  text-align:center;font:32px/50px Arial;
  -webkit-animation:test 2s linear infinite;
  animation:test 2s linear infinite;
}
@-webkit-keyFrames test {
  0% {margin-left:0px;}
  50% {margin-left:300px;}
  100% {margin-left:0px;}
}
@keyFrames test {
  0% {margin-left:0px;}
  50% {margin-left:300px;}
  100% {margin-left:0px;}
}
</style>
<div></div>
<hr/>
<input value="同步HTTP请求" type="button" id="a" />
<input value="JavaScript循环" type="button" id="b" />
<?@sleep($_SERVER['QUERY_STRING']);?>
<script>
a.onclick=function(){
  this.disabled="disabled";
  with(new XMLHttpRequest)open("GET","?5",false),send();
};
b.onclick=function(){
  this.disabled="disabled";
  for(var t=new Date;new Date-t<5000;);
};
</script>

  这是个有浏览器差异的结果。使用HTTP同步请求在Firefox和IE中无法阻止CSS3动画,只有Chrome中阻止了。而使用JavaScript循环来阻断对这三个浏览器都生效。目前的浏览器对线程的使用存在很多差异,不过共同点是都把“同步”给弱化了,或者说让“主线程”更加健壮了。不仅alert不能阻断主线程,HTTP同步请求也不能阻断,甚至JavaScript的循环都不能阻断。虽然这里的测试中JavaScript循环确实让CSS3的动画效果停止了,这只能说明JavaScript循环在主线程中的优先级超过了CSS3(这里的优先级不是线程优先级的概念,是说JavaScript在实现“同步”时劫持的线程消息更广)。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^