Отложите разбор JavaScript - Google Page Speed - PullRequest
16 голосов
/ 26 августа 2011

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

Отсрочка разбора JavaScript

88,6 КБ JavaScript анализируется во время начальной загрузки страницы. Перенести парсинг JavaScript, чтобы уменьшить блокировку рендеринга страницы. http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js (76,8 КБ) http://websiteurl/js/plugins.js (11,7 КБ) 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>

Что мне нужно сделать, чтобы повысить производительность с помощью отсрочки?

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

Ответы [ 5 ]

7 голосов
/ 27 февраля 2012

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

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

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

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

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

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

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

-V

1 голос
/ 31 декабря 2014

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

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>
1 голос
/ 20 января 2013

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

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

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

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

0 голосов
/ 10 января 2014

Привет, недавно мы создали фреймворк nodejs с открытым исходным кодом, называемый «элегантный фреймворк», который поможет вам создать быстрое веб-приложение, и нам удалось получить 100% -ную скорость Google 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
}
0 голосов
/ 26 августа 2011

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

Хотя в нем конкретно упоминается плагин 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.

...