Written by dammecode

Frontend cơ bản – Các bước để render một trang web

22730367_1979097669024702_8252044649026734308_n
Anh đẹp trai có biết là khi anh bắt đầu vào Thiên Địa thì trình duyệt đã làm những gì không?

Bạn đã bao giờ thắc mắc điều gì xảy ra khi bạn lướt web không? Những gì xảy ra không đơn giản như bạn nghĩ:

  1. Bạn gõ URL vào thanh địa chỉ trình duyệt
  2. Trình duyệt phân tích URL để xác địnhprotocol, host, port, và đường dẫn
  3. Nó sau đó tạo ra một HTTP request
  4. Để đi đến được server, trình duyệt cần “dịch” địa chỉ host (dành cho con người để có thể đọc được) thành một số IP, điều này được thực hiện nhờ DNS lookup.
  5. Sau đó một socket cần được mở từ máy tính người dùng đến địa chỉ IP nói trên, qua một cổng cụ thể (thường là cổng 80)
  6. Khi kết nối đã được mở, HTTP request sẽ được gửi tới host
  7. Host chuyển tiếp request đến server phần mềm (thường là Apache), vốn được cấu hình để lắng nghe ở cổng đã chỉ định
  8. Server phân tích request (thường chủ yếu là đường dẫn), và chạy các plugin cần thiết để phục vụ request đó
  9. Plugin truy cập đến request và chuẩn bị một HTTP response (phản hồi)
  10. Để tạo ra được một response thường yêu cầu truy cập đến Database để lấy dữ liệu cần thiết
  11. Dữ liệu từ Database cùng với các thông tin khác được kết hợp lại thành một chuỗi text dài (thường là HTML)
  12. Plugin tổng hợp dữ liệu trên cùng với meta data (dữ liệu header) và gửi HTTP response lại cho trình duyệt
  13. Trình duyệt nhận response và phân tích dữ liệu HTML (thường là bị hỏng hóc) trong response.
  14. DOM tree được dựng lên từ HTML
  15. Các request sẽ tiếp tục được gửi đến server với mỗi resource tìm thấy trong dữ liệu HTML (thường là ảnh, style sheet và JavaScript). Quay lại từ bước 3 với mỗi resource.
  16. Stylesheet được phân tích và thông tin render ở mỗi stylesheet được gắn vào node tương ứng trong DOM tree.
  17. Javascript được phân tích và thực thi, và như vậy các DOM node bị di chuyển cùng với thông tin style được update tương ứng.
  18. Trình duyệt render trang web lên màn hình từ thông tin DOM tree và style
  19. Bạn bây giờ đã nhìn thấy trang web hiển thị lên trên màn hình 🙂
  20. Bạn cảm thấy bực vì toàn bộ quá trình quá chậm chạp.

Tôi cũng bực như vậy khi mà toàn bộ các bước kể trên mất hơn một phần mười giây. Nhưng ít nhất thì giờ tôi cũng có thông tin này để đọc chơi khi chờ nốt một phần nhỏ của giây trôi qua để trang web được render xong.

Chúng ta, ai cũng bực.

Đam mê code via friendlybit.com

Leave a comment