پیدا کنید کدام پیمایشها از استفاده از bfcache مسدود شدهاند و چرا.
ویژگی notRestoredReasons
که به کلاس PerformanceNavigationTiming
اضافه شده است، اطلاعاتی را در مورد اینکه آیا فریم های موجود در سند از استفاده از bfcache در مسیریابی مسدود شده اند یا خیر، گزارش می دهد. توسعه دهندگان می توانند از این اطلاعات برای شناسایی صفحاتی که نیاز به به روز رسانی دارند استفاده کنند تا آنها را با bfcache سازگار کند و در نتیجه عملکرد سایت را بهبود بخشد.
وضعیت فعلی
notRestoredReasons
API از Chrome 123 ارسال شده است و به تدریج عرضه می شود.
مفاهیم و کاربرد
مرورگرهای مدرن یک ویژگی بهینهسازی برای پیمایش تاریخ ارائه میدهند که کش عقب/ جلو (bfcache) نامیده میشود. هنگامی که کاربران به صفحهای که قبلاً بازدید کردهاند برمیگردند، این یک تجربه بارگذاری فوری را امکانپذیر میکند. صفحات را می توان از ورود به bfcache مسدود کرد یا به دلایل مختلف در bfcache خارج شد، برخی از آنها توسط یک مشخصات و برخی خاص به پیاده سازی مرورگر نیاز دارند.
پیش از این، هیچ راهی برای توسعهدهندگان وجود نداشت که بفهمند چرا صفحات آنها از استفاده از bfcache در فیلد مسدود شده است، اگرچه آزمایشی در ابزار توسعه کروم وجود داشت. برای فعال کردن نظارت در فیلد، کلاس PerformanceNavigationTiming
گسترش یافته است تا ویژگی notRestoredReasons
را شامل شود. این یک شی حاوی اطلاعات مرتبط در فریم بالایی و تمام iframe های موجود در سند را برمی گرداند:
- دلایلی که چرا آنها از استفاده از bfcache مسدود شدند.
جزئیاتی مانند
id
قاب وname
، برای کمک به شناسایی iframes در HTML.این به توسعه دهندگان اجازه می دهد تا برای سازگار کردن آن صفحات با bfcache اقدام کنند و در نتیجه عملکرد سایت را بهبود بخشند.
نمونه ها
یک نمونه PerformanceNavigationTiming
را می توان از ویژگی هایی مانند Performance.getEntriesByType()
و PerformanceObserver
بدست آورد.
برای مثال، میتوانید تابع زیر را فراخوانی کنید تا همه اشیاء PerformanceNavigationTiming
موجود در جدول زمانی عملکرد را برگردانید و notRestoredReasons
آنها را ثبت کنید:
function returnNRR() {
const navEntries = performance.getEntriesByType("navigation");
for (let i = 0; i < navEntries.length; i++) {
console.log(`Navigation entry ${i}`);
let navEntry = navEntries[i];
console.log(navEntry.notRestoredReasons);
}
}
برای پیمایش تاریخچه، ویژگی PerformanceNavigationTiming.notRestoredReasons
یک شی را با ساختار زیر برمیگرداند که نشاندهنده وضعیت مسدود شده قاب سطح بالا است:
{
children: [],
id: null,
name: null,
reasons: [
{"reason", "unload-listener"}
],
src: null,
url: "https://www.example.com/page/"
}
خواص به شرح زیر است:
-
children
- آرایهای از اشیاء نشاندهنده وضعیت مسدود شده هر فریم با منشأ مشابهی که در قاب سطح بالا تعبیه شده است. هر شیء ساختار مشابهی با شی والد دارد - به این ترتیب، هر تعداد از سطوح فریم های تعبیه شده را می توان به صورت بازگشتی در داخل شی نشان داد. اگر فریم فرزندی نداشته باشد، آرایه خالی خواهد بود.
-
id
- رشته ای که مقدار ویژگی
id
فریم را نشان می دهد (برای مثال<iframe id="foo" src="...">
). اگر فریم فاقدid
باشد، مقدار آنnull
خواهد بود. برای صفحه سطح بالا اینnull
است. -
name
- رشته ای که مقدار ویژگی
name
قاب را نشان می دهد (برای مثال<iframe name="bar" src="...">
). اگر فریمname
نداشته باشد، مقدار یک رشته خالی خواهد بود. برای صفحه سطح بالا اینnull
است. -
reasons
- آرایه ای از رشته ها که هر کدام دلیلی را نشان می دهد که چرا صفحه پیمایش شده از استفاده از bfcache مسدود شده است. دلایل مختلفی وجود دارد که چرا مسدود کردن ممکن است رخ دهد. برای جزئیات بیشتر به بخش دلایل مسدود کردن مراجعه کنید.
-
src
- رشته ای که نشان دهنده مسیر منبع فریم است (به عنوان مثال
<iframe src="b.html">
). اگر فریمsrc
نداشته باشد، مقدار یک رشته خالی خواهد بود. برای صفحه سطح بالا اینnull
است. -
url
- رشته ای که نشان دهنده URL صفحه/iframe پیمایش شده است.
برای اشیاء PerformanceNavigationTiming
که ناوبری تاریخ را نشان نمیدهند، ویژگی notRestoredReasons
null
برمیگرداند.
توجه داشته باشید که notRestoredReasons
زمانی که هیچ دلیل مسدودی وجود نداشته باشد، null
برمیگرداند، بنابراین این null
بودن نشانگر استفاده یا عدم استفاده از bfcache نیست. برای این کار، باید از ویژگی event.persisted
استفاده کنید .
مسدود شدن bfcache را در فریمهای با منبع مشابه گزارش کنید
هنگامی که یک صفحه دارای فریمهایی با مبدا یکسان تعبیه شده است، مقدار notRestoredReasons
برگردانده شده حاوی یک شی در داخل ویژگی children
خواهد بود که وضعیت مسدود شده هر فریم تعبیهشده را نشان میدهد.
به عنوان مثال:
{
children: [
{
children: [],
id: "iframe-id",
name: "iframe-name",
reasons: [],
src: "./index.html",
url: "https://www.example.com/"
},
{
children: [],
id: "iframe-id2",
name: "iframe-name2",
reasons: [
{"reason": "unload-listener"}
],
src: "./unload-examples.html",
url: "https://www.example.com/unload-examples.html"
},
],
id: null,
name: null,
reasons: [],
src: null,
url:"https://www.example.com"
}
مسدود شدن bfcache در فریم های متقاطع را گزارش کنید
هنگامی که یک صفحه دارای فریم های متقاطع است، ما مقدار اطلاعات به اشتراک گذاشته شده در مورد آنها را محدود می کنیم تا از افشای اطلاعات متقاطع جلوگیری کنیم. ما فقط اطلاعاتی را درج میکنیم که صفحه بیرونی از قبل میداند، و اینکه آیا درخت فرعی cross-origin bfcache را مسدود کرده است یا خیر. ما هیچ دلیل مسدود کردن یا اطلاعاتی در مورد سطوح پایین تر زیردرخت (حتی اگر برخی از سطوح فرعی با منشاء یکسان باشند) درج نمی کنیم.
به عنوان مثال:
{
children: [
{
children: [],
id: "iframe-id",
name: "iframe-name",
reasons: [],
src: "./index.html",
url: "https://www.example2.com/"
}
],
id: null,
name: null,
reasons: [
{"reason": "masked"}
],
src: null,
url:"https://www.example.com"
}
برای همه iframe های متقاطع، ما به دلیل مقدار reasons
قاب، null
را گزارش می کنیم، و فریم سطح بالا دلیل "masked"
را نشان می دهد. توجه داشته باشید که "masked"
ممکن است به دلایل خاص عامل کاربر نیز استفاده شود، بنابراین ممکن است همیشه مشکلی را در iframe نشان ندهد.
برای جزئیات بیشتر در مورد ملاحظات امنیت و حریم خصوصی، بخش امنیت و حریم خصوصی را در توضیح دهنده ببینید.
دلایل مسدود کردن
همانطور که قبلاً گفتیم، دلایل مختلفی وجود دارد که چرا مسدود کردن ممکن است رخ دهد:
در زیر نمونه هایی از برخی از رایج ترین دلایل عدم استفاده از bfcache آورده شده است:
-
unload-listener
: صفحه یکunload
handler را ثبت می کند که از استفاده bfcache در مرورگرهای خاص جلوگیری می کند. برای اطلاعات بیشتر به لغو رویداد تخلیه مراجعه کنید. -
response-cache-control-no-store
: صفحه ازno-store
به عنوان مقدارcache-control
استفاده می کند. -
related-active-contents
: صفحه از صفحه دیگری باز شد (یا با استفاده از "برگه تکراری") که هنوز به این صفحه اشاره دارد.
بازخورد
تیم Chromium میخواهد در مورد تجربیات شما با bfcache notRestoredReasons
API بشنود.
در مورد طراحی API به ما بگویید
آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ سوال یا نظری در مورد مدل امنیتی دارید؟ یک مشکل مشخصات را در مخزن GitHub مربوطه ثبت کنید یا افکار خود را به یک مشکل موجود اضافه کنید.
گزارش مشکل در اجرا
آیا با اجرای Chromium اشکالی پیدا کردید؟ یا پیاده سازی با مشخصات متفاوت است؟ یک اشکال در ردیاب مشکل ما ثبت کنید. اطمینان حاصل کنید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کرده و جزء را به صورت UI > Browser > Navigation > BFCache
مشخص کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.
پشتیبانی از API را نشان دهید
آیا قصد دارید از bfcache notRestoredReasons
API استفاده کنید؟ پشتیبانی عمومی شما به تیم Chromium کمک میکند ویژگیها را اولویتبندی کند و به سایر فروشندگان مرورگر نشان میدهد که چقدر حمایت از آنها ضروری است.
با استفاده از هشتگ #NotRestoredReasons
یک توییت به @ChromiumDev ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می کنید.