Instant Navigation con Speculation Rules API

Summarize this content to 400 words in Persian Lang
یکی از فانتزی‌های هر فرانت اند این است که پیمایش بین بخش‌های مختلف وب‌سایت ما آنی است، به‌گونه‌ای که گویی وب‌سایت برای صفحه‌ای که می‌خواهیم به آن دسترسی داشته باشیم آماده است.

مرورگر مکانیسم هایی مانند نکات منابع را به ما ارائه می دهد تا بتوانیم (از بهترین شناخته شده ترین پیش بارگذاری و واکشی) منابع را از قبل بارگیری کنیم، که به ما امکان کاهش زمان بارگذاری را می دهد.

من قبلاً یک اشاره منبع به نام prerender داشتم اما به دلیل اشکالات متعدد حذف شد اما اکنون به شکل یک توکن با Speculation Rules API بازگشته است.

Speculation Rules API

قبل از شروع، یک پیش بارگذاری واضح و پیش واکشی برای درخواست منابع به کار می رود تا زمانی که از آنها استفاده می شود قبلاً دانلود شده باشند (تفاوت های بیشتری وجود دارد اما می خواهم ساده تر کنم). این در فایل‌های دارایی عالی است، اما زمانی که اسناد HTML درخواست می‌شوند، تنها زمانی ارائه می‌شوند که آن سند در زمینه مرورگر بارگیری شود.

اگر بخواهیم منبعی را بارگیری کنیم، پیش بارگذاری و واکشی اولیه کافی است، این معمولاً در یک برنامه تک صفحه ای (SPA) مفیدتر است، در یک SPA ناوبری پیچیده تر است زیرا همه چیز در چارچوب برنامه مدیریت می شود. هنگامی که یک برنامه چند صفحه ای (MPA) داریم که در آن ناوبری ساده است اما کل زمینه برنامه تغییر می کند. اینجاست که Speculation Rules API به ما اجازه می‌دهد تا مشخص کنیم کدام URL‌ها را می‌توانیم از قبل رندر کنیم تا حس فوری بودن را به ما بدهد.

هشدار

اجرای Speculation Rules API عواقبی نیز دارد، زمانی که JS خود را از قبل اجرا می کنیم. اگر تجزیه و تحلیل داشته باشیم، ممکن است نویز را به معیارهای خود وارد کنیم، زیرا در حال “گمان‌زنی” هستیم، زیرا هیچ چیز تضمین نمی‌کند که کاربر به آدرس‌های اینترنتی که ما مشخص می‌کنیم دسترسی داشته باشد.

علاوه بر این، خوب است که نوع دستگاه و اتصال را در نظر بگیرید

نسخه ی نمایشی

یک سایت ساده با 3 صفحه ایجاد کنید: index، page2 و page3 (چقدر خلاقانه).

سروری که برای ارائه محتوا ایجاد می کنید باعث می شود هر URL که به .html ختم می شود 2 ثانیه تاخیر داشته باشد (این قسمت اختیاری است و به دلایل دراماتیک انجام شده است XD)

const express = require(“express”);
const path = require(“path”);

const app = express();
const port = process.env.PORT || 9000;

// Define the static files directory
const staticPath = path.join(__dirname, “public”);

// Middleware to delay response for HTML files
app.use((req, res, next) => {
if (req.url.endsWith(“.html”)) {
setTimeout(() => next(), 2000); // Delay by 2 seconds
} else {
next();
}
});

// Serve static files
app.use(express.static(staticPath));

app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

صفحه 2 کد

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
Page 2

Page 2

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد صفحه 3

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
Page 3

Page 3

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد index.html

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
Main
type=]]>”speculationrules”>
{
“prerender”: [
{
“urls”: [“page2.html”] }
] }

Speculation API

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Speculation Rules API را می توان به عنوان یک نوع اسکریپت یا همچنین به عنوان یک JSON خارجی استفاده کرد، اما این باید در یک سربرگ مشخص شود.

Speculation Rules API یک API نیست که بتوان مستقیماً با JS استفاده کرد، مانند JSON کار می کند که در آن پیکربندی را مشخص می کنید.

اگر از کروم استفاده می‌کنید، قبل از اجرای نسخه آزمایشی، پیشنهاد می‌کنم ابزارهای توسعه‌دهنده را باز کنید، به Application بروید و در پانل سمت چپ بخشی به نام «بارهای گمانه‌زنی» را جستجو کنید. در آنجا می توانید ببینید که صفحه بارگیری شده است (اگرچه همچنان می توانید از شبکه استفاده کنید).

روی Page 3 و سپس Page 2 کلیک کنید. آیا تفاوت را می بینید؟ حالا بله، بیایید به مسئول این اتفاق توضیح دهیم.

type=]]>”speculationrules”>
{
“prerender”: [
{
“urls”: [“page2.html”] }
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در مرجع Speculation Rules API مشخص می کند که پیکربندی یک شی با 2 ویژگی است. prerender y prefetch. در حال حاضر ما بر روی آن تمرکز خواهیم کرد prerender.

طبق مستندات، قوانینی که ما استفاده می‌کنیم دارای ویژگی‌هایی مانند url هستند، آرایه‌ای که در آن URL‌هایی را که می‌خواهیم از قبل اجرا کنیم، قرار می‌دهیم.

همچنین ویژگی Where برای انتخاب پیشرفته تری از آنچه می خواهیم پیش رندر کنیم وجود دارد (ما در پست های دیگر به آن خواهیم پرداخت).

خاصیتی به نام eagerness وجود دارد که به مرورگر می‌گوید «چه زمانی» باید منابع مشخص‌شده در قانون را از قبل واکشی/پیش‌اجرا کند.

به‌طور پیش‌فرض برای آنچه در «urls» مشخص شده است، eagerness مقدار «فوری» دارد. این بدان معناست که پیش اجرا در اسرع وقت آغاز خواهد شد. سعی کنید آن ویژگی را با مقدار “moderate” اضافه کنید (فراموش نکنید که ابزارهای توسعه را باز کنید تا ببینید چه اتفاقی می افتد)

type=]]>”speculationrules”>
{
“prerender”: [
{
“urls”: [“page2.html”],
“eagerness”: “moderate”
}
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به شما می گوید که قانونی وجود دارد که اجرا نشده است

اکنون مکان نما را روی پیوند قرار دهید و خواهید دید که چگونه رویداد راه اندازی می شود و اجرای پیش اجرا انجام می شود. این برای جلوگیری از پیش اجراهای غیر ضروری بسیار مفید است.

در پست های آینده بیشتر در مورد انواع مختلف اشتیاق صحبت خواهیم کرد. توجه: شما هیچ راهی برای دانستن اینکه این رویدادها دقیقاً چه زمانی رخ خواهند داد، ندارید، این به مرورگر بستگی دارد که تصمیم بگیرد.

ملاحظات

اسکریپت تجزیه و تحلیل شما و اجرای اسکریپت های خاصی که باید فقط زمانی که کاربر از سند بازدید می کند اجرا شود، نیاز به کد اضافی دارد.

به کد سرقت زیر نگاه کنید… با الهام از مستندات موزیلا

if (document.prerendering) {
document.addEventListener(“prerenderingchange”, initAnalytics, {
once: true,
});
} else {
initAnalytics();
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در حالی که API نمی تواند مستقیماً با JS استفاده شود، می توانید از JS برای افزودن پویا استفاده کنید

if (
HTMLScriptElement.supports &&
HTMLScriptElement.supports(“speculationrules”)
) {
const specScript = document.createElement(“script”);
specScript.type = “speculationrules”;
const specRules = {
prefetch: [
{
source: “list”,
urls: [“/next.html”],
},
],
};
specScript.textContent = JSON.stringify(specRules);
document.body.append(specScript);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در آینده پست‌های بیشتری درباره این API منتشر خواهد شد، ادغام با react و نحوه استفاده از آن در تولید بدون نگرانی حتی اگر این API آزمایشی باشد.

اگر آن را دوست دارید، آن را به اشتراک بگذارید، اما همچنین XD. در پست های بعدی می بینمت

const express = require("express");
const path = require("path");

const app = express();
const port = process.env.PORT || 9000;

// Define the static files directory
const staticPath = path.join(__dirname, "public");

// Middleware to delay response for HTML files
app.use((req, res, next) => {
  if (req.url.endsWith(".html")) {
    setTimeout(() => next(), 2000); // Delay by 2 seconds
  } else {
    next();
  }
});

// Serve static files
app.use(express.static(staticPath));

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />