¼ÓËÙJavascript£ºDOM²Ù×÷ÓÅ»¯
ÔÎÄ£º¡¶Speeding up JavaScript: Working with the DOM¡·
×÷Õߣº KeeKim Heng, Google Web Developer
ÔÚÎÒÃÇ¿ª·¢»¥ÁªÍø¸»Ó¦Óã¨RIA£©Ê±£¬ÎÒÃǾ³£Ð´Ò»Ð©javascript½Å±¾À´Ð޸ĻòÕßÔö¼ÓÒ³ÃæÔªËØ£¬ÕâЩ¹¤×÷×îÖÕÊÇDOM——»òÕß˵Îĵµ¶ÔÏóÄ£ÐÍ——À´Íê³ÉµÄ£¬¶øÎÒÃǵÄʵÏÖ·½Ê½»áÓ°Ïìµ½Ó¦ÓõÄÏìÓ¦ËÙ¶È¡£
DOM²Ù×÷»áµ¼ÖÂä¯ÀÀÆ÷ÖØ½âÎö(reflow)£¬ÕâÊÇä¯ÀÀÆ÷µÄÒ»¸ö¾ö¶¨Ò³ÃæÔªËØÈçºÎÕ¹ÏֵļÆËã¹ý³Ì¡£Ö±½ÓÐÞ¸ÄDOM£¬ÐÞ¸ÄÔªËØµÄCSSÑùʽ£¬ÐÞ¸Ää¯ÀÀÆ÷µÄ´°¿Ú´óС£¬¶¼»á´¥·¢ÖؽâÎö¡£¶ÁÈ¡ÔªËØµÄ²¼¾ÖÊôÐÔ±ÈÈçoffsetHeithe»òÕßoffsetWidthÒ²»á´¥·¢ÖؽâÎö¡£ÖؽâÎöÐèÒª»¨·Ñ¼ÆËãʱ¼ä£¬Òò´ËÖØ½âÎö´¥·¢µÄÔ½ÉÙ£¬Ó¦ÓþͻáÔ½¿ì¡£
DOM²Ù×÷ͨ³£Òª²»¾ÍÊÇÐÞ¸ÄÒѾ´æÔÚµÄÒ³ÃæÉϵÄÔªËØ£¬Òª²»¾ÍÊÇ´´½¨ÐµÄÒ³ÃæÔªËØ¡£ÏÂÃæµÄ4ÖÖÓÅ»¯·½°¸¸²¸ÇÁËÐ޸ĺʹ´½¨DOM½ÚµãÁ½ÖÖ·½Ê½£¬°ïÖúÄã¼õÉÙ´¥·¢ä¯ÀÀÆ÷ÖØ½âÎöµÄ´ÎÊý¡£
·½°¸Ò»£ºÍ¨¹ýCSSÀàÃûÇл»À´ÐÞ¸ÄDOM
Õâ¸ö·½°¸ÈÃÎÒÃÇ¿ÉÒÔÒ»´ÎÐÔÐÞ¸ÄÒ»¸öÔªËØºÍËüµÄ×ÓÔªËØµÄ¶à¸öÑùʽÊôÐÔ¶øÖ»´¥·¢Ò»´ÎÖØ½âÎö¡£
ÐèÇó£º
£¨emu×¢£ºÔÎÄ×÷Õßдµ½ÕâÀïµÄʱºòÄÔ×ÓÏÔÈ»¶Ì·ÁËһϣ¬°ÑºóÃæµÄOut-of-the-flow DOM ManipulationģʽҪ½â¾öµÄÎÊÌâ¸ø°Úµ½ÕâÀïÀ´ÁË£¬²»¹ý´Óʾ·¶´úÂëÖкÜÈÝÒ×Ã÷°××÷ÕßÕæÕýÏëÃèÊöµÄÎÊÌ⣬Òò´Ëemu¾Í²»ÕÕ·ÔÎÄÁË£©
ÎÒÃÇÏÖÔÚÐèҪдһ¸öº¯ÊýÀ´ÐÞ¸ÄÒ»¸ö³¬Á´½ÓµÄ¼¸¸öÑùʽ¹æÔò¡£ÒªÊµÏֺܼòµ¥£¬°ÑÕ⼸¸ö¹æÔò¶ÔÓ¦µÄÊôÐÔÖðÒ»¸ÄÁ˾ͺÃÁË¡£µ«ÊÇ´øÀ´µÄÎÊÌâÊÇ£¬Ã¿ÐÞ¸ÄÒ»¸öÑùʽÊôÐÔ£¬¶¼»áµ¼ÖÂÒ»´ÎÒ³ÃæµÄÖØ½âÎö¡£
function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
½â¾ö·½°¸
Òª½â¾öÕâ¸öÎÊÌ⣬ÎÒÃÇ¿ÉÒÔÏÈ´´½¨Ò»¸öÑùʽÃû£¬²¢ÇÒ°ÑÒªÐ޸ĵÄÑùʽ¹æÔò¶¼·Åµ½Õâ¸öÀàÃûÉÏ£¬È»ºóÎÒÃǸø³¬Á´½ÓÌí¼ÓÉÏÕâ¸öÐÂÀàÃû£¬¾Í¿ÉÒÔʵÏÖÌí¼Ó¼¸¸öÑùʽ¹æÔò¶øÖ»´¥·¢Ò»´ÎÖØ½âÎöÁË¡£Õâ¸öģʽ»¹ÓиöºÃ´¦ÊÇҲʵÏÖÁ˱íÏÖºÍÂß¼Ïà·ÖÀë¡£
.selectedAnchor {
font-weight: bold;
text-decoration: none;
color: #000;
}
Ïà¹ØÎĵµ£º
Evaluates an expression after a specified number of milliseconds has elapsed.
(ÔÚÖ¸¶¨Ê±¼ä¹ýºóÖ´ÐÐÖ¸¶¨µÄ±í´ïʽ)
Syntax:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
Parameters
vCode
Required. Variant that specifies the function pointer or string that indicates the code to be ......
ÍøÒ³¿É¼ûÇøÓò¿í£ºdocument.body.clientWidth;
ÍøÒ³¿É¼ûÇøÓò¸ß£ºdocument.body.clientHeight;
ÍøÒ³¿É¼ûÇøÓò¸ß£ºdocument.body.offsetWidth (°üÀ¨±ßÏߵĿí);
ÍøÒ³¿É¼ûÇøÓò¸ß£ºdocument.body.offsetHeight (°üÀ¨±ßÏߵĿí);
ÍøÒ³ÕýÎÄÈ«ÎÄ¿í£ºdocument.body.scrollWidth;
ÍøÒ³ÕýÎÄÈ«Îĸߣºdocument.body.scrollHeight;
......
var greeting_w = {
c:['ÄãºÃ!', '»¶Ó»ØÀ´', '»¶Ó»Øµ½×éÖ¯', '×£ÄãºÃÐÄÇ飡', 'Hi~', 'Hello!', '*^o^*', ':D', 'ûʶàºÈË®', 'CR=ChinaRen', 'ÓÖ¼ûÃæÁË!', '¶àÔ˶¯ÉÙÉú²¡', '»¶ÓÀ´µØÇò~', '»¶ÓÀ´»ðÐÇ~', 'ÄãÌ«ÓвÅÁË!', 'hoho', 'ûʳԸöË®¹û', 'À´ºß¸ö¸è¶ù', '²ðÄÉÈÊ»¶ÓÄã!', 'ÏëtaÁËÂð?', 'ɶʱͬѧ»á?', '±£»¤º ......
ÔÎÄ£º¡¶Speeding up JavaScript: Working with the DOM¡·
×÷Õߣº KeeKim Heng, Google Web Developer
ÔÚÎÒÃÇ¿ª·¢»¥ÁªÍø¸»Ó¦Óã¨RIA£©Ê±£¬ÎÒÃǾ³£Ð´Ò»Ð©javascript½Å±¾À´Ð޸ĻòÕßÔö¼ÓÒ³ÃæÔªËØ£¬ÕâЩ¹¤×÷×îÖÕÊÇDOM——»òÕß˵Îĵµ¶ÔÏóÄ£ÐÍ——À´Íê³ÉµÄ£¬¶øÎÒÃǵÄʵÏÖ·½Ê½»áÓ°Ïìµ½Ó¦ÓõÄÏìÓ¦ËÙ¶È¡£
DO ......
1. Ó¦Óà Array.prototype.joinʵÏÖ×Ö·ûºÏ²¢
·½·¨1.
String.prototype.times = function(n) {
return Array.prototype.join.call({length:n+1}, this);
};
"js".times(5) // => "jsjsjsjsjs"
·½·¨2.
var ArrayTest=new Array("HE","LL","O");
var hello = Array.prot ......