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

Question 1

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?

Question 2

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!

Question 3

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.

Question 4

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

Question 5

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.

Question 6

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>

Question 7

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.

Question 8

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

Question 9

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.

Answer 1

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

Answer 2

1

O ile wiem, są (mniej więcej) takie same, ale nie mogę tego zweryfikować.

Nightfirecat

Answer 3

3

To może rzucić trochę światła: mathiasbynens.be/notes/inline-vs-separate-file

Sudhir Bastakoti

Answer 4

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

Answer 5

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

Answer 6

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!

Answer 7

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

Answer 8

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

Answer 9

6

Wady związane z konserwacją również znikają podczas korzystania z React + Radium.

AjaxLeung

Answer 10

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

Answer 11

2

Tak. Po prostu dodałem komentarz dla tych, którzy widzą tę odpowiedź dzisiaj i nie tylko.

AjaxLeung

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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,

Answer 16

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,

Answer 17

@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

Answer 18

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

Answer 19

@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

Answer 20

Ach OK, mówiłem o stylach dodanych niedynamicznie

Sam,

Answer 21

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,

Answer 22

3

To istota mechanizmu buforowania. Nie potrzebuje dowodów.

stroncium

Answer 23

5

Może być „spieniężony” nie oznacza, że jest „spieniężony”; a „esencje” nie są faktami.

Ivan Castellanos

Answer 24

6

Chłopaki, to już nie era Duke Nukem, nie zarabiamy ludzi. Cache z drugiej strony ...

Sebas

Answer 25

3

Argument buforowania nie dotyczy aplikacji jednostronicowych, które generalnie ładują wszystko z góry i generują strony w locie.

MindJuice,

Answer 26

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>

Answer 27

28

Do programowania używam IE10 i notatnika. ?

xanderiel

Answer 28

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.

Answer 29

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

Answer 30

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.

Answer 31

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

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

Odpowiedzi: