Làm thế nào để viết CSS tốt hơn với hiệu suất trong tâm trí

Trong bài viết hôm nay, chúng tôi sẽ suy nghĩ về các lựa chọn mã mà chúng tôi có thể thực hiện trong CSS để cải thiện hiệu suất trang web. Nhưng, trước khi chúng ta đi sâu vào những lựa chọn đó, trước tiên chúng ta hãy xem xét kỹ hơn về quy trình kết xuất trang web để tập trung vàocác khu vực có vấn đề (hiệu suất-khôn ngoan) có thể giải quyết được thông qua CSS.

Đây là luồng hoạt động thô được trình duyệt thực hiện sau khi tạo cây DOM:

1. Tính toán lại Phong cách (và kết xuất tạo cây). Trình duyệt tính toán các kiểu được áp dụng cho các thành phần trong cây DOM. Cây kết xuất sau đó được tạo trong khi loại bỏ các nút (phần tử) khỏi cây DOM không được kết xuất (phần tử có không trưng bày) và những thứ đó là (yếu tố giả).
2. Bố cục (còn gọi là Reflow). Sử dụng kiểu tính toán từ trước đó, trình duyệt sẽ tính toán vị trí và hình dạng của từng thành phần trên trang.
3. Sơn lại. Khi bố cục được ánh xạ, pixel sẽ được vẽ lên màn hình.
4. Lớp tổng hợp. Trong quá trình sơn lại, bức tranh có thể được thực hiện trong các lớp khác nhau một cách tự động; những lớp đó cuối cùng được kết hợp với nhau.

Bây giờ chúng ta hãy tiếp tục với những gì chúng ta có thể làm trong ba giai đoạn đầu của hoạt động để viết mã CSS hoạt động tốt hơn.

1. Giảm tính toán kiểu

Giống như đã đề cập trước đó, trong giai đoạn "Tính toán lại", trình duyệt sẽ tính toán các kiểu được áp dụng cho các phần tử. Để làm điều này, trước tiên trình duyệt tìm ra tất cả các bộ chọn trong CSS trỏ đến một nút phần tử đã cho trong cây DOM. Sau đó, nó đi qua tất cả các quy tắc kiểu trong các bộ chọn đó và quyết định những quy tắc nào sẽ được áp dụng thực sự cho phần tử.

Để tránh tính toán kiểu tốn kém, giảm các bộ chọn phức tạp và lồng nhau sâu để trình duyệt dễ dàng tìm ra yếu tố nào mà bộ chọn đang đề cập đến. Điều này làm giảm thời gian tính toán.

Những cách khác để tuyển dụng bao gồm giảm số lượng quy tắc phong cách (có thể ở đâu), loại bỏ CSS không sử dụng và tránh dự phòng và ghi đè, để trình duyệt không phải lặp đi lặp lại cùng một kiểu trong quá trình tính toán kiểu.

2. Giảm phản xạ

Phản xạ hoặc thay đổi Bố cục trong một phần tử là các quá trình rất "tốn kém" và chúng có thể là một vấn đề thậm chí còn lớn hơn khi phần tử trải qua các thay đổi bố cục có số lượng trẻ em đáng kể (vì Phản xạ xếp tầng xuống).

Phản xạ được kích hoạt bằng cách thay đổi bố cục thành một phần tử, như thay đổi các thuộc tính hình học như chiều cao hoặc kích thước phông chữ, thêm hoặc xóa các lớp thành phần tử, thay đổi kích thước cửa sổ, kích hoạt :bay lượn, Thay đổi DOM bằng JavaScript, v.v..

Giống như trong tính toán kiểu, để giảm Reflows, tránh các bộ chọn phức tạp và cây DOM sâu (một lần nữa, điều này là để ngăn xếp tầng quá mức của Reflows).

Nếu bạn phải thay đổi kiểu bố cục của một thành phần trong trang của bạn, nhắm mục tiêu các kiểu của phần tử ở mức thấp nhất trong hệ thống phân cấp của các phần tử thành phần được làm bằng. Điều này là để thay đổi bố cục không kích hoạt (gần như) bất kỳ Phản xạ nào khác.

Nếu bạn đang hoạt hình một yếu tố đi qua thay đổi bố cục, đưa nó ra khỏi dòng trang bởi vô tư định vị nó, vì Reflow trong các phần tử được định vị tuyệt đối sẽ không ảnh hưởng đến các phần tử còn lại trên trang.

Để tóm tắt:

• Các phần tử đích thấp hơn trong cây DOM khi thay đổi bố cục
• Chọn các yếu tố hoàn toàn định vị cho hoạt hình thay đổi bố cục
• Tránh hoạt hình các thuộc tính bố trí bất cứ khi nào có thể

3. Giảm sơn lại

Repaint đề cập đến việc vẽ các pixel trên màn hình và là một quá trình tốn kém giống như Reflow. Việc sơn lại có thể được kích hoạt bởi Reflows, cuộn trang, thay đổi các thuộc tính như màu sắc, khả năng hiển thị và độ mờ.

Để tránh sơn lại thường xuyên và lớn, sử dụng ít hơn các thuộc tính gây ra chi phí sơn lại như bóng tối.

Nếu bạn đang hoạt hình các thuộc tính của một yếu tố có thể kích hoạt Phát lại trực tiếp hoặc gián tiếp, thì đó sẽ là một lợi thế lớn nếu phần tử đó nằm trong lớp riêng của nó ngăn chặn khả năng vẽ tranh của nó ảnh hưởng đến phần còn lại của trang và kích hoạt tăng tốc phần cứng. Trong việc tích hợp phần cứng, GPU sẽ đảm nhận nhiệm vụ thực hiện các thay đổi hoạt hình trong lớp, tiết kiệm công việc phụ của CPU trong khi tăng tốc quá trình.

Trong một số trình duyệt, độ mờ đục (với giá trị nhỏ hơn 1) và biến đổi (giá trị khác không ai) được tự động thăng cấp lên các lớp mới và tăng tốc phần cứng được áp dụng cho hình ảnh động và chuyển tiếp. Vì vậy, ưu tiên các tính chất này cho hình ảnh động là tốt.

Buộc mạnh mẽ thúc đẩy một yếu tố lên lớp mới và tăng tốc phần cứng Đối với hoạt hình, có hai kỹ thuật được kích hoạt:

1. thêm vào biến đổi: translate3d (0, 0, 0); đến phần tử, lừa trình duyệt kích hoạt tăng tốc phần cứng cho hình ảnh động và chuyển tiếp.
2. thêm sẽ thay đổi thuộc tính cho phần tử, thông báo cho trình duyệt các thuộc tính có khả năng thay đổi trong phần tử trong tương lai. chú thích: Sara Soueidan có một bài viết chuyên sâu và siêu hữu ích về vấn đề này trong trang Dev.Opera.

Để tóm tắt:

• Tránh các kiểu đắt tiền gây ra sơn lại
• Tìm kiếm khuyến mãi lớp và tăng tốc phần cứng cho hình ảnh động và chuyển tiếp lớn.

Lưu ý

(1) Cho đến bây giờ, chúng tôi vẫn chưa động đến việc giảm kích thước tệp CSS. Chúng tôi đã đề cập rằng việc giảm quy tắc kiểu (và các thành phần DOM) giúp cải thiện hiệu suất đáng kể vì trình duyệt sẽ phải làm việc bao nhiêu ít hơn về quá trình tính toán các kiểu. Do hậu quả của việc giảm mã này, viết các bộ chọn tốt hơn và xóa CSS không sử dụng, kích thước tập tin sẽ tự động giảm.

(2) Cũng nên không thực hiện quá nhiều thay đổi hệ quả đối với kiểu của một thành phần trong JavaScript. Thay vào đó, hãy thêm một lớp vào thành phần (sử dụng JavaScript) chứa các kiểu mới để thực hiện các thay đổi này - điều này ngăn chặn các Phản xạ không cần thiết.

(3) Bạn sẽ muốn tránh bố cục đập cũng như (Phản xạ đồng bộ bắt buộc) phát sinh do truy cập và sửa đổi các thuộc tính Bố cục của các phần tử bằng JavaScript. Tìm hiểu thêm về cách thức này giết chết hiệu suất ở đây.