HTML là phía máy khách hoặc phía máy chủ

Question

Kể từ buổi bình minh, phương pháp thông thường để đưa HTML của bạn lên màn hình là sử dụng kết xuất phía máy chủ. Đó là cách duy nhất. Bạn đã tải lên. html trên máy chủ của bạn, sau đó máy chủ của bạn đã chạy và biến chúng thành tài liệu hữu ích trên trình duyệt của người dùng của bạn

Nội dung chính Show

Cách kết xuất phía máy chủ hoạt động
Cách kết xuất phía máy khách hoạt động
Ưu và nhược điểm của từng phương pháp
Tại sao ứng dụng khách HTML
Là ngôn ngữ kịch bản phía máy khách HTML?
Ngôn ngữ phụ nào là HTML?
Máy khách và máy chủ trong HTML là gì?

Kết xuất phía máy chủ cũng hoạt động rất tốt vào thời điểm đó, vì hầu hết các trang web chủ yếu chỉ để hiển thị hình ảnh và văn bản tĩnh, ít tương tác.

Chuyển nhanh đến ngày hôm nay và đó không còn là vấn đề nữa. Bạn có thể lập luận rằng các trang web ngày nay giống các ứng dụng giả làm trang web hơn. Bạn có thể sử dụng chúng để gửi tin nhắn, cập nhật thông tin trực tuyến, mua sắm, v.v. Web đã tiến bộ hơn rất nhiều so với trước đây

Vì vậy, có nghĩa là kết xuất phía máy chủ đang dần bắt đầu lùi bước so với phương pháp kết xuất trang web ngày càng phát triển ở phía máy khách

Vậy phương pháp nào là lựa chọn tốt hơn? . Bạn cần hiểu những ưu và nhược điểm, sau đó tự quyết định lộ trình nào phù hợp nhất với mình

Cách kết xuất phía máy chủ hoạt động

Kết xuất phía máy chủ là phương pháp phổ biến nhất để hiển thị thông tin trên màn hình. Nó hoạt động bằng cách chuyển đổi các tệp HTML trong máy chủ thành thông tin có thể sử dụng được cho trình duyệt

Bất cứ khi nào bạn truy cập một trang web, trình duyệt của bạn sẽ yêu cầu máy chủ chứa nội dung của trang web. Yêu cầu thường chỉ mất vài mili giây, nhưng điều đó cuối cùng phụ thuộc vào vô số yếu tố

Tốc độ internet của bạn
vị trí của máy chủ
có bao nhiêu người dùng đang cố gắng truy cập trang web
và trang web được tối ưu hóa như thế nào, để kể tên một số

Khi yêu cầu được xử lý xong, trình duyệt của bạn sẽ lấy lại HTML được hiển thị đầy đủ và hiển thị nó trên màn hình. Nếu sau đó bạn quyết định truy cập một trang khác trên trang web, trình duyệt của bạn sẽ một lần nữa đưa ra yêu cầu khác về thông tin mới. Điều này sẽ xảy ra mỗi khi bạn truy cập một trang mà trình duyệt của bạn không có phiên bản được lưu trong bộ nhớ cache.

Không có vấn đề gì nếu trang mới chỉ có một vài mục khác với trang hiện tại, trình duyệt sẽ yêu cầu toàn bộ trang mới và sẽ hiển thị lại mọi thứ từ đầu

Lấy ví dụ tài liệu HTML này đã được đặt trong một máy chủ tưởng tượng có địa chỉ HTTP là example.testsite.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="http://example.testsite.com/other.html.">Link</a>
  </body>
</html>

Nếu bạn nhập địa chỉ của trang web ví dụ vào URL của trình duyệt tưởng tượng của mình, trình duyệt tưởng tượng của bạn sẽ đưa ra yêu cầu tới máy chủ đang được URL đó sử dụng và mong đợi phản hồi của một số văn bản hiển thị trên trình duyệt. Trong trường hợp này, những gì bạn nhìn thấy trực quan sẽ là tiêu đề, nội dung đoạn văn và liên kết

Bây giờ, giả sử rằng bạn muốn nhấp vào liên kết từ trang được hiển thị có chứa đoạn mã sau

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <p>This is some more content from the other.html</p>
  </body>
</html>

Sự khác biệt duy nhất giữa trang trước và trang này là trang này không có liên kết và thay vào đó là một đoạn văn khác. Logic sẽ chỉ ra rằng chỉ nội dung mới được hiển thị và phần còn lại nên được để yên. Than ôi, đó không phải là cách kết xuất phía máy chủ hoạt động. Điều thực sự sẽ xảy ra là toàn bộ trang mới sẽ được hiển thị chứ không chỉ nội dung mới

Mặc dù có vẻ không phải là vấn đề lớn đối với hai ví dụ này, nhưng hầu hết các trang web đều không đơn giản như vậy. Các trang web hiện đại có hàng trăm dòng mã và phức tạp hơn nhiều. Bây giờ, hãy tưởng tượng bạn đang duyệt một trang web và phải đợi từng trang hiển thị khi điều hướng trang web. Nếu bạn đã từng truy cập một trang web WordPress, bạn sẽ thấy chúng có thể chậm như thế nào. Đây là một trong những lý do tại sao

Về mặt sáng sủa, kết xuất phía máy chủ rất tốt cho SEO. Nội dung của bạn hiện diện trước khi bạn nhận được nó, vì vậy các công cụ tìm kiếm có thể lập chỉ mục và thu thập thông tin tốt. Một cái gì đó không phải như vậy với kết xuất phía máy khách. Ít nhất là không đơn giản

Cách kết xuất phía máy khách hoạt động

Khi các nhà phát triển nói về kết xuất phía máy khách, họ đang nói về kết xuất nội dung trong trình duyệt bằng JavaScript. Vì vậy, thay vì lấy tất cả nội dung từ chính tài liệu HTML, bạn sẽ nhận được một tài liệu HTML cơ bản với tệp JavaScript sẽ hiển thị phần còn lại của trang web bằng trình duyệt

Đây là một cách tiếp cận tương đối mới để hiển thị trang web và nó không thực sự trở nên phổ biến cho đến khi các thư viện JavaScript bắt đầu kết hợp nó vào phong cách phát triển của họ. Một số ví dụ đáng chú ý là Vue. js và phản ứng. js, mà tôi đã viết thêm ở đây

Quay trở lại trang web trước đó, example.testsite.com, giả sử rằng bây giờ bạn có một chỉ mục. html tệp với các dòng mã sau

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Website</title>
</head>
<body>
  <div id="root">
    <app></app>
  </div>
  <script src="https://vuejs.org"type="text/javascript"></script>
  <script src="location/of/app.js"type="text/javascript"></script>
</body>
</html>

Bạn có thể thấy ngay rằng có một số thay đổi lớn đối với cách lập chỉ mục. html hoạt động khi kết xuất bằng ứng dụng khách

Đối với người mới bắt đầu, thay vì có nội dung bên trong tệp HTML, bạn có một vùng chứa div với id là root. Bạn cũng có hai phần tử script ngay phía trên thẻ đóng body. Một cái sẽ tải Vue. thư viện JavaScript js và thư viện sẽ tải tệp có tên app. js

Điều này hoàn toàn khác so với sử dụng kết xuất phía máy chủ vì máy chủ hiện chỉ chịu trách nhiệm tải phần trừ của trang web. nồi hơi chính. Mọi thứ khác được xử lý bởi thư viện JavaScript phía máy khách, trong trường hợp này là Vue. js và mã JavaScript tùy chỉnh

Nếu bạn thực hiện yêu cầu tới URL chỉ bằng mã ở trên, bạn sẽ nhận được một màn hình trống. Không có gì để tải vì nội dung thực tế cần được hiển thị bằng JavaScript

Để khắc phục điều đó, bạn sẽ đặt các dòng mã sau vào ứng dụng. tập tin js

var data = {
        title:"My Website",
        message:"This is an example of my new website"
      }
  Vue.component('app', {
    template:
    `
    <div>
    <h1>{{title}}</h1>
    <p id="moreContent">{{message}}</p>
    <a v-on:click='newContent'>Link</a>
    </div>
    `,
    data: function() {
      return data;
    },
    methods:{
      newContent: function(){
        var node = document.createElement('p');
        var textNode = document.createTextNode('This is some more content from the other.html');
        node.appendChild(textNode);
        document.getElementById('moreContent').appendChild(node);
      }
    }
  })
  new Vue({
    el: '#root',
  });

Bây giờ nếu bạn truy cập URL, bạn sẽ thấy nội dung giống như bạn đã làm trong ví dụ phía máy chủ. Sự khác biệt chính là nếu bạn nhấp vào liên kết trang để tải thêm nội dung, trình duyệt sẽ không đưa ra yêu cầu khác cho máy chủ. Bạn đang kết xuất các mục bằng trình duyệt, vì vậy, thay vào đó, trình duyệt sẽ sử dụng JavaScript để tải nội dung mới và Vue. js sẽ đảm bảo rằng chỉ có nội dung mới được hiển thị. Mọi thứ khác sẽ được để lại một mình

Điều này nhanh hơn nhiều vì bạn chỉ tải một phần rất nhỏ của trang để tìm nạp nội dung mới, thay vì tải toàn bộ trang

Tuy nhiên, có một số sự đánh đổi khi sử dụng kết xuất phía máy khách. Vì nội dung không được hiển thị cho đến khi trang được tải trên trình duyệt, nên SEO cho trang web sẽ bị ảnh hưởng. Có nhiều cách để giải quyết vấn đề này, nhưng nó không dễ dàng như với kết xuất phía máy chủ

Một lưu ý khác là trang web/ứng dụng của bạn sẽ không thể tải cho đến khi TẤT CẢ JavaScript được tải xuống trình duyệt. Điều này có ý nghĩa, vì nó chứa tất cả nội dung cần thiết. Nếu người dùng của bạn đang sử dụng kết nối internet chậm, điều đó có thể khiến thời gian tải ban đầu của họ hơi lâu

Ưu và nhược điểm của từng phương pháp

Vì vậy, có bạn có nó. Đó là những khác biệt chính giữa kết xuất phía máy chủ và phía máy khách. Chỉ bạn, nhà phát triển mới có thể quyết định tùy chọn nào là tốt nhất cho trang web hoặc ứng dụng của bạn

Dưới đây là bảng phân tích nhanh về ưu và nhược điểm của từng phương pháp

Ưu điểm phía máy chủ

Công cụ tìm kiếm có thể thu thập dữ liệu trang web để SEO tốt hơn
Tải trang ban đầu nhanh hơn
Tuyệt vời cho các trang web tĩnh

Nhược điểm phía máy chủ

Yêu cầu máy chủ thường xuyên
Kết xuất trang tổng thể chậm
Tải lại toàn bộ trang
Tương tác trang web không phong phú

Ưu điểm phía khách hàng

Tương tác trang web phong phú
Kết xuất trang web nhanh sau lần tải đầu tiên
Tuyệt vời cho các ứng dụng web
Lựa chọn mạnh mẽ các thư viện JavaScript

Nhược điểm phía khách hàng

SEO thấp nếu không được triển khai chính xác
Tải ban đầu có thể cần nhiều thời gian hơn
Trong hầu hết các trường hợp, yêu cầu một thư viện bên ngoài

Nếu bạn muốn tìm hiểu thêm về Vue. js, hãy xem trang web của tôi tại juanmvega. com cho video và bài viết

QUẢNG CÁO

Cristian Vega

Xin chào. Tên tôi là Cristian Vega. Tôi là Giám đốc Kỹ thuật Phần mềm với niềm đam mê mãnh liệt đối với phát triển giao diện người dùng và công nghệ đám mây

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tại sao ứng dụng khách HTML

HTML, CSS và JS thực sự được thực thi ở phía máy khách. Lý do nằm trong tệp PHP của bạn, là vì chúng tôi cần một số cách để phân phối mã cho khách hàng .

Là ngôn ngữ kịch bản phía máy khách HTML?

Kịch bản phía máy khách bao gồm các ngôn ngữ như HTML, CSS, JavaScript . Nó giúp giảm tải cho máy chủ.

Ngôn ngữ phụ nào là HTML?

Các ngôn ngữ được sử dụng cho giao diện người dùng là HTML, CSS và JavaScript trong khi các ngôn ngữ được sử dụng cho giao diện người dùng bao gồm Java, Ruby, Python, .

Máy khách và máy chủ trong HTML là gì?

Trong kiến trúc máy khách-máy chủ, khi máy khách gửi yêu cầu dữ liệu đến máy chủ thông qua internet, máy chủ sẽ chấp nhận quy trình được yêu cầu và gửi lại các gói dữ liệu được yêu cầu . Khách hàng không chia sẻ bất kỳ tài nguyên nào của họ. . Clients do not share any of their resources.

programming html