www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫واکشی اولیه در HTML5 Prefetching - HTML5


نویسنده: مشتبآ
تاریخ: ۱۳۹۲/۰۳/۰۹ ۱۹:۵
آدرس: www.dntips.ir
در HTML5 قابلیت‌های زیادی برای بهبود در سرعت نمایش و عملکرد سایت‌ها در نظر گرفته شده؛ یکی از این قابلیت‌های جالب، Prefetching  یا واکشی اولیه است. 
خب بزارید سناریو رو اینطور مطرح کنم: فرض کنید یک بازدید کننده به سایت شما مراجعه میکنه "abc.htm" و شما به عنوان یک طراح وب میدونید که بازدید کننده پس از مطالعه این صفحه به صفحه دیگه ای از سایت باید مراجعه کنه، به عنوان مثال "xyz.htm". با استفاده از قابلیت واکشی اولیه میشه مرورگر رو مجبور کرد که در زمانی که کاربر مشغول مشاهده، خواندن و یا گشت و گذار تو صفحه‌ی مورد نظر ماست، بیاد صفحات دیگری که برای اون مشخص میکنیم رو در پس زمینه بارگذاری کنه. با این عمل وقتی که کاربر، صفحه ما رو به سمت صفحات کش شده ترک میکنه، صفحات مورد نظر با سرعت فوق العاده ای نمایش داده میشن؛ دلیلش هم اینه که تمام اطلاعات صفحات کش شده توسط مرورگر دانلود شده و آماده نمایشه.
برای استفاده از این قابلیت باید در بخش head سایتمون یک لینک به صورت زیر به صفحه و یا تصویر مورد نظری که میخوایم کش بشه، قرار بدیم:
<link rel="prefetch" href="http://www.example.com/page2.aspx"> <!-- Firefox -->
<link rel="prerender" href="http://www.example.com/page2.aspx"> <!-- Chrome -->

یا

<link rel="prefetch" href="http://www.example.com/picture.jpg"> <!-- Firefox -->
<link rel="prerender" href="http://www.example.com/picture.jpg"> <!-- Chrome -->
همونطور که ملاحظه میکنید این قابلیت در حال حاضر فقط توسط دو مرورگر محبوب وب یعنی کروم و فایرفاکس پشتیبانی میشه و مرورگرهای دیگه با رسیدن به این خطوط از کش کردن اون صرف نظر میکنن.

نکته:

و در انتها لازمه به این نکته توجه کنید که وقتی صفحه ای از سایت ما که حاوی لینک های prefetch هست لود میشه، بلافاصله مرورگر شروع به گرفتن لینک‌های مورد نظر میکنه و اگر در سمت سرور در هنگام لود شدن صفحات کدی نوشته باشید اون کد اجرا میشه. توجه به این نکته میتونه از گیج شدن شما  در هنگام کار با متغیر هایی که توی session ذخیره میشن جلوگیری کنه!
مطالب مشابه

نظرات

  • مهمان در ۱۳۹۲/۰۳/۱۶ ۱۹:۴۴
    سلام دوست عزیز
    یک سوال داشتم
    زمانی که صفحه اصلی در حال لود هست آیا برای کش کردن صفحه دوم که در head اضافه کرده ایم، مرورگر در حالت لود می‌ماند؟ یعنی لود صفحه یا تصویر کش شده را مرورگر به نمایش می‌گذارد و لودینگ صفحه به حالت چرخش می‌رود یا این کش کردن در background رخ می‌دهد و کاربر فقط در هنگام لود صفحه اول، مرورگز خود را درگیر مشاهده می‌کند؟
    یک سوال دیگر
    اینکه آیا این لود باعث افزایش بازدید می‌شود و مثل لود معمولی صفحات هست؟
    ممنون از بابت این آموزش جالب و کاربردی
  • وحید نصیری در ۱۴۰۳/۰۷/۰۱ ۱۲:۳۳
    یک نکته‌ی تکمیلی: روش مدیریت prefetch proxy مرورگر کروم

    به‌خطاهای 404 سایت که نگاه کنیم، تعداد زیادی درخواست آدرس well-known/traffic-advice./ در آن وجود دارند که توسط Chrome Privacy Preserving Prefetch Proxy صادر می‌شوند و در اصل مجوز انجام خودکار نکات ذکر شده‌ی در این مطلب را جستجو می‌کنند (!) تا نتایج جستجوی گوگل سریعتری را به کاربران، از طریق کش پروکسی‌های خصوصی گوگل نمایش دهند؛ یعنی با فعال بودن آن، کل محتوای سایت را (و نه فقط چند صفحه‌ی پس و پیش یک مطلب را) در پروکسی‌های خصوصی گوگل، کش می‌کند!
    اگر علاقمند به بستن آن باشید (خصوصا اگر سایت شما از کوکی استفاده می‌کند و یا نیاز به ملاحظات امنیتی خاصی دارد و یا نمی‌خواهید بار سرور بیش از اندازه افزایش یابد)، روش کار به این صورت است:
    [ApiController]
[AllowAnonymous]
[Route(template: "/.well-known")]
public class PrefetchProxyController : ControllerBase
{
    [HttpGet(template: "traffic-advice")]
    [Produces(contentType: "application/trafficadvice+json")]
    public IActionResult TrafficAdvice()
        => Ok(new[]
        {
            new PrefetchProxyTrafficAdvice()
        });
}

public class PrefetchProxyTrafficAdvice
{
    [JsonPropertyName(name: "user_agent")]
    public string UserAgent { set; get; } = "prefetch-proxy";

    public bool Disallow { set; get; } = true;
}
    که در اصل یک چنین خروجی را با content-type ویژه‌ای که مشاهده می‌کنید، تولید می‌کند:
    [
    {"user_agent": "prefetch-proxy", "disallow": true}
]
    این تنظیم سبب می‌شود تا محتوای سایت، در کش پروکسی خصوصی گوگل ذخیره نشود.