منتشر شده: ۲۳ ژانویه ۲۰۲۶
کروم در حال راهاندازی یک نسخه آزمایشی جدید از کروم ۱۴۴ برای پیشرندر تا زمان اضافه شدن اسکریپت به API Speculation Rules است . این نسخه آزمایشی به سایتها اجازه میدهد تا این ویژگی جدید را با کاربران واقعی امتحان کنند. هدف، آزمایش میدانی این ویژگی و ارائه بازخورد به تیم کروم برای کمک به شکلدهی آن و تصمیمگیری در مورد اینکه آیا باید آن را به پلتفرم وب اضافه کنیم یا خیر، است.
این [طرح/طرحواره/...] به دنبال حل چه مشکلی است؟
API قواعد حدس و گمان (Speculation Rules API) اجازه میدهد بارگذاری صفحات قبل از اینکه کاربران واقعاً به صفحات بروند، شروع شود. این میتواند با تکمیل بخشی یا تمام کار قبل از موعد، بارگذاری صفحات آینده را بهبود بخشد. تاکنون دو نوع حدس و گمان را مجاز دانسته است: پیشواکشی (prefetch) و پیشرندر (prerender).
Prefetch فقط سند HTML را دریافت میکند. این کار باعث میشود که منبع اولیه و حیاتی، قبل از بارگذاری، بارگذاری شود و در نتیجه، هنگام پیمایش URL، عملکرد بهبود یابد. این فرآیند هیچ زیرمنبعی (مثلاً CSS، جاوا اسکریپت یا تصاویر) را بارگذاری نمیکند و جاوا اسکریپت را نیز اجرا نمیکند، بنابراین ممکن است مرورگر همچنان کار قابل توجهی برای بارگذاری صفحه داشته باشد.
پیشرندر کارهای بسیار بیشتری انجام میدهد. زیرمنابع را دریافت میکند و شروع به رندر صفحه و اجرای جاوا اسکریپت میکند، تقریباً انگار که صفحه در یک تب مخفی در پسزمینه باز شده است. وقتی کاربر روی لینک کلیک میکند، اگر مرورگر تمام کارهای لازم برای رندر صفحه را انجام داده باشد، میتواند فوراً به ناوبری دسترسی پیدا کند.
استفاده از گزینه پیشرندر به طور بالقوه برای عملکرد بسیار بهتر است، اما هزینه پیادهسازی اضافی و همچنین هزینههای منابع اضافی را به همراه دارد. اگر به دقت در نظر گرفته نشود، این امر میتواند عوارض جانبی غیرمنتظرهای را نیز ایجاد کند، به خصوص هنگام پیشرندر کامل یک صفحه قبل از اینکه کاربر واقعاً به صفحه هدایت شود. به عنوان مثال، اگر ارائه دهنده تجزیه و تحلیل، گمانهزنیها را در نظر نگیرد، ممکن است تجزیه و تحلیل قبل از پیمایش کاربر اجرا شود - آمار را تحریف کند.
سایتهایی که از پیشرندر استفاده میکنند باید مراقب باشند که یک صفحه قدیمی به کاربر ارائه ندهند. برای مثال، اگر صفحهای را در یک سایت تجارت الکترونیک حدس بزنید، سپس چیزی را به سبد خرید خود اضافه کنید و سپس صفحه حدس زده شده قبلی را بارگذاری کنید، اگر سایت دقت بیشتری برای بهروزرسانی آن نکند، ممکن است تعداد سبد قدیمی را ببینید.
این پیچیدگیها برای prefetch نیز وجود دارد اگر بخشی از این مدیریت وضعیت در سمت سرور اتفاق بیفتد، اما اغلب مشکل بزرگتری برای prerender است. استفاده از prerender در سایتهای پیچیدهتر میتواند پیچیدهتر باشد.
با این حال، از توسعهدهندگان میشنویم که آنها در حال حاضر شاهد افزایش عملکرد از پیش واکشی صفحه هستند و میخواهند با قوانین حدس و گمان پیش بروند تا حتی بیشتر سود ببرند. اینجاست که پیش رندر تا اسکریپت وارد عمل میشود.
پیش رندر تا زمان اسکریپت چیست؟
پیش رندر تا زمانی که اسکریپت یک حالت جدید و میانی بین پیش رندر و پیش واکشی باشد. این تابع سند HTML را پیش واکشی میکند (همانطور که پیش رندر انجام میدهد) و سپس شروع به رندر صفحه میکند، از جمله واکشی تمام زیرمنابع (همانطور که پیش رندر انجام میدهد). با این حال، نکته مهم این است که مرورگر از اجرای عناصر <script> (برای اسکریپتهای درونخطی و اسکریپتهای src ) اجتناب میکند. هنگامی که با یک تگ مسدودکننده <script> مواجه میشود، تجزیهکننده را متوقف میکند و منتظر میماند تا کاربر قبل از ادامه به صفحه برود. در این فاصله، اسکنر پیش بارگذاری میتواند به کار خود ادامه دهد و زیرمنابع مورد نیاز صفحه را واکشی کند تا زمانی که صفحه بتواند به بارگیری خود ادامه دهد، آماده استفاده باشند.
با نگه داشتن هرگونه عنصر <script> مسدودکننده، از بسیاری از پیچیدگیهای پیادهسازی جلوگیری میشود. در عین حال، با شروع فرآیند رندر و دریافت منابع فرعی، مزیت بزرگی نسبت به پیشواکشی وجود دارد - تقریباً به اندازه یک پیشرندر کامل.
در بهترین حالت (وقتی اصلاً هیچ اسکریپتی در صفحه وجود ندارد)، این گزینه کل صفحه را پیشرندر میکند. یا وقتی صفحهای فقط عناصر اسکریپت در فوتر یا فقط اسکریپتهایی با ویژگیهای async یا defer دارد، صفحه بدون آن جاوا اسکریپت بهطور کامل پیشرندر میشود. حتی در بدترین حالت (وقتی یک اسکریپت مسدودکننده در <head> وجود دارد)، شروع رندر صفحه، و بهویژه پیشواکشی زیرمنابع، باید منجر به بارگذاری بسیار بهبودیافته صفحه شود.
چگونه از پیشرندر تا زمان اسکریپت استفاده کنیم؟
ابتدا، این ویژگی را فعال کنید ، سپس تا زمانی که اسکریپت به همان روشی که سایر گزینههای API مربوط به Speculation Rules استفاده میشوند، با یک کلید جدید prerender_until_script پیشرندر کنید (به زیرخطها توجه کنید تا نام کلید JSON معتبری باشد).
این میتواند با قوانین فهرست URL های استاتیک استفاده شود:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
همچنین میتواند با قوانین سند مورد استفاده قرار گیرد که در آن URL های مورد نظر برای حدس زدن به عنوان لینک در صفحه موجود هستند:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
پیشرندر کنید تا اسکریپت بتواند با گزینههای معمول API مربوط به Speculation Rules، از جمله مقادیر مختلف eagerness ، مورد استفاده قرار گیرد.
از آنجایی که جاوا اسکریپت اجرا نمیشود، document.prerendering و همچنین رویداد prerenderingchange قابل خواندن نیستند. با این حال، زمان activationStart غیر صفر خواهد بود.
مثال زیر نحوهی پیادهسازی مثال قبلی را با یک پیشواکشی برای مرورگرهایی که prerender_until_script پشتیبانی نمیکنند، نشان میدهد:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
کروم این تکرار را بدون مشکل مدیریت میکند و مناسبترین قانون را برای هر تنظیم اشتیاق اجرا میکند.
به عنوان یک روش جایگزین، میتوانید از این موارد با سطوح مختلف اشتیاق استفاده کنید تا به طور مشتاقانه پیشواکشی کنید و سپس همانطور که قبلاً با prefetch/prerender پیشنهاد شد ، تا زمانی که اسکریپت با سیگنالهای بیشتری همراه باشد، آن را به پیشرندر ارتقا دهید:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
توجه داشته باشید که نمیتوانید یک پیشرندر تا زمان اسکریپت را به یک پیشرندر کامل به این روش ارتقا دهید، اما اگر این الگویی است که علاقهمند به پشتیبانی کروم از آن هستید، با ستارهدار کردن این اشکال به ما اطلاع دهید.
آیا تمام جاوا اسکریپت متوقف شده است؟
خیر، فقط عناصر <script> باعث توقف تجزیهگر میشوند. این یعنی کنترلکنندههای اسکریپت درونخطی (مثلاً onload ) یا آدرسهای javascript: باعث توقف نمیشوند و ممکن است اجرا شوند.
برای مثال، این میتواند ثبت کند که Hero image is now loaded :
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
در حالی که اگر شنونده رویداد با یک <script> اضافه شود، Hero image is now loaded تا زمانی که صفحه فعال نشود، در کنسول ثبت نخواهد شد:
<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>
این ممکن است غیرمنطقی به نظر برسد، اما در بسیاری از موارد (مانند مثال قبلی!) احتمالاً بهتر است فوراً اقدام شود و تأخیر در آن ممکن است منجر به عوارض غیرمنتظرهتری شود.
علاوه بر این، اکثر رویدادهای درونخطی به یک اقدام کاربر (مثلاً onclick ، onhover ) نیاز دارند و بنابراین تا زمانی که کاربر نتواند با صفحه تعامل داشته باشد، اجرا نمیشوند.
در نهایت، اسکریپتهای مسدودکنندهی قبلی، تجزیهکننده را متوقف میکنند و بنابراین از کشف شدن کنترلکنندههای رویداد درونخطی جلوگیری میکنند. بنابراین این، با وجود اینکه یک کنترلکنندهی رویداد درونخطی است، تا زمان فعالسازی، پیام را در کنسول بارگذاری نمیکند:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
این امر به ویژه برای کنترلکنندههای اسکریپت درونخطی که از کد از پیش تعریفشده استفاده میکنند، مرتبط است و طبق انتظار به کار خود ادامه خواهد داد:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
در مورد اسکریپتهایی با ویژگیهای async و defer چطور؟
اسکریپتهایی که دارای ویژگیهای async و defer هستند تا زمان فعالسازی به تأخیر میافتند، اما مانع از ادامهی پردازش بقیهی صفحه توسط تجزیهکننده نمیشوند. اسکریپتها دانلود میشوند اما تا زمانی که به صفحه هدایت نشوید، اجرا نمیشوند.
چگونه میتوان پیشرندر را تا زمان اسکریپت فعال کرد؟
پیشرندر تا زمان اجرای اسکریپت، گزینه جدیدی است که روی آن کار میکنیم و ممکن است تغییر کند، بنابراین بدون فعال کردن اولیه آن برای استفاده، در دسترس نیست.
این قابلیت میتواند به صورت محلی برای توسعهدهنده با استفاده از فلگ chrome://flags/#prerender-until-script یا با فلگ خط فرمان --enable-features=PrerenderUntilScript .
اسکریپت Prerender until اکنون به عنوان یک نسخه آزمایشی origin از Chrome 144 نیز در دسترس است. نسخههای آزمایشی origin به صاحبان سایتها این امکان را میدهد که یک ویژگی را در سایتهای خود فعال کنند تا کاربران واقعی بتوانند بدون نیاز به فعال کردن دستی آن، از آن ویژگی استفاده کنند. این امر امکان اندازهگیری تأثیر ویژگی بر کاربران واقعی را فراهم میکند تا از عملکرد آن مطابق انتظار اطمینان حاصل شود.
آن را برای یک آزمایش انجام دهید و نظرات خود را به اشتراک بگذارید
ما واقعاً از این پیشنهاد اضافه شده به API قوانین سفتهبازی هیجانزدهایم و صاحبان سایت را تشویق میکنیم که آن را برای آزمایش امتحان کنند.
نظرات خود را در مورد این پیشنهاد در مخزن گیتهاب به اشتراک بگذارید. برای دریافت بازخورد در مورد پیادهسازی کروم، یک گزارش اشکال کرومیوم ثبت کنید.