Interakcja z metodą document.write()

Paul Kinlan

Czy w Twojej Konsoli programisty w aplikacji pojawiło się ostatnio ostrzeżenie podobne do tego typu i zastanawiasz się, co to jest?

(index):34 A Parser-blocking, cross-origin script,
https://paul.kinlan.me/ad-inject.js, is invoked via document.write().
This may be blocked by the browser if the device has poor network connectivity.

Kompozycje to jedna z największych potęg internetu, która pozwala integrować się z usługami innych firm w celu tworzenia nowych, świetnych produktów. Jeden wadami kompozycji jest to, że zakłada ona wspólną odpowiedzialność na wrażeniach użytkownika. Jeśli integracja nie jest optymalna, na wykorzystanie danych.

Jedną ze znanych przyczyn niskiej wydajności jest użycie tagu document.write() na stronach, a w szczególności tych, które używają wstrzykiwania skryptów. Tak nieszkodliwe, jak to wygląda może przysporzyć rzeczywistych problemów użytkownikom.

document.write('<script src="https://example.com/ad-inject.js"></script>');

Zanim przeglądarka wyrenderuje stronę, musi utworzyć drzewo DOM, analizując znaczniki HTML. Za każdym razem, gdy parser napotka skrypt, musi go zatrzymać i wykonać, zanim będzie mógł kontynuować. kod HTML. Jeśli skrypt dynamicznie wstawia inny skrypt, parser musi czekać może się wydłużyć do czasu pobrania zasobu, co może spowodować naliczenie kilkukrotnego przesyłania danych w obie strony. opóźnić pierwsze wyrenderowanie strony

W przypadku wolnych połączeń, np. 2G, skrypty zewnętrzne dynamicznie wstrzykniętych z wykorzystaniem funkcji document.write() mogą opóźnić wyświetlanie treści strony głównej dla przez kilkadziesiąt sekund albo spowodować, że strony przestaną się wczytywać lub będą trwać tak długo, że użytkownicy po prostu się poddają. Korzystając z narzędzia Chrome, przekonaliśmy się, strony zawierające skrypty innych firm wstawione za pomocą modułu document.write() są wczytują się zwykle 2 razy wolniej niż inne strony w sieci 2G.

Zebraliśmy dane z 28-dniowych testów praktycznych na 1% Chrome użytkowników stabilnych i ograniczonych do użytkowników korzystających z połączeń 2G. Zauważyliśmy, że 7,6% wszystkich wczytań stron w sieci 2G zawiera co najmniej jeden skrypt blokujący parser, wstawiono za pomocą funkcji document.write() w dokumencie najwyższego poziomu. W wyniku zablokowania podczas ładowania tych skryptów zaobserwowaliśmy następujące ulepszenia:

  • Strony wczytują się o 10% częściej pierwsze wyrenderowanie treści (wizualne potwierdzenie dla użytkownika, że strona wczytuje się skutecznie), Strony wczytują się o 25% więcej do momentu pełnego przeanalizowania danych i 10% mniej przypadków ponownego załadowania co sugeruje zmniejszenie frustracji użytkowników.
  • Skrócenie średniego czasu o 21% (o ponad sekundę) do pierwsze wyrenderowanie treści
  • 38% skrócenie czasu potrzebnego do analizowania strony, co oznacza poprawa o niemal 6 sekund, znacząco skracając czas jest niezbędne, aby wyświetlić to, co jest dla użytkownika istotne.

Biorąc pod uwagę te dane, Chrome od wersji 55 angażuje w imieniu wszystkich użytkowników, gdy wykryjemy ten znany nieprawidłowy wzorzec, zmieniając sposób działania document.write() obsługiwane w Chrome (zobacz Stan Chrome). W szczególności Chrome nie uruchamia elementów <script> wstrzykiwanych przez: document.write(), gdy są spełnione wszystkie te warunki:

  1. Użytkownik korzysta z wolnego połączenia, zwłaszcza gdy korzysta z sieci 2G. (w ale w przyszłości zmiana ta może obejmować innych użytkowników korzystających z wolnych połączeń, np. wolne 3G lub Wi-Fi).
  2. document.write() jest w dokumencie najwyższego poziomu. Interwencja mają zastosowanie do skryptów document.write w elementach iframe, bo nie blokują one do renderowania strony głównej.
  3. Skrypt w pliku document.write() blokuje parser. Skrypty z „async” lub „defer” Atrybuty nadal są wykonywane.
  4. Skrypt nie jest hostowany w tej samej witrynie. Innymi słowy, Chrome będzie nie interweniować w przypadku skryptów z pasującym adresem eTLD+1 (np. skrypt hostowany na js.example.org w witrynie www.example.org).
  5. Skryptu nie ma jeszcze w pamięci podręcznej HTTP przeglądarki. Skrypty w pamięci podręcznej nie spowoduje opóźnienia w sieci i nadal zostanie wykonana.
  6. Żądanie nie dotyczy ponownego załadowania strony. Chrome nie będzie interweniować, jeśli Użytkownik uruchomił ponowne załadowanie strony i uruchomi ją jak zwykle.

Fragmenty kodu innych firm czasami ładują skrypty za pomocą parametru document.write(). Na szczęście większość firm zewnętrznych alternatywy ładowania asynchronicznego, zezwól na ładowanie skryptów innych firm bez blokowania wyświetlania reszty treści na stronie.

Jak rozwiązać ten problem?

To prosta odpowiedź: nie wstrzyknij skryptów za pomocą funkcji document.write(). Śr utrzymują zestaw znanych usług do obsługi asynchronicznego wczytywania do sprawdzania, które warto śledzić.

Jeśli Twojego dostawcy nie ma na liście i obsługuje asynchroniczne ładowanie skryptów Daj nam znać, a zaktualizujemy tę stronę, aby pomóc wszystkim użytkownikom.

Jeśli Twój dostawca nie obsługuje asynchronicznego wczytywania skryptów do swojej strony, zachęcamy do skontaktowania się z zespołem pomocy powiadom nas o tym jak to wpłynie na nas.

Jeśli dostawca udostępnia Ci fragment kodu, który zawiera document.write(), może być możliwe dodanie atrybutu async do elementu skryptu lub aby dodać elementy skryptu za pomocą interfejsów DOM API, takich jak document.appendChild() lub parentNode.insertBefore().

Jak sprawdzić, czy zmiany dotyczą Twojej witryny

Istnieje wiele kryteriów, które określają, czy dane ograniczenie jest egzekwowane, Skąd wiadomo, czy zmiana dotyczy ich?

Wykrywanie, kiedy użytkownik korzysta z sieci 2G

Aby zrozumieć potencjalny wpływ tej zmiany, należy najpierw ilu użytkowników będzie korzystać z sieci 2G. Możesz wykryć bieżący typ sieci użytkownika i zapewnia szybkość działania dzięki interfejsowi Network Information API. jest dostępna w Chrome, a następnie wyślij powiadomienie do swoich analitycznych lub rzeczywistych danych o użytkownikach. (RUM).

if(navigator.connection &&
    navigator.connection.type === 'cellular' &&
    navigator.connection.downlinkMax <= 0.115) {
    // Notify your service to indicate that you might be affected by this restriction.
}

Wyświetlanie ostrzeżeń w Narzędziach deweloperskich w Chrome

Od wersji Chrome 53 Narzędzia deweloperskie wysyłają ostrzeżenia o problemach z document.write() wyciągów. W szczególności, jeśli żądanie document.write() spełnia kryteria od 2 do 5. (Chrome ignoruje kryteria połączenia podczas wysyłania tego ostrzeżenia), ale ostrzeżenie wygląda mniej więcej tak:

Ostrzeżenie o zapisie dokumentu.

Ostrzeżenia są wyświetlane w Narzędziach deweloperskich w Chrome świetnie, ale jak je wykryć na stronie skalę? Możesz sprawdzić nagłówki HTTP wysyłane na Twój serwer, gdy i interwencji.

Sprawdź nagłówki HTTP w zasobie skryptu

Po zablokowaniu skryptu wstawionego przez document.write Chrome wyśle parametr ten nagłówek do żądanego zasobu:

Intervention: <https://shorturl/relevant/spec>;

Gdy zostanie znaleziony skrypt wstawiony przez document.write i może zostać zablokowany w w zależności od okoliczności Chrome może przesyłać:

Intervention: <https://shorturl/relevant/spec>; level="warning"

Nagłówek interwencji zostanie wysłany jako część żądania GET skryptu (asynchronicznie w przypadku rzeczywistej interwencji).

Co niesie przyszłość?

Początkowy plan zakłada wykonanie tej interwencji, gdy wykryjemy kryteria w realizacji celów. Zaczęliśmy od wyświetlania tylko ostrzeżenia w Konsoli programisty w Chrome 53. (Wersja beta była dostępna w lipcu 2016 r. Oczekujemy, że wersja stabilna będzie dostępna dla wszystkich użytkowników wrzesień 2016 r.)

W pierwszej kolejności podejmiemy działania, aby blokować skrypty wstrzykiwane w przypadku użytkowników korzystających z sieci 2G, zaczynając od Chrome 54, która według szacunków jest dostępna w wersji stabilnej dla wszystkich użytkowników do połowy października 2016 r. Zobacz Wpis stanu Chrome .

Z czasem chcemy interweniować, gdy użytkownicy mają wolne połączenie (tj. wolne 3G lub Wi-Fi). Postępuj zgodnie z tym wpisem o stanie Chrome.

Chcesz dowiedzieć się więcej?

Więcej informacji znajdziesz w tych dodatkowych materiałach: