全屏 HTML 信息亭应用程序的内存/性能问题答案

【问题标题】：Memory/Performance issues with Fullscreen HTML kiosk app全屏 HTML 信息亭应用程序的内存/性能问题
【发布时间】：2014-05-13 15:14:10
【问题描述】：

我必须构建一个自助服务终端应用程序，它本质上是一堆全屏图像和一些交互式页面，也是全屏的，介于两者之间，应该是可滑动的。

硬件环境将混合使用平板电脑和 32 英寸触摸显示器。平板电脑将由站在展台上的小伙伴们操作，展示给大家免费使用。我们可能会使用连接到触摸屏的 Win 8 Pro 平板电脑和 Windows PC。

这样我可以在Chrome's Kiosk Mode 中全屏运行HTML/JS/CSS 来构建应用程序。我正在考虑使用RoyalSlider，它非常适合将图像和 html 幻灯片结合起来，并且与触摸输入配合得很好。

所有图像的分辨率均为 1920 x 1080，大约有 200 张。构建原型我看到这将RoyalSlider 推向了极限。

问题是我要么将numImagesToPreload 设置为一个较小的值，这会导致在滑动过快时图像无法立即准备好，或者我将numImagesToPreload 设置为一个较高的值，这最终会使浏览器使用大量内存并且然后在我尝试滑动第一页时立即崩溃。

这是我搭建的原型

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="royalslider/royalslider.css">
    <link rel="stylesheet" href="royalslider/skins/default/rs-default.css"> 

    <script src="royalslider/jquery-1.8.3.min.js"></script>
    <script src="royalslider/jquery.royalslider.min.js"></script>

    <style type="text/css">
        html,body,div {
            margin:0; padding:0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow:hidden; // to avoid scrollbars
        }

        .royalSlider {
            position: absolute;
            width: auto;
            height: auto;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
        }
    </style>

    <script type="text/javascript">

        function processXML () {
            var xml = loadXML("data.xml");

            var xmlDoc = $.parseXML(xml);
            var $xml = $(xmlDoc);

            $xml.find('page').each(function(index)
            {
                var src = $(this).find('src').text();
                var ext = src.split('.').pop();

                var newElement = 'None';

                if (ext === 'html') 
                {
                    newElement = loadHTMLFile(src);
                }
                else if (ext === 'jpg' || ext === 'jpeg' || ext === 'png') 
                {
                    newElement = '<img src="' + src + '" />';
                };

                $('.royalSlider').append(newElement);
            });
        }

        function loadHTMLFile (filename) {
            return loadFile(filename, 'html');
        }

        function loadXML (filename) {
            return loadFile(filename, 'xml');
        }

        function loadFile (filename, filetype) {
            return $.ajax({
                type: "GET",
                url: filename,
                dataType: filetype,
                async: false
                }).responseText;
        }
    </script>
</head>
<body>
    <div class="royalSlider rsDefault">
    </div>

    <script>
        jQuery(document).ready(function($) {
            processXML();

            $(".royalSlider").royalSlider({
                controlNavigation: 'none',
                arrowsNav: false,
                navigateByClick: false,
                autoScaleSlider:false,
                autoHeight: false,
                imageScaleMode: 'none',
                slidesSpacing: 0
            });
        });
    </script>
</body>

还有我的data.xmlsn-p

<?xml version="1.0" encoding="utf-8"?>
<content>
<page>
    <src>fullhd/page_001.jpg</src>
</page>
<page>
    <src>fullhd/page_002.jpg</src>
</page>
<page>
    <src>fullhd/page_003.jpg</src>
</page>
<page>
    <src>fullhd/page_004.jpg</src>
</page>
...
</content>

有人知道我如何优化RoyalSlider 来解决上述问题吗？或者你知道我应该看看的任何方法/工具/框架吗？

【问题讨论】：

您可能会遇到一个棘手的问题，因为在内存中存储如此多的大图像（作为未压缩的位图）肯定会占用空间。对于初学者，请尝试使用 IE11 的内存分析器。（另外；您能否首先确定您计划使用的平板电脑具有 1920x1080 的屏幕，而不是少一个像素？）
这可能会有所帮助 - help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/…

标签： javascript html performance memory fullscreen

【解决方案1】：

我无法使用 RoyalSlider，但它确实将此列为功能之一：

内存管理

Gallery 仅在显示列表中保留几张幻灯片，并且不使用在移动设备上节省内存的“克隆”技术。

这很好；正如您所注意到的，同时将每个图像加载到内存中可能会出错。相反，您应该利用浏览器缓存。

您的应用程序和服务器需要允许缓存图像；如果没有，请更改它们以便它们这样做。

然后诀窍是将图像放入缓存中...... .

这是一个 jQuery 解决方案，它应该自动将每个图像放入缓存中（我还没有测试过）。它加载一张图片，将其移除，然后移动到下一张图片：

var urls = ['img001.jpg', 'img002.jpg'],
    $image;

function loadImage(i) {

    if ($image) {
        // unload the image (but now its in the browser cache)
        $image.remove();
    }

    var url = urls[i];
    if (!url) {
        // no more images
        return;
    }

    $image = $('<img>', { src: urls[i], style: 'display: none' }).on('load', function () {
        // done loading this image; move to next one
        loadImage(i + 1);
    });

    // add the image to the DOM to make it load
    $(document.body).append($image);
}

loadImage(0);

【讨论】：