Отложить разбор 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>
