21 Maj 2019

Tworzenie fragmentów dokumentu

CreateDocumentFragment jest metodą, która tworzy fragment dokumentu, jest to wirtualny dokument. Jest on podobny do diva, ale przy wstawianiu go do dokumentu, wstawiamy jego dzieci.

Gdzie to stosować, tam gdzie zależy Ci na wydajności i danych których wstawiasz jest dużo. Gdy wstawiamy do html nowy element całe drzewo DOM musi być za każdym razem przebudowywane.

const fragment = document.createDocumentFragment();
const ul = document.createElement("ul");

for (let i = 0; i < 10; i += 1) {
  ul.appendChild(document.createElement('li'))
    .appendChild(document.createTextNode("li element " + (i + 1)));
  fragment.appendChild(ul);
}

document.body.appendChild(fragment);
// wynik dostaniemy listę 10 elementów
// lista 1
// ...
// lista 10
14 Kwi 2019

Google AdSense, wiele reklam – optymalizacja kodu

Najpierw zadajmy sobie pytanie. Ile reklam chcemy umieścić na stornie, jeżeli więcej niż jedną to zapewniam warto przeczytać poniższy tekst 😉
Na stornie Google AdSense kod wygenerowany zawsze wygląda podobnie jak ten poniżej.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SiteName -->
<ins class="adsbygoogle"
 style="display:block;"
 data-ad-client="pub-111111111111111"
 data-ad-slot="2222222222"  
 data-ad-width="250"
 data-ad-height="250"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});  });
</script>

Problem jaki występuje przy większej liczbie reklam to to że wywołujemy kilka razy tę samą stronę, a to ma bardzo duże znaczenie przy optymalizacji strony i szybkości jej działania.
Najprostszym rozwiązaniem jest oczywiście wywołanie tylko raz 🙂

Poniższy kod dodajemy w te miejsca w których chcemy aby się wyświetliły reklamy ale w takiej formie „okrojonej” – oczywiście Twój kod powinien mieć odpowiednie ad-client, ad-slot oraz podane wymiary tkaie jakie chcesz mieć w reklamie”).

<ins class="adsbygoogle"
  style="display:block;"
  data-ad-client="pub-111111111111111"
  data-ad-slot="2222222222"  
  data-ad-width="250"
  data-ad-height="250"></ins>

Teraz najważniejsza część. Na dole stromy przed zamknięciem

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
   [].forEach.call(document.querySelectorAll('.adsbygoogle'), function(){
      (adsbygoogle = window.adsbygoogle || []).push({});  
   });
</script>

Sięgamy tylko raz do google, ale wywołujemy wszystkie reklamy tak jak poprzednio.
Poniższe rozwiązanie jest umieszczone na tej stronie, wystarczy podglądnąć kod 😉