Каковы способы свести к минимуму ожидание страницы из внешних выносок javascript?

Question

Каковы способы свести к минимуму ожидание страницы из внешних выносок javascript?

Какие трюки можно использовать, чтобы остановить отклонения javascript для различных онлайн-сервисов от замедления загрузки страницы?

Очевидным решением является выполнение всех вызовов javascript в нижней части страницы, но некоторые вызовы должны выполняться вверху и посередине. Другая идея, которая приходит на ум, - использовать iframes.

Вам когда-нибудь приходилось распутывать сайт, полный внешне загружаемого javascript, который настолько медленный, что он не освобождает apache и не вызывает сбоев при высокой нагрузке? Какие-нибудь советы и трюки?

javascript,

1

Ответов: 5

JavaScript,

Похожие вопросы

score 2 · Accepted Answer

2

window onload - хорошая концепция, но лучший вариант - использовать jQuery и поместить ваш код в «готовый документ». Это имеет тот же эффект, но вам не нужно беспокоиться о том, что функция onload уже имеет подписчика.

http://docs.jquery.com/Core/jQuery#callback

$(function(){
  // Document is ready
});

ИЛИ:

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

edit: Используйте этот шаблон для вызова всех внешних служб. Обновите свои внешние файлы сценариев, чтобы поместить их вызовы ajax внешним сервисам внутри одного из этих блоков готового документа вместо выполнения встроенного. Тогда единственным временем загрузки будет время, необходимое для фактической загрузки файлов сценариев.

edit2: Вы можете загружать скрипты после загрузки страницы или в любое другое событие dom на странице, используя встроенную возможность для jQuery.

http://docs.jquery.com/Ajax/jQuery.getScript

jQuery(function($) {
   $.getScript("http://www.yourdomain.com/scripts/somescript1.js"); 
   $.getScript("http://www.yourdomain.com/scripts/somescript2.js"); 
});

score 1 · Accepted Answer

1

Нелегкое решение. В некоторых случаях можно объединить внешние файлы в один блок и сжать его, чтобы минимизировать HTTP-запросы и передачу данных. Но при таком подходе вам нужно обслуживать новый файл javascript с вашего хоста, и это не всегда возможно.

Я не вижу, как iframes решает проблему ... Не могли бы вы рассказать?

score 1 · Accepted Answer

1

См. Статьи Обслуживание JavaScript Быстрые и быстрые веб-службы AJAX через несколько вызовов поддоменов для нескольких предложений.

score 1 · Accepted Answer

1

Если вы используете стороннюю фреймворк / инструментарий / библиотеку JavaScript, он, вероятно, предоставляет функцию / метод, позволяющий выполнять код после полной загрузки DOM. Например, Dojo Toolkit предоставляет dojo.addOnLoad . Аналогично, jQuery предоставляет Events / ready (или его сокращенную форму , доступную, передавая функцию непосредственно объекту jQuery).

Если вы придерживаетесь простого JavaScript, то трюк заключается в использовании обработчика события window.onload. В то время как это, в конечном счете, выполнит одно и то же, window.onload выполняется после страницы - и все на ней, включая изображения, - полностью загружено, тогда как вышеупомянутые библиотеки обнаруживают первый момент, когда DOM готов, перед загрузкой изображений.

Если вам нужен доступ к DOM из сценария в голове, это будет предпочтительной альтернативой добавлению сценариев в конец документа.

Например (используя window.onload):

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            window.onload = function () {
                alert(document.getElementsByTagName("body")[0].className);
            };
        </script>
    <style type="text/css">
        .testClass { color: green; background-color: red; }
    </style>
    </head>
    <body class="testClass">
        <p>Test Content</p>
    </body>
</html>

Это позволит вам запланировать определенное действие после того, как страница закончит загрузку. Чтобы увидеть этот эффект в действии, сравните приведенный выше скрипт со следующим, который блокирует загрузку страницы, пока вы не упустите окно модального предупреждения:

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            alert("Are you seeing a blank page underneath this alert?");
        </script>
        <style type="text/css">
            .testClass { color: green; background-color: red; }
        </style>
    </head>
    <body class="testClass">
        <p>Test Content</p>
    </body>
</html>

Если вы уже определили window.onload или если вас беспокоит, вы можете переопределить его и разбить сторонние скрипты, используйте этот метод для добавления к - а не переопределить - window.onload. (Это немного модифицированная версия функции addLoadEvent Саймона Уиллисона .)

if (!window.addOnLoad)
{
    window.addOnLoad = function (f) {
        var o = window.onload;

        window.onload = function () {
            if (typeof o == "function") o();
            f();
        }
    };
}

Сценарий из первого примера, измененный для использования этого метода:

window.addOnLoad(function () {
    alert(document.getElementsByTagName("body")[0].className);
});

Изменено для использования Dojo:

dojo.addOnLoad(function () {
    alert(document.getElementsByTagName("body")[0].className);
});

Изменено для использования jQuery:

$(function () {
    alert(document.getElementsByTagName("body")[0].className);
});

Итак, теперь, когда вы можете выполнять код при загрузке страницы, вам, вероятно, захочется динамически загружать внешние скрипты. Как и в предыдущем разделе, большинство основных фреймворков / наборов инструментов / библиотек предоставляют способ этого.

Или вы можете бросить свой собственный:

if (!window.addScript)
{
    window.addScript = function (src, callback) {
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.src = src;
        script.type = "text/javascript";
        head.appendChild(script);
        if (typeof callback == "function") callback();
    };
}

window.addOnLoad(function () {
    window.addScript("example.js");
});

С Dojo ( dojo.io.script.attach ):

dojo.addOnLoad(function () {
    dojo.require("dojo.io.script");
    dojo.io.script.attach("exampleJsId", "example.js");
});

С jQuery ( jQuery.getScript ):

$(function () {
    $.getScript("example.js");
});

score 0 · Accepted Answer

0

Если вам не требуется определенное время загрузки объявления, вы можете загрузить его позже, добавив еще один элемент сценария на свою страницу во время выполнения.