¼ÓËÙJavascript£ºDOM²Ù×÷ÓÅ»¯
ÔÎÄ£º¡¶Speeding up JavaScript: Working with the DOM¡·
×÷Õߣº KeeKim Heng, Google Web Developer
ÔÚÎÒÃÇ¿ª·¢»¥ÁªÍø¸»Ó¦Óã¨RIA£©Ê±£¬ÎÒÃǾ³£Ð´Ò»Ð©javascript½Å±¾À´Ð޸ĻòÕßÔö¼ÓÒ³ÃæÔªËØ£¬ÕâЩ¹¤×÷×îÖÕÊÇDOM——»òÕß˵Îĵµ¶ÔÏóÄ£ÐÍ——À´Íê³ÉµÄ£¬¶øÎÒÃǵÄʵÏÖ·½Ê½»áÓ°Ïìµ½Ó¦ÓõÄÏìÓ¦Ëٶȡ£
DOM²Ù×÷»áµ¼ÖÂä¯ÀÀÆ÷ÖؽâÎö(reflow)£¬ÕâÊÇä¯ÀÀÆ÷µÄÒ»¸ö¾ö¶¨Ò³ÃæÔªËØÈçºÎÕ¹ÏֵļÆËã¹ý³Ì¡£Ö±½ÓÐÞ¸ÄDOM£¬ÐÞ¸ÄÔªËصÄCSSÑùʽ£¬ÐÞ¸Ää¯ÀÀÆ÷µÄ´°¿Ú´óС£¬¶¼»á´¥·¢ÖؽâÎö¡£¶ÁÈ¡ÔªËصIJ¼¾ÖÊôÐÔ±ÈÈç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';
}
½â¾ö·½°¸
Òª½â¾öÕâ¸öÎÊÌ⣬ÎÒÃÇ¿ÉÒÔÏÈ´´½¨Ò»¸öÑùʽÃû£¬²¢ÇÒ°ÑÒªÐ޸ĵÄÑùʽ¹æÔò¶¼·Åµ½Õâ¸öÀàÃûÉÏ£¬È»ºóÎÒÃǸø³¬Á´½ÓÌí¼ÓÉÏÕâ¸öÐÂÀàÃû£¬¾Í¿ÉÒÔʵÏÖÌí¼Ó¼¸¸öÑùʽ¹æÔò¶øÖ»´¥·¢Ò»´ÎÖؽâÎöÁË¡£Õâ¸öģʽ»¹ÓиöºÃ´¦ÊÇҲʵÏÖÁ˱íÏÖºÍÂß¼Ïà·ÖÀë¡£
.selectedAnchor {
font-weight: bold;
text-decoration: none;
color: #000;
}
function selectAnchor(element) {
element.className = 'selectedAnchor';
}
·½°¸¶þ£ºÔÚ·ÇäÖȾÇøÐÞ¸ÄDOM
£¨emu×¢£º×÷ÕßÔÚÕâÀïÔÙ´ÎÄÔ×Ӷ̷£¬°ÑDocumentFragment DOM GenerationģʽµÄ½éÉÜÌáÇ°µ½ÕâÀïÀ´ÁË£¬emuÖ»ºÃÔٴη¢»Óһϣ©
ÉÏÒ»¸ö·½°¸½â¾öµÄÊÇÐÞ¸ÄÒ»¸ö³¬Á´½ÓµÄÎÊÌ⣬µ±Ò»´ÎÐèÒª¶ÔºÜ¶à¸ö³¬Á´½Ó½øÐÐÏàͬÐÞ¸Ä
Ïà¹ØÎĵµ£º
jsµÄFunction¶ÔÏóÔÚµ÷Óùý³ÌÖоßÓÐÒ»¸öarguomentsÊôÐÔ£¬ËüÊÇÓɽű¾½âÊÍÆ÷´´½¨µÄ£¬ÕâÒ²ÊÇ´´½¨arguments¶ÔÏóΨһ;¾¶¡£arguments¶ÔÏó¿ÉÒÔ¿´×öÊÇÒ»¸öArray¶ÔÏó£¬Ëü¾ßÓÐlengthÊôÐÔ£¬¿ÉÒÔͨ¹ýÐòºÅ·ÃÎÊÿһ¸ö²ÎÊý¡£¶øÇÒ£¬Í¨¹ýarguments µÄcalleeÊôÐÔ¿ÉÒÔ»ñÈ¡¶ÔÖ»ÔÚÖ´ÐеÄFunction¶ÔÏóµÄÒýÓã¬ÈçÏ ......
ÔÚÊý°ÙÍòÕÅÒ³ÃæÖУ¬JavaScript ±»ÓÃÀ´¸Ä½øÉè¼Æ¡¢ÑéÖ¤±íµ¥¡¢¼ì²âä¯ÀÀÆ÷¡¢´´½¨cookies£¬µÈµÈµÈµÈ¡£
JavaScript ÊÇÒòÌØÍøÉÏ×îÁ÷ÐеĽű¾ÓïÑÔ£¬²¢ÇÒ¿ÉÔÚËùÓÐÖ÷ÒªµÄä¯ÀÀÆ÷ÖÐÔËÐУ¬±È·½Ëµ Internet
Explorer¡¢ Mozilla¡¢Firefox¡¢Netscape¡¢ºÍ Opera¡£
......
ClosureÖÐÎÄ·ÒëΪ±Õ°ü.×ÖÃæÉÏÀ´Àí½â¾ÍÊÇ"·â±ÕµÄ°ü".(ÕâÊÇÒ»¾ä·Ï»°)
±Õ°üÊÇʲô?
ÊéÃæ½âÊÍΪ: Ëùν“±Õ°ü”£¬Ö¸µÄÊÇÒ»¸öÓµÓÐÐí¶à±äÁ¿ºÍ°ó¶¨ÁËÕâЩ±äÁ¿µÄ»·¾³µÄ±í´ïʽ£¨Í¨³£ÊÇÒ»¸öº¯Êý£©£¬Òò¶øÕâЩ±äÁ¿Ò²ÊǸñí´ïʽµÄÒ»²¿·Ö¡£
ÎÒÈÏΪ±Õ°ü¾ÍÊÇÄܹ»¶Á/дº¯ÊýÄÚ²¿µÄijЩ±äÁ¿µÄ×Óº¯Êý,²¢½«ÕâЩ±äÁ¿±£´æÔÚÄÚ´æÖÐ.
± ......
//»ñÈ¡µ±Ç°Îļþȫ·¾¶
<script language="javascript">
alert(window.location.href);
alert(window.location);
alert(location.href);
alert(parent.location.href);
alert(top.location.href);
alert(document.location.href);
alert(document.URL);
</scri ......