Борьба с медленной загрузкой страницы.

13.12.2019

Итак проблема - на сайте есть очень тяжелая, порядка 10 мегабайт, страница.

Причиной такого размер является таблица, конкретно в этом случаи сделанная на li, с массой элементов.

Хуже того, в каждой строке (li), еще и множество div, span и т.д т.п. убрать которые нельзя.


Решение: генерировать станицу не на сервере, а передавать браузеру JSON с данными, и формировать страницу уже на клиенте.

Общий набросок кода:

 
<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>

<div id="main"></div>

<style type="text/css">
.id {
    border: 1px solid red;
    margin-right: 20px;
}

.name {
    border: 1px solid blue;
}
</style>
    
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
(function($){
$(function() {
    let Templater = {
        
        getData : function () {
            // Данные можно или сразу передавать в теле HTML документа, или запрашивать с сервера через Ajax
            let aRet = [
                {
                    id : 1,
                    name : 'Jack'
                },
                {
                    id : 2,
                    name : 'Mac'
                },
            ];
            return aRet;
        },
        
        draw : function (aIn) {
            //console.debug(aIn);
            let sTMP = '';
            aIn.forEach(function(item, i) {
                //console.debug(item.id);
                sTMP += '<li><span class="id">'+item.id+'</span><span class="name">'+item.name+'</span></li>';
            });
            
            sTMP = "<ul>" +sTMP+ "</ul>";
            
            $("#main").html(sTMP);
        },
        
        dispatch : function () {
            this.draw(this.getData());
        }
    }
    
    Templater.dispatch();
});
})(jQuery);
</script>

    
</body>
</html>

Категории: Web, JavaScript
Пометки: javascript генерация li списка, для улучшения показателей google PageSpeed
Яндекс.Метрика