Прогрессивная загрузка XML страниц05.08.2020 07:48

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

У нас есть очень большой XML. Это статья с очень большим количеством комментариев. На медленном и нестабильном мобильном интернете её загрузки можно и не дождаться. Во время загрузки случается обрыв связи и XML остаётся не догруженным. Казалось бы можно просто обновить страницу и браузер бы просто догрузил недостающую часть. Но нет. Браузер грузит страницу заново и снова это не удаётся и мы видим ошибку вместо страницы.

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

С чем мы будем работать

Статья в XML

Этот файл содержит заголовок, описание, текст статьи и много много комментариев. Если быть точнее, то 5962 комментария.

У каждого комментария есть атрибут 'индекс'. Этот индекс используется другими комментариями в атрибуте 'на' для того чтобы указать что комментарий является ответом на комментарий, индекс которого указан.

lorem-ipsum.xml



<статья>
    Lorem Ipsum
    
    <текст>Quisque sollicitudin malesuada urna, id tincidunt quam. Pellentesque luctus, sem vel posuere efficitur, est enim pulvinar orci, et vulputate orci dui a libero. Nam eget mauris sed diam pretium fermentum. Proin euismod ultrices justo, non aliquet ipsum bibendum at. Duis eget laoreet mauris. Morbi tristique arcu libero, quis pharetra justo bibendum eget. In at quam sed lacus vestibulum tincidunt quis ut ex.
    <комментарий индекс="1">
Nunc sit amet ligula mauris. Integer vel nisi ac turpis rhoncus suscipit. Fusce elementum ut elit quis rutrum. Nulla bibendum placerat ex pulvinar accumsan. Praesent vestibulum hendrerit accumsan. Sed quis ligula pretium, condimentum enim in, cursus elit. Phasellus quis mauris arcu. Integer congue ex et ante porttitor vestibulum. Donec vel mauris venenatis, ultrices leo in, dapibus metus. Morbi pharetra eleifend libero nec efficitur. Fusce efficitur et ligula quis scelerisque. Curabitur eget nibh at nunc lacinia fringilla et eget quam. Praesent malesuada, odio in pulvinar semper, libero nunc consectetur lorem, vel egestas erat tellus nec ipsum.


    <комментарий на="1" индекс="4">
Praesent varius vitae arcu sed imperdiet. Proin pulvinar a augue blandit scelerisque. Pellentesque lectus erat, gravida lobortis lorem ut, dignissim tempor felis. Nunc porttitor libero quis est sodales, non ornare metus eleifend. Cras orci lacus, auctor non sollicitudin lacinia, ultricies vitae diam. Fusce eu leo varius, interdum sapien ac, vestibulum orci. Sed placerat feugiat odio, vitae tempor tellus volutpat tincidunt. Cras dapibus est et mi euismod ornare. Vestibulum accumsan justo non volutpat dictum. Curabitur porttitor, magna id euismod tincidunt, metus nisl fermentum tellus, id pulvinar leo nibh vel velit. Sed gravida gravida sapien et porttitor. Nam volutpat, ex id faucibus commodo, arcu arcu fringilla mi, et volutpat nunc turpis at ligula. Pellentesque et vulputate ligula, lobortis dignissim ligula. Nulla laoreet auctor ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Основной XSLT шаблон

Это небольшой XSLT шаблон, который преобразует XML в полноценный xHTML и собирает из списка ветки комментариев.

статья.xslt


    

    
    

    
    
        
            
        
    

    
    
        
            
                
                
                

                
            
            
                
                
                
                    
                    

                    
                    

                    
                    
                

                
                
            











        
    

    
    
        
            Комментарии

             
            
        
    

    
    
        
        

            
            

            
            : 

            
                
                 
            

            
             
        
    

    
    
        
        
            
                Ответы

Тестируем

Ставим в браузере ограничение скорости GPRS. Открываем страницу и уходим пить чай. На экране будет предыдущая страница, до тех пор, пока не загрузится полностью XML файл и отработает XSLT шаблон.

lorem-ipsum.xml

Полная загрузка: 10,77 мин

Обрабатываем и делим XML файл

Нам надо разделить статью на часть с текстом статьи и несколько частей которые буду содержать комментарии.

В браузере пользователя сразу будет отображена часть с текстом с статьи и по мерере загрузки частей комментариев будут появлятся и они.

Поскольку работать мы будем с XML файлом, то почему бы операции с ним не доверить также XSLT шаблонам.

Задаём межстраничные связи комментариев

Шаблону задаётся количество комментариев на один XML файл и он комментариям дописывает атрибут 'страницы-ответов', в котором перечисляются индексы XML файлов, в которых будут находится ответы на этот комментарий.

xslt\задать-страницы-ответов.xslt:

Определяем индекс последнего XML файла с комментариями

Шаблон просто делит количество комментариев всего на количество комментариев на страницу и выводит целое число меньшее или равное результату.

xslt\индекс-последней-страницы.xslt:

Делим комметирии на диапазоны

Шаблон выбирает из статьи комментарии для заданного индекса ('страница') XML файла.

xslt\выделить-диапазон.xslt:


    

    

    
    

    
    

    
        
        href="../сборка-статьи.xslt" type="text/xsl"

        
        
    

    
        <статья путь="{$путь}">

Оставляем только текст статьи

Шаблон удаляет все комментарии, оставляя только текст статьи.

xslt\убрать-комментарии.xslt:


    

    
    
        
            
        
    

    
        
        href="../прогрессивная-загрузка.xslt" type="text/xsl"

Скачиваем msxsl.exe

Для использования шаблонов в коммандной строке нам понадобится простая утилита msxsl.exe. Ей мы можем задать XML документ и XSLT шаблон и получить результат в stdout или в заданный файл.

CMD файл

Теперь нам необходимо применить эти все шаблоны к XML файлу статьи.

progressive.cmd lorem-ipsum.xml 100

progressive.cmd:

chcp 65001

rem Создаём дирректорию с именем исходного XML файла без расширения
md "%~dpn1"

rem Задаём межстраничные связи комментариев
msxsl.exe %1 "%~dp0xslt\задать-страницы-ответов.xslt" -xw -o "%~dpn1\index.xml" комментариев=%2

rem Определяем индекс последнего XML файла с комментариями
for /f "delims=" %%a in ('msxsl.exe %1 ^"%~dp0xslt\индекс-последней-страницы.xslt^" комментариев^=%2') do set последняя=%%a

rem Делим комметирии на диапазоны
for /l %%i in (0,1,%последняя%) do msxsl.exe -o "%~dpn1\%%i.xml" "%~dpn1\index.xml" "%~dp0xslt\выделить-диапазон.xslt" комментариев=%2 страница=%%i путь="%~n1"

rem Оставляем только текст статьи
msxsl.exe "%~dpn1\index.xml" "%~dp0xslt\убрать-комментарии.xslt" -o "%~dpn1\index.xml"

Собираем в браузере

Прогрессивная загрузка

Этот шаблон отображает текст статьи, а в фрейме запускает загрузку статьи с комментариями. Как только блок комментариев появляется во фрейме он переносится на основную страницу. Второй шаблон в это время продожает подгружать комментарии и они появляются на основной странице сразу как только тот обработает очередную порцию.

прогрессивная-загрузка.xslt


    

    
    

    

        
        

        <script><![CDATA[
            setTimeout(function(){
                var фрейм = document.querySelector("#фрейм-загрузчик");
                if (фрейм && фрейм.contentDocument)
                {
                    var комментарии = фрейм.contentDocument.getElementById('комментарии');

                    // ждём пока во фрейме появится блок комментариев
                    if (комментарии)
                    {
                        // добавляем этот блок на эту страницу
                        document.body.appendChild(комментарии);
                        return;
                    }
                }

                // ставим новый Timeout пока не выполнятся все условия
                setTimeout(arguments.callee, 100);
            }, 100)]]>
        </script>
        <noscript>
            <!-- Если на странице запрещён JavaScript пользователь может вручную перейти на статью с комментариями -->
            <a href="0.xml">Комментарии</a>
        </noscript>
    </xsl:template>
</xsl:stylesheet></code></pre>

<p><br /></p>

<h3>Сборка статьи с&nbsp;комментариями</h3>

<p>Этот шаблон загружает основной текст статьи и&nbsp;подгружает комментарии из&nbsp;всех XML файлов.</p>

<p>сборка-статьи.xslt</p>

<pre><code class="xml"><xsl:stylesheet
  version="1.0"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:x="http://www.w3.org/1999/xhtml"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes" encoding="UTF-8"/>

    <!-- подключаем шаблон "статья.xslt" -->
    <xsl:include href="%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F.xslt"/>

    <!-- создаём ключь который автоматом выберет в текущем документе ответы на комментарий -->
    <xsl:key name="ответы" match="комментарий" use="@на"/>

    <xsl:param name="путь" select="статья/@путь"/>

    <xsl:template match="/">
        <!-- даём отработать шаблону "статья.xslt" -->
        <xsl:apply-templates select="document(concat($путь, '/index.xml'))/статья"/>
    </xsl:template>

    <!-- из подключённого шаблона мы вернёмся сюда -->
    <xsl:template match="статья" mode="комментарии">
        <details id="комментарии" open=''>
            <!-- на этом этапе основная страница уже сможет взять блок комментариев из фрейма -->
            <summary>Комментарии</summary>

            <!-- начинаем загрузку комментариев -->
            <xsl:call-template name="загрузить-страницу"/>
        </details>
    </xsl:template>

    <xsl:template name="загрузить-страницу">

        <!-- начинаем с XML с номером 0 -->
        <xsl:param name="номер" select="0"/>

        <!-- загружаем XML -->
        <xsl:param name="страница" select="document(concat($путь, '/', $номер, '.xml'))"/>

        <!-- если XML загружен -->
        <xsl:if test="$страница">

            <!-- запускаем обработку комментариев к статье -->
            <xsl:apply-templates select="$страница//комментарий[not(@на)]" />

            <!-- запускаем шаблон для следующего XML документа -->
            <xsl:call-template name="загрузить-страницу">
                <!-- задаём следующий номер XML -->
                <xsl:with-param name="номер" select="$номер + 1" />
            </xsl:call-template>
        </xsl:if>
    </xsl:template>

    <!-- для загрузки ответов на комментарии будет вызван этот шаблон -->
    <xsl:template match="комментарий" mode="ответы">
        <!-- проверяем есть ли ответы на комментарий в этом XML или на других страницах -->
        <xsl:if test="key('ответы', @индекс) or @страницы-ответов">
            <details open=''>
                <summary>Ответы</summary>

                <!-- показываем ответы из этого XML -->
                <xsl:apply-templates select="key('ответы', @индекс)"/>

                <!-- запускаем загрузку комментариев из других XML -->
                <xsl:call-template name="загрузить-ответы"/>
            </details>
        </xsl:if>
    </xsl:template>

    <xsl:template name="загрузить-ответы">
        <!-- получаем список номеров страниц -->
        <xsl:param name="страницы" select="concat(@страницы-ответов, ' ')"/>

        <!-- берём первый из списка -->
        <xsl:param name="номер" select="substring-before($страницы, ' ')"/>

        <!-- проверяем что он не пустой -->
        <xsl:if test="$номер">

            <!-- загружаем XML -->
            <xsl:apply-templates select="document(concat($путь, '/', $номер, '.xml'))" mode="ответы">
                <!-- передаём индекс комментария ответы на который надо загрузить -->
                <xsl:with-param name="на" select="@индекс"/>
            </xsl:apply-templates>

            <!-- вызываем снова этот же шаблон -->
            <xsl:call-template name="загрузить-ответы">

                <!-- передаём список оставшихся страниц -->
                <xsl:with-param name="страницы" select="substring-after($страницы, ' ')"/>
            </xsl:call-template>
        </xsl:if>
    </xsl:template>

    <xsl:template match="/" mode="ответы">
        <!-- это индекс комментария ответы на который надо получить -->
        <xsl:param name="на"/>

        <!-- отправляем на оформление ответы на комментарий -->
        <xsl:apply-templates select="key('ответы', $на)"/>
    </xsl:template>

</xsl:stylesheet></code></pre>

<p><br /></p>

<h3>Тестируем</h3>

<p>Включаем в&nbsp;браузере ограничение скорости GPRS и&nbsp;запускаем загрузку страницы.</p>

<p>lorem-ipsum/index.xml</p>

<p>Загрузка текста статьи: 2,28с<br />Загрузка первых комментариев: 14,41с<br />Полная загрузка: 11,33&nbsp;мин</p>

<p><br /></p>

<h2>Ссылки</h2>

<p>Шаблоны на&nbsp;GitHub</p>
    
            <p class="copyrights"><span class="source">&copy;&nbsp;<a target="_blank" rel="nofollow" href="https://habr.com/ru/post/513858/?utm_campaign=513858&amp;amp;utm_source=habrahabr&amp;amp;utm_medium=rss">Habrahabr.ru</a></span></p>
                    </div>
                                                    
            <br>
            <!--<div align="left">
                <script type="text/topadvert">
                load_event: page_load
                feed_id: 12105
                pattern_id: 8187
                tech_model:
                </script><script type="text/javascript" charset="utf-8" defer="defer" async="async" src="//loader.topadvert.ru/load.js"></script>
            </div>
            <br>-->

            <div style="padding-left: 20px;">
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2514821055276660"
                        crossorigin="anonymous"></script>
                <!-- PCNews 336x280 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-2514821055276660"
                     data-ad-slot="1200562049"
                     data-ad-format="auto"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
            <!-- comments -->
                            <noindex>
                    <div style="margin: 25px;" id="disqus_thread"></div>
                    <script type="text/javascript">
                        var disqus_shortname = 'pcnewsru';
                        var disqus_identifier = '1004927';
                        var disqus_title = 'Прогрессивная загрузка XML страниц';
                        var disqus_url = 'http://pcnews.ru/blogs/progressivnaa_zagruzka_xml_stranic-1004927.html';

                        (function() {
                            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                        })();
                    </script>
                    <!--<noscript>Please enable JavaScript to view the <a rel="nofollow" href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>-->
                    <!--<a href="http://disqus.com" rel="nofollow" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>-->
                </noindex>
            
        </div>

        <br class="clearer"/>
    </div>
    <br class="clearer"/>

    

        <div id="footer-2nd"></div>

        <div id="footer">
            <br/><br/>
            <ul class="horz-menu">
                <li class="about"><a href="/info/about.html" title="О проекте">О
                        проекте</a></li>
                <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a>
                </li>
                <li class="additional-menu"><a href="/info/reklama.html"
                                               title="Реклама" class="menu-item"><strong>Реклама</strong></a>
                    <a href="/info/partners.html" title="Партнёры"
                       class="menu-item">Партнёры</a>
                    <a href="/info/legal.html" title="Правовая информация"
                       class="menu-item">Правовая информация</a>
                    <a href="/info/contacts.html" title="Контакты"
                       class="menu-item">Контакты</a>
                    <a href="/feedback.html" title="Обратная связь" class="menu-item">Обратная
                        связь</a></li>
                <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img
                                src="/media/i/email.gif" alt="e-mail"/></a></li>
                <li style="visibility: hidden">
                    <noindex>
                        <!-- Rating@Mail.ru counter -->
                        <script type="text/javascript">
                            var _tmr = window._tmr || (window._tmr = []);
                            _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()});
                            (function (d, w, id) {
                                if (d.getElementById(id)) return;
                                var ts = d.createElement("script");
                                ts.type = "text/javascript";
                                ts.async = true;
                                ts.id = id;
                                ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
                                var f = function () {
                                    var s = d.getElementsByTagName("script")[0];
                                    s.parentNode.insertBefore(ts, s);
                                };
                                if (w.opera == "[object Opera]") {
                                    d.addEventListener("DOMContentLoaded", f, false);
                                } else {
                                    f();
                                }
                            })(document, window, "topmailru-code");
                        </script>
                        <noscript>
                            <div style="position:absolute;left:-10000px;">
                                <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1"
                                     width="1" alt="Рейтинг@Mail.ru"/>
                            </div>
                        </noscript>
                        <!-- //Rating@Mail.ru counter -->

                    </noindex>
                </li>
            </ul>
        </div>

        <!--[if lte IE 7]>
        <iframe id="popup-iframe" frameborder="0" scrolling="no">