How the browser renders the page
Bài viết tham khảo từ: https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572 How the browser renders the page Khi trình duyệt nhận được những đoạn mã HTML của chúng ta, nó sẽ phân tích cú pháp và làm đơn giản hóa các đoạn mã. Việc đọc hiểu và làm đơn giản hóa được thực ...
Bài viết tham khảo từ: https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572
How the browser renders the page
Khi trình duyệt nhận được những đoạn mã HTML của chúng ta, nó sẽ phân tích cú pháp và làm đơn giản hóa các đoạn mã. Việc đọc hiểu và làm đơn giản hóa được thực hiện thống nhất giữa tất cả các trình duyệt dựa trên HTML5 DOM Specification. Sau đó nó chạy qua một loạt các bước để xây dựng và hiển thị trang. Dưới đây là tổng quan tất cả các bước.
- Sử dụng HTML để tạo ra mô hình đối tượng tài liệu (Document Object Model - DOM).
- Sử dụng CSS để tạo ra CSS Object Model (CSSOM).
- Thực thi những đoạn mã trên DOM và CSSOM.
- Kết hợp DOM và CSSOM để tạo Render Tree.
- Sử dụng Render Tree để bố trí kích thước và vị trí của tất cả các phần tử.
- Hiển thị trang.
Bước 1 — HTML
Trình duyệt bắt đầu đọc những đoạn mã Markup từ trên xuống dưới, từ trái qua phải và sử dụng nó để tạo ra DOM bằng cách chia nó ra thành các Nodes (Nút).
Tối ưu hóa HTML
- Mã Styles đặt đầu tài liệu, mã Scripts đặt cuối tài liệu. Quy tắc chung là tải các đoạn mã Styles càng sớm càng tốt và các đoạn mã Scripts càng muộn càng tốt. Bởi vì các đoạn mã Scripts yêu cầu HTML và CSS hoàn thành phân tích cú pháp trước khi chúng thực thi. Do đó chúng ta đặt các đoạn mã phong cách (Styles) lên trên đầu để có thời gian tính toán trước khi biên dịch và thực thi các đoạn mã Scripts của chúng ta ở phía dưới.
- Dọn dẹp và nén mã Nén mã: Áp dụng cho tất cả các nội dung mà chúng ta deliver, bao gồm HTML, CSS, JavaScript, hình ảnh.. Dọn dẹp: Loại bỏ bất kỳ các kí tự, đoạn mã không cần thiết, bao gồm khoảng trống, nhận xét,...
- Khả năng tiếp cận Khả năng tiếp cận các bạn có thể hiểu nôm na là SEO nhé. Mặc dù điều này sẽ không làm tăng khả năng tải trang, nhưng nó rất hữu ích trong việc đáp ứng, làm thỏa mãn sự hài lòng của người dùng. Sử dụng các nhãn role, aria cho elements khi cần thiết, cung cấp text alt cho images, và rất rất nhiều yếu tố khác nữa, các bạn có thể tìm thấy chúng ở đây nhé http://www.clarissapeterson.com/2012/11/html5-accessibility/ Sử dụng các công cụ như WAVE để xác định những nơi trên trang Web bạn có thể cải thiện với khả năng tiếp cận.
Bước 2 — CSS
Khi trình duyệt tìm thấy bất kỳ phong cách (Style) nào liên quan đến Nodes, có thể là External, Internal hay Inline Styles. Nó sẽ ngừng render DOM và sử dụng các nút này để tạo CSSOM. Đó là lý do tại sao chúng ta gọi CSS là "Render Blocking".
// External stylesheet
<link rel="stylesheet" href="styles.css">
// Internal styles
<style>
h1 {
font-size: 18px;
}
</style>
// Inline styles
<button style="background-color: blue;">Click me</button>
Việc xây dựng CSSOM ngăn chặn sự hiển thị của trang vì vậy nhiệm vụ của chúng ta là phải tải phong cách (Styles) càng sớm càng tốt trên cây, làm cho chúng trở nên nhẹ nhất có thể.
Tối ưu hóa CSS
- Sử dụng media attributes
- Hoãn tải CSS Các bạn đọc code để hiểu nhé
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main">
Important above the fold content.
</div>
<div class="secondary">
Below the fold content.
Stuff you won't see until after page loads and you scroll down.
</div>
<script>
window.onload = function () {
// load secondary.css
}
</script>
</body>
</html>
- Ít cụ thể hơn Các bạn đọc code để hiểu nhé
// More specific selectors == bad
.header .nav .menu .link a.navItem {
font-size: 18px;
}
// Less specific selectors == good
a.navItem {
font-size: 18px;
}
- Chỉ deliver những thứ cần thiết Điều này nghe có vẻ ngớ ngẩn, nhưng nếu bạn đã làm việc trên giao diện người dùng (front end) trong bất kỳ khoảng thời gian nào bạn sẽ biết một trong những vấn đề lớn với CSS là tính không thể đoán trước được từ việc xóa nội dung. Nguyên nhân của của vấn đề này thường xuất phát từ phía người dùng, designer, ... Các bạn có thể tham khảo tool cắt bớt CSS uncss .
Bước 3 — JavaScript
Trình duyệt sẽ tiếp tục xây dựng các nút DOM / CSSOM cho đến khi nó tìm thấy bất kỳ nút JavaScript nào, ví dụ như các tập lệnh external hoặc inline.
// An external script
<script src="app.js"></script>
// An internal script
<script>
alert("Oh, hello");
</script>
Trình duyệt sẽ ngừng phân tích các nút, hoàn thành việc xây dựng CSSOM, thực hiện kịch bản, sau đó tiếp tục. Đó là lý do tại sao chúng ta gọi JavaScript là "Parser Blocking".
Tối ưu hóa JavaScript
Tối ưu hóa Scripts là một trong những điều quan trọng nhất mà chúng ta có thể làm và cũng là một trong những điều mà hầu hết các trang web làm rất tệ.
- Load Script bất đồng bộ. Bằng cách sử dụng thuộc tính async trên tập lệnh của chúng ta, chúng ta có thể cho trình duyệt tiếp tục tải xuống với chủ đề khác có mức độ ưu tiên thấp nhưng không chặn phần còn lại của việc tải trang. Ngay sau khi tải xong nó sẽ chạy.
<script src="async-script.js" async></script>
- Hoãn tải các tập lệnh Scripts Trì hoãn (defer) rất giống với async ở chỗ nó sẽ không chặn việc tải trang. Tuy nhiên, nó sẽ chờ cho đến khi HTML của chúng ta đã được phân tích cú pháp và sẽ thực hiện theo thứ tự xuất hiện.
<script src="defer-script.js" defer></script>
- ...
Bước 4— Render Tree
Khi tất cả các nút (Nodes) đã được đọc và DOM và CSSOM đã sẵn sàng để kết hợp, trình duyệt sẽ xây dựng Render Tree.
Nếu chúng ta ví nút (Nodes) là từ, Mô hình Đối tượng (Object Models) là các câu, thì Render Tree sẽ là một trang đầy đủ. Bây giờ trình duyệt đã có mọi thứ nó cần để hiển thị trang.
Bước 5 - Layout
Bước này xác định kích thước và vị trí của tất cả các yếu tố trên trang.
Bước 6 - Hiển thị trang
Và cuối cùng là bước hiển thị trang.
Tất cả những điều này thường xảy ra trong vài giây hoặc một phần mười giây. Công việc của chúng ta là làm nó nhanh hơn.
Bài viết của mình đến đây là kết thúc. Hi vọng, nó giúp ích được mọi người.
Bài viết chủ yếu tham khảo từ https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572. Đây là một bài viết rất hay, hay nhất mà mình đã từng đọc về chủ đề Tối ưu hóa giao diện người dùng.
Các bạn đọc thêm nhé. Chúc các bạn học tốt!
