Ngày xuất bản: 23 tháng 1 năm 2026
Chrome sẽ ra mắt một bản dùng thử theo nguyên gốc mới từ Chrome 144 cho việc bổ sung kết xuất trước cho đến khi có tập lệnh vào Speculation Rules API. Thử nghiệm nguồn gốc này cho phép các trang web dùng thử tính năng mới với người dùng thực. Mục tiêu là thử nghiệm tính năng này trên thực tế và cung cấp ý kiến phản hồi cho nhóm Chrome để giúp định hình tính năng này và quyết định xem có nên thêm tính năng này vào nền tảng web hay không.
Vấn đề này nhằm giải quyết vấn đề gì?
Speculation Rules API cho phép bắt đầu tải trang trước khi người dùng thực sự chuyển đến các trang. Điều này có thể cải thiện tốc độ tải trang trong tương lai bằng cách hoàn thành một số hoặc tất cả công việc trước thời hạn. Cho đến nay, tính năng này cho phép hai loại suy đoán: tìm nạp trước và kết xuất trước.
Prefetch chỉ tìm nạp tài liệu HTML. Điều này giúp bạn nhận được tài nguyên quan trọng đầu tiên trước thời hạn, sau đó giúp tăng hiệu suất khi một URL được chuyển hướng đến. Nó không tải bất kỳ tài nguyên phụ nào (ví dụ: CSS, JavaScript hoặc hình ảnh), cũng không thực thi JavaScript. Do đó, trình duyệt vẫn có thể phải thực hiện khá nhiều việc khi tải trang.
Tính năng kết xuất trước có thể làm được nhiều việc hơn. Thao tác này sẽ tìm nạp các tài nguyên phụ, đồng thời bắt đầu kết xuất trang và thực thi JavaScript, gần như thể trang được mở trong một thẻ nền ẩn. Khi nhấp vào đường liên kết, người dùng có thể chuyển hướng ngay lập tức nếu trình duyệt đã hoàn tất mọi việc cần thiết để hiển thị trang.
Việc sử dụng lựa chọn kết xuất trước có thể mang lại hiệu suất tốt hơn nhiều, nhưng sẽ tốn thêm chi phí triển khai cũng như chi phí tài nguyên. Nếu không cân nhắc kỹ lưỡng, điều này cũng có thể gây ra các tác dụng phụ không mong muốn khi kết xuất trước hoàn toàn một trang trước khi người dùng thực sự chuyển đến trang đó. Ví dụ: phân tích có thể kích hoạt trước khi người dùng chuyển hướng (làm sai lệch số liệu thống kê) nếu nhà cung cấp dịch vụ phân tích không tính đến các suy đoán.
Các trang web sử dụng tính năng kết xuất trước cũng phải cẩn thận để không phân phát cho người dùng một trang cũ. Ví dụ: nếu bạn suy đoán một trang trên trang web thương mại điện tử, sau đó thêm một mặt hàng vào giỏ hàng rồi tải trang đã suy đoán trước đó, thì bạn có thể thấy số lượng giỏ hàng cũ nếu trang web không chú ý hơn để đảm bảo số lượng này được cập nhật.
Những vấn đề phức tạp này cũng xảy ra đối với việc tìm nạp trước nếu một số hoạt động quản lý trạng thái này diễn ra ở phía máy chủ, nhưng thường là vấn đề lớn hơn đối với việc kết xuất trước. Việc sử dụng tính năng kết xuất trước trên các trang web phức tạp hơn có thể phức tạp hơn.
Tuy nhiên, các nhà phát triển cho biết họ đã nhận thấy hiệu suất tăng lên nhờ việc tìm nạp trước trang và muốn sử dụng các quy tắc suy đoán để đạt được nhiều lợi ích hơn nữa. Đây là lúc bạn cần sử dụng tính năng kết xuất trước cho đến khi tập lệnh xuất hiện.
Kết xuất trước cho đến tập lệnh là gì?
Kết xuất trước cho đến khi tập lệnh là một điểm trung gian mới giữa tìm nạp trước và kết xuất trước. Thao tác này tìm nạp trước tài liệu HTML (như thao tác tìm nạp trước) rồi bắt đầu hiển thị trang, bao gồm cả việc tìm nạp tất cả các tài nguyên phụ (như thao tác kết xuất trước). Tuy nhiên, điều quan trọng là trình duyệt sẽ tránh thực thi các phần tử <script> (cho cả tập lệnh nội tuyến và tập lệnh src). Khi gặp thẻ chặn <script>, trình phân tích cú pháp sẽ tạm dừng và đợi cho đến khi người dùng chuyển đến trang rồi mới tiếp tục. Trong thời gian chờ đợi, trình quét tải trước có thể tiếp tục và tìm nạp các tài nguyên phụ mà trang cần để sẵn sàng sử dụng khi trang có thể tiếp tục tải.
Bằng cách giữ lại mọi phần tử chặn <script>, bạn sẽ tránh được phần lớn sự phức tạp khi triển khai. Đồng thời, bằng cách bắt đầu quá trình kết xuất và tìm nạp các tài nguyên phụ, bạn sẽ đạt được lợi ích lớn hơn so với việc tìm nạp trước – có thể gần bằng với việc kết xuất trước toàn bộ.
Trong trường hợp tốt nhất (khi trang hoàn toàn không có tập lệnh), lựa chọn này sẽ kết xuất trước toàn bộ trang. Hoặc khi một trang chỉ có các phần tử tập lệnh trong chân trang hoặc chỉ có các tập lệnh có thuộc tính async hoặc defer, trang đó sẽ được kết xuất trước hoàn toàn mà không có JavaScript đó. Ngay cả trong trường hợp xấu nhất (khi có một tập lệnh chặn trong <head>), việc bắt đầu hiển thị trang và đặc biệt là việc tìm nạp trước các tài nguyên phụ sẽ giúp cải thiện đáng kể tốc độ tải trang.
Cách sử dụng tính năng kết xuất trước cho đến tập lệnh
Trước tiên, hãy bật tính năng này, sau đó kết xuất trước cho đến khi tập lệnh được sử dụng theo cách tương tự như các lựa chọn khác của Speculation Rules API bằng khoá prerender_until_script mới (lưu ý dấu gạch dưới để biến khoá này thành tên khoá JSON hợp lệ)
Bạn có thể sử dụng chế độ cài đặt này với các quy tắc danh sách gồm các URL tĩnh:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Bạn cũng có thể sử dụng chế độ này với các quy tắc tài liệu trong đó URL cần suy đoán có sẵn dưới dạng đường liên kết trên trang:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Sau đó, bạn có thể sử dụng tính năng kết xuất trước cho đến khi tập lệnh có thể dùng với các lựa chọn Speculation Rules API thông thường, bao gồm cả nhiều giá trị mức độ mong muốn.
Vì JavaScript sẽ không thực thi, nên document.prerendering không thể đọc được và sự kiện prerenderingchange cũng không đọc được. Tuy nhiên, thời gian activationStart sẽ khác 0.
Ví dụ sau đây cho thấy cách triển khai ví dụ trước bằng cách dự phòng để tìm nạp trước cho những trình duyệt không hỗ trợ prerender_until_script:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome sẽ xử lý việc trùng lặp này mà không gặp vấn đề gì và thực thi quy tắc phù hợp nhất cho từng chế độ cài đặt mức độ mong muốn.
Ngoài ra, bạn có thể sử dụng những thuộc tính này với các mức độ mong muốn khác nhau, để tìm nạp trước một cách chủ động, rồi nâng cấp lên tính năng kết xuất trước cho đến khi tập lệnh có nhiều tín hiệu hơn như đề xuất trước đó với tính năng tìm nạp trước/kết xuất trước:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Xin lưu ý rằng bạn không thể nâng cấp một hoạt động kết xuất trước cho đến khi tập lệnh thành một hoạt động kết xuất trước đầy đủ theo cách này. Tuy nhiên, hãy cho chúng tôi biết nếu đó là một mẫu mà bạn muốn Chrome hỗ trợ bằng cách gắn dấu sao cho lỗi này.
Tất cả JavaScript có bị tạm dừng không?
Không, chỉ có các phần tử <script> mới khiến trình phân tích cú pháp tạm dừng. Điều này có nghĩa là trình xử lý tập lệnh nội tuyến (ví dụ: onload) hoặc URL javascript: sẽ không gây ra tình trạng tạm dừng và có thể thực thi.
Ví dụ: điều này có thể ghi Hero image is now loaded vào bảng điều khiển trước khi trang được chuyển hướng đến:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Trong khi đó, nếu trình nghe sự kiện được thêm bằng <script>, thì Hero image is now loaded sẽ không được ghi vào bảng điều khiển cho đến sau khi trang được kích hoạt:
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
Điều này có vẻ không hợp lý, nhưng trong nhiều trường hợp (như trong ví dụ trước!), bạn nên hành động ngay lập tức và việc trì hoãn có thể dẫn đến nhiều biến chứng không mong muốn hơn.
Ngoài ra, hầu hết các sự kiện nội tuyến đều yêu cầu hành động của người dùng (ví dụ: onclick, onhover) và do đó sẽ không được thực thi cho đến khi người dùng có thể tương tác với trang.
Cuối cùng, các tập lệnh chặn trước sẽ tạm dừng trình phân tích cú pháp và do đó ngăn chặn việc phát hiện các trình xử lý sự kiện nội tuyến. Vì vậy, thông báo này sẽ không tải vào bảng điều khiển cho đến khi kích hoạt, mặc dù là một trình xử lý sự kiện nội tuyến:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Điều này đặc biệt phù hợp với các trình xử lý tập lệnh nội tuyến sử dụng mã đã xác định trước. Các trình xử lý này sẽ tiếp tục hoạt động như dự kiến:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
Còn các tập lệnh có thuộc tính async và defer thì sao?
Các tập lệnh có thuộc tính async và defer sẽ bị trì hoãn cho đến khi kích hoạt nhưng sẽ không ngăn trình phân tích cú pháp tiếp tục xử lý phần còn lại của trang. Các tập lệnh được tải xuống nhưng không được thực thi cho đến khi người dùng chuyển đến trang.
Cách bật tính năng kết xuất trước cho đến khi tập lệnh?
Kết xuất trước cho đến khi tập lệnh là một lựa chọn mới mà chúng tôi đang phát triển và có thể thay đổi. Do đó, bạn không thể sử dụng lựa chọn này nếu chưa bật để chọn sử dụng.
Nhà phát triển có thể bật tính năng này cục bộ bằng cờ Chrome chrome://flags/#prerender-until-script hoặc cờ dòng lệnh --enable-features=PrerenderUntilScript.
Tính năng kết xuất trước cho đến khi tập lệnh cũng có sẵn dưới dạng một thử nghiệm theo nguyên gốc từ Chrome 144. Thử nghiệm nguồn gốc cho phép chủ sở hữu trang web bật một tính năng trên trang web của họ để người dùng thực có thể sử dụng tính năng này mà không cần bật theo cách thủ công. Điều này giúp đo lường tác động của tính năng đối với người dùng thực để đảm bảo tính năng hoạt động như mong đợi.
Hãy dùng thử và chia sẻ ý kiến phản hồi của bạn
Chúng tôi rất hào hứng với đề xuất bổ sung này cho Speculation Rules API và khuyến khích chủ sở hữu trang web dùng thử.
Chia sẻ ý kiến phản hồi của bạn về đề xuất này trên kho lưu trữ GitHub. Để gửi ý kiến phản hồi về việc triển khai của Chrome, hãy báo cáo lỗi Chromium.