Perbedaan kinerja CSS eksternal vs gaya sebaris?

89

Seorang teman saya mengatakan bahwa menggunakan <div style=""></div>alih-alih file css terkompresi yang diletakkan link hrefdi bagian kepala memberikan beberapa peningkatan kinerja. Benarkah itu?

css performance inline-styles George
sumber
1
Sejauh yang saya tahu, mereka (secara kasar) sama, tetapi saya tidak dapat memverifikasi itu.
Nightfirecat
3
Ini mungkin menjelaskan beberapa: mathiasbynens.be/notes/inline-vs-separate-file
Sudhir Bastakoti
1
Ini harus menjadi peningkatan kinerja yang signifikan untuk menghadapi mimpi buruk pemeliharaan yang merupakan gaya inline. Sejauh ini saya tidak melihat bukti itu.
steveax
1
Untuk versi IE yang lebih lama, peningkatan kinerja SANGAT signifikan. Saya telah melihat tabel HTML berperilaku seperti lem dengan gaya CSS.
Jonathan

Jawaban:

90

Peningkatan kinerja yang disebutkan teman Anda mungkin terlalu sepele dibandingkan dengan jumlah peningkatan kinerja (melalui faktor lain) menggunakan file CSS.

Dengan menggunakan atribut style, browser hanya melukis aturan untuk elemen tertentu, yang dalam hal ini adalah <div>elemen. Ini mengurangi jumlah waktu pencarian mesin CSS untuk menemukan elemen mana yang cocok dengan pemilih CSS (mis. a.hoverAtau#someContainer li ).

Namun, menempatkan gaya pada tingkat elemen berarti Anda tidak dapat menyimpan aturan gaya CSS secara terpisah. Biasanya meletakkan gaya dalam file CSS akan memungkinkan dilakukannya caching, sehingga mengurangi jumlah beban dari server setiap kali Anda memuat halaman.

Menempatkan aturan gaya di tingkat elemen juga akan membuat Anda kehilangan jejak elemen apa yang diberi gaya. Ini juga dapat menjadi bumerang bagi peningkatan kinerja pengecatan elemen tertentu tempat Anda dapat mengecat ulang beberapa elemen secara bersamaan. Menggunakan file CSS memisahkan CSS dari HTML, dan dengan demikian memungkinkan Anda untuk memastikan bahwa gaya Anda benar dan lebih mudah untuk dimodifikasi nanti.

Oleh karena itu, jika Anda melihat perbandingannya, Anda akan melihat bahwa menggunakan file CSS memiliki lebih banyak manfaat daripada gaya pada tingkat elemen.

Tidak ketinggalan ketika Anda memiliki file lembar gaya CSS eksternal, browser Anda dapat menyimpan file tersebut sehingga meningkatkan efisiensi aplikasi Anda!

mauris
sumber
4
Bisakah Anda memberikan statistik apa pun dengan chrome profiler? CPU & GPU mahal di ponsel dan tablet, di mana konsumsi baterai sangat mahal. Saya pikir ada trade off. Dan apa manfaat dari Cache? Browser harus menghitung gaya untuk elemen saat ini dan gaya penyelesaian akan lebih mahal jika ada banyak aturan.
Akash Kava
28
Perhatikan bahwa semua kerugian yang terkait dengan pemeliharaan hilang ketika ada mesin yang menyejajarkan gaya sebelum dikirim ke klien
Moshe Shaham
6
Kerugian terkait perawatan juga hilang saat menggunakan React + Radium.
AjaxLeung
1
@AjaxLeung tidak diragukan lagi apa yang Anda dan Shaham katakan adalah benar. Jawaban ini ditulis pada tahun 2011, ketika sebagian besar alat modern belum tersedia.
mauris
2
Iya. Saya hanya menambahkan komentar untuk mereka yang melihat jawaban ini hari ini dan seterusnya.
AjaxLeung
6

Halaman akan memuat lebih cepat jika Anda menggunakan gaya sebaris vs gaya lembar. Dalam beberapa kasus harus lebih cepat.

Ketika Anda menggunakan sebuah style sheet menggunakan href itu membutuhkan permintaan lain ke server, kemudian penguraian file setelah respon. Dengan gaya sebaris tidak ada, hanya penguraian langsung.

Jika klien memiliki internet yang lambat maka permintaan tunggal itu bisa sangat lambat meninggalkan halaman tanpa gaya sampai lembar gaya dikirimkan. Sekali lagi, jika sejajar tidak akan ada penundaan sama sekali.

Satu-satunya alasan kami menggunakan lembar gaya adalah untuk diatur. Ada kalanya tidak diperlukan, jadi gaya sebaris atau lembar gaya dalam dokumen sudah cukup.

sebjwallace
sumber
10
Jawaban ini sepenuhnya mengabaikan cache browser. Stylesheet memungkinkan untuk hanya meminta gaya satu kali dan menyimpannya di cache, mengurangi jumlah konten yang dikirim melalui wire.
GeekOnCoffee
3
Jawaban ini juga mengabaikan fakta bahwa gaya sebaris membuat file HTML lebih besar. Berpotensi, terutama saat menggunakan gaya sebaris berulang, beberapa kali lebih besar dari file CSS. Omong-omong, browser dapat memuat banyak file secara paralel (dan menyimpan cache seperti yang disebutkan di atas).
Jan Van der Haegen
@GeekOnCoffee tetapi halaman HTML mudah-mudahan akan di-cache (304), jadi caching tidak benar-benar diabaikan.
Vidar
@JanVanderHaegen Waktu muat awal mungkin lebih cepat jika Anda tidak harus menyertakan CSS yang tidak digunakan pada halaman tertentu yang Anda kunjungi. Jika Anda meletakkan semua CSS Anda di file eksternal maka file HTML lebih kecil, benar, tetapi file CSS eksternal mungkin lebih besar. Pro dan kontra.
Vidar
5

Ini bukan pertanyaan yang mudah untuk dijawab, karena performa dalam hal ini bergantung pada banyak faktor (kerumitan pemilih CSS, ukuran dokumen, dll.). Namun, jika kita mengambil kasus yang terisolasi, maka kita dapat melihat bahwa kelas CSS secara umum lebih cepat daripada gaya sebaris: Gaya sebaris
vs kelas CSS

s.ermakovich
sumber
5
Cukup yakin ini menguji kecepatan di mana kelas node atau atribut gaya diubah daripada kecepatan di mana gaya diterapkan yang merupakan pertanyaan yang diajukan
Sam
@ Sam Apa yang Anda maksud dengan "kecepatan penerapan gaya"? Bisakah Anda memberikan tes yang mengukur kecepatan ini? Jika Anda melihat kode pengujian, Anda akan melihat bahwa perubahan posisi halaman terjadi pada setiap iterasi, yang berarti bahwa pengujian tidak hanya mencakup modifikasi kelas / atribut, tetapi juga dampak aktual pada halaman.
s.ermakovich
Ini mungkin termasuk waktu untuk menambah gaya tetapi juga menambah waktu. Bagaimana jika dokumen sudah memiliki pengujian kelas atau gaya sebaris tanpa JS perlu menambahkannya. Saya mendapatkan kecepatan untuk CSS untuk diselesaikan dalam kedua kasus dan (saya mungkin salah) tetapi saya tidak berpikir tes ini hanya melakukan itu, saya pikir itu melakukan pekerjaan tambahan.
Sam
@Sam Tes ini mengabaikan kemungkinan footprint dari memuat CSS oleh browser dan memprosesnya. Saya menyebutkan dalam jawaban saya bahwa ini adalah kasus yang terisolasi. Ini hanya mengukur kinerja penerapan gaya menggunakan cara yang berbeda (sebaris vs eksternal). Inilah yang umumnya dilakukan aplikasi web saat ini - mengubah dokumen HTML dari JavaScript tanpa memuat ulang halaman.
s.ermakovich
Ah Oke, saya mengacu pada gaya yang ditambahkan secara non-dinamis
Sam
3

Bisa juga tetapi alasan untuk lembar gaya tertaut atau eksternal adalah agar dapat di-cache di browser terutama ketika Anda menggunakan div yang sama di beberapa halaman untuk situs tersebut. Ini berarti browser hanya perlu memuat style sheet satu kali daripada harus memuat ulang kode setiap kali browser memuat ulang halaman. Itu juga membuat kode lebih bersih yang membuat perubahan atau debugging menjadi lebih mudah.

eciusr
sumber
3
Ini adalah inti dari mekanisme caching. Itu tidak membutuhkan bukti.
stroncium
5
Bisa "diuangkan" bukan berarti "diuangkan"; dan "esensi" bukanlah fakta.
Ivan Castellanos
6
Guys, ini bukan era duke nukem lagi, kami tidak menguangkan orang. Cache di sisi lain ...
Sebas
3
Argumen caching tidak berlaku untuk aplikasi satu halaman, yang biasanya memuat semuanya sekali di depan dan menghasilkan halaman dengan cepat.
MindJuice
1

KEBENARAN ADALAH 'YA'

Terdapat sebuah perbedaan yang besar. Terutama saat Anda mengotomatiskan antarmuka pengguna. Coba kode berikut. Saya menggunakan IE10 dan notepad untuk mengembangkan. Saya belajar sambil pergi dan melakukan tes. Ini adalah tes versi singkat. (mungkin ada kesalahan saat saya mengurangi kode untuk menunjukkan jawaban Anda)

Klik pada gambar yang Anda rujuk dan baca pesan peringatan. PETUNJUK: Simpan file ini di simpan lagi sebagai edit sebelum mengedit (pengujian).

Semoga sukses, 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>
Mengenakan
sumber
28
Saya menggunakan IE10 dan notepad untuk mengembangkan. ?
AlexGrafe
1

Tidak ada jawaban pasti menurut saya.

Sebuah inline CSSakan memuat lebih cepat jika ukuran konten CSS diunduh lebih cepat daripada server Anda akan meresponsexternal CSS file permintaan (mempertimbangkan waktu DNS, latensi server, dll).

Untuk ukuran normal CSS saya akan memasukkannya ke dalam halaman, untuk sesuatu yang lebih dari 15-20KB saya mungkin akan meletakkannya di file eksternal dan memastikannya dapat di-cache.

Saya yakin ada banyak pertimbangan lain yang saya lewatkan sekarang, tetapi tidak ada jawaban tetap untuk inline vs eksternal.

adrianTNT
sumber
-1

Menggunakan lembar gaya eksternal jelas merupakan pilihan yang lebih baik karena ini akan membantu Anda mengingat gaya yang telah Anda terapkan pada div. Ini mengurangi waktu memuat halaman karena semakin kecil kode HTML, semakin cepat ia akan memuat.

Tetapi dalam beberapa kasus Anda mungkin harus mengubah beberapa properti div tertentu, maka gaya sebaris adalah opsi terbaik. Dan sebenarnya, satu atau dua gaya sebaris tidak akan mengubah waktu pemuatan halaman.

Ada opsi lain untuk lembar gaya internal tetapi hanya digunakan ketika Anda memiliki situs web satu halaman seperti jika Anda membuat templat. Ini karena Anda harus menulis CSS di setiap halaman HTML

vicky
sumber
-2

Saya lebih suka menggunakan CSS sebaris daripada CSS eksternal di mana ada beberapa file CSS kecil untuk setiap elemen atau gambar lainnya. Tidak ada gunanya mengunduh beberapa file CSS dengan masing-masing hanya 5-10 baris kode. Jika elemen Anda berisi properti seperti hover, active, check, dll. Anda seharusnya menggunakan file CSS eksternal karena akan menghindari proses pengembangan yang rumit.

atuls1396
sumber
Itu membuat perawatan menjadi sangat sulit. File CSS, JS harus di-cache di browser pengguna Anda secara default.
dave2118