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 prerender until script vào Speculation Rules API. Bản dùng thử theo nguyê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, API này cho phép hai loại suy đoán: tìm nạp trước và kết xuất trước.
Lệnh tìm nạp trước 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 đầu tiên quan trọng đó 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. Trình duyệt này 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 như 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.
Kết xuất trước còn làm được nhiều việc khác. 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ể được 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 prerender until script phát huy tác dụng.
prerender until script là gì?
prerender until script là một giải pháp mới, nằm ở giữa, giữa tìm nạp trước và kết xuất trước. Nó tìm nạp trước tài liệu HTML (như tìm nạp trước), sau đó 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ư 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 cùng dòng 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 trước khi 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 kết xuất 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 prerender until script
Trước tiên, hãy bật tính năng này, sau đó prerender until script sẽ được dùng theo cách tương tự như các lựa chọn khác của Speculation Rules API với một 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 prerender until script với các lựa chọn thông thường của Speculation Rules API, 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 sử dụng một giải pháp 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 các tín hiệu này với nhiều mức độ sẵn sàng khác nhau để tìm nạp trước một cách chủ động, sau đó nâng cấp lên prerender until script bằng 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 prerender until script lên một bản kết xuất trước đầy đủ theo cách này, nhưng hãy cho chúng tôi biết nếu đó là 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 đều bị tạm dừ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 cùng dòng (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ư 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 cùng dòng 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 prerender until script
prerender until script 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ờ hiệu dòng lệnh --enable-features=PrerenderUntilScript.
prerender until script hiện cũng có sẵn dưới dạng một bản dùng thử 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 cho phé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ề cách triển khai của Chrome, hãy báo cáo lỗi Chromium.