Harici CSS ile satır içi stil performans farkı?

89

Bir arkadaşım, <div style=""></div>sıkıştırılmış css dosyası yerine link hrefbaş kısmındaki gibi koymanın performans artışı sağladığını söyledi. Bu doğru mu?

css  performance  inline-styles 
— George
kaynak
1
Bildiğim kadarıyla (kabaca) aynılar, ancak bunu doğrulayamıyorum.
— Nightfirecat
3
— Sudhir Bastakoti
1
Satır içi stiller olan bakım kabuslarıyla başa çıkmak için önemli bir performans artışı olması gerekirdi. Şimdiye kadar buna dair bir kanıt görmedim.
— steveax
1
IE'nin eski sürümleri için performans artışı ÇOK önemlidir. HTML tablolarının CSS stiliyle yapıştırıcı gibi davrandığını gördüm.
— Jonathan

Yanıtlar:

90

Arkadaşınızın bahsettiği performans artışı, bir CSS dosyası kullanan performans artışı miktarıyla (diğer faktörlerle) karşılaştırıldığında muhtemelen çok önemsizdir.

Tarz niteliğini kullanarak, tarayıcı yalnızca bu belirli öğe için kuralı boyar, bu durumda <div>öğe budur. Bu, CSS motorunun hangi öğelerin CSS seçiciyle eşleştiğini bulması için arama süresini azaltır (ör. a.hoverVeya #someContainer li).

Bununla birlikte, stili öğe düzeyinde koymak, CSS stil kurallarını ayrı ayrı önbelleğe alamayacağınız anlamına gelir. Genellikle CSS dosyalarına stil koymak, önbelleğe alma işleminin yapılmasına izin verir ve böylece bir sayfayı her yüklediğinizde sunucudan gelen yükleme miktarını azaltır.

Stil kurallarını öğe düzeyinde koymak, aynı zamanda hangi öğelerin ne şekilde biçimlendirildiğini unutmanıza neden olur. Ayrıca, birden çok öğeyi birlikte yeniden boyayabileceğiniz belirli bir öğeyi boyama performans artışını geri tepebilir. CSS dosyalarını kullanmak, CSS'yi HTML'den ayırır ve böylece stillerinizin doğru olduğundan ve daha sonra değiştirmenin daha kolay olduğundan emin olmanızı sağlar.

Bu nedenle, karşılaştırmaya bakarsanız, CSS dosyası kullanmanın öğe düzeyinde stil oluşturmaktan çok daha fazla faydası olduğunu görürsünüz.

Harici bir CSS stil sayfası dosyanız olduğunda, tarayıcınız dosyayı önbelleğe alabilir ve bu da uygulama verimliliğinizi artırır!

— Mauris
kaynak
4
Chrome profil oluşturucu ile herhangi bir istatistik sağlayabilir misiniz? CPU ve GPU, pil tüketiminin yüksek maliyetli olduğu mobil ve tabletlerde pahalıdır. Bence bir değiş tokuş var. Ve Cache'in faydası nedir? Tarayıcının mevcut öğe için stili hesaplaması gerekecek ve çok sayıda kural varsa stilleri çözme daha maliyetli olacaktır.
— Akash Kava
28
Müşterilere göndermeden önce stilleri sıralayan bir motor olduğunda bakımla ilgili tüm dezavantajların ortadan kalktığını unutmayın
— Moshe Shaham
6
React + Radium kullanıldığında bakımla ilgili dezavantajlar da ortadan kalkar.
— AjaxLeung
1
@AjaxLeung, siz ve Shaham'ın söylediklerinin doğru olduğuna şüphe yok. Bu cevap, çoğu modern aracın henüz mevcut olmadığı 2011'de yazılmıştır.
— mauris
2
Evet. Ben sadece bu cevabı bugün ve sonrasında görenler için yorum ekliyordum.
— AjaxLeung
6

Satır içi stilleri ve stil sayfalarını kullanırsanız sayfa daha hızlı yüklenir. Bazı durumlarda daha hızlı gerekir.

Href kullanarak bir stil sayfası kullandığınızda, sunucuya başka bir istek, ardından yanıttan sonra dosyanın ayrıştırılması gerekir. Satır içi stillerde bunların hiçbiri yoktur, sadece doğrudan ayrıştırma.

Bir müşterinin interneti yavaşsa, bu tek istek çok yavaş olabilir ve stil sayfası teslim edilene kadar sayfa stilsiz kalır. Yine, satır içi olsaydı hiçbir gecikme olmazdı.

Stil sayfalarını kullanmamızın tek nedeni organize olmaktır. İhtiyaç duyulmayan zamanlar vardır, bu nedenle satır içi stiller veya belge içi stil sayfaları yeterlidir.

— Sebjwallace
kaynak
10
Bu yanıt, tarayıcı önbelleğini tamamen yok sayar. Stil sayfaları, stillerin yalnızca bir kez istenmesine ve önbelleğe alınmasına izin vererek kablo üzerinden gönderilen içerik miktarını azaltır.
— GeekOnCoffee
3
Bu yanıt aynı zamanda satır içi stillerin HTML dosyasını büyüttüğü gerçeğini de yok sayar. Potansiyel olarak, özellikle tekrarlanan satır içi stil kullanırken, CSS dosyasından birkaç kat daha büyük. Bu arada, tarayıcılar birden fazla dosyayı paralel olarak yükleyebilir (ve yukarıda belirtildiği gibi önbelleğe alabilir).
— Jan Van der Haegen
@GeekOnCoffee ancak HTML sayfası umarız önbelleğe alınır (304), bu nedenle önbelleğe alma gerçekten göz ardı edilmez.
— Vidar
@JanVanderHaegen Ziyaret ettiğiniz belirli sayfada kullanılmayan CSS eklemeniz gerekmiyorsa, ilk yükleme süresi daha hızlı olabilir. Tüm CSS'nizi harici dosyalara koyarsanız, HTML dosyası daha küçüktür, doğrudur, ancak harici CSS dosyası daha büyük olabilir. Lehte ve aleyhte olanlar.
— Vidar
5

Cevaplaması kolay bir soru değil çünkü bu durumda performans birçok faktöre (CSS seçicilerinin karmaşıklığı, belge boyutu vb.) Bağlıdır. Bununla birlikte, izole bir durum alırsak, CSS sınıfının genel olarak satır içi stilden daha hızlı olduğunu görebiliriz:
Satır içi stil vs CSS sınıfı

— s.ermakovich
kaynak
5
Bunun, stilin uygulandığı hızdan ziyade düğüm sınıfının veya stil özniteliğinin değiştirilme hızını test ettiğinden oldukça eminim ki bu soru
— Sam
@Sam "Stilin uygulanma hızı" derken neyi kastediyorsunuz? Bu hızı ölçen bir test yapabilir misiniz? Test koduna bakarsanız, her yinelemede sayfa yeniden akışının gerçekleştiğini göreceksiniz; bu, testin yalnızca sınıf / özellik değişikliğini değil, aynı zamanda sayfadaki gerçek etkiyi de kapsadığı anlamına gelir.
— s.ermakovich
Tarz eklemek için zaman içerebilir ama aynı zamanda zaman ekler. Ya belgede sınıf testi veya JS'nin eklenmesine gerek olmayan bir satır içi stil zaten varsa? Her iki durumda da CSS'nin çözülme hızına geliyorum ve (yanılıyor olabilirim) ancak bu testin sadece bunu yaptığını sanmıyorum, bence fazladan iş yapıyor.
— Sam
@Sam Bu test, CSS'yi tarayıcıyla yüklemenin ve onu işlemenin olası ayak izini yok sayar. Cevabımda bunun izole bir durum olduğundan bahsetmiştim. Farklı yöntemler kullanarak stil uygulama performansını ölçer (satır içi ve harici). Bu, bugün tipik web uygulamalarının yaptığı şeydir - HTML belgesini sayfayı yeniden yüklemeden JavaScript'ten değiştirin.
— s.ermakovich
Ah tamam, dinamik olarak eklenmemiş stillerden bahsediyordum
— Sam
3

Olabilir, ancak bağlantılı veya harici stil sayfasının nedeni, özellikle aynı div'i site için birden çok sayfada kullanırken tarayıcıda önbelleğe alınabilmesidir. Bu, tarayıcının sayfayı her yeniden yüklediğinde kodu yeniden yüklemek yerine tarayıcının stil sayfasını yalnızca bir kez yüklemesi gerektiği anlamına gelir. Ayrıca, herhangi bir değişikliği veya hata ayıklamayı kolaylaştıran daha temiz kod sağlar.

— eciusr
kaynak
3
Önbelleğe alma mekanizmasının özü budur. İspata ihtiyacı yok.
— stroncium
5
"Nakit ödeme" olabilir, "nakde çevrilmiş" anlamına gelmez; ve "özler" gerçekler değildir.
— Ivan Castellanos
6
Beyler, artık Duke Nukem dönemi değil, insanları nakde çevirmiyoruz. Öte yandan önbellek ...
— Sebas
3
Önbelleğe alma argümanı, genellikle her şeyi bir kez önden yükleyen ve anında sayfalar oluşturan tek sayfalı uygulamalar için geçerli değildir.
— MindJuice
1

GERÇEK 'EVET'

Çok büyük bir fark var. Özellikle kullanıcı arayüzünü otomatikleştirirken. Aşağıdaki kodu deneyin. Geliştirmek için IE10 ve not defteri kullanıyorum. Giderken öğreniyorum ve testler yapıyorum, bu kısaltılmış bir versiyon testidir. (cevabınızı göstermek için kodu düşürdüğümde hatalar olabilir)

Referans verdiğiniz resme tıklayın ve uyarı mesajlarını okuyun. İPUCU: Bu dosyayı, düzenlemeden (test etmeden) önce düzenleme olarak yeniden kaydedin.

En iyi dileklerimle, 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
kaynak
28
Geliştirmek için IE10 ve not defteri kullanıyorum. ?
— AlexGrafe
1

Bence sabit bir cevap yok.

Bir inline CSSdaha hızlı yüklenir eğer daha hızlı sunucudan daha CSS içerik boyutu indirmeleri yanıt vereceğini external CSS fileistek (dikkate DNS zaman, sunucu gecikme, vs).

Normal boyutta CSS için bunları sayfada satır içine alırdım, 15-20KB'nin üzerinde bir şey için muhtemelen onu harici bir dosyaya koyar ve önbelleğe alınabileceğinden emin olurdum.

Eminim şu anda kaçırdığım birçok başka husus vardır, ancak inline ile harici arasında sabit bir cevap yoktur.

— adrianTNT
kaynak
-1

Dış stil sayfalarını kullanmak kesinlikle daha iyi bir seçenektir çünkü div (ler) e uyguladığınız stili hatırlamanıza yardımcı olacaktır. Sayfayı yükleme süresini kısaltır çünkü HTML kodu ne kadar azsa o kadar hızlı yüklenir.

Ancak bazı durumlarda, belirli bir div'in bazı özelliklerini değiştirmeniz gerekebilir, bu durumda satır içi stil en iyi seçenektir. Ve gerçekten konuşursak, bir veya iki satır içi stil, sayfanın yüklenme süresinde herhangi bir değişiklik yapmaz.

Başka bir dahili stil sayfası seçeneği vardır, ancak yalnızca bir şablon oluşturuyormuş gibi tek sayfalık bir web siteniz olduğunda kullanılır. Bunun nedeni, her HTML sayfasında CSS yazmanız gerektiğidir.

— Vicky
kaynak
-2

Diğer her öğe veya görüntü için birden fazla küçük CSS dosyasının bulunduğu harici CSS yerine satır içi CSS kullanmayı tercih ederim. Her birinde yalnızca 5-10 satır kod bulunan birkaç CSS dosyası indirmenin anlamı yok. Öğeniz üzerine gelme, etkin, işaretli vb. Özellikler içeriyorsa, geliştirme sürecinizi karmaşıklaştırmayacağı için harici bir CSS dosyası kullanmanız gerekir.

— atüls1396
kaynak
Bu, bakımı son derece zorlaştırır. CSS, JS dosyaları varsayılan olarak kullanıcınızın tarayıcısında önbelleğe alınmalıdır.
— dave2118
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.