Sự khác biệt về hiệu suất kiểu nội tuyến so với CSS bên ngoài?

88

Một người bạn của tôi nói rằng việc sử dụng <div style=""></div>thay vì đặt tệp css nén như link hrefở phần đầu sẽ tăng hiệu suất. Có đúng như vậy không?

css  performance  inline-styles 
— George
nguồn
1
Theo như tôi biết, chúng (đại khái) giống nhau, nhưng tôi không thể xác minh điều đó.
— Nightfirecat
3
Điều này có thể làm sáng tỏ: mathiasbynens.be/notes/inline-vs-separate-file
— Sudhir Bastakoti
1
Nó sẽ phải là một sự thúc đẩy hiệu suất đáng kể để đối phó với cơn ác mộng bảo trì theo kiểu nội tuyến. Cho đến nay, tôi không thấy điều đó có gì đáng tin cậy.
— steveax
1
Đối với các phiên bản IE cũ hơn, hiệu suất tăng là RẤT đáng kể. Tôi đã thấy các bảng HTML hoạt động như keo với kiểu CSS.
— Jonathan

Câu trả lời:

90

Mức tăng hiệu suất mà người bạn của bạn đã đề cập có lẽ quá nhỏ so với mức tăng hiệu suất (thông qua các yếu tố khác) bằng cách sử dụng tệp CSS.

Sử dụng thuộc tính style, trình duyệt chỉ vẽ quy tắc cho phần tử cụ thể đó, trong trường hợp này là <div>phần tử. Điều này làm giảm thời gian tra cứu cho công cụ CSS để tìm phần tử nào phù hợp với bộ chọn CSS (ví dụ: a.hoverhoặc #someContainer li).

Tuy nhiên, đặt kiểu ở cấp phần tử có nghĩa là bạn không thể lưu các quy tắc kiểu CSS một cách riêng biệt. Thông thường, việc đưa các kiểu vào các tệp CSS sẽ cho phép thực hiện bộ nhớ đệm, do đó giảm lượng tải từ máy chủ mỗi khi bạn tải một trang.

Việc đặt các quy tắc kiểu ở cấp phần tử cũng sẽ khiến bạn mất dấu các phần tử được tạo kiểu theo cách nào. Nó cũng có thể phản tác dụng tăng hiệu suất của việc sơn một phần tử cụ thể nơi bạn có thể sơn lại nhiều phần tử với nhau. Việc sử dụng các tệp CSS phân tách CSS khỏi HTML và do đó cho phép bạn đảm bảo rằng các kiểu của bạn là đúng và sau này dễ dàng sửa đổi hơn.

Do đó, nếu bạn nhìn vào bảng so sánh, bạn sẽ thấy rằng việc sử dụng tệp CSS có nhiều lợi ích hơn so với việc tạo kiểu ở cấp phần tử.

Đừng quên khi bạn có tệp biểu định kiểu CSS bên ngoài, trình duyệt của bạn có thể lưu tệp vào bộ đệm để tăng hiệu quả ứng dụng của bạn!

— mauris
nguồn
4
Bạn có thể cung cấp bất kỳ số liệu thống kê nào với trình biên dịch chrome không? CPU và GPU rất tốn kém trên thiết bị di động và máy tính bảng, nơi tiêu thụ pin là một chi phí rất lớn. Tôi nghĩ rằng có một sự đánh đổi. Và lợi ích của Cache là gì? Trình duyệt sẽ phải tính toán kiểu cho phần tử hiện tại và việc giải quyết kiểu sẽ tốn kém hơn nếu có nhiều quy tắc.
— Akash Kava
28
Lưu ý rằng tất cả các nhược điểm liên quan đến bảo trì biến mất khi có một động cơ mà inlines phong cách trước khi gửi cho khách hàng
— Moshe Shaham
6
Những bất lợi liên quan đến bảo trì cũng biến mất khi sử dụng React + Radium.
— AjaxLeung
1
@AjaxLeung chắc chắn những gì bạn và Shaham đã nói là đúng. Câu trả lời này được viết vào năm 2011, khi hầu hết các công cụ hiện đại vẫn chưa có sẵn.
— mauris
2
Đúng. Tôi chỉ đơn giản là thêm nhận xét cho những người nhìn thấy câu trả lời này ngày hôm nay và hơn thế nữa.
— AjaxLeung
6

Trang sẽ tải nhanh hơn nếu bạn sử dụng kiểu nội tuyến so với trang định kiểu. Trong một số trường hợp phải nhanh hơn.

Khi bạn sử dụng biểu định kiểu bằng href, nó yêu cầu một yêu cầu khác đến máy chủ, sau đó phân tích cú pháp tệp sau phản hồi. Với các kiểu nội tuyến, không có điều đó, chỉ cần phân tích cú pháp trực tiếp.

Nếu khách hàng có internet chậm thì yêu cầu duy nhất đó có thể rất chậm khiến trang không có kiểu dáng cho đến khi bảng định kiểu được gửi. Một lần nữa, nếu nó là nội tuyến sẽ không có sự chậm trễ nào cả.

Lý do duy nhất chúng tôi sử dụng bảng định kiểu là được tổ chức. Đôi khi chúng không cần thiết, vì vậy các kiểu nội tuyến hoặc các trang định kiểu trong tài liệu là đủ.

— sebjwallace
nguồn
9
Câu trả lời này hoàn toàn bỏ qua bộ nhớ đệm của trình duyệt. Biểu định kiểu chỉ cho phép yêu cầu các kiểu một lần và lưu vào bộ nhớ đệm, giảm lượng nội dung được gửi qua dây.
— GeekOnCoffee
2
Câu trả lời này cũng bỏ qua thực tế là các kiểu nội tuyến làm cho tệp HTML lớn hơn. Có khả năng, đặc biệt là khi sử dụng kiểu nội tuyến lặp lại, lớn hơn một số lần so với tệp CSS. Nhân tiện, các trình duyệt có thể tải nhiều tệp song song (và lưu chúng vào bộ nhớ cache như đã đề cập ở trên).
— Jan Van der Haegen
5

Đây không phải là một câu hỏi dễ trả lời, bởi vì hiệu suất trong trường hợp này phụ thuộc vào nhiều yếu tố (độ phức tạp của bộ chọn CSS, kích thước tài liệu, v.v.). Tuy nhiên, nếu xét một trường hợp riêng biệt, chúng ta có thể thấy rằng lớp CSS nói chung nhanh hơn kiểu nội tuyến:
Kiểu nội tuyến so với lớp CSS

— s.ermakovich
nguồn
5
Khá chắc chắn điều này đang thử nghiệm tốc độ mà tại đó các lớp nút hoặc thuộc tính style được thay đổi chứ không phải là tốc độ mà tại đó các phong cách được áp dụng đó là những gì các câu hỏi được hỏi
— Sam
@Sam Ý bạn là gì về "tốc độ áp dụng phong cách"? Bạn có thể cung cấp một bài kiểm tra đo tốc độ này không? Nếu bạn xem mã kiểm tra, bạn sẽ thấy rằng chỉnh trang lại xảy ra trên mỗi lần lặp lại, có nghĩa là kiểm tra không chỉ bao gồm sửa đổi lớp / thuộc tính mà còn tác động thực tế trên trang.
— s.ermakovich
Nó có thể bao gồm thời gian để thêm kiểu nhưng nó cũng thêm thời gian. Điều gì sẽ xảy ra nếu tài liệu đã có bài kiểm tra lớp hoặc một kiểu nội tuyến mà không cần JS thêm nó. Tôi đang ở tốc độ để CSS được giải quyết trong cả hai trường hợp và (tôi có thể sai) nhưng tôi không nghĩ rằng thử nghiệm này chỉ làm được điều đó, tôi nghĩ rằng nó còn hoạt động thêm.
— Sam
@Sam Thử nghiệm này bỏ qua dấu vết có thể có của việc tải CSS bằng trình duyệt và xử lý nó. Tôi đã đề cập trong câu trả lời của mình rằng đây là một trường hợp cá biệt. Nó chỉ đo lường hiệu suất của việc áp dụng các kiểu bằng các cách khác nhau (nội tuyến so với bên ngoài). Đây là những gì các ứng dụng web điển hình làm ngày nay - thay đổi tài liệu HTML từ JavaScript mà không cần tải lại trang.
— s.ermakovich
Ah OK, tôi đã đề cập đến phong cách không tự động thêm vào
— Sam
3

Cũng có thể nhưng lý do cho biểu định kiểu được liên kết hoặc bên ngoài là vì vậy nó có thể được lưu vào bộ nhớ cache trong trình duyệt, đặc biệt khi bạn sử dụng cùng một div trong nhiều trang cho trang web. Điều này có nghĩa là trình duyệt chỉ phải tải biểu định kiểu một lần thay vì phải tải lại mã mỗi khi trình duyệt tải lại trang. Nó cũng làm cho mã sạch hơn giúp mọi thay đổi hoặc gỡ lỗi dễ dàng hơn.

— eciusr
nguồn
3
Đó là bản chất của cơ chế bộ nhớ đệm. Nó không cần bằng chứng.
— stroncium
5
Nó có thể là "tiền mặt" không có nghĩa là "tiền mặt"; và "bản chất" không phải là dữ kiện.
— Ivan Castellanos
6
Các bạn, bây giờ không còn là thời đại công tước vũ trụ nữa, chúng tôi không rút tiền mặt của mọi người. Mặt khác, bộ nhớ cache ...
— Sebas
3
Đối số bộ nhớ đệm không phù hợp với các ứng dụng trang đơn, thường tải mọi thứ một lần lên trước và tạo các trang nhanh chóng.
— MindJuice
1

SỰ THẬT LÀ 'CÓ'

Có một sự khác biệt lớn. Đặc biệt là khi bạn đang tự động hóa giao diện người dùng. Hãy thử đoạn mã sau. Tôi sử dụng IE10 và notepad để phát triển. Tôi vừa học vừa làm các bài kiểm tra, đây là bài kiểm tra phiên bản rút gọn. (có thể có lỗi khi tôi giảm mã để hiển thị câu trả lời của bạn)

Nhấp vào hình ảnh bạn tham khảo và đọc thông báo cảnh báo. GỢI Ý: Lưu tệp này, lưu lại dưới dạng chỉnh sửa trước khi chỉnh sửa (thử nghiệm).

Những lời chúc tốt đẹp nhất, 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
nguồn
28
Tôi sử dụng IE10 và notepad để phát triển. ?
— xanderiel
1

Không có câu trả lời cố định theo ý kiến ​​của tôi.

An inline CSSsẽ tải nhanh hơn nếu kích thước nội dung CSS tải xuống nhanh hơn máy chủ của bạn sẽ phản hồi một external CSS fileyêu cầu (xem xét thời gian DNS, độ trễ máy chủ, v.v.).

Đối với CSS kích thước bình thường, tôi sẽ nội dòng chúng trong trang, đối với thứ gì đó trên 15-20KB, tôi có thể sẽ đặt nó vào một tệp bên ngoài và đảm bảo rằng nó có thể được lưu vào bộ nhớ cache.

Tôi chắc chắn rằng có nhiều cân nhắc khác mà tôi đang thiếu, nhưng không có câu trả lời cố định cho nội tuyến và bên ngoài.

— adrianTNT
nguồn
-1

Sử dụng bảng định kiểu bên ngoài chắc chắn là một lựa chọn tốt hơn vì nó sẽ giúp bạn ghi nhớ kiểu bạn đã áp dụng trên (các) div. Nó làm giảm thời gian tải trang vì mã HTML càng ít thì nó sẽ tải nhanh hơn.

Nhưng trong một số trường hợp, bạn có thể phải thay đổi một số thuộc tính của một div cụ thể thì kiểu nội tuyến là lựa chọn tốt nhất. Và thực sự mà nói, một hoặc hai kiểu nội tuyến sẽ không làm thay đổi thời gian tải trang.

Có một tùy chọn khác của bảng định kiểu nội bộ nhưng nó chỉ được sử dụng khi bạn có một trang web duy nhất như khi bạn đang tạo mẫu. Điều này là do bạn phải viết CSS trong mỗi trang HTML

— vicky
nguồn
-3

Tôi thích sử dụng CSS nội tuyến hơn CSS bên ngoài, nơi có nhiều tệp CSS nhỏ cho mọi phần tử hoặc hình ảnh khác. Không ích gì khi tải xuống một số tệp CSS chỉ với 5-10 dòng mã trong mỗi tệp. Nếu phần tử của bạn chứa các thuộc tính như di chuột, hoạt động, đã chọn, v.v. thì bạn phải sử dụng tệp CSS bên ngoài vì nó sẽ tránh làm phức tạp quá trình phát triển của bạn.

— atuls1396
nguồn
Điều đó khiến việc duy trì trở nên vô cùng khó khăn. Các tệp CSS, JS phải được lưu vào bộ nhớ cache trên trình duyệt của người dùng của bạn theo mặc định.
— dave2118
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.