كيفية تحميل ملفات JavaScript و CSS في الخلفية ، لجعلها جاهزة في ذاكرة التخزين المؤقت للمتصفح عندما يذهب المستخدم إلى الصفحة الرئيسية؟

StackOverflow https://stackoverflow.com/questions/3627981

سؤال

أرغب في تحميل ملف JS وملف CSS من الصفحة المقصودة لتحسين تحميل الموقع الرئيسي ، بعد التحويل في الهبوط. كنت أبحث عن معلومات حول هذا الأمر وحاولت أخيرًا إنجاز ذلك باستخدام:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'jsUrl');
    xhr.send('');
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'cssUrl');
    xhr.send('');

مع Firefox هذا رائع ، ولكن مع Chrome يبدو أن مكالمات XHR يتم تخزينها مؤقتًا في ذاكرة التخزين المؤقت المختلفة عن ملفات CSS و JS. نحن لا نستخدم jQuery ، يجب أن تكون الصفحة المقصودة خفيفة الوزن (أقل حمولة ، معدل تحويل أكبر).

هل لديك أي توصية لطريقة أخرى لحل المشكلة الأصلية؟ (مكونات التحميل المسبق)

هل تعرف كيف تصنع هذه الطلبات من Chrome Cache؟

هل كانت مفيدة؟

المحلول 2

هذا هو الحل الذي تم اختباره في موقع حجم كبير يعمل.

أولاً ، لتجنب المنافسة بين موارد الصفحة المقصودة والموارد المحملة مسبقًا للنطاق الترددي ، يمكنك تأخير الحمل باستخدام JavaScript:

var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
    if(prevOnLoad) {
        try{
           prevOnLoad();
        }catch(err){
        }
    }
    preloadSiteComponents();
}

window.onload=onLoadPreloadComponents;

ليست هذه هي الطريقة التي حللت بها هذا لأنه في حالة الاستخدام الخاصة بي ، حدث فلاش (باستخدام الفلاش إلى JS Brigde) عند تحميل الهبوط أخيرًا. لكن الكود السابق يجب أن يعمل أيضًا. عندما صفحة التحميل يتم إطلاق الحدث بواسطة المتصفح ، وستقوم هذه الوظيفة بتنفيذ رمز OnLoad السابق والإفطار المسبق.

أضع cointainer div فارغ حيث سيتم تحميل iframe.

<div id="mainSiteComponentsContainer" style="display: none;">
</div>

ورمز الوظيفة هو:

function preloadSiteComponents() {
    try{
        document.getElementById('mainSiteComponentsContainer')
            .innerHTML=
                "<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
    }catch(err) {
    }
}

كما يمكنك أن ترى ، يكون عنوان URL Link to Iframe ديناميكيًا ، فهو يتغير بين إصدارات الاختلافات (عمليات نشر مختلفة) لتجنب ذاكرة التخزين المؤقت للمتصفح غير المرغوب فيها مع عمليات نشر جديدة.

يمكن أن يكون HTML الذي سيكون في iFrame شيئًا من هذا القبيل (على سبيل المثال):

<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="noindex,nofollow" name="robots">
        <script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
        <link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
    </head>
    <body> </body>
</html>

هنا يمكنك رؤية الروابط إلى المكونات التي أريد التحميل المسبق. أخيرًا ، سيكون لدى Div Cointainer iframe. بعد حدث Onload:

<div id="mainSiteComponentsContainer" style="display: none;">
    <iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
        <html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta content="noindex,nofollow" name="robots">
                <script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
                <link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
            </head>
            <body> </body>
        </html>
    </iframe>
</div>

يمكنك رؤية حل العمل هنا.

استخدم Firebug لرؤية الحمل المتأخر لهذه المكونات.

نصائح أخرى

افكار عشوائية:

ربما يمكنك تضمين iFrame مخفي في صفحتك المقصودة التي لا تقوم بتحميل صفحة لا تفعل شيئًا سوى تضمين ملفات JavaScript و CSS. إذا قمت بإجراء تحميل هذا iframe في JavaScript الخاص بك ، فلا ينبغي لها حظر تحميل الصفحة المقصودة أو تقديمها ، ومع ذلك سيتم تحميل ملفات البرنامج النصي و CSS بواسطة المتصفح بنفس الطريقة التي سيكون بها أي صفحة أخرى.

لم تجرب هذا ولكن إضافة هذا إلى أسفل هبوط HTML يجب أن تعمل:

<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">

لا يهتم المتصفح في الواقع بأن الموارد ليست صورًا يجب أن تجلبها وتخزينها على أي حال. عادةً ما يقوم المتصفح بتحميل الموارد في طلب الصفحة حتى لا تؤخر العناصر الأخرى ومعها display:none ربما لن تمنع العرض أيضًا.

الجانب السلبي هو أنك لن تتحمل الصور المحددة في CSS أو @imports ما لم تكن مسبقًا لهم يدويًا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top