Mój przyjaciel powiedział, że użycie <div style=""></div>
zamiast skompresowanego pliku css umieszczonego link href
w sekcji głównej daje pewien wzrost wydajności. Czy to prawda?
Mój przyjaciel powiedział, że użycie <div style=""></div>
zamiast skompresowanego pliku css umieszczonego link href
w sekcji głównej daje pewien wzrost wydajności. Czy to prawda?
Odpowiedzi:
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.hover
Lub #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!
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.
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
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.
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>
Moim zdaniem nie ma ustalonej odpowiedzi.
An inline CSS
zał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.
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
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.