Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Bootstrap - długie wczytywanie stylów?
Forum PHP.pl > Forum > Po stronie przeglądarki
RazoR2011
28.07.2017, 15:15:39
Cześć,
Mam problem - podczas przechodzenia między podstronami w moim serwisie, nastepuje tak jakby długie wczytywanie stylów bootstrapa. Pojawia się przez chwilę treść strony bez stylów a po ułamku sekundy wczytują się tka jakby właściwe reguły CSS. Kod HTML wygląda tak: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html> 
  2. <html lang="pl-PL">
  3.   <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link href="/css/bootstrap.min.css" rel="stylesheet">
  8.     <!--[if lt IE 9]>
  9.       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  10.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  11.     <![endif]-->
  12.  
  13. </head>
  14. <body>
  15. HTML
  16.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  17.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" async="async"></script>
  18.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  19.     <script src="js/bootstrap.js" async="async"></script>
  20.  
  21.  
  22.   </body>
  23. </html>
[HTML] pobierz, plaintext


Czy jest na to jakieś łatwe rozwiązanie?
Pyton_000
28.07.2017, 18:53:44
Ustaw cache na css i js.
Comandeer
29.07.2017, 12:05:30
Hm, dość dziwne, bo zważając na to, jak działają mechanizmy przeglądarki, style powinny zostać wczytane PRZED wyświetleniem czegokolwiek (blokować rendering). Jaka przeglądarka?

PS radzę usunąć [async] ze skryptów, bo jestem pewien, że często skrypty BS-a wczytują się przed jQuery i powoduje to błąd.
RazoR2011
2.08.2017, 07:17:16
Specjalnie dodałem parametr async bo myślałem, że może on coś pomoże.
gitbejbe
2.08.2017, 08:48:48
Cytat
Mam problem - podczas przechodzenia między podstronami w moim serwisie, nastepuje tak jakby długie wczytywanie stylów bootstrapa. Pojawia się przez chwilę treść strony bez stylów a po ułamku sekundy wczytują się tka jakby właściwe reguły CSS. Kod HTML wygląda tak:


Ładowanie asynchroniczne wielu plików js bez żadnego zarządzania zależnościami zwyczajnie nie może dobrze działać. Raz uda się załadować skrypty w odpowiedniej kolejności, raz nie. Za każdym razem jest to roszada, nigdy nie masz 100% pewności że dany plik wczyta się jako pierwszy. Właśnie z tego powodu stworzone zostały rozmaite loadery. Asynchroniczne ładowanie będzie też Ci przycinać stronę na starcie, w zależności jak mocno ingerujesz w wygląd strony za pomocą wczytywanych skryptów.

Mimo to jesli style BS ładujesz bez async, to muszą wczytać się zanim strona zostanie wyświetlona. Odnośnie czasu ładowania strony - tak jak pisał ktoś wcześniej, sprawdź czy masz włączony cache i pamiętaj że jeśli przeładowujesz stronę z włączonym debugerem w przeglądarce to cachowanie jest domyślnie wyłączone.
Comandeer
2.08.2017, 09:15:38
W sumie ładowanie asynchroniczne JS-a można ładnie zrobić używając [defer] zamiast [async].
RazoR2011
3.08.2017, 09:30:41
Zmienione - bez zmian :/

Problem wystepuje na wszystkich przeglądarkach i na różnych komputerach.
Comandeer
3.08.2017, 10:40:34
To może w końcu pokażesz tę mityczną stronę? Bo tak to se możemy zgadywać i rok.
RazoR2011
8.08.2017, 08:47:22
Roboczy adres strony:

http://rankingbutow.pl/
Comandeer
8.08.2017, 09:04:39
Ja tam widzę jedynie FOIT (Flash Of Invisible Text), który jest spowodowany wczytywaniem się fonta.
Polecam przerzucić fonta jako osobny link[rel=stylesheet], bo używanie @import opóźnia wczytywanie danego arkusza (jest on wczytywany dopiero po wczytaniu arkusza, w którym jest @import).
viking
8.08.2017, 09:07:16
Według wszystkich narzędzi brakuje ci tam head.
Comandeer
8.08.2017, 09:16:03
Hm, inaczej: po tagu html, przed head są jakieś niewidoczne znaczki Unicode. To powoduje, że przeglądarka zaczyna to parsować jako część body (z racji tego, że head jest opcjonalne) i treści.

W tym wypadku Firefox faktycznie nie blokuje renderingu przy ściąganiu arkusza stylów, co jest IMO błędem. Specyfikacja w wersji od WHATWG zezwala już na arkusze stylów w body, które blokować mają tylko elementy znajdujące się pod arkuszem (w tym wypadku wszystkie). Chrome już tak działa (tam jest tylko wspomniany już FOIT).
freemp3
8.08.2017, 09:18:06
Z tego co zauważyłem to ładowanie się strony bez css zatrzymuje się tuż za nawigacją. W kodzie znajduje się tam kod google analytics oraz kilka innych skryptów i to pewnie one powodują ten problem. Zapewne powinny być tuż za tagiem otwierającym body lub tuż przed jego zamknięciem.

@viking, tak head jest z tym, że znajduje się przed nim jakiś biały znak, którego nie widać bezpośrednio w kodzie i pewnie dlatego narzędzia do analizy kodu go nie znajdują.
Comandeer
8.08.2017, 10:20:07
Cytat
Z tego co zauważyłem to ładowanie się strony bez css zatrzymuje się tuż za nawigacją. W kodzie znajduje się tam kod google analytics oraz kilka innych skryptów i to pewnie one powodują ten problem. Zapewne powinny być tuż za tagiem otwierającym body lub tuż przed jego zamknięciem.


Problemem jest fakt, że strona wgl się renderuje bez czekania na CSS, co jest spowodowane tym, że błąd w kodzie sugeruje liskowi, że head po prostu nie ma, a więc razem z nim nie ma blokującego arkusza.

Co do skryptu GA: osobiście uważam, że powinien być w head przed skryptami.
RazoR2011
8.08.2017, 12:36:46
Co do białego znaku - nie mam pojęcia jak go usunąć. Kod wygląda następująco: 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html> 
  2. <html lang="pl-PL">
  3. <?php
  4. include_once('dbconnect.php'); //tam znajdują się tylko i wyłącznie dane do połączenia z bazą
  5. ?>
  6. <head>
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <link href="/css/bootstrap.min.css" rel="stylesheet">
[HTML] pobierz, plaintext

Nie ma tam go w ogóle widocznego... - w jaki sposób moge usunąć ten problem?
Neutral
1.10.2017, 15:36:50
Nie jestem pewien, ale ten biały znak jest chyba jedną spację po prawej obok "<!DOCTYPE html> ", a powinno być "<!DOCTYPE html>". W każdym bądź razie w jakimś edytorze poszukaj:
View -> Show Symbol -> Show White Space and TAB.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.