Różnica w wydajności zewnętrznego CSS vs stylu inline?

88

Mój przyjaciel powiedział, że użycie <div style=""></div>zamiast skompresowanego pliku css umieszczonego link hrefw sekcji głównej daje pewien wzrost wydajności. Czy to prawda?

css  performance  inline-styles 
— Jerzy
źródło
1
O ile wiem, są (mniej więcej) takie same, ale nie mogę tego zweryfikować.
— Nightfirecat
3
To może rzucić trochę światła: mathiasbynens.be/notes/inline-vs-separate-file
— Sudhir Bastakoti
1
Musiałby to być znaczny wzrost wydajności, aby poradzić sobie z koszmarami konserwacji związanymi z stylami inline. Jak dotąd nie widziałem na to dowodów.
— steveax
1
W przypadku starszych wersji IE wzrost wydajności jest BARDZO znaczący. Widziałem tabele HTML zachowujące się jak klej w stylach CSS.
— Jonathan

Odpowiedzi:

90

Zwiększenie wydajności, o którym wspomniał twój przyjaciel, jest prawdopodobnie zbyt trywialne w porównaniu do wzrostu wydajności (z powodu innych czynników) przy użyciu pliku CSS.

Używając atrybutu style, przeglądarka maluje regułę tylko dla tego konkretnego elementu, którym w tym przypadku jest <div>element. Zmniejsza to ilość czasu wyszukiwania silnika CSS w celu znalezienia elementów pasujących do selektora CSS (np. a.hoverLub #someContainer li).

Jednak umieszczenie stylu na poziomie elementu oznaczałoby, że nie można oddzielnie buforować reguł stylów CSS. Zwykle umieszczenie stylów w plikach CSS pozwoliłoby na wykonanie buforowania, zmniejszając w ten sposób obciążenie serwera za każdym razem, gdy ładujesz stronę.

Umieszczenie reguł stylu na poziomie elementu spowoduje również, że stracisz orientację, które elementy są stylizowane w jaki sposób. Może to również spowodować odwrotny wzrost wydajności malowania konkretnego elementu, w którym można przemalować wiele elementów jednocześnie. Używanie plików CSS oddziela CSS od HTML, a tym samym pozwala upewnić się, że style są poprawne i łatwiej je później zmodyfikować.

Dlatego jeśli spojrzysz na porównanie, zobaczysz, że użycie pliku CSS ma znacznie więcej korzyści niż stylizacja na poziomie elementu.

Nie zapominaj, że gdy masz zewnętrzny plik arkusza stylów CSS, Twoja przeglądarka może buforować plik, co zwiększa wydajność aplikacji!

— Mauris
źródło
4
Czy możesz podać statystyki za pomocą profilera Chrome? Procesor i karta graficzna są drogie w przypadku telefonów komórkowych i tabletów, gdzie zużycie baterii jest ogromne. Myślę, że jest kompromis. A jakie są zalety pamięci podręcznej? Przeglądarka będzie musiała obliczyć styl dla bieżącego elementu, a rozwiązywanie stylów będzie bardziej kosztowne, jeśli istnieje wiele reguł.
— Akash Kava
28
Zwróć uwagę, że wszystkie wady związane z konserwacją znikają, gdy istnieje silnik, który wprowadza style przed wysłaniem do klientów
— Moshe Shaham
6
Wady związane z konserwacją również znikają podczas korzystania z React + Radium.
— AjaxLeung
1
@AjaxLeung bez wątpienia to, co ty i Shaham powiedzieliście, jest prawdą. Ta odpowiedź została napisana w 2011 roku, kiedy większość nowoczesnych narzędzi nie była jeszcze dostępna.
— mauris
2
Tak. Po prostu dodałem komentarz dla tych, którzy widzą tę odpowiedź dzisiaj i nie tylko.
— AjaxLeung
6

Strona będzie ładować się szybciej, jeśli użyjesz stylów wbudowanych zamiast arkuszy stylów. W niektórych przypadkach musi być szybszy.

Kiedy używasz arkusza stylów z href, wymaga to kolejnego żądania do serwera, a następnie parsowania pliku po odpowiedzi. W przypadku stylów wbudowanych nie ma tego wszystkiego, po prostu bezpośrednie parsowanie.

Jeśli klient ma wolny internet, to pojedyncze żądanie może być bardzo powolne, pozostawiając stronę bez stylu do momentu dostarczenia arkusza stylów. Ponownie, gdyby był w linii, nie byłoby żadnego opóźnienia.

Jedynym powodem, dla którego używamy arkuszy stylów, jest organizacja. Są chwile, kiedy nie są potrzebne, więc wystarczą style wbudowane lub arkusze stylów w dokumencie.

— sebjwallace
źródło
9
Ta odpowiedź całkowicie ignoruje buforowanie przeglądarki. Arkusze stylów pozwalają tylko raz zażądać stylów i zapisać je w pamięci podręcznej, zmniejszając ilość przesyłanych treści.
— GeekOnCoffee
2
Ta odpowiedź ignoruje również fakt, że style wbudowane powodują, że plik HTML jest większy. Potencjalnie, zwłaszcza gdy używasz powtarzanych stylów wbudowanych, wielokrotnie większe niż plik CSS. Nawiasem mówiąc, przeglądarki mogą ładować wiele plików równolegle (i buforować je, jak wspomniano powyżej).
— Jan Van der Haegen
5

Nie jest łatwo odpowiedzieć na pytanie, ponieważ wydajność w tym przypadku zależy od wielu czynników (złożoność selektorów CSS, rozmiar dokumentu itp.). Jeśli jednak weźmiemy pojedynczy przypadek, zobaczymy, że klasa CSS jest generalnie szybsza niż styl wbudowany: styl wbudowany
vs klasa CSS

— s.ermakovich
źródło
5
Całkiem pewny, że testuje to szybkość, z jaką zmienia się klasa węzła lub atrybut stylu, a nie szybkość, z jaką styl jest stosowany, o co chodzi w pytaniu
— Sam,
@Sam Co masz na myśli, mówiąc o „szybkości, z jaką stosowany jest styl”? Czy możesz podać test, który mierzy tę prędkość? Jeśli spojrzysz na kod testowy, zobaczysz, że ponowne wlanie strony następuje przy każdej iteracji, co oznacza, że ​​test obejmuje nie tylko modyfikację klasy / atrybutu, ale także rzeczywisty wpływ na stronę.
— s.ermakovich
Być może obejmuje to czas na dodanie stylu, ale także dodaje czasu. Co by było, gdyby dokument miał już test klasy lub styl wbudowany bez konieczności dodawania go przez JS. Osiągam szybkość, aby CSS został rozwiązany w obu przypadkach i (mogę się mylić), ale nie sądzę, że ten test tylko to robi, myślę, że wykonuje dodatkową pracę.
— Sam
@Sam Ten test ignoruje możliwy ślad ładowania CSS przez przeglądarkę i przetwarzania go. W mojej odpowiedzi wspomniałem, że jest to odosobniony przypadek. Po prostu mierzy wydajność stosowania stylów na różne sposoby (wbudowane lub zewnętrzne). To właśnie robią dziś typowe aplikacje internetowe - zmień dokument HTML z JavaScript bez przeładowywania strony.
— s.ermakovich
Ach OK, mówiłem o stylach dodanych niedynamicznie
— Sam,
3

Cóż, może, ale powód dla połączonego lub zewnętrznego arkusza stylów jest taki, że można go buforować w przeglądarce, zwłaszcza gdy używasz tego samego elementu div na wielu stronach witryny. Oznacza to, że przeglądarka musi załadować arkusz stylów tylko raz, zamiast przeładowywać kod za każdym razem, gdy przeglądarka ponownie ładuje stronę. Zapewnia również czystszy kod, co ułatwia wszelkie zmiany lub debugowanie.

— eciusr
źródło
3
To istota mechanizmu buforowania. Nie potrzebuje dowodów.
— stroncium
5
Może być „spieniężony” nie oznacza, że ​​jest „spieniężony”; a „esencje” nie są faktami.
— Ivan Castellanos
6
Chłopaki, to już nie era Duke Nukem, nie zarabiamy ludzi. Cache z drugiej strony ...
— Sebas
3
Argument buforowania nie dotyczy aplikacji jednostronicowych, które generalnie ładują wszystko z góry i generują strony w locie.
— MindJuice,
1

PRAWDA JEST TAK

Istnieje ogromna różnica. Zwłaszcza gdy automatyzujesz interfejs użytkownika. Wypróbuj poniższy kod. Do programowania używam IE10 i notatnika. Uczę się na bieżąco i robię testy to jest skrócona wersja testu. (mogą pojawić się błędy, ponieważ zmniejszyłem kod, aby wyświetlić Twoją odpowiedź)

Kliknij obraz, do którego się odwołujesz, i przeczytaj ostrzeżenia. WSKAZÓWKA: Zapisz ten plik, aby zapisać go ponownie jako edycję przed edycją (testowaniem).

Najlepsze życzenia, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— Don
źródło
28
Do programowania używam IE10 i notatnika. ?
— xanderiel
1

Moim zdaniem nie ma ustalonej odpowiedzi.

An inline CSSzaładuje się szybciej, jeśli rozmiar zawartości CSS zostanie pobrany szybciej niż serwer odpowiedziałby na external CSS fileżądanie (biorąc pod uwagę czas DNS, opóźnienie serwera itp.).

Dla CSS o normalnym rozmiarze wstawiłbym je na stronie, dla czegoś ponad 15-20KB prawdopodobnie umieściłbym go w zewnętrznym pliku i upewniłbym się, że można go buforować.

Jestem pewien, że brakuje mi teraz wielu innych kwestii, ale nie ma ustalonej odpowiedzi na to, że inline vs external.

— adrianTNT
źródło
-1

Korzystanie z zewnętrznych arkuszy stylów jest zdecydowanie lepszą opcją, ponieważ pomoże Ci zapamiętać styl zastosowany w elementach DIV. Skraca czas ładowania strony, ponieważ im mniej kodu HTML, tym szybciej będzie się ładował.

Ale w niektórych przypadkach może być konieczna zmiana niektórych właściwości konkretnego elementu div, wtedy styl wbudowany jest najlepszą opcją. I szczerze mówiąc, jeden lub dwa style wbudowane nie spowodują zmiany czasu ładowania strony.

Istnieje jeszcze jedna opcja wewnętrznego arkusza stylów, ale jest ona używana tylko wtedy, gdy masz witrynę internetową z jedną stroną, tak jak w przypadku tworzenia szablonu. Dzieje się tak, ponieważ musisz pisać CSS na każdej stronie HTML

— vicky
źródło
-3

Wolę używać wbudowanego CSS zamiast zewnętrznego CSS, w którym istnieje wiele małych plików CSS dla każdego innego elementu lub obrazu. Nie ma sensu pobierać kilku plików CSS zawierających zaledwie 5–10 linii kodu w każdym. Jeśli Twój element zawiera właściwości, takie jak najechanie, aktywny, zaznaczony itp., Powinieneś użyć zewnętrznego pliku CSS, ponieważ pozwoli to uniknąć komplikowania procesu tworzenia.

— atuls1396
źródło
To sprawia, że ​​utrzymanie jest niezwykle trudne. Pliki CSS, JS powinny być domyślnie zapisywane w pamięci podręcznej przeglądarki użytkownika.
— dave2118
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.