??xml version="1.0" encoding="utf-8" standalone="yes"?>
<!--[if !(IE)]><!--> IE看不刎ͼ非IE才看得到 <!--<![endif]-->
]]>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var a="<!--";
alert(a);
</SCRIPT>
<!-- -->
</BODY>
</HTML>
q样一D代码在IE下面居然语法解析错误Q实在是弱到不知道怎么说好了?br />当然Q下面这一D代码,也不出意外的在IE下挂掉了
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var a="<!--";
alert(a);
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var a="-->";
alert(a);
</SCRIPT>
</BODY>
</HTML>
l于明白为啥Editplus里面插入script标记的时候L帮我加上 <!-- ?//-->了,q俩货还真不能随便去掉?br />
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var a="<!--";
alert(a);
//-->
</SCRIPT>
<!-- -->
</BODY>
</HTML>
q个没事?br />
]]>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var isIE = !!window.ActiveXObject;
var useFragment=false;
function loadjs(url,callback,errcallback,url2,url3){
if(isIE){
if(useFragment){
var df = document.createDocumentFragment();
df.visitCountCallBack = function(data){
s.onreadystatechange=null;
df=null;
callback(data);
}
var s = df.createElement("SCRIPT");
df.appendChild(s);
s.onreadystatechange=function (ec,cb,u2,u3){
return function(){
if(s.readyState=="loaded") {
s.onreadystatechange=null;
df=null;
if(!u2){
ec();
}else{
loadjs(u2,cb,ec,u3)
}
}
}
}(errcallback,callback,url2,url3)
s.src = url;
}else{
var i=new ActiveXObject("htmlfile");
i.open();
i.parentWindow.visitCountCallBack=function(i){
return function(d){
i.parentWindow.errcallback=null;
i=null;
callback(d);
}
}(i);
i.parentWindow.errcallback=function(ec,cb,u2,u3){
return function(){
i.parentWindow.errcallback=null;
i=null;
if(!u2){
ec();
}else{
loadjs(u2,cb,ec,u3)
}
}
}(errcallback,callback,url2,url3)
i.write("<script src=\""+url+"\"><\/script><script defer>setTimeout(\"errcallback()\",0)<\/script>")
if(i)i.close();//如果数据被cacheQ运行到q一行的时候有可能回调已经完成,H口已经关闭?/span>
}
}else{
var i = document.createElement("IFRAME");
i.style.display="none";
i.callback=function(o){
callback(o);
i.contentWindow.callback=null;
i.src="about:blank"
i.parentNode.removeChild(i);
i = null;
};
i.errcallback = function(ec,cb,u2,u3){
return function(){
if(!u2){
ec();
}else{
loadjs(u2,cb,ec,u3)
}
}
}(errcallback,callback,url2,url3);
i.src="javascript:\"<script>function visitCountCallBack(data){frameElement.callback(data)};<\/script><script src='"+url+"'><\/script><script>setTimeout('frameElement.errcallback()',0)<\/script>\"";
document.body.appendChild(i);
}
}
function init(){
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
var id = spans[i].id;
var url = "http://g.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=a"+id;//故意刉错误引发重?/span>
var url2 = "http://g.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=b"+id;//故意再次刉错误引发重?/span>
var url3 = "http://g.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin="+id;
var callback = function(id){ return function(data){
document.getElementById(id).innerHTML = data.visitcount;
}
}(id);
var errcallback = function(id){ return function(){
document.getElementById(id).innerHTML = "无法q接到服务器";
}
}(id);
loadjs(url,callback,errcallback,url2,url3);
}
}
</SCRIPT>
</HEAD>
<BODY onload="init()">
12345(非法帐号)的访问量Q?/span><span id="12345"></span><BR>
123456 的访问量Q?/span><span id="123456"></span><BR>
20050606 的访问量Q?/span><span id="20050606"></span><BR>
</BODY>
</HTML>
故意在前两次h中制造了错误Q尝试到W三个url的时候才成功?img src ="http://www.tkk7.com/emu/aggbug/354660.html" width = "1" height = "1" />
]]>
最早的Ҏ(gu)发表在msdn上:(x)
http://blogs.msdn.com/b/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx
代码是像q样子的Q?br />
function test(){}
<!-- */
<!-- body { background-color: Aqua; }
可是q样css必要全部攑ֈ一行里面了。我做了一点点修Ҏ(gu)试图可以合ƈ多行的css或者多个css的内容进去:(x)
setTimeout('document.body.innerHTML="<span>Hello World</span>"',0);
<!-- */
<!-- emu{emu:"\
/*"}
span { background-color: #f00; }
span { color: #0ff; }
/* */
q样对于css来说Q只是多了一个无用的规则 emu:{emu:"/*"}
而对于js来说Q多了一行内容ؓ(f) <!-- emu{emu:"\ 的注释,以及(qing)一大块/*开始的Q包含了所有css内容的注释?br />
IE9、Firefox5、safari5、chrome14下通过。没装operaQ不是太兛_q货?br />
]]>
<HTML>
<BODY>
<div id="output"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
(function(){
window.onresize=testZoom;
var _screenOriginalWidth=window.screen.width
function testZoom(){
if(window.screen.width<_screenOriginalWidth){
document.getElementById("output").innerHTML="<br>攑֤?/span>";
}
if(window.screen.width>_screenOriginalWidth){
document.getElementById("output").innerHTML="<br>~小?/span>";
}
_screenOriginalWidth=window.screen.width
}
})()
//-->
</SCRIPT>
</BODY>
</HTML>
]]>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function a(x,y,z){return b(x,y)*c(z)};
function b(x,y){return c(x)*c(y)};
function c(x){return x+x};
setTimeout("alert(a(1,2,3))",0)
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
(function (){
window._log=[];
function obj2str(o){
var r = [];
if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
if(typeof o =="undefined") return "undefined";
if(typeof o == "object"){
if(o===null) return "null";
else if(!o.length){
for(var i in o)
r.push(i+":"+obj2str(o[i]))
r="{"+r.join()+"}"
}else{
for(var i =0;i<o.length;i++)
r.push(obj2str(o[i]))
r="["+r.join()+"]"
}
return r;
}
return o.toString();
}
function log(s){
_log.push(s);
}
var s=document.getElementsByTagName("SCRIPT")[0].text;
var r=/function (\w+)\(/g;
var fns=s.match(r);
for(var i=0;i<fns.length;i++){
fn=fns[i].replace(r,"$1")
if (typeof window[fn]=="function"){
window[fn]=(function(org,fn){
return function(){
log("q入:"+fn+"\n调用参数Q?/span>"+obj2str(arguments));
var r=org.apply(null,arguments);
log("退?"+fn+"\nq回?/span>"+obj2str(r));
return r
}
})(window[fn],fn)
}
}
})()
setTimeout("alert(window._log.join('\\n\\n'))",100)
//-->
</SCRIPT>
</BODY>
</HTML>
]]>
W一个cache-read耗时0.2U多Q第二个Qƈ行发P0.3U多Q第三个0.4U多Q接下去每个囄的耗时差不多都比上一个慢0.1U以上。结论很明显了,q发的cache-read?x)相互堵塞,非常严重的相互堵塞?br />
以上抓包是在IE6下完成的。在IE7和IE8下面情况要好一些,但是问题性质是相同的?br />
很多我们曄以ؓ(f)cache的非常好速度应该非常快的web应用Q也许其实存在着严重的cache-read速度瓉而不为我们所知?br />
|上没有搜到太多关于cache-read旉的文章,看来真是个盲炏V?br />
解决Ҏ(gu)和网lgq是cM的,减少cache-readhQ把多个文件和图片合q成大文件和大图片(而不要一厢情愿的以ؓ(f)文件被览器缓存后?x)有很好的速度表现Q,区分优先U引用资源。还有一个可能有用的Q交错的发v不可避免的异步动态网l请求和cache-readhQ让|络延迟和cache-read延迟旉叠加在一P来节省用户实际要{待的时间?/p>
文章作者说“跑到微Y那一?l的{复让我吐血:Do not enable HTTP compression for the script files 请不要对脚本文g开启http压羃 只好在服务器端增加对览器的识别代码,如果是ie6,׃压羃脚本文g?虽然脚本能运行了,可是用户体验?.. ?我恨ie 6”
唉,说啥好呢Q?/p>
真相是,微Y的答?http://support.microsoft.com/kb/327286/en-us?sid=64&spid=2073) 里面提供了两个解x案,其中W一个描q的E微啰嗦了一点,被这个作者直接忽略掉了。第二个解决Ҏ(gu)只有一句话Q显然更Ҏ(gu)被读懂:(x)
If you use a Cache-Control: no-cache HTTP header to prevent the files from caching, remove that header. In some situations, if you substitute an Expires HTTP header, you do not trigger the problem.
-or-
Do not enable HTTP compression for the script files.
Emu虽然英文比较烂,四老考不q,Z方便大家q是译一下吧Q不然又该有不下M?br />
1.如果你用了Cache-Control: no-cache q个 HTTP 头来防止文g被缓存,U除q个头就好了。有些情况下Q如果你用一个Expires头来代替Q前面这个出问题的http_(d)Q(也可以v到相同作用而)不会(x)触发q个问题?/em>
或?/p> 2.不要压羃脚本文g?/em>
作者:(x) KeeKim Heng, Google Web Developer
在我们开发互联网富应用(RIAQ时Q我们经常写一些javascript脚本来修Ҏ(gu)者增加页面元素,q些工作最l是DOM——或者说文档对象模型——来完成的,而我们的实现方式?x)媄响到应用的响应速度?/p>
DOM操作?x)导致浏览器重解?reflow)Q这是浏览器的一个决定页面元素如何展现的计算q程。直接修改DOMQ修改元素的CSS样式Q修Ҏ(gu)览器的窗口大,都会(x)触发重解析。读取元素的布局属性比如offsetHeithe或者offsetWidth也会(x)触发重解析。重解析需要花费计时_(d)因此重解析触发的少Q应用就?x)越快?/p>
DOM操作通常要不是修改已经存在的页面上的元素,要不是创徏新的面元素。下面的4U优化方案覆盖了修改和创建DOM节点两种方式Q帮助你减少触发览器重解析的次数?br />
Ҏ(gu)一Q通过CSScd切换来修改DOM
q个Ҏ(gu)让我们可以一ơ性修改一个元素和它的子元素的多个样式属性而只触发一ơ重解析?/p>
需求:(x)
Qemu注:(x)原文作者写到这里的时候脑子显然短路了一下,把后面的Out-of-the-flow DOM Manipulation模式要解决的问题l摆到这里来了,不过从示范代码中很容易明白作者真正想描述的问题,因此emu׃照翻原文了)
我们现在需要写一个函数来修改一个超链接的几个样式规则。要实现很简单,把这几个规则对应的属性逐一改了好了。但是带来的问题是,每修改一个样式属性,都会(x)D一ơ页面的重解析?br />
解决Ҏ(gu)
要解册个问题,我们可以先创Z个样式名Qƈ且把要修改的样式规则都放到这个类名上Q然后我们给链接添加上q个新类名,可以实现添加几个样式规则而只触发一ơ重解析了。这个模式还有个好处是也实现了表现和逻辑相分R?/p>
Qemu注:(x)作者在q里再次脑子短\Q把DocumentFragment DOM Generation模式的介l提前到q里来了Qemu只好再次发挥一下)
上一个方案解决的是修改一个超链接的问题,当一ơ需要对很多个超链接q行相同修改的时候,q个Ҏ(gu)可以大显n手了?/p>
需?/strong>
需求是q样的,我们要写一个函数来修改一个指定元素的子元素中所有的链接的样式名(classNameQ属性。要实现很简单,我们可以通过遍历每个链接ƈ且修改它们的样式名来完成d。但是带来的问题是Q每修改一个超链接都会(x)D一ơ重解析?/p>
解决Ҏ(gu)
要解册个问题,我们可以把被修改的指定元素从DOM里面U除Q再修改所有的链接,然后在把q个元素插入回到它原来的位置上。ؓ(f)了完成这个复杂的操作Q我们可以先写一个可重用的函敎ͼ它不但移除了q个DOM节点Q还q回了一个把元素插回到原来的位置的函数?/p>
Ҏ(gu)三:(x)一ơ性的DOM元素生成
q个Ҏ(gu)让我们创Z个元素的q程只触发一ơ重解析。在创徏完元素以后,先进行所有需要的修改Q最后才把它插入到DOM里面d可以?/p>
需?/strong>
需求是q样的,实现一个函敎ͼ往一个指定的父元素上插入一个超链接元素。这个函数要同时可以讄q个链接的昄文字和样式类。我们可以这样做Q创建元素,插入到DOM里面Q然后设|相应的属性。这p触发3ơ重解析?/p>
解决Ҏ(gu)
很简单,我们只要把插入元素这个操作放到最后做Q就可以只进行一ơ重解析了?/p>
不过Q要是我们想要插入很多个链接到一个元素里面的话,那么q个做法q是有问题:(x)每插入一个超链接q是要触发一ơ重解析。下一个方案可以解册个问题?/p>
Ҏ(gu)四:(x)通过文档片段对象QDocumentFragmentQ创Zl元?/strong>
q个Ҏ(gu)允许我们创徏q插入很多个元素而只触发一ơ重解析。要实现q点需要用到所谓的文档片段对象QDocumentFragmentQ。我们先在DOM之外创徏一个文档片D对象(q样它也׃需要解析和渲染Q,然后我们在文档片D对象中创徏很多个元素,最后我们把q个文档片段对象中所有的元素一ơ性放到DOM里面去,只触发一ơ重解析?/p>
需?/strong>
我们要写一个函敎ͼ往一个指定的元素上面增加10个超链接。如果我们简单的直接插入10个超链接到元素上面,׃(x)触发10ơ重解析?/p>
解决Ҏ(gu)
要解册个问题,我们要先创徏一个文档片D对象,然后把每个新创徏的超链接都插入到它里面去。当我们把文档片D对象用appendChild命o(h)插入到指定的节点Ӟq个文档片段对象的所有子节点׃赯插入到指定的元素里面Q而且只需要触发一ơ重解析?br />
使用h览?chrome)的时候,有的时候脚本程序会(x)捕获?#8220;Uncaught TypeError: Object #<an HTMLObjectElement> has no method 'create' ”q个错误Q在chrome的用戯坛上也有人在问这个问题?/p>
q个错误应该是由于最新版的谷歌浏览器没有自带完整的google gearslgD的。看h最新版的chrome览器会(x)在用L(fng)一ơ用gearslg的时候自动下载和安装该组Ӟ而在安装成功以前我们虽然可以成功创徏 application/x-googlegears 对象Q却无法调用它的createҎ(gu)创徏M有用的东ѝ?/p>
q个时候其实没有太多的事情可以做,基本上我们我们只能检这个对象的create接口是否存在Q发C存在的时候提C用戯心{待Q过一D|间后再刷斎ͼ或者下回再来看看,希望它已l自己安装好了?br />