CSS nội tuyến có ảnh hưởng đến hiệu suất không?

Quá trình chuyển đổi này, bao gồm cả việc xác định CSS quan trọng/không quan trọng, nội tuyến CSS quan trọng và tải chậm CSS không quan trọng, có thể được thực hiện tự động bởi các mô-đun Tối ưu hóa tốc độ trang cho nginx, apache, IIS, ATS và Open

Xem thêm chức năng loadCSS để giúp tải CSS không đồng bộ, có thể hoạt động với Critical, một công cụ để trích xuất CSS quan trọng từ một trang web

Các kiểu quan trọng cần thiết để tạo kiểu cho nội dung trong màn hình đầu tiên được nội tuyến và áp dụng cho tài liệu ngay lập tức. đầy đủ nhỏ. css được tải sau khi vẽ trang ban đầu. Các kiểu của nó được áp dụng cho trang sau khi tải xong mà không chặn kết xuất ban đầu của nội dung quan trọng

Lưu ý rằng nền tảng web sẽ sớm hỗ trợ tải biểu định kiểu theo cách không chặn kết xuất mà không cần phải sử dụng JavaScript, sử dụng Nhập HTML

Không nội tuyến các URI dữ liệu lớn

Hãy cẩn thận khi nội tuyến URI dữ liệu trong tệp CSS. Mặc dù việc sử dụng có chọn lọc các URI dữ liệu nhỏ trong CSS của bạn có thể hợp lý, nhưng việc đặt nội tuyến các URI dữ liệu lớn có thể khiến kích thước của CSS trong màn hình đầu tiên của bạn lớn hơn, điều này sẽ làm chậm thời gian kết xuất trang

Không nội dòng thuộc tính CSS

Nội tuyến các thuộc tính CSS trên các phần tử HTML (e. g. , <p style=...>) nên tránh nếu có thể, vì điều này thường dẫn đến việc sao chép mã không cần thiết. Hơn nữa, CSS nội tuyến trên các thành phần HTML bị chặn theo mặc định với Chính sách bảo mật nội dung (CSP)

Tôi đã tự hỏi những nhược điểm về hiệu suất khi chúng tôi đang sử dụng ReactJS là gì (điều này cũng giống với bất kỳ khung nào khác) chỉ với các kiểu nội tuyến, so với việc sử dụng các biểu định kiểu CSS bên ngoài

Chúng tôi biết rằng kích thước của các kiểu nội tuyến có thể rất lớn (đặc biệt nếu chúng tôi lặp lại các phần tử). Đây chính xác là tình huống chúng ta sẽ kiểm tra ở đây. Bằng cách này, chúng tôi có thể kiểm tra hiệu suất của trình duyệt khi phân tích cú pháp, lưu và áp dụng một loạt các kiểu nội tuyến, đối với một biểu định kiểu CSS duy nhất

• Khi sử dụng cái này với cái kia?
• Nó không liên quan
• Kinh nghiệm

• Kết quả

  • Mốc thời gian
  • Kích thước của DOM
  • Đã đến lúc gắn kết DOM
  • thời gian kết xuất
  • Còn trình duyệt khác thì sao?
• Sự kết luận

Tôi nghĩ cả hai cách đều hữu ích và có một lĩnh vực ứng dụng cụ thể

Như Michael Chan đã nói tại React Europe (video)

• CSS stylesheets có thể được sử dụng cho bố cục. chẳng hạn như các lớp bố trí bootstrap. row-fluid, span*. Chúng được cố định và tạo thành phần tĩnh của trang web
• Các kiểu nội tuyến nên được sử dụng cho các kiểu trạng thái. phong cách có thể thay đổi theo một trạng thái. Chúng tạo thành phần động của trang web

Tôi quyết định thử một thứ ngu ngốc và không thực sự liên quan đến một trường hợp kinh doanh thực tế

• Tạo hai <table> lớn. một kiểu có kiểu nội tuyến, một kiểu có bảng định kiểu CSS. Cùng nội dung
• Kiểm tra hiệu suất/độ mịn/kích thước/thời gian kết xuất cho cả hai

Nó không liên quan vì chúng tôi sẽ không tạo một bảng lớn trong DOM của chúng tôi. Chúng ta nên có một số loại cuộn ảo/kết xuất lười biếng

Nhưng, thử nghiệm vô hại thì sao, chỉ để kiểm tra xem điều đó có chậm hơn khi tôi cuộn hay không và thời gian kết xuất thì sao?

Chrome 45b, Phản ứng 0. 13. 3

Vì vậy, chúng tôi tạo ra một <table> trong số 1.000 hàng với 9 cột. Tất cả chúng đều có cùng nội dung của tôi. email@ví dụ. com. Chúng tôi làm tương tự với 10.000 hàng để kiểm tra “xu hướng”

Chúng tôi sẽ kiểm tra

• Sự mượt mà khi tôi cuộn trang xuống thông qua Dòng thời gian của Chrome DevTools
• Kích thước của DOM. thật hữu ích khi biết ứng dụng Javascript phổ biến đẳng cấu (kết xuất phía máy chủ)
• Thời gian để gắn kết DOM. Tôi sẽ sử dụng

  const style = {
      fontFamily: 'Consolas',
      padding: 10,
      color: "#444",
      border: "3px solid orange",
      position: "relative",
      width: "15%",
      height: "25px",
      letterSpacing: 0,
      overflow: "hidden",
      fontSize: 10,
      fontVariant: "small-caps"
  }

  1. đây là nơi DOM khả dụng sau khi

  const style = {
      fontFamily: 'Consolas',
      padding: 10,
      color: "#444",
      border: "3px solid orange",
      position: "relative",
      width: "15%",
      height: "25px",
      letterSpacing: 0,
      overflow: "hidden",
      fontSize: 10,
      fontVariant: "small-caps"
  }

  2 được gọi
• Thời gian được kết xuất. Tôi sẽ sử dụng

  const style = {
      fontFamily: 'Consolas',
      padding: 10,
      color: "#444",
      border: "3px solid orange",
      position: "relative",
      width: "15%",
      height: "25px",
      letterSpacing: 0,
      overflow: "hidden",
      fontSize: 10,
      fontVariant: "small-caps"
  }

  3 để biết khi nào khung hình tiếp theo sau

  const style = {
      fontFamily: 'Consolas',
      padding: 10,
      color: "#444",
      border: "3px solid orange",
      position: "relative",
      width: "15%",
      height: "25px",
      letterSpacing: 0,
      overflow: "hidden",
      fontSize: 10,
      fontVariant: "small-caps"
  }

  2 sẵn sàng

Bộ xương của thành phần ReactJS là

const createOneInlineStyleRow = (i) => <tr key={i}>
                                        <td style={style}>[email protected]</td>
                                        ...repeat...
                                       </tr>

export default class AppInline extends React.Component {
    componentDidMount() {
        console.timeEnd('didMount')
    }
    render() {
        console.time('render');
        console.time('didMount');
        requestAnimationFrame(function() { console.timeEnd('render'); })
        
        const rows = times(NB_ROWS, createOneInlineStyleRow)
        return <table style={TABLE_STYLE}><tbody>{rows}</tbody></table>
    }
}

Một số phong cách ngẫu nhiên cho

const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}

const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}

Và tương tự trong CSS cho biểu định kiểu

.tableCss td {
    font-family: Consolas;
    padding: 10px;
    color: #444;
    border: none;
    border: 3px solid orange;
    position: relative;
    width: 15%; height: 25px;
    letter-spacing: 0;
    overflow: hidden;
    font-size: 10px;
    font-variant: small-caps;
}

Về cơ bản, đây là thiết kế đẹp này.

Mốc thời gian

Tôi không tìm thấy sự khác biệt khi cuộn

Dòng thời gian Chrome DevTools hỗ trợ nhận thức của tôi. không khác biệt, không giảm fps

Thực tế là DOM là nội tuyến hoặc trong biểu định kiểu CSS bên ngoài không thành vấn đề. Tôi đoán nó đã có trong bộ nhớ trình duyệt khi nó được hiển thị nên nó không ảnh hưởng đến độ mượt mà

Kích thước của DOM

Không ngạc nhiên. kích thước DOM rất lớn với các kiểu nội tuyến và tỷ lệ tuyến tính với số lượng hàng

Đó rõ ràng là điều cần tính đến nếu bạn thực hiện một số javascript phổ quát. 2.000.000 ký tự là 2MB dữ liệu. (nhưng dù sao thì ai cũng gửi một cái bàn lớn?. )

Như calebwright đã chỉ ra trong các nhận xét, qua mạng, chúng tôi thường nén nội dung. Không có nội dung ngẫu nhiên trong bảng, DOM 2 MB sẽ nén thành 200k

Ngoài ra, như Daniel Meneses đã nói, với SSR, các kiểu nội tuyến sẽ được tải xuống mọi lúc (một phần của HTML), trong khi biểu định kiểu CSS sẽ được tải xuống một lần. (nhờ bộ nhớ cache của trình duyệt)

Đã đến lúc gắn kết DOM

Chúng tôi bắt đầu hẹn giờ theo phương pháp

const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}

const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}

React đã hoàn thành công việc chuyển đổi DOM ảo thành DOM và đã đưa nó vào nút được gắn kết của chúng tôi

Tôi dành thời gian với phiên bản phát triển của React, vì tôi đã bắt đầu và sử dụng phiên bản sản xuất sau đó. Chúng không nên được tính đến, nó không liên quan trong trường hợp của chúng tôi

Mất gấp đôi thời gian để chuyển đổi DOM ảo của chúng tôi với các kiểu nội tuyến thành DOM và gắn kết nó

Đồng bằng giảm với ít hàng hơn nhưng nó vẫn còn đáng kể. 70ms (css) so với 105ms (nội tuyến) cho 100 hàng (x1. 5)

thời gian kết xuất

DOM được gắn kết, trình duyệt cần hiển thị bảng

Chúng tôi cho rằng sẽ mất nhiều thời gian hơn để hiển thị các kiểu nội tuyến, bởi vì nó có nhiều thứ hơn để phân tích cú pháp và lưu trữ mọi thuộc tính

const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}

const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}

Vẫn còn một chi phí nhỏ

Tôi đoán những màn trình diễn đó khá phụ thuộc vào trình duyệt

Còn trình duyệt khác thì sao?

Tôi đã dùng thử Edge với 10.000 hàng

Các con số gấp đôi số của Chrome. . khóc

Đó là hành vi dự kiến. Ít nhất, chúng ta có một số con số bây giờ

Các kiểu nội tuyến chiếm nhiều kích thước hơn trong DOM, được chuyển đổi chậm hơn từ VDOM (có thể có tác động lớn hơn đến bộ nhớ) và mất nhiều thời gian hơn để trình duyệt xử lý

CSS nội tuyến có nhanh hơn bên ngoài không?

Tại sao CSS nội tuyến không được khuyến nghị?

Sử dụng CSS nội tuyến có tốt không?

Nhược điểm của CSS nội tuyến là gì?