بارگذاری جاوا اسکریپت و سی اس اس قبل از اجرا بسیار مهم است، ما در این مطلب قصد داریم درباره بارگذاری جاوا اسکریپت و سی اس اس صحبت کنیم.

کامپوننت های پیشرفته بارگذاری جاوا اسکریپت و سی اس اس قبل از اجرا می توانند برای بهبود عملکرد بسیار مناسب باشند. روش های مختلفی برای انجام این کار وجود دارد اما حتی بهترین روش ها نیز هزینه ای را برای شما خواهند داشت( این هزینه شامل هزینه iframe و همینطور هزینه parse کردن و اجرای java script و سی اس اس از پیش بارگذاری شده می باشد). علاوه بر این در اینجا یک ریسک خطرناک به وجود آمدن ارورهای جاوا اسکریپت نیز وجود دارد که این ارورها زمانی اتفاق می افتند که اسکریپتی که شما بارگذاری کرده اید به صورت پیشفرض بر روی صفحه ای بارگذاری شود که با صفحه ای که از پیش بارگذاری شده بود تفاوت داشته باشد. بعد از آنکه من خطاهای بسیار زیادی را مرتکب شدم و تست های مختلفی را انجام دادم به چیزی دست پیدا کردم که بتواند بر روی مرورگرهای مختلف کار کند:

-          در اینترنت اکسپلورر از new Image().src برای بارگذاری تمام انواع کامپوننت ها استفاده کنید.

-          در سایر مرورگرها از تگ داینامیک <object> برای این کار استفاده کنید.

کد کامل شده این مقاله

ما در این بخش نتیجه نهایی را برای شما آورده ایم و در ادامه نیز برخی از جزئیات مربوط به آن را بیان کرده ایم. من در این مثال فرض کرده ام که برخی از مقدمات این صفحه بعد از بارگذاری کامپوننت ها در صفحه بعدی مورد نیاز هستند. کامپوننت ها در اینجا عبارت اند از: یک سی اس اس، یک جاوا اسکریپت و یک PNG.

window.onload = function () {


    var i = 0,

        max = 0,

        o = null,


        // list of stuff to preload

        preload = [

            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',

            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',

            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'

        ],

        isIE = navigator.appName.indexOf('Microsoft') === 0;


    for (i = 0, max = preload.length; i < max; i += 1) {

        

        if (isIE) {

            new Image().src = preload[i];

            continue;

        }

        o = document.createElement('object');

        o.data = preload[i];

        

        // IE stuff, otherwise 0x0 is OK

        //o.width = 1;

        //o.height = 1;

        //o.style.visibility = "hidden";

        //o.type = "text/plain"; // IE

        o.width  = 0;

        o.height = 0;

        

        

        // only FF appends to the head

        // all others require body

        document.body.appendChild(o);

    }

    

};

کامپوننت های جاوا اسکریپت و سی اس اس در این مقاله

-          new Image().src کار خود را در FF انجام نمی دهد چرا که دارای یک حافظه کش جداگانه برای تصاویر است. علاوه بر این به نظر نمی رسد که در سافاری نیز کار کند چرا که سی اس اس و جاوا اسکریپت که در صفحه بعدی درخواست می شوند باید در آن ذخیره شده باشند.

-          عنصر داینامیک object باید در اکثر مرورگرها خارج از head باشد.

-          این object داینامیک همچنین در اینترنت اکسپلورر نسخه 7 کار می کند و در صورتی که برخی از تکنیک های خاص را به کار بگیرید، می توانید در نسخه 8 نیز از آن استفاده کنید اما در نسخه 6 کار نمی کند. در یک تست جداگانه که من انجام دادم متوجه شدم که استفاده از object داینامیک در اینترنت اکسپلورر بسیار هزینه بردار خواهد بود. در ادامه برخی از تلاش های ناموفقی که انجام داده ام و با شکست روبرو شده اند را برای شما آورده ام.

برخی از تلاش های ناموفق من

1-      من در واقع این پست را از Ben Cherry الهام گرفتم. او کسی بود که سی اس اس و جاوا اسکریپت را در یک print stylesheet بارگذاری کرد. البته متاسفانه این تکنیک بر روی مرورگر کروم کار نکرد چرا که جاوا اسکریپت را مخفی می کند اما در صفحه بعد آن را اجرا نمی کند.

2-      یکی از کامپوننت هایی که در پست Ben پیشنهاد می شود، استفاده از ویژگی های نوع داده نامعتبر برای جلوگیری از اجرا است.

var s = document.createElement('script');

s.src = preload[1];

s.type = "text/cache";

document.getElementsByTagName('head')[0].appendChild(s)

;

در بسیاری از بخش ها این تکنیک کار می کرد اما در FF3.6 کار نمی کرد چرا که JS هرگز درخواست داده نمیشد.

3-      یک لینک مقدماتی داینامیک در هیچ مرورگری کار نمی کرد، حتی در FF که احتمالا تنها مرورگری بود که باید از این تکنیک پشتیبانی می کرد.

for (i = 0, max = preload.length; i < max; i += 1) {

    var link = document.createElement('link');

    link.href = preload[i];

    link.rel = "prefetch";

    document.getElementsByTagName('head')[0].appendChild(link);

}

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

من معتقدم که این یک راه حل است که من بسیار با آن راحت هستم. این روش قطعا نسبت به سایر روش های بارگذاری javaScript و سی اس اس مشکلات کمتری دارد. عناصر object می توانند هر نوع کامپوننتی را بارگذاری کنند. یک نکته بسیار مهم که باید به آن توجه داشته باشید این است که ارورهای JS در اینترنت اکسپلورر در صفحه دوم مشکلی ندارند چرا که من از  console.log در بارگذاری جاوا اسکریپت استفاده می کنم.