Отложить разбор JavaScript - скорость страницы Google

Все мои файлы JavaScript уже находятся внизу, но Google Page Speed ​​дает это предложение для повышения скорости:

Отложить разбор JavaScript

88.6KiB JavaScript анализируется при начальной загрузке страницы. Перенести разбор JavaScript для уменьшения блокировки отображения страницы. http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js(76.8KiB) http://websiteurl/js/plugins.js (11.7KiB) http://websiteurl/(109B встроенного JavaScript)

Это мой html (пример)

<html>
<head>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
    <script src="js/plugins.js"></script>
    <script>$(document).ready(function() {
            $("#various2").fancybox({
                'width': 485,
                'height': 691,
            });
        });</script>
    </body>
    </html>

Что делать, чтобы увеличить производительность, используя defer?

Это только для Google хром или для всех?

ОТВЕТЫ

Ответ 1

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

Также используйте предварительную выборку dns в голове, чтобы установить базовый домен для google-code

<link rel="dns-prefetch" href="//ajax.googleapis.com">

Так как это всего лишь небольшой фрагмент кода, вы можете просто добавить его в свой файл plugins.js внизу, а затем отложить файл плагинов.

<script src="js/plugins.js" defer></script>

Что бы я ни делал, все мои сайты оптимизированы до 98 и 97 соответственно в yslow и скорости страницы.

Надеюсь, что это поможет.

-V

Ответ 2

Я вижу, что это старый вопрос, но поскольку я сам искал хороший ответ, я собираюсь поделиться методом, который я сейчас использую.

Что касается встроенного Javascript, то я должен изменить все атрибуты type на text/deferred-javascript или что-то подобное, чтобы код в теге script не оценивался во время загрузки страницы. Затем я присоединяю функцию к событию onload; указанная функция находит все скрипты, соответствующие указанному выше типу, и оценивает код внутри с помощью eval(). Я вообще знаю, что eval() является злом, но, похоже, он здесь полезен.

Для внешних файлов Javascript я делаю что-то очень похожее. Вместо добавления тегов script на страницу я записываю их и вставляю их один за другим после завершения загрузки страницы.

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

Ответ 3

Это, вероятно, общий ответ/предложение, когда он сталкивается с определенным уровнем производительности.

Хотя в нем конкретно упоминается jQuery, плагин и 109 байтов встроенного JavaScript. У вас есть встроенный JavaScript? Вы также размещаете свой JavaScript в нижней части <body>?

Пример

Загрузка статьи о производительности

EDIT:

На основе недавно опубликованного HTML...

В качестве теста удалите эти два элемента, чтобы узнать, не имеет значения:

<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->



<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>


Кроме того, в предупреждающем сообщении упоминается 109 байтов встроенного JS, но я не вижу ничего подобного в опубликованном HTML.

Ответ 4

Я получаю ту же проблему с Pagespeed - я предполагаю, что Pagespeed Analyzer не проверяет, находится ли Javascript в конце тела.

Ответ 5

Привет, недавно мы создали инфраструктуру opensource nodejs под названием "элегантная структура", которая помогает вам создавать быстрое веб-приложение, и нам удалось получить 100% скорость страницы Google на рабочем столе и на мобильных устройствах на всех страницах: вы можете проверить его по адресу:

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

есть много вещей, которые вы можете узнать из него, просмотрев источник страницы и, если что-либо, что вы не можете понять, прокомментируйте, чтобы я мог помочь вам с

пока вы можете попробовать этот метод:

// Load script element as a child of the body
function loadJS(src, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    script.src = src;
    document.body.appendChild(script);
}
// Load style element as a child of the body
function loadCSS(href,callback) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    if (element.readyState) {  //IE
        element.onreadystatechange = function () {
            if (element.readyState == "loaded" || script.readyState == "complete") {
                element.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        element.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    element.href = href;
    document.body.appendChild(element);
}
// Load All Resources
function loadResources() {
    // css
    loadCSS("/compressed/code-mirror-style.css?please1");
    loadCSS("/compressed/all.css?please2");

    // js
    loadJS("/compressed/code-mirror.js", function () {
        loadJS("/compressed/common.js", function () {
            $("[data-lang]").each(function () {
                var code = $(this).addClass("code").text();
                $(this).empty();

                var myCodeMirror = CodeMirror(this, {
                    value: code,
                    mode: $(this).attr("data-lang"),
                    lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'),
                    readOnly: true
                });
            });
        });
    });
}

// Check for browser support of event handling capability
if (window.addEventListener) {
    window.addEventListener("load", loadResources, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadResources);
} else {
    window.onload = loadResources
}

Ответ 6

Добавьте тег <script type="text/javascript" defer="defer">, как это работает для меня.

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>