Производительность динамической загрузки элементов с использованием JavaScript? - PullRequest
Новая
       17

Производительность динамической загрузки элементов с использованием JavaScript?

0 голосов
/ 21 марта 2012

Я смотрел на динамическую загрузку таблиц стилей CSS, сценариев JavaScript, HTML-элементов с помощью JavaScript.Казалось бы, все хорошо, но мне было интересно, каков был недостаток загрузки таким образом?Каковы преимущества и недостатки выполнения чего-то подобного?Что делать, если я таким образом загрузил целую страницу?

Не загружается ли страница медленнее?

Делает ли это загрузку страницы более синхронной / асинхронной?

Это наводняет серверс запросами?(например, ленивый загрузчик)

Захватывает ли это ресурсы сервера или клиента?

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Загружается ли страница медленнее?

Заполняет ли сервер запросы?(например, lazy loader)

Да и Нет обоим.

Страница загружается очень быстро, если в ней мало контента.Обычно вам нужно загрузить только , что необходимо , следовательно «ленивая загрузка» .Для загрузки первой страницы вы можете загрузить свой CSS, который необходим.Что касается JS, вы можете загрузить их последними (как раз перед </body>), поскольку загрузка сценариев несовместима в браузерах (некоторые загружаются параллельно, некоторые загружаются последовательно. Но они выполняются в определенном порядке).просто для безопасности также, что элементы, которыми вы должны манипулировать в этих скриптах, существуют, когда вы выполняете их (но мы сохранены .ready() jQuery в наши дни)

как для заполнения сервера .. ошибаться.больше похоже на трущобы.браузеры имеют около 2-8 «каналов» для загрузки файлов.Например, IE6 имеет 2 канала.если у вас уже есть один поток видео, он принимает канал, что означает, что остальная часть материала должна загружаться с использованием другого канала, и теперь они загружаются последовательно - что делает его медленным.Один из способов уменьшить это - минимизировать (сжать) и объединить (объединить) ваши файлы.лично я объединяю библиотеки (jQuery и другие), поскольку они никогда не меняются вообще.CSS, которые не меняются часто, я сжимаю и объединяю.они не только меньше по размеру, но и меньше по размеру файлов - не перегружать каналы

Это делает загрузку страницы более синхронной / асинхронной?

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

Захватывает ли это ресурсы сервера или клиента?

ресурсов сервера, да.если у вас слишком много файлов для запроса, это создает нагрузку на ваш сервер.Вот почему вы должны иметь кеш-систему, как кеш скрипта, так и кеш браузера.Под кешем браузера я подразумеваю естественный кеш, в котором хранятся CSS, JS, изображения и так далее.однако AJAX НЕ кэшируется (насколько я знаю), и поэтому вам нужно реализовать свой собственный кеш в JS.

Давайте возьмем, к примеру, Twitter.Вы просматриваете твиты человека.поток состоит в том, что вы нажимаете, AJAX-запрос на сообщения, загружаете для просмотра и готово.Теперь вы хотите посмотреть на другого парня.та же процедура. Теперь вы хотите вернуться к другому человеку.Вы, как программист / сопровождающий сервера, захотите снова загрузить этот контент?Вы хотели бы запросить еще раз?НЕТ, вместо этого, программисты используют объект / локальное хранилище для хранения данных.Таким образом, нет ненужных запросов.Что касается истечения срока действия ... вам придется это выяснить.

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

0 голосов
/ 21 марта 2012

Все зависит от ваших конкретных потребностей.Это не очень рекомендуется, когда у вас мало CSS и т. Д. HTML лучше, если вы не загружаете его динамически, поскольку, если вы хотите сайт, оптимизированный для SEO, это самый важный контент,и загрузка его с помощью javascript ничего не даст поисковой системе.

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

var preloadcache = [];
var preloadImages = function(arr){
    for(var i in arr){
        preloadcache.push(function(){
            var img = document.createElement("img");
            img.setAttribute("src",arr[i]);
            return img;
        }());
    }
}

Просто поместите все ресурсыв массиве и вызовите функцию с ним: 

var myimages = ['path/to/image.png','another/path/example.jpg','ohyes.gif'];
preloadImages(myimages);

Однако, если вы хотите загрузить элементы в тело или заголовок DOM, просто создайте их и добавьте их следующим образом: 

var body = documents.getElementsByTagName("body")[0];
var head = documents.getElementsByTagName("head")[0];

// then prepare your elements

var p = document.createElement("p");
p.setAttribute("class","myclass");
p.innerHTML = 'some text with <span> html </span>';

// the append them

body.appendChild(p);

Сделайте это со скриптами, но попробуйте НЕ включать код в innerHTML, а помещайте их в отдельные файлы и просто устанавливайте их атрибуты src.Будьте осторожны, так как они будут работать, как только вы добавите их.Попробуйте использовать document.onload = function(){ ... } для этого.

...