Question

我目前正在Samsung Smart TV IDE中开发一个Web应用程序，我已经在IDE模拟器上对其进行了测试，并且运行良好。但是，当我在真实的电视（型号：UE32H4500AW）上尝试使用它时，性能会大大降低，当需要转换大量简单的div时，处理输入事件会花费很多时间。这是放慢速度的代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
        <script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
        <script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                border: 0;
                color: white;
                background: black;
            }
             body{
                overflow: hidden;
             }
             #wrapper {
                 position: relative;
                width: 70vw;
                height: 70vw;
                overflow: hidden;
             }
             #EPG-channel-wrapper {
                vertical-align: top;
                width: 20%;
                box-sizing: border-box;
                display: inline-block;
            }           
            .EPG-channel {
                height: 50px;
                width: auto;
                padding: 15px;
                border: 2px solid white;
                white-space: nowrap;
                overflow: hidden;
                vertical-align: top;
                text-overflow: ellipsis;
            }
            .EPG-channel-title-wrapper {
                display: inline-block;
                vertical-align: top;
            }
            .EPG-channel-title {
                vertical-align: top;
            }
            #EPG-program-wrapper {
                vertical-align: top;
                display: inline-block;
                position: relative;
                width: 75%;
                left: 3%;
                box-sizing: border-box;
                overflow-x: hidden;
            }
            .EPG-channel-programs {
                height: 84px;
                box-sizing: border-box;
                border: 2px solid yellow
            }
            .EPG-program {
                border: 2px solid cyan;
                height: 100%;
                width: 30%;
                box-sizing: border-box; 
                display: inline-block;
            }
            .EPG-program-context {
                display: inline-block;
            }
        </style>
        <script type="text/javascript">
            var widgetAPI = new Common.API.Widget();
            var tvKey = new Common.API.TVKeyValue();
            var Main = {};
            Main.onLoad = function()
            {
                // Enable key event processing
                document.onkeydown = Main.keyDown(event);
                widgetAPI.sendReadyEvent();
                Main.loadDivs();
            };
            Main.loadDivs = function() {
                var addChannels = [];
                var addPrograms = [];
                var width = 0;
                for(var i = 0; i< 140; i++){
                    addChannels[addChannels.length] = "<div class='EPG-channel'>";
                    addChannels[addChannels.length] = "<img alt='' src='' class='EPG-channel-img'>";
                    addChannels[addChannels.length] = "<div class='EPG-channel-title-wrapper'><div class='EPG-channel-title'>Test " + i +" </div></div></div>";
                    addPrograms[addPrograms.length] = "<div class='EPG-channel-programs'>";
                    for( var j = 0; j< 100; j++){
                        width = 200;
                        addPrograms[addPrograms.length] = "<div class='EPG-program' style='width:"+width+"px'>";
                        addPrograms[addPrograms.length] = "<div class='EPG-program-title'>Test program "+ i + " - " + j + " </div>";
                        addPrograms[addPrograms.length] = "<div class='EPG-program-duration'>00.00 - 00.00</div></div>";
                    };
                    addPrograms[addPrograms.length] = "</div>";
                };
                document.getElementById("EPG-channel-wrapper").innerHTML = addChannels.join('');
                document.getElementById("EPG-program-wrapper").innerHTML = addPrograms.join('');
            };
            Main.translate = 0;
            Main.keyDown = function(event)
            {
                var keyCode = event.keyCode;

                switch(keyCode)
                {
                    case tvKey.KEY_LEFT:
                        var elements = document.getElementsByClassName("EPG-program");
                        for (var i = 0; i < elements.length; i++){
                            elements[i].style.display = "";
                        }
                        break;
                    case tvKey.KEY_RIGHT:
                        var elements = document.getElementsByClassName("EPG-program");
                        for (var i = 0; i < elements.length; i++){
                            elements[i].style.display = "none";
                        }
                        break;
                    case tvKey.KEY_UP:
                        var translate = --Main.translate * document.getElementsByClassName("EPG-channel")[0].offsetHeight;
                        document.getElementById("EPG-channel-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
                        document.getElementById("EPG-program-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
                        break;
                    case tvKey.KEY_DOWN:
                        var translate = ++Main.translate * document.getElementsByClassName("EPG-channel")[0].offsetHeight;
                        document.getElementById("EPG-channel-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
                        document.getElementById("EPG-program-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
                        break;
                    default:
                        break;
                }
            };
        </script>
    </head>

    <body onkeydown="Main.keyDown(event)" onload="Main.onLoad();">
        <div id="wrapper">
            <div id="EPG-channel-wrapper"></div>
            <div id="EPG-program-wrapper"></div>
        </div>
    </body>
</html>

按右键时，它会隐藏所有程序，并且效果很好。

是否存在我可能缺少的内存泄漏，或者是否有其他方法可以更有效地转换该数量的div？预先感谢！

三星智能电视上的性能问题

0 个答案: