Каков наиболее эффективный способ создания элементов HTML с использованием jQuery?
В современных браузерах и HTML5 в окне history есть метод под названием pushState. Это изменит URL-адрес и перенесет его в историю без загрузки страницы.
Вы можете использовать его следующим образом: он будет принимать 3 параметра: 1) объект состояния 2) название и URL-адрес):
window.history.pushState({page: "another"}, "another page", "example.html");
Это изменит URL-адрес, но не перезагрузит страницу, также не будет проверять, существует ли страница, поэтому, если вы используете какой-либо код javascript, который будет реагировать на URL-адрес, вы можете работать с ними следующим образом .
Также есть history.replaceState(), который делает точно то же самое, за исключением того, что он изменит текущую историю вместо создания нового!
Также вы можете создать функцию для проверки если существует history.pushState, а затем продолжайте с остальными:
function goTo(page, title, url) {
if ("undefined" !== typeof history.pushState) {
history.pushState({page: page}, title, url);
} else {
window.location.assign(url);
}
}
goTo("another page", "example", 'example.html');
Также вы можете изменить # для <HTML5 browsers, который не перезагрузит страницу, вот как Angular использовать SPA в соответствии с hashtag ...
Изменить # довольно легко, делая:
window.location.hash = "example";
, и вы можете обнаружить его следующим образом:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
7 ответов
Я использую $(document.createElement('div')); шоу Сравнительного тестирования , эта техника является самой быстрой. Я размышляю, что это вызвано тем, что jQuery не должен идентифицировать его как элемент и создать сам элемент.
необходимо действительно выполнить сравнительные тесты с различными механизмами JavaScript и взвесить аудиторию с результатами. Примите решение оттуда.
Если у Вас есть много содержимого HTML (больше, чем просто единственное отделение), Вы могли бы рассмотреть встраивание HTML в страницу в скрытом контейнере, то обновление его и создание его видимый при необходимости. Таким образом, значительная часть Вашей разметки может быть предварительно проанализирована браузером и постараться не увязать JavaScript, когда названо. Надежда это помогает!
Я думаю, что Вы используете лучший метод, хотя Вы могли оптимизировать его к:
$("<div/>");
лично я предложил бы (для удобочитаемости):
$('<div>');
некоторые числа на предложениях до сих пор (сафари 3.2.1 / Mac OS X):
var it = 50000;
var start = new Date().getTime();
for (i = 0; i < it; ++i) {
// test creation of an element
// see below statements
}
var end = new Date().getTime();
alert( end - start );
var e = $( document.createElement('div') ); // ~300ms
var e = $('<div>'); // ~3100ms
var e = $('<div></div>'); // ~3200ms
var e = $('<div/>'); // ~3500ms
Вам не нужна необработанная производительность от операции, которую Вы будете выполнять чрезвычайно нечасто с точки зрения ЦП.
Это неправильный ответ на вопрос, но все же я хотел бы поделиться этим .. .
Использование только document.createElement ('div') и пропуск JQuery значительно улучшит производительность, когда вы хотите создавать множество элементов на лету и добавлять их в DOM.
На самом деле, если вы выполняете (Взгляните на строку 117 ). Есть некоторые накладные расходы на вызов функций, но если производительность не критична (вы создаете сотни [тысячи] элементов), нет особых причин возвращаться к простой DOM . Простое создание элементов для новой веб-страницы - это, вероятно, тот случай, когда вам лучше всего будет придерживаться метода jQuery . $ (' document.createElement () .