Dưới đây là 9 biểu đồ tóm tắt mà lập trình viên web nào cũng nên hiểu. Hãy đánh dấu bài viết này lại để khi cần xem lại.
1. Lịch sử phát triển của HTML
graph TD A[HTML 1.0 1993] --> B[HTML 2.0 1995] B --> C[HTML 3.2 1997] C --> D[HTML 4.01 1999] D --> E[XHTML 1.0 2000] E --> F[HTML5 2014] F --> G[HTML 5.1 2016] G --> H[HTML 5.2 2017] H --> I[HTML 5.3 2021] I --> J[HTML Living Standard Current]
2. Phân giải tên miền
Phân giải tên miền (DNS resolution) là quá trình chuyển đổi một tên miền (ví dụ: techmaster.vn) thành địa chỉ IP tương ứng (ví dụ: 45.118.144.97). Quá trình này là cần thiết vì các hệ thống mạng, bao gồm Internet, dựa vào các địa chỉ IP để định vị và kết nối các thiết bị với nhau.
sequenceDiagram participant User participant Browser participant DNS_Resolver participant Root_DNS_Server participant TLD_DNS_Server participant Authoritative_DNS_Server participant Server User ->> Browser: Nhập URL và gửi yêu cầu Browser ->> DNS_Resolver: Gửi yêu cầu phân giải tên miền DNS_Resolver ->> Root_DNS_Server: Gửi yêu cầu phân giải tên miền Root_DNS_Server ->> DNS_Resolver: Trả về địa chỉ của TLD DNS Server DNS_Resolver ->> TLD_DNS_Server: Gửi yêu cầu phân giải tên miền TLD_DNS_Server ->> DNS_Resolver: Trả về địa chỉ của Authoritative DNS Server DNS_Resolver ->> Authoritative_DNS_Server: Gửi yêu cầu phân giải tên miền Authoritative_DNS_Server ->> DNS_Resolver: Trả về địa chỉ IP của máy chủ DNS_Resolver ->> Browser: Trả về địa chỉ IP của máy chủ Browser ->> Server: Thiết lập kết nối với địa chỉ IP đã phân giải
3. Yêu cầu và trả về một trang web
graph TD A[Nhập URL và gửi yêu cầu] --> B[Phân giải tên miền - DNS Resolution] B --> C[Kết nối TCP và TLS Handshake] C --> D[Gửi yêu cầu HTTP/HTTPS] D --> E[Xử lý yêu cầu tại máy chủ] E --> F[Máy chủ phản hồi] F --> G[Trình duyệt nhận và hiển thị nội dung] G --> H[Tải tài nguyên bổ sung] H --> I[Hoàn tất tải trang] G --> G1[Parsing HTML] G --> G2[Loading CSS] G --> G3[Executing JavaScript] G --> G4[Rendering Page]
4. Trình duyệt phân tích hiển thị HTML
graph TD A[Trình duyệt nhận phản hồi HTTP] --> B[Phân tích nội dung HTML] B --> C[Xây dựng DOM Tree] C --> D[Tải và phân tích các tệp CSS] D --> E[Xây dựng Render Tree] E --> F[Tải và thực thi các tệp JavaScript] F --> G[Cập nhật DOM và Render Tree nếu cần] G --> H[Render nội dung lên màn hình]
5. DOM Tree
DOM (Document Object Model) tree là cấu trúc dữ liệu phân cấp biểu diễn nội dung của một tài liệu web (thường là HTML hoặc XML). Cây DOM cho phép các lập trình viên truy cập và thao tác với các phần tử của trang web thông qua các ngôn ngữ lập trình như JavaScript.
Trang HTML này sẽ có DOM như dưới
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="description" content="A simple document">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Main Heading</h1>
<p>This is a section paragraph.</p>
<img src="image.jpg" alt="Sample Image">
</section>
<article>
<h2>Article Heading</h2>
<p>This is an article paragraph.</p>
</article>
</main>
<footer>
<p>Footer content here.</p>
</footer>
</body>
</html>
htmlgraph TD A[html] A --> B[head] A --> C[body] B --> D[title] B --> E[meta] B --> F[link] C --> G[header] C --> H[main] C --> I[footer] G --> J[nav] J --> K[ul] K --> L[li] L --> M[a] K --> N[li] N --> O[a] H --> P[section] P --> Q[h1] P --> R[p] P --> S[img] H --> T[article] T --> U[h2] T --> V[p] I --> W[p]
6. Lời gọi AJAX
sequenceDiagram participant User participant Browser participant Server User ->> Browser: Thực hiện hành động kích hoạt AJAX (ví dụ: nhấn nút) Browser ->> Browser: Tạo đối tượng XMLHttpRequest Browser ->> Server: Gửi yêu cầu HTTP/HTTPS Server ->> Server: Xử lý yêu cầu Server ->> Browser: Gửi phản hồi HTTP/HTTPS Browser ->> Browser: Xử lý phản hồi (cập nhật DOM, v.v.) Browser ->> User: Hiển thị cập nhật nội dung
Ví dụ lời gọi AJAX khi người dùng ấn nút “Fetch Data”
<button id="fetchData">Fetch Data</button>
<div id="result"></div>
<script>
document.getElementById('fetchData').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send();
});
</script>
7. Virtual DOM
Cấu trúc Cây Ảo:
- Virtual DOM là một bản sao ảo của cây DOM thật, đại diện cho cấu trúc hiện tại của giao diện người dùng.
- Mỗi lần giao diện thay đổi, một Virtual DOM mới được tạo ra.
So sánh (Diffing):
- Khi có sự thay đổi trong giao diện, Virtual DOM mới được so sánh với Virtual DOM cũ.
- Quá trình so sánh này gọi là “diffing”, để xác định sự khác biệt giữa hai cây Virtual DOM.
Tối ưu hóa cập nhật:
- Sau khi phát hiện các thay đổi, Virtual DOM chỉ cập nhật các phần cụ thể của cây DOM thật cần thay đổi, thay vì cập nhật toàn bộ cây DOM.
- Điều này giúp giảm thiểu số lượng thao tác với DOM thật, tăng hiệu suất và giảm thiểu việc render lại không cần thiết.
graph TD A[Người dùng tương tác với UI] --> B[Virtual DOM nhận các thay đổi] B --> C[So sánh với Virtual DOM trước đó - Diffing] C --> D[Tạo ra danh sách các thay đổi - Patch] D --> E[Cập nhật DOM thực tế với các thay đổi] E --> F[UI được cập nhật]
8. Caching trên web server
Caching trên web server có tác dụng quan trọng trong việc tối ưu hóa hiệu suất và trải nghiệm người dùng.
- Caching giúp giảm số lượng yêu cầu xử lý bởi máy chủ, vì các yêu cầu lặp lại có thể được phục vụ từ cache thay vì phải truy cập cơ sở dữ liệu hoặc xử lý lại từ đầu.
- Bằng cách lưu trữ các tài nguyên đã được yêu cầu trước đó (như trang HTML, hình ảnh, tệp CSS và JavaScript), caching giúp tăng tốc độ phản hồi của máy chủ cho các yêu cầu tương tự trong tương lai.
- Với tốc độ phản hồi nhanh hơn, người dùng sẽ có trải nghiệm tốt hơn khi truy cập trang web, giảm thời gian chờ đợi và tăng sự hài lòng.
- Việc phục vụ các tài nguyên từ cache giúp giảm lượng dữ liệu phải truyền tải qua mạng, tiết kiệm băng thông và giảm chi phí cho nhà cung cấp dịch vụ web.
- Caching giúp máy chủ xử lý được nhiều yêu cầu hơn trong cùng một khoảng thời gian, nâng cao khả năng chịu tải của hệ thống, đặc biệt quan trọng trong các tình huống tải cao hoặc tăng đột biến lưu lượng truy cập.
- Các kết quả truy vấn cơ sở dữ liệu có thể được lưu trữ trong cache để sử dụng lại, giảm tải cho cơ sở dữ liệu và cải thiện hiệu suất tổng thể của hệ thống.
graph TD
A[Yêu cầu từ Client] --> B[Web Server nhận yêu cầu]
B --> C{Nội dung có trong Cache không?}
C -->|Có| D[Lấy nội dung từ Cache]
C -->|Không| E[Xử lý yêu cầu và tạo nội dung]
E --> F[Lưu nội dung vào Cache]
D --> G[Trả về phản hồi cho Client]
F --> G9. Phân loại các ứng dụng web theo công nghệ
graph TD A[Phân loại ứng dụng web theo công nghệ chính] A --> B[Ứng dụng web tĩnh] B --> B1[HTML] B --> B2[CSS] B --> B3[JavaScript] A --> C[Ứng dụng web động] C --> C1[Front-end] C1 --> C1a[React] C1 --> C1b[Angular] C1 --> C1c[Vue.js] C --> C2[Back-end] C2 --> C2a[Node.js] C2 --> C2b[Django] C2 --> C2c[Ruby on Rails] A --> D[Ứng dụng web một trang - Single Page App] D --> D1[React] D --> D2[Angular] D --> D3[Vue.js] A --> E[Ứng dụng web nhiều trang - Multiple Pages App] E --> E1[PHP] E --> E2[ASP.NET] E --> E3[JSP] A --> F[Ứng dụng web tiến bộ - Progressive Web App] F --> F1[Service Workers] F --> F2[Web App Manifests] F --> F3[IndexedDB] A --> G[Ứng dụng web thời gian thực] G --> G1[WebSockets] G --> G2[Socket.io] G --> G3[Firebase]
Bình luận