document.write atlikšana pēc window.onload

Parasti document.write nav iespējams atlikt pēc window.onload notikuma, taču reizēm tas ir ļoti nepieciešams (piemēram, lai paātrinātu lapas ielādes ātrumu, ielādējot reklāmas vēlāk).

Protams, ka izmantot document.write ir slikts stils (labāk izmantot DOM rīkus), taču ir gadījumi, kad tur neko nevar mainīt, piemēram ievietojot mājaslapā reklāmas baneru sistēmas inectar.lv kodu.

Pats kods, kas jāievieto mājaslapā izskatās šādi:

<script type="text/javascript" src="http://inectar.lv/kk.php?bb=84&amp;kas=20"></script>

Savukārt faila http://inectar.lv/kk.php?bb=84&kas=20 saturs mainās, taču vienmēr satur document.write. Piemērs:

document.write("<center><table cellspacing=0 cellpadding=0><tr><td valign=top>
 <div style="position: relative; top:0; left: 0; width: 150px; height: 300px; " 
 title=''><br><br><center><b>
 <a rel="nofollow" href="http://inectar.lv/tik.php?id=360&amp;kid=245&amp;kas=20" target="tik" 
 style="color: red; font-size: 14px;text-decoration: none;">Skaņu virtuve</a></b>
 <div style="position: absolute; top:0; left: 0; border: 0px; ">
 <a rel="nofollow" href="http://inectar.lv/tik.php?id=360&amp;kid=245&amp;kas=20" target="tik">
 <img src="http://inectar.lv/red/_201002/245-175851-HC-skanu-vir.gif" 
 border=0 width="150px" height="300px" alt="Skaņu virtuve" 
 title="Skaņu virtuve"></a></div></div></td></tr></table></center>");

Reāli šāds kods stipri sabremzē lapas attēlošanu pārlūkā, jo pārlūks neko neattēlo pēc šī koda, kamēr netiek izpildīta document.write komanda, kura ielādē attēlu no inectar.lv. Un parasti šī attēla ielāde ir salīdzinoši ilga. Tāpēc, optimizējot konkrētās mājaslapas ielādes ātrumu, tika meklēts risinājums, lai javascript skripta izpildi atliktu (defer) uz vēlāku laiku, kad pati lapa jau ir pilnībā ielādējusies (un izpildās window.onload notikums). Diemžēl, ja tiek izpildīta document.write komanda pēc window.onload notikuma, tad tā nodzēš visu lapas saturu (iznīcina visu DOM koku).

Viens no risinājumiem būtu faila http://inectar.lv/kk.php?bb=84&kas=20 ielāde uz servera un automātiska faila satura "pātulkošana" izmantojot DOM rīkus. Taču tas būtu pārāk sarežģīti, ņemot vērā, ka faila saturs var mainīties jebkurā mirklī.

Interneta plašumos tika atrasts cits risinājums, kas pārveido pašu document.write funkciju, pirms tā tiek izpildīta. Tagad lapā ievietotais kods izskatās šādi:

<script type="text/javascript">
(function(){
 var _write=document.write;
 document.write=function(t){
  t='<!--##DEFER'+t+'DEFER##-->';
  return'v'=='v'?_write(t):_write.call(document,t)
  }
 }
)();
</script>
<script type="text/javascript" src="http://inectar.lv/kk.php?bb=84&amp;kas=20"></script>

Ar šāda skripta palīdzību lapā tiek ierakstīts failā http://inectar.lv/kk.php?bb=84&kas=20 norādītais HTML kods, taču tas netiek attēlots pārlūkā (un netiek ielādēts banera attēls), jo ir atzīmēts kā komentārs. Pēc ielādes tas izskatās šādi:

<!--##DEFER<center><table cellspacing=0 cellpadding=0><tr><td valign=top>
 ...izlaidu šo daļu, lai ir īsāk...
 title="Skaņu virtuve"></a></div></div></td></tr></table></center>DEFER##-->

Pēc tam var ielādēties un attēloties HTML kods, kam būtu jāseko pēc reklāmas banera, taču pašu banera attēlu mēs varam ielādēt un attēlot vēlāk - pēc lapas koda ielādes, padzēšot tagus, kas atzīmē komentāra elementu. To var izdarīt izmantojot notikumu window.onload:

function resolve() {
 document.body.innerHTML = 
  document.body.innerHTML.replace(/<!--##DEFER(.+)DEFER##-->/g, '$1');
}

window.onload = resolve;

Protams, ka koda ātrdarbības palielināšanai, vajadzētu piešķirt inectar.lv dotajam <script> elementam savu id, lai pēc tam varētu veikt aizvietošanu konkrētajā DOM koka vietā, nevis pārlasīt visu document.body elementu ar tā bērniem, lai atrastu nepieciešamo komentāru, kuru aizvietot. innerHTML funkcija varbūt neskaitās pati korektākā (varētu izmantot DOM rīkus), taču tā ir pati efektīvākā ātrdarbības ziņā.

uz rakstu sarakstu   ietvīto    pievieno facebookā

uz rakstu sarakstu