<HTML>
<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();//如果数æ®è¢«cacheåQŒè¿è¡Œåˆ°˜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>
<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();//如果数æ®è¢«cacheåQŒè¿è¡Œåˆ°˜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±‚ä¸åˆ¶é€ 了(ji¨£n)错误åQŒå°è¯•åˆ°½W¬ä¸‰ä¸ªurl的时候æ‰æˆåŠŸã€?img src ="http://www.aygfsteel.com/emu/aggbug/354660.html" width = "1" height = "1" />
emu 2011-07-19 20:50 å‘表评论
]]><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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>
<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>
emu 2011-06-23 19:20 å‘表评论
]]><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+"\n˜q”回å€?/span>"+obj2str(r));
return r
}
})(window[fn],fn)
}
}
})()
setTimeout("alert(window._log.join('\\n\\n'))",100)
//-->
</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+"\n˜q”回å€?/span>"+obj2str(r));
return r
}
})(window[fn],fn)
}
}
})()
setTimeout("alert(window._log.join('\\n\\n'))",100)
//-->
</SCRIPT>
</BODY>
</HTML>
emu 2011-06-16 17:38 å‘表评论
]]>emu 2010-06-22 11:33 å‘表评论
]]>
½W¬ä¸€ä¸ªcache-read耗时0.2¿U’多åQŒç¬¬äºŒä¸ªåQˆåƈ行å‘èµøP¼‰(j¨ª)0.3¿U’多åQŒç¬¬ä¸‰ä¸ª0.4¿U’多åQŒæŽ¥ä¸‹åŽ»æ¯ä¸ªå›„¡‰‡çš„耗时差ä¸å¤šéƒ½æ¯”上一个慢0.1¿U’以上。结论很明显äº?ji¨£n)，òq¶å‘çš„cache-readä¼?x¨¬)ç›¸äº’å µå¡žï¼Œéžå¸¸ä¸¥é‡çš„ç›¸äº’å µå¡žã€?br />
以上抓包是在IE6下完æˆçš„。在IE7å’ŒIE8下é¢æƒ…况è¦å¥½ä¸€äº›ï¼Œä½†æ˜¯é—®é¢˜æ€§è´¨æ˜¯ç›¸åŒçš„ã€?br />
很多我们曄¡»ä»¥äØ“(f¨´)cacheçš„éžå¸¸å¥½é€Ÿåº¦åº”该éžå¸¸å¿«çš„web应用åQŒä¹Ÿè®¸å…¶å®žå˜åœ¨ç€ä¸¥é‡çš„cache-read速度瓉™¢ˆè€Œä¸ä¸ºæˆ‘们所知ã€?br />
¾|‘上没有æœåˆ°å¤ªå¤šå…³äºŽcache-readæ—‰™—´çš„æ–‡ç« ï¼Œçœ‹æ¥çœŸæ˜¯ä¸ªç›²ç‚V€?br />
解决æ–ÒŽ(gu¨©)¡ˆå’Œç½‘¾lœåšg˜qŸæ˜¯¾cÖM¼¼çš„，å‡å°‘cache-readè¯äh±‚åQŒæŠŠå¤šä¸ªž®æ–‡ä»¶å’Œž®å›¾ç‰‡åˆòq¶æˆå¤§æ–‡ä»¶å’Œå¤§å›¾ç‰‡ï¼ˆè€Œä¸è¦ä¸€åŽ¢æƒ…愿的以äØ“(f¨´)ž®æ–‡ä»¶è¢«‹¹è§ˆå™¨ç¼“å˜åŽä¼?x¨¬)有很好的速度表现åQ‰ï¼ŒåŒºåˆ†ä¼˜å…ˆ¾U§å¼•ç”¨èµ„æºã€‚还有一个å¯èƒ½æœ‰ç”¨çš„åQšäº¤é”™çš„å‘è“vä¸å¯é¿å…的异æ¥åŠ¨æ€ç½‘¾lœè¯·æ±‚å’Œcache-readè¯äh±‚åQŒè®©¾|‘络延迟和cache-read延迟旉™—´å åŠ åœ¨ä¸€èµøP¼Œæ¥èŠ‚çœç”¨æˆ·å®žé™…覽{‰å¾…的时间ã€?/p>
emu 2010-04-09 22:58 å‘表评论
]]>
æ–‡ç« ä½œè€…è¯´“跑到微èÊY那一æŸ?¾l™çš„½{”å¤è®©æˆ‘åè¡€:Do not enable HTTP compression for the script files 请ä¸è¦å¯¹è„šæœ¬æ–‡äšgå¼€å¯http压羃 åªå¥½åœ¨æœåŠ¡å™¨ç«¯å¢žåŠ 对‹¹è§ˆå™¨çš„识别代ç ,如果是ie6,ž®×ƒ¸åŽ‹ç¾ƒè„šæœ¬æ–‡äšgäº?虽然脚本能è¿è¡Œäº†(ji¨£n),å¯æ˜¯ç”¨æˆ·ä½“验ž®?.. å“?我æ¨ie 6”
唉，说啥好呢åQ?/p>
真相是，微èÊYçš„ç”å¤?http://support.microsoft.com/kb/327286/en-us?sid=64&spid=2073) 里é¢æä¾›äº?ji¨£n)两个解å†Ïx(ch¨®ng)–¹æ¡ˆï¼Œå…¶ä¸½W¬ä¸€ä¸ªæ˜q°çš„½E微啰嗦äº?ji¨£n)一点，被这个作者直接忽略掉äº?ji¨£n)。第二个解决æ–ÒŽ(gu¨©)¡ˆåªæœ‰ä¸€å¥è¯åQŒæ˜¾ç„¶æ›´å®ÒŽ(gu¨©)˜“被读懂：(x¨¬)
To work around this problem, you can do either of the following:
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º†(ji¨£n)方便大家˜q˜æ˜¯¾˜»è¯‘一下å§åQŒä¸ç„¶åˆè¯¥æœ‰äºø™¯»ä¸ä¸‹åŽÖMº†(ji¨£n)ã€?br />
è¦è§„é¿æ¤é—®é¢˜åQŒä½ å¯ä»¥åœ¨ä¸‹é¢ä¸¤ä¸ªæ–¹æ¡ˆä¸é€‰ä¸€¿U：(x¨¬)
1.å¦‚æžœä½ ä‹É用了(ji¨£n)Cache-Control: no-cache ˜q™ä¸ª HTTP 头æ¥é˜²æ¢æ–‡äšg被缓å˜ï¼Œ¿U»é™¤˜q™ä¸ªå¤´å°±å¥½äº†(ji¨£n)。有些情况下åQŒå¦‚æžœä½ ç”¨ä¸€ä¸ªExpires头æ¥ä»£æ›¿åQˆå‰é¢è¿™ä¸ªå‡ºé—®é¢˜çš„httpå¤ß_(d¨¢)¼‰(j¨ª)åQŒï¼ˆä¹Ÿå¯ä»¥è“v到相åŒä½œç”¨è€Œï¼‰(j¨ª)ä¸ä¼š(x¨¬)触员q™ä¸ªé—®é¢˜ã€?/em>
或è€?/p> 2.ä¸è¦åŽ‹ç¾ƒè„šæœ¬æ–‡äšgã€?/em>
个ähå»ø™®®˜q˜æ˜¯è€ƒè™‘½W¬ä¸€æ–ÒŽ(gu¨©)¡ˆã€?br />
本文作äØ“(f¨´)å‰é¢ä¸€½‹‡ç¿»è¯‘æ–‡ç« ã€?a href="http://www.aygfsteel.com/emu/archive/2010/02/18/313398.html">压羃åQŒè®©¾|‘络更快》的补充ã€?
emu 2010-03-31 11:37 å‘表评论
]]>作者：(x¨¬) KeeKim Heng, Google Web Developer
在我们开å‘互è”网富应用（RIAåQ‰æ—¶åQŒæˆ‘们ç»å¸¸å†™ä¸€äº›javascript脚本æ¥ä¿®æ”ÒŽ(gu¨©)ˆ–è€…å¢žåŠ é¡µé¢å…ƒç´ ，˜q™äº›å·¥ä½œæœ€¾lˆæ˜¯DOM——或者说文档对象模型——æ¥å®Œæˆçš„，而我们的实现方å¼ä¼?x¨¬)åª?ji¨£ng)å“到应用的å“应速度ã€?/p>
DOMæ“作ä¼?x¨¬)导致æµè§ˆå™¨é‡è§£æ?reflow)åQŒè¿™æ˜¯æµè§ˆå™¨çš„一个决定页é¢å…ƒç´ 如何展现的计算˜q‡ç¨‹ã€‚直接修改DOMåQŒä¿®æ”¹å…ƒç´ çš„CSSæ ·å¼åQŒä¿®æ”ÒŽ(gu¨©)µè§ˆå™¨çš„窗å£å¤§ž®ï¼Œéƒ½ä¼š(x¨¬)触å‘é‡è§£æžã€‚读å–å…ƒç´ çš„å¸ƒå±€å±žæ€§æ¯”å¦‚offsetHeithe或者offsetWidth也会(x¨¬)触å‘é‡è§£æžã€‚é‡è§£æžéœ€è¦èŠ±è´¹è®¡½Ž—æ—¶é—ß_(d¨¢)¼Œå› æ¤é‡è§£æžè§¦å‘çš„‘Šå°‘åQŒåº”用就ä¼?x¨¬)越快ã€?/p>
DOMæ“作通常è¦ä¸ž®±æ˜¯ä¿®æ”¹å·²ç»å˜åœ¨çš„页é¢ä¸Šçš„å…ƒç´ ï¼Œè¦ä¸ž®±æ˜¯åˆ›å¾æ–°çš„™åµé¢å…ƒç´ 。下é¢çš„4¿U优化方案覆盖了(ji¨£n)修改和创建DOM节点两ç§æ–¹å¼åQŒå¸®åŠ©ä½ å‡å°‘触呋¹è§ˆå™¨é‡è§£æžçš„次数ã€?br />
æ–ÒŽ(gu¨©)¡ˆä¸€åQšé€šè¿‡CSS¾cÕd切æ¢æ¥ä¿®æ”¹DOM
˜q™ä¸ªæ–ÒŽ(gu¨©)¡ˆè®©æˆ‘们å¯ä»¥ä¸€‹Æ¡æ€§ä¿®æ”¹ä¸€ä¸ªå…ƒç´ 和它的åå…ƒç´ çš„å¤šä¸ªæ ·å¼å±žæ€§è€Œåªè§¦å‘一‹Æ¡é‡è§£æžã€?/p>
需求：(x¨¬)
åQˆemu注：(x¨¬)原文作者写到这里的时候脑å显然çŸè·¯äº†(ji¨£n)一下，把åŽé¢çš„Out-of-the-flow DOM Manipulation模å¼è¦è§£å†³çš„问题¾l™æ‘†åˆ°è¿™é‡Œæ¥äº?ji¨£n)，ä¸è¿‡ä»Žç¤ºèŒƒä»£ç ä¸å¾ˆå®¹æ˜“明白作者真æ£æƒ³æè¿°çš„é—®é¢˜ï¼Œå› æ¤emuž®×ƒ¸ç…§ç¿»åŽŸæ–‡äº?ji¨£n)ï¼?j¨ª)
我们现在需è¦å†™ä¸€ä¸ªå‡½æ•°æ¥ä¿®æ”¹ä¸€ä¸ªè¶…é“¾æŽ¥çš„å‡ ä¸ªæ ·å¼è§„则。è¦å®žçŽ°å¾ˆç®€å•ï¼ŒæŠŠè¿™å‡ 个规则对应的属性é€ä¸€æ”¹äº†(ji¨£n)ž®±å¥½äº?ji¨£n)。但是带æ¥çš„问题是，æ¯ä¿®æ”¹ä¸€ä¸ªæ ·å¼å±žæ€§ï¼Œéƒ½ä¼š(x¨¬)å¯ÆD‡´ä¸€‹Æ¡é¡µé¢çš„é‡è§£æžã€?br />
function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
解决æ–ÒŽ(gu¨©)¡ˆ
è¦è§£å†Œ™¿™ä¸ªé—®é¢˜ï¼Œæˆ‘们å¯ä»¥å…ˆåˆ›å»ÞZ¸€ä¸ªæ ·å¼ååQŒåƈ且把è¦ä¿®æ”¹çš„æ ·å¼è§„则都放到这个类å上åQŒç„¶åŽæˆ‘们给‘…é“¾æŽ¥æ·»åŠ ä¸Š˜q™ä¸ªæ–°ç±»å，ž®±å¯ä»¥å®žçŽ°æ·»åŠ å‡ ä¸ªæ ·å¼è§„则而åªè§¦å‘一‹Æ¡é‡è§£æžäº?ji¨£n)。这个模å¼è¿˜æœ‰ä¸ªå¥½å¤„是也实现äº?ji¨£n)表现和逻辑相分¼›…R€?/p>
.selectedAnchor {
font-weight: bold;
text-decoration: none;
color: #000;
}
function selectAnchor(element) {
element.className = 'selectedAnchor';
}
font-weight: bold;
text-decoration: none;
color: #000;
}
function selectAnchor(element) {
element.className = 'selectedAnchor';
}
æ–ÒŽ(gu¨©)¡ˆäºŒï¼š(x¨¬)在éžæ¸²æŸ“åŒÞZ¿®æ”¹DOM
åQˆemu注：(x¨¬)作者在˜q™é‡Œå†æ¬¡è„‘åçŸèµ\åQŒæŠŠDocumentFragment DOM Generation模å¼çš„介¾læå‰åˆ°˜q™é‡Œæ¥äº†(ji¨£n)åQŒemuåªå¥½å†æ¬¡å‘挥一下）(j¨ª)
上一个方案解决的是修改一个超链接的问题，当一‹Æ¡éœ€è¦å¯¹å¾ˆå¤šä¸ªè¶…链接˜q›è¡Œç›¸åŒä¿®æ”¹çš„时候，˜q™ä¸ªæ–ÒŽ(gu¨©)¡ˆž®±å¯ä»¥å¤§æ˜¾èín手了(ji¨£n)ã€?/p>
需�/strong>
需求是˜q™æ ·çš„，我们è¦å†™ä¸€ä¸ªå‡½æ•°æ¥ä¿®æ”¹ä¸€ä¸ªæŒ‡å®šå…ƒç´ çš„åå…ƒç´ ä¸æ‰€æœ‰çš„‘…é“¾æŽ¥çš„æ ·å¼å（classNameåQ‰å±žæ€§ã€‚è¦å®žçŽ°å¾ˆç®€å•ï¼Œæˆ‘们å¯ä»¥é€šè¿‡é历æ¯ä¸ª‘…链接åÆˆä¸”ä¿®æ”¹å®ƒä»¬çš„æ ·å¼åæ¥å®Œæˆä»ÕdŠ¡ã€‚但是带æ¥çš„问题ž®±æ˜¯åQŒæ¯ä¿®æ”¹ä¸€ä¸ªè¶…链接都会(x¨¬)å¯ÆD‡´ä¸€‹Æ¡é‡è§£æžã€?/p>
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
解决æ–ÒŽ(gu¨©)¡ˆ
è¦è§£å†Œ™¿™ä¸ªé—®é¢˜ï¼Œæˆ‘们å¯ä»¥æŠŠè¢«ä¿®æ”¹çš„æŒ‡å®šå…ƒç´ ä»ŽDOM里颿U»é™¤åQŒå†ä¿®æ”¹æ‰€æœ‰çš„‘…链接，然åŽåœ¨æŠŠ˜q™ä¸ªå…ƒç´ æ’入回到它原æ¥çš„ä½ç½®ä¸Šã€‚äØ“(f¨´)äº?ji¨£n)完æˆè¿™ä¸ªå¤æ‚çš„æ“作åQŒæˆ‘们å¯ä»¥å…ˆå†™ä¸€ä¸ªå¯é‡ç”¨çš„函敎ͼŒå®ƒä¸ä½†ç§»é™¤äº†(ji¨£n)˜q™ä¸ªDOM节点åQŒè¿˜˜q”回äº?ji¨£n)ä¸€ä¸ªæŠŠå…ƒç´ æ’回到原æ¥çš„ä½ç½®çš„函数ã€?/p>
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
有了(ji¨£n)上题q™ä¸ªå‡½æ•°åQŒçŽ°åœ¨æˆ‘们就å¯ä»¥åœ¨ä¸€ä¸ªä¸éœ€è¦è§£æžæ¸²æŸ“çš„å…ƒç´ ä¸Šé¢ä¿®æ”¹é‚£äº›‘…链接了(ji¨£n)ã€‚è¿™æ ·åªåœ¨ç§»é™¤å’Œæ’å…¥å…ƒç´ çš„æ—¶å€™å„触å‘一‹Æ¡é‡è§£æžã€?br />
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
æ–ÒŽ(gu¨©)¡ˆä¸‰ï¼š(x¨¬)一‹Æ¡æ€§çš„DOMå…ƒç´ ç”Ÿæˆ
˜q™ä¸ªæ–ÒŽ(gu¨©)¡ˆè®©æˆ‘们创å»ÞZ¸€ä¸ªå…ƒç´ çš„˜q‡ç¨‹åªè§¦å‘一‹Æ¡é‡è§£æžã€‚在创å¾å®Œå…ƒç´ 以åŽï¼Œå…ˆè¿›è¡Œæ‰€æœ‰éœ€è¦çš„修改åQŒæœ€åŽæ‰æŠŠå®ƒæ’入到DOM里é¢åŽÕd°±å¯ä»¥äº?/p>
需�/strong>
需求是˜q™æ ·çš„，实现一个函敎ͼŒå¾€(xi¨¤n)ä¸€ä¸ªæŒ‡å®šçš„çˆ¶å…ƒç´ ä¸Šæ’å…¥ä¸€ä¸ªè¶…é“¾æŽ¥å…ƒç´ ã€‚è¿™ä¸ªå‡½æ•°è¦åŒæ—¶å¯ä»¥è®„¡½®˜q™ä¸ª‘…链接的昄¡¤ºæ–‡å—å’Œæ ·å¼ç±»ã€‚我们å¯ä»¥è¿™æ ·åšåQšåˆ›å»ºå…ƒç´ ，æ’入到DOM里é¢åQŒç„¶åŽè®¾¾|®ç›¸åº”的属性。这ž®Þp¦è§¦å‘3‹Æ¡é‡è§£æžã€?/p>
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}
var element = document.createElement('a');
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}
解决æ–ÒŽ(gu¨©)¡ˆ
很简å•ï¼Œæˆ‘们åªè¦æŠŠæ’å…¥å…ƒç´ è¿™ä¸ªæ“作放到最åŽåšåQŒå°±å¯ä»¥åªè¿›è¡Œä¸€‹Æ¡é‡è§£æžäº?ji¨£n)ã€?/p>
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
}
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
}
ä¸è¿‡åQŒè¦æ˜¯æˆ‘们想è¦æ’入很多个‘…é“¾æŽ¥åˆ°ä¸€ä¸ªå…ƒç´ é‡Œé¢çš„è¯ï¼Œé‚£ä¹ˆ˜q™ä¸ªåšæ³•˜q˜æ˜¯æœ‰é—®é¢˜ï¼š(x¨¬)æ¯æ’入一个超链接˜q˜æ˜¯è¦è§¦å‘一‹Æ¡é‡è§£æžã€‚下一个方案å¯ä»¥è§£å†Œ™¿™ä¸ªé—®é¢˜ã€?/p>
æ–ÒŽ(gu¨©)¡ˆå››ï¼š(x¨¬)通过文档片段对象åQˆDocumentFragmentåQ‰åˆ›å»ÞZ¸€¾l„å…ƒç´?/strong>
˜q™ä¸ªæ–ÒŽ(gu¨©)¡ˆå…许我们创å¾òq¶æ’å…¥å¾ˆå¤šä¸ªå…ƒç´ è€Œåªè§¦å‘一‹Æ¡é‡è§£æžã€‚è¦å®žçŽ°˜q™ç‚¹éœ€è¦ç”¨åˆ°æ‰€è°“的文档片段对象åQˆDocumentFragmentåQ‰ã€‚我们先在DOM之外创å¾ä¸€ä¸ªæ–‡æ¡£ç‰‡ŒDµå¯¹è±¡ï¼ˆ˜q™æ ·å®ƒä¹Ÿž®×ƒ¸éœ€è¦è§£æžå’Œæ¸²æŸ“åQ‰ï¼Œç„¶åŽæˆ‘们在文档片ŒDµå¯¹è±¡ä¸åˆ›å¾å¾ˆå¤šä¸ªå…ƒç´ ，最åŽæˆ‘们把˜q™ä¸ªæ–‡æ¡£ç‰‡æ®µå¯¹è±¡ä¸æ‰€æœ‰çš„å…ƒç´ ä¸€‹Æ¡æ€§æ”¾åˆ°DOM里é¢åŽ»ï¼Œåªè§¦å‘一‹Æ¡é‡è§£æžã€?/p>
需�/strong>
我们è¦å†™ä¸€ä¸ªå‡½æ•ŽÍ¼Œå¾€(xi¨¤n)ä¸€ä¸ªæŒ‡å®šçš„å…ƒç´ ä¸Šé¢å¢žåŠ 10个超链接。如果我们简å•çš„直接æ’å…¥10ä¸ªè¶…é“¾æŽ¥åˆ°å…ƒç´ ä¸Šé¢ï¼Œž®×ƒ¼š(x¨¬)触å‘10‹Æ¡é‡è§£æžã€?/p>
function addAnchors(element) {
var anchor;
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
element.appendChild(anchor);
}
}
var anchor;
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
element.appendChild(anchor);
}
}
解决æ–ÒŽ(gu¨©)¡ˆ
è¦è§£å†Œ™¿™ä¸ªé—®é¢˜ï¼Œæˆ‘们è¦å…ˆåˆ›å¾ä¸€ä¸ªæ–‡æ¡£ç‰‡ŒDµå¯¹è±¡ï¼Œç„¶åŽæŠŠæ¯ä¸ªæ–°åˆ›å¾çš„超链接都æ’入到它里é¢åŽ»ã€‚当我们把文档片ŒDµå¯¹è±¡ç”¨appendChild命ä×o(h¨´)æ’入到指定的节点æ—Óž¼Œ˜q™ä¸ªæ–‡æ¡£ç‰‡æ®µå¯¹è±¡çš„所有å节点ž®×ƒ¸€èµ¯‚¢«æ’å…¥åˆ°æŒ‡å®šçš„å…ƒç´ é‡Œé¢åQŒè€Œä¸”åªéœ€è¦è§¦å‘一‹Æ¡é‡è§£æžã€?br />
function addAnchors(element) {
var anchor, fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
fragment.appendChild(anchor);
}
element.appendChild(fragment);
}
var anchor, fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
fragment.appendChild(anchor);
}
element.appendChild(fragment);
}
注æ„åQšå¦‚æ— ç‰¹åˆ«å£°æ˜Žï¼Œæœ¬æ–‡ä¸å¼•ç”¨çš„所有程åºå‡ä¸æ˜¯Googleå¼€å‘，也与Google没有其他什么关¾p…R€‚这些程åºå¼•å‘çš„è´£ä“Qå‡ç”±å…¶å¼€å‘者或者所有者自己承担，与googleæ— å…³ã€?/em>
emu 2010-03-01 17:20 å‘表评论
]]>emu 2010-02-18 17:00 å‘表评论
]]>