Trong vài tuần tới, tôi sẽ chia sẻ một số chủ đề từ hướng dẫn tại đây. Hôm nay, chúng ta sẽ xem xét cách hiển thị nội dung bằng vanilla JavaScript

Chúng ta hãy đi đến đó

Phương pháp render()

React có một chức năng tên là render() cho phép bạn chuyển một mẫu và phần tử để kết xuất nó vào và nó xử lý phần còn lại

Chúng ta có thể tạo một cái gì đó tương tự chỉ với một vài dòng vanilla JavaScript. Trước tiên, hãy thiết lập phương pháp render() của chúng tôi

var render = function (template, node) {
	// Codes goes here...
};

Điều này tuân theo cấu trúc tương tự như React, nơi bạn chuyển vào một mẫu và nút để kết xuất nó thành

Để hiển thị nội dung, chúng tôi sẽ sử dụng

var render = function (template, node) {
	node.innerHTML = template;
};

0, một thuộc tính cho phép bạn đặt HTML bên trong của một phần tử

var render = function (template, node) {
	node.innerHTML = template;
};

Bây giờ, chúng ta có thể hiển thị nội dung như thế này

var template = '
Hello world!
';
render(template, document.querySelector('#main'));

Đây là bản demo hoạt động

Kiểm tra xem nút có tồn tại không

Một điều chúng ta nên làm là đảm bảo rằng một nút tồn tại trước khi cố gắng đặt nó là

var render = function (template, node) {
	node.innerHTML = template;
};

0. Nếu không, chúng tôi có thể ném một lỗi

Chúng tôi chỉ cần kiểm tra xem nút đó đã được cung cấp và tồn tại chưa, và nếu không, hãy

var render = function (template, node) {
	node.innerHTML = template;
};

0 để kết thúc chức năng của chúng tôi

var render = function (template, node) {
	if (!node) return;
	node.innerHTML = template;
};

Tại sao một nút thay vì một bộ chọn?

Ban đầu, tôi nghĩ đến việc chuyển vào một bộ chọn thay vì một nút và sử dụng

var render = function (template, node) {
	node.innerHTML = template;
};

1 để đưa nút vào bên trong hàm render() của chúng tôi. Điều đó chắc chắn sẽ dễ dàng hơn

var render = function (template, selector) {
	var node = document.querySelector(selector);
	if (!node) return;
	node.innerHTML = template;
};
render(template, '#main');

Có hai lý do bạn sẽ không muốn làm điều này

1. Nếu bạn đã có nút (ví dụ: để thêm lớp hoặc thuộc tính dữ liệu), thì không có lý do gì để truy vấn lại nút đó trong DOM
2. Bạn có thể muốn hiển thị nội dung thành phần tử bạn đã tạo nhưng chưa đưa vào DOM

Gì bây giờ?

Đó là một chức năng cơ bản của render(). Ngày mai, chúng ta sẽ xem xét cách hỗ trợ các mẫu động và có điều kiện

Nếu bạn đã mua bộ hướng dẫn bỏ túi hoàn chỉnh, bạn sẽ nhận được “Ứng dụng web Vanilla JS” dưới dạng bản cập nhật miễn phí khi nó ra mắt

Kết xuất là một quy trình được sử dụng trong phát triển web để biến mã trang web thành các trang tương tác mà người dùng nhìn thấy khi họ truy cập trang web. Thuật ngữ này thường đề cập đến việc sử dụng mã HTML, CSS và JavaScript. Quá trình này được hoàn thành bởi một công cụ hiển thị, phần mềm được trình duyệt web sử dụng để hiển thị trang web. Do có sự liên kết chặt chẽ với trình duyệt web, công cụ kết xuất thường được gọi là công cụ trình duyệt

Cách trình duyệt hiển thị các trang web

Trình duyệt web hiển thị các trang web theo trình tự sau

Xây dựng DOM và CSSOM từ mã thô

• Trong khi tải một trang web, máy chủ web sẽ gửi một thư mục tệp chứa mã HTML, CSS và JavaScript tới trình duyệt web của người dùng
• Công cụ trình duyệt chuyển đổi dữ liệu này (byte) thành các ký tự (mã HTML)
• Nó phân tích các ký tự thành mã thông báo, được phân tích tiếp thành các nút
• Công cụ trình duyệt liên kết các nút thành một cấu trúc giống như cây được gọi là Mô hình đối tượng tài liệu (DOM). DOM là biểu diễn JavaScript của HTML
• Đồng thời, trình duyệt chuyển đổi mã CSS thành Mô hình đối tượng CSS (CSSOM) thông qua một quy trình tương tự

Hình ảnh kết xuất HTML từ các nhà phát triển. Google. com

Sử dụng Render Tree để tạo trang web của người dùng cuối

• Công cụ trình duyệt kết hợp DOM và CSSOM để tạo cấu trúc giống như cây được gọi là Cây kết xuất. Cây kết xuất chứa kiểu và thông tin nội dung mà các trình duyệt cần để điền vào trang web để người xem xem, tính toán bố cục cho từng thành phần hiển thị của trang web và vẽ chúng trên màn hình cho chế độ xem của người dùng cuối
• Hoạt động bố trí là bước tiếp theo. Sử dụng Cây kết xuất, công cụ trình duyệt tính toán vị trí của từng thành phần hiển thị của trang web
• Cuối cùng, công cụ trình duyệt thêm hoặc vẽ các thành phần trên màn hình cho chế độ xem của người dùng cuối. Trang web hiện đã được hiển thị

Kết xuất động

JavaScript là một lựa chọn phổ biến để hiển thị các trang web vì nó được sử dụng để tạo trải nghiệm người dùng trực quan. Tuy nhiên, nhiều bot của công cụ tìm kiếm gặp khó khăn trong việc xử lý JavaScript một cách dễ dàng. Do đó, các trang web sử dụng JavaScript để chứa hầu hết nội dung và điều hướng của chúng có nguy cơ bị trình thu thập dữ liệu web ẩn đi. Hiển thị động giải quyết vấn đề này bằng cách hiển thị một trang web như được mô tả ở trên cho người dùng, đồng thời hiển thị HTML tĩnh để bot công cụ tìm kiếm thu thập thông tin và lập chỉ mục

Tốc độ kết xuất trang

Tốc độ kết xuất trang đề cập đến thời gian cần thiết để tạo một trang. Tốc độ kết xuất trang được đo từ khi yêu cầu trình duyệt được gửi (khi người dùng nhấp vào liên kết) đến khi trang hoạt động đầy đủ cho người dùng. Tốc độ kết xuất trang và tốc độ tải trang (thời gian để người dùng xem trang web) được sử dụng thay thế cho nhau vì cả hai quá trình thường xảy ra trong tích tắc của nhau

Tốc độ hiển thị trang thấp làm tăng tỷ lệ thoát và chuyển đổi thấp hơn. Trong một nghiên cứu của Google, thời gian tải cho các phiên bị thoát là 2. Chậm hơn 5 giây so với các đối tác không bị trả lại của nó

Hình ảnh tỷ lệ thoát theo thời gian tải trang từ thinkwithgoogle. com

Do ảnh hưởng của tốc độ kết xuất trang đối với trải nghiệm người dùng, Google đã biến tốc độ trang thành một yếu tố xếp hạng chính thức trong năm 2010. Do đó, giữ tốc độ hiển thị và tốc độ tổng thể của trang càng nhanh càng tốt là một nhiệm vụ quan trọng trong SEO

Tầm quan trọng của Rendering cho SEO

Kết xuất trang web ảnh hưởng đến cách một trang được lập chỉ mục bởi bot và trải nghiệm của người dùng. Hiểu được tác động của kết xuất đối với thứ hạng của công cụ tìm kiếm và kết quả SEO phải là yếu tố quan trọng cần cân nhắc đối với bất kỳ nhóm phát triển web nào

Tóm lại, đối với nhiều trang web (chẳng hạn như các nhà bán lẻ trực tuyến), việc xây dựng một trang web chủ yếu bằng JavaScript có thể mang lại giao diện hấp dẫn về mặt thẩm mỹ và thân thiện với người dùng nhất. Tuy nhiên, các bot của công cụ tìm kiếm có thể gặp khó khăn khi thu thập dữ liệu các trang web này, điều này ảnh hưởng tiêu cực đến thứ hạng của công cụ tìm kiếm và lưu lượng truy cập không phải trả tiền. Mặt khác, các trang hiển thị chậm ảnh hưởng tiêu cực đến cả trải nghiệm người dùng và thứ hạng trên công cụ tìm kiếm

Những sự thật này được xem xét, các nhà phát triển web phải chú ý cẩn thận đến các yêu cầu đối với bot và con người để tối đa hóa hiệu suất SEO

Render nghĩa là gì trong lập trình?

Làm cách nào để hiển thị nội dung nào đó trong JavaScript?

Kết xuất một trang có nghĩa là gì?

JavaScript được hiển thị như thế nào trong trình duyệt?