Bạn không quen với JavaScript? Không biết nó là gì hoặc làm gì? Đừng lo lắng. Bài đăng này sẽ hướng dẫn bạn qua các thuật ngữ chính và khái niệm cơ bản.
JavaScript là một chủ đề phức tạp có thể cực kỳ khó xử lý.
Tuy nhiên, hiểu nó chưa bao giờ quan trọng hơn bởi vì JavaScript đang ngày càng trở nên phổ biến trên các trang web mà chúng tôi quản lý.
Khi web hiện đại tiếp tục phát triển, việc sử dụng JavaScript tiếp tục tăng lên.
Các chuyên gia SEO có thể đã từ lâu khi các trang web ở trạng thái tĩnh và chỉ được viết mã bằng HTML và CSS. Tuy nhiên, các trang web hấp dẫn thường yêu cầu tính tương tác, thường được hỗ trợ bởi JavaScript.
Biểu đồ Lưu trữ HTTP cho thấy sự gia tăng byte JavaScript trên toàn bộ web Số byte JavaScript trên toàn bộ web đã tăng 35 phần trăm trên máy tính để bàn và 62,7 phần trăm trên thiết bị di động trong ba năm qua.
Như Nhà phân tích xu hướng quản trị trang web của Google, John Mueller đã nói: JavaScript “sẽ không biến mất”.
Ngôn ngữ lập trình này ở xung quanh chúng ta, vì vậy chúng ta nên làm quen với nó tốt hơn. Hãy chủ động và tìm hiểu thêm về JavaScript thay vì sợ hãi nó.
Web đã chuyển từ HTML thuần túy – với tư cách là một người làm SEO, bạn có thể nắm bắt được điều đó. Học hỏi từ các nhà phát triển JS và chia sẻ kiến thức SEO với họ. JS sẽ không biến mất.
– 🍌 John 🍌 (@JohnMu) ngày 8 tháng 8 năm 2017
Thường có một quan niệm sai lầm rằng JavaScript chỉ dành cho các nhà phát triển lo lắng.
Tôi lập luận rằng không phải như vậy vì nó có thể gây ra vấn đề cho bất kỳ ai muốn khách hàng và công cụ tìm kiếm có thể truy cập nội dung trang web của họ.
Nếu bạn không hoàn toàn quen thuộc với JavaScript, hoặc thậm chí hoàn toàn không biết nó là gì hoặc làm gì, đừng lo lắng.
Tôi đã tổng hợp một bảng chú giải thuật ngữ chính và các khái niệm cơ bản mà bạn nên biết để giúp bạn bắt đầu hành trình khám phá của mình.
JavaScript là gì?
JavaScript là một ngôn ngữ lập trình cho phép bạn triển khai các tính năng phức tạp trên một trang web, chẳng hạn như các phần tử động hoặc tính tương tác.
JavaScript được thực thi sau khi thông tin từ HTML và CSS trong mã nguồn đã được phân tích cú pháp và xây dựng.
JavaScript sau đó sẽ kích hoạt bất kỳ sự kiện hoặc biến nào được chỉ định bên trong nó, Mô hình đối tượng tài liệu (DOM) sẽ được cập nhật và cuối cùng, JavaScript sẽ được hiển thị trong trình duyệt.
HTML và CSS thường sẽ tạo nền tảng cho cấu trúc của trang và bất kỳ JavaScript nào sẽ thực hiện các chỉnh sửa và thay đổi cuối cùng.
Mô hình Đối tượng Tài liệu (DOM) là gì?
Mô hình đối tượng tài liệu (DOM) được tạo khi một trang được tải và nó được tạo thành từ các nút và đối tượng ánh xạ ra tất cả các phần tử và thuộc tính khác nhau trên một trang.
Trang được ánh xạ theo cách này để các chương trình khác có thể sửa đổi và thao tác trang về cấu trúc, nội dung và kiểu dáng của nó.
Sơ đồ ví dụ cho thấy cách mô hình đối tượng tài liệu được bố trí
Bạn có thể thay đổi các phần tử của DOM của trang thông qua việc sử dụng một ngôn ngữ như JavaScript.
ECMAScript là gì?
ECMAScript (ES) là một ngôn ngữ kịch bản được tạo ra để chuẩn hóa việc sử dụng mã JavaScript.
Các phiên bản khác nhau của ECMAScript được phát hành khi ngôn ngữ được cập nhật và điều chỉnh theo thời gian, chẳng hạn như ES5 và ES6 (còn được gọi là ES2015).
Vận chuyển là gì?
Bộ chuyển tiếp là một công cụ chuyển đổi mã nguồn sang một ngôn ngữ lập trình khác. Khái niệm này hơi giống Google Dịch, nhưng dành cho mã.
Bạn có thể chuyển đổi một ngôn ngữ nguồn cụ thể thành một ngôn ngữ đích khác, ví dụ: JavaScript sang C ++ hoặc Python sang Ruby.
Đặc biệt, đối với việc kết xuất JavaScript, một trình chuyển đổi từng được khuyến nghị để chuyển đổi ES6 thành ES5 vào thời điểm Google đang sử dụng phiên bản Chrome cũ để kết xuất không hỗ trợ phiên bản mới hơn của ECMAScript, ES6.
Chromium là gì?
Khi hiển thị các trang, Google sử dụng dịch vụ kết xuất web (WRS) để xử lý các trang yêu cầu JavaScript để cung cấp năng lượng cho các trang của chúng.
Để làm điều này, Google sử dụng Chromium, đây là một dự án mã nguồn mở có mã là cơ sở của trình duyệt Chrome.
Khi Chrome được cập nhật, các phiên bản mới của trình duyệt được phát hành với các tính năng mới. Cho đến tháng 5 năm 2019, Googlebot đang sử dụng WRS dựa trên Chrome 41 được phát hành vào năm 2015.
Kể từ đó, Google thông báo rằng họ đang làm cho Googlebot luôn xanh, có nghĩa là WRS của nó sẽ liên tục được cập nhật mỗi khi phiên bản Chrome mới ra mắt.
Ứng dụng một trang (SPA) là gì?
Ứng dụng một trang (SPA) là một trang web hoặc ứng dụng web tự động ghi lại và hiển thị lại một trang khi người dùng tương tác với nó, thay vì đưa ra các yêu cầu riêng biệt đối với máy chủ về nội dung và HTML mới.
Các khung JavaScript có thể được sử dụng để hỗ trợ các phần tử thay đổi động của các SPA.
Angular, Polymer, React & Vue là gì?
Đây là tất cả các loại khung JavaScript khác nhau.
- Angular và Polymer được phát triển bởi Google.
- React được phát triển bởi Facebook.
- Vue được phát triển bởi Evan You, người từng làm việc trong nhóm Angular của Google.
Biểu trưng khung JavaScript Angular, Polymer, React và Vue
Mỗi khung JavaScript đều có ưu và nhược điểm riêng, vì vậy các nhà phát triển sẽ chọn làm việc với khung phù hợp nhất với họ và dự án mà họ đang làm việc.
Nếu bạn muốn tìm hiểu thêm về cách các khuôn khổ khác nhau đo lường, hướng dẫn này sẽ đưa ra một so sánh chi tiết.
Hiển thị JavaScript là gì?
Kết xuất JavaScript liên quan đến việc lấy tập lệnh và các hướng dẫn trong đó, xử lý tất cả, sau đó chạy nó để đầu ra được yêu cầu được hiển thị trong trình duyệt.
Có nhiều phương pháp khác nhau mà bạn có thể sử dụng để kiểm soát cách JavaScript được hiển thị.
Việc yêu cầu JavaScript được hiển thị trên một trang có thể tác động tiêu cực đến hai lĩnh vực chính:
Tốc độ trang web
Công cụ tìm kiếm thu thập thông tin và lập chỉ mục
Tùy thuộc vào phương pháp hiển thị mà bạn sử dụng, bạn có thể giảm tốc độ tải trang và đảm bảo nội dung có thể truy cập được đối với các công cụ tìm kiếm để thu thập thông tin và lập chỉ mục.
Kết xuất trước
Kết xuất trước liên quan đến việc hiển thị nội dung trên một trang trước khi nó được người dùng hoặc công cụ tìm kiếm yêu cầu, để họ nhận được một trang tĩnh với tất cả nội dung trên đó đã sẵn sàng hoạt động.
Bằng cách tải trước một trang theo cách này, điều đó có nghĩa là nội dung của bạn sẽ có thể truy cập được thay vì công cụ tìm kiếm hoặc trình duyệt của người dùng phải tự hiển thị trang.
Kết xuất trước thường được sử dụng cho các bot của công cụ tìm kiếm hơn là con người. Điều này là do một trang tĩnh, được kết xuất trước sẽ kém hấp dẫn hơn đối với người dùng vì nó sẽ thiếu bất kỳ nội dung động hoặc tính tương tác nào.
Kết xuất phía máy chủ
Máy chủ lưu trữ thực hiện công việc nâng cao và hiển thị trang để JavaScript đã được xử lý và nội dung sẵn sàng được chuyển đến trình thu thập thông tin của trình duyệt hoặc công cụ tìm kiếm của người dùng khi được yêu cầu.
Phương pháp này giúp giảm bất kỳ sự căng thẳng nào trên thiết bị của người dùng do xử lý JavaScript và điều này có thể tăng tốc độ tải trang.
Kết xuất phía máy chủ cũng đảm bảo các công cụ tìm kiếm có thể nhìn thấy và lập chỉ mục toàn bộ nội dung.
Kết xuất phía máy khách
Trong quá trình hiển thị phía máy khách, JavaScript được xử lý bởi trình duyệt của người dùng hoặc bởi công cụ tìm kiếm đang yêu cầu một trang.
Máy chủ sẽ xử lý yêu cầu ban đầu, nhưng phần còn lại của công việc xử lý và hiển thị trang thuộc về thiết bị của người dùng hoặc công cụ tìm kiếm.
Người ta thường khuyên không nên sử dụng kết xuất phía máy khách vì có độ trễ giữa các trang thu thập thông tin của Google và sau đó có thể hiển thị chúng.
Google xếp các trang cần được hiển thị vào một hàng đợi cho đến khi có đủ tài nguyên để xử lý chúng.
Nếu bạn đang dựa vào Google để hiển thị trang phía máy khách, điều này có thể trì hoãn việc lập chỉ mục tối đa một tuần sau khi được thu thập thông tin ban đầu.
Kết xuất động
Kết xuất động liên quan đến việc sử dụng các phương pháp kết xuất khác nhau tùy thuộc vào việc trình duyệt của người dùng hay bot của công cụ tìm kiếm đang yêu cầu một trang.
Nếu trang web của bạn thường hiển thị phía máy khách, khi Googlebot được phát hiện, trang sẽ được hiển thị trước bằng trình kết xuất phía máy khách mini (ví dụ: Puppeteer hoặc Rendertron), vì vậy, nội dung có thể được nhìn thấy và lập chỉ mục ngay lập tức.
Kết xuất kết hợp
Kết xuất kết hợp bao gồm sự kết hợp của cả kết xuất phía máy chủ và kết xuất phía máy khách.
Nội dung cốt lõi được hiển thị trước từ phía máy chủ và được gửi đến máy khách, cho dù đó là trình duyệt của người dùng hay trình thu thập thông tin của công cụ tìm kiếm đang yêu cầu nội dung.
Sau khi trang được tải lần đầu, JavaScript bổ sung cho bất kỳ hoạt động tương tác nào sau đó sẽ được hiển thị phía máy khách.
Phần kết luận
Hy vọng rằng bạn thấy hướng dẫn này hữu ích và nó giúp bạn hiểu rõ hơn những kiến thức cơ bản về JavaScript và cách nó tác động đến các trang web.
Bây giờ bạn đã tìm hiểu kỹ các thuật ngữ chính, bạn nên trang bị tốt hơn để giữ ý kiến của mình trong các cuộc trò chuyện với các nhà phát triển!
