Trình duyệt đã làm những gì để hiện thị cho người dùng?, quy luật tải ra sao? làm như thế nào để giúp website bạn load nhanh hơn?
Bài viết này mình chia sẻ về chủ đề những bước và những quá trình trình duyệt làm việc để hiện thị nội dung cho người dùng.
Bạn nên hiểu những kiến thức cơ bản này để giúp bạn trong quá trình tối ưu tăng tốc độ load website.
Mỗi một bước đều là những chủ đề rất rộng vì vậy bài viết này chúng mình chỉ tìm hiểu sơ sơ qua để giúp ích bạn trong quá trình tăng tốc độ website và mỗi một bước mình sẽ cố gắng gợi ý những ý tưởng để giúp bạn tăng tốc độ website.
Mục đích bài viết này để bạn hiểu hơn về quá trình tối ưu tốc độ load website gì.
Mục lục
Những bước diễn ra trong quá trình trang web hiển thị là gì?
- Yêu cầu bắt đầu được thực hiện khi người dùng click vào một liên kết – bước 1: yêu cầu
- File HTML (trang web) và các tài nguyên mà html yêu cầu thêm như các file như javascript, css, ảnh, font…của nó được tải về – bước 2: đáp ứng yêu cầu
- Trình duyệt sử dụng các tài nguyên đã được tải về của trang để xây dựng trang – bước 3: xây dựng
- Trang sau đó được hiển thị (render) cho người dùng – bước 4: hiển thị
Đây là 4 bước chính diễn ra của quá trình trang web hiển thị cho người dùng.
Giờ chúng mình cùng thảo luận từng cái trong mỗi bước trên để đưa ra được cái nhìn rõ ràng hơn về điều đó đã thực sự xảy ra khi một trang web hiển thị trên trình duyệt như thế nào.
- Yêu cầu (Request)
- Đáp ứng yêu cầu (Response)
- Xây dựng (Build)
- Hiển thị (Render)
Mỗi bước này thông thường được thực hiện lặp lại nhiều lần trong khi tải trang trừ bước thứ 2 Đáp ứng yêu cầu (Response) nếu có trình duyệt cache thì không cần phải làm nữa.
Thực tế công việc tối ưu hóa tốc độ load website chủ yếu tập trung ở bước Đáp ứng yêu cầu (Response) tối ưu cache, file, websever… sẽ nằm ở bước này. Đến bước này mình sẽ chia sẻ kỹ nhất trong bài viết này.
Yêu cầu
Cách thức phổ biến nhất để truy cập vào một trang web nhận được yêu cầu html là :
- Khi một liên kết được ai đó click vào đường dẫn link
- Hay yêu cầu cũng sẽ xuất hiện khi một trang được làm mới lại (F5) hoặc (CTRL + F5 – tức là refreshed và đồng xóa luôn cache trình duyệt chắc phím tắt trên windows này lập trình viên, nhà phát triển website thì không còn xa lạ)
- Khi một URL được nhập vào trong trình duyệt
Trình duyệt sẽ bắt đầu yêu cầu file html của máy chủ websever của bạn, tương ứng với đường dẫn url mà người dùng yêu cầu.
Đáp ứng/Response
Máy chủ của bạn sẽ gửi một file html tới cho trình duyệt.
Sẽ có 2 trường hợp:
- Máy chủ đã có cache html page trang web mà người dùng yêu cầu
- Máy chủ chưa có cache html page trang web mà người dùng yêu cầu
Giới thiệu qua về cache html page nếu ai chưa biết thì cache html page là tầng cache thứ 3 trong 5 tầng cache của WordPress tức là Khi bạn tải một trang web WordPress, WordPress phải xử lý một số lượng lớn các tệp PHP và truy vấn cơ sở dữ liệu. rồi tạo file html đưa người dùng, để người thứ 2 truy cập vào đó WordPress không phải phải xử lý một số lượng lớn các tệp PHP và không phải truy vấn cơ sở dữ liệu nữa, lấy luôn html của thứ nhất đã truy cập để phục vụ người thứ 2.
Trong trường hợp bạn chưa có hay chưa kích hoạt cache page thì sẽ hoạt động như thế này.
Trong trường hợp bạn đã có cache page html thì sẽ hoạt động như thế này.
Nếu bạn sử dụng CDN thì nó sẽ ở khâu ở giữa phân phối, nhưng thôi mình chỉ chia sẻ bước cơ bản và đơn giản bạn không sử dụng CDN.
Phân tích dữ liệu HTML
Khi trình duyệt đã có file html, giờ trình duyệt bắt đầu đọc file html.
Nếu muốn xem file html của bạn chông như thế nào thì:
Bạn có xem: view-source trang web đó.
Cách xem view-source thì bạn chỉ cần trình duyệt google chrome xong vào trang web của bạn muốn xem rồi ấn tổ hợp phím CTRL + U ( nó sẽ ra đoạn đường dẫn ví dụ là trang web của mình này view-source:https://wptangtoc.com/ )
Quá trình phân tích dữ liệu html theo mặc định sẽ có quy luật từ trên xuống dưới và từ trái qua phải, khi gặp một file nào đó như css, javascript, ảnh… thì nó sẽ ngừng tạm thời quá trình phân tích html để tải và xử lý dữ liệu file đó, trong thuật ngữ tăng tốc độ load website thì nó được gọi là chặn hiển thị html. mình có bài viết hướng dẫn thứ tự tải tối ưu cho WordPress bạn có thể tham khảo để giúp website của bạn tăng tốc hơn nhé.
Nếu trình duyệt người dùng đã có sẵn cache file đó trong trình duyệt sẽ được bỏ qua quá trình tải xuống, còn nếu trình duyệt chưa có file nào đó thì sẽ yêu cầu tải xuống file đó.
Xây dựng trang /Build
Một khi trình duyệt web có được các tài nguyên cần thiết mà html yêu cầu, giờ mới bắt đầu tiến hành xây dựng trang.
Cách một trình duyệt web xây dựng trang là thông qua kết hợp thông tin tìm thấy trong tài liệu (file HTML) và thông tin được tìm thấy trong các tài nguyên khác như css,javascript, ảnh…
Có ba bước mà trình duyệt thực hiện để xây dựng trang.
Xây dựng DOM
Xây dựng CSSOM
Xây dựng Render Tree
Xây dựng Dom
DOM là viết tắt của “Document Object Map”. Nó về cơ bản như là một bản đồ nơi mà mọi thứ được hiển thị trên trang theo dạng thức HTML.
DOM giúp bạn xác định logo bạn đặt chỗ nào, chữ này đặt ở chỗ nào…
Dom hiểu một cách đơn giản theo định nghĩa của WP Tăng Tốc: nếu muốn tìm bạn, nếu nhà của bạn nhiều phòng thì tìm bạn sẽ khó khăn hơn, nếu nhà của bạn ít phòng đi tìm bạn sẽ nhanh và dễ dàng hơn. (hiểu đơn giản với DOM là như vậy).
Dom càng ít thì thời gian xây dựng trang sẽ càng nhanh hơn, trình duyệt người dùng không phải vất vả nhiều xây dựng trang.
Google khuyến cao về phần tử DOM:
Dưới tổng số hơn 1.500 nút.
Dưới độ sâu lớn hơn 32 nút.
Hướng dẫn giảm phần tử dom cho website WordPress
Để biết chính xác phần tử dom của bạn chông như thế nào thì bạn có thể sử dụng chrome dev tool rồi đến phần element.
Xây dựng CSSOM
CSSOM là viết tắt của cụm từ “CSS Object Map”, Nó về cơ bản là khi bạn sử dụng class hay style cho một phần tử html, thì CSSOM sẽ phải làm việc.
CSSOM vạch ra cách thức mọi thứ nên được hiển thị khi style hay class.
Ví dụ:
<div> style="color:red">Gia Tuấn</div>
style="color:red" sẽ được xây dựng gọi nó là CSSOM
CSSOM xác định chữ của bạn to như thế nào, màu gì, chiều rộng margin ra sao, giao diện thế nào, bố cục …
Mỗi lần người dùng tải lại trình duyệt thì CSSOM sẽ phải làm lại từ đầu cho dù người dùng đã có trình duyệt cache, vì vậy mình vẫn khuyến cáo mọi người hãy cố gắng giảm thiểu css, lựa chọn themes được code mã hóa tốt.
Xây dựng Render Tree
CSSOM + DOM là 2 bước trên kết hợp vào với nhau để tạo ra bố cục đầy đủ về cách trang sẽ thực thi được bố cục và định dạng, phong cách như thế nào…
Hiển thị /render
Giờ tất cả tính toán đã thực hiện xong, trình duyệt có thể thực sự hiển thị điều gì đó trên màn hình của người dùng.
Điều này được gọi là First pain hoặc first contentful paint (thông thường First pain và first contentful paint sẽ bằng nhau).
Cách cải thiện first contentful paint
Trong bước cuối cùng này trình duyệt sẽ chuyển đổi mỗi điểm nút dom trong cây dom thành các pixel thực sự hiển thị trên màn hình của người duyệt web.
Khi render hiển thị hoàn tất mọi thứ như vật là đã hoàn tất quá trì tải và hiển thị.
Để lại một bình luận