javascript - CSS Sprite 性能

Question

我有一个 500x640 的静态图像，位于文件夹中，由 20x20 block 和 css Sprite 组成，我正在设置背景位置来显示每 block ，我需要这样的显示以便以后能够对每 block 进行操作。

CSS:

   .piece
        {
            width: 20px;
            height: 20px;
            display: inline-block;
            //display: inline;
            //zoom:1;
        }        

    .ob { background-image: url("/Images/ob.jpg");}

js:

<script id="flipTemplate" type="text/html">
    <div class="piece ob" data-bind="style: { backgroundPosition: viewModel.getLeftValue($index) + ' ' + viewModel.getTopValue($index) }, attr: {cond: Cond, id: Id }, click: viewModel.setClick ">
                </div>
</script>
<script type="text/javascript">
    viewModel = {
        flips: ko.observableArray([]),      

        setClick: function (data, e) {
            e.preventDefault();            
            //doing click
        },

        getLeftValue: function (index) {

            var position = 0;

            var currentLine = div(index(), 25);

            if (currentLine > 0)
                return '-' + (index() - (currentLine * 25)) * 20 + 'px';
            else
                return '-' + index() * 20 + 'px';
        },

        getTopValue: function (index) {

            return '-' + (div(index(), 25)) * 20 + 'px';
        }
    };    

    ko.applyBindings(viewModel);
</script>
function div(val, by){
    return (val - val % by) / by;
}

所以我遇到了一些性能问题。例如，在 Opera 和 FF 图像中加载速度非常快，大约 1 秒，在 IE 中大约 3 秒，但在 Chrome 中加载速度非常慢

在 Chrome 中显示所有片段大约需要 17 秒...

浏览器只执行一个获取图像的请求而不是从中剪切小块，为什么在 Chrome 中可能需要这么长时间？

有什么方法可以提高性能吗？

刚刚执行了 CTRL+Refresh，这里出现了奇怪的加载结果:

更新:我刚刚在这里放了一个样本:http://bit.ly/TrcCdp

更新:在我的示例中有一个 JSON 数组，它包含 800 个元素，所以我只是看看我是否减少它，例如 600-700 个元素，性能变得更好，但无论如何我需要 800 个元素。

例如，当只有 600 个元素时，它会将 Chrome 中的负载减少到大约 6 秒....

所以问题可能出在淘汰迭代模板的某个地方？

Answer 1

问题不在于图像。可以通过在顶部放置预加载来固定图像，在任何样式表或脚本标记之前:

<meta name="viewport" content="width=device-width">

<script type="text/javascript">
    var img = new Image();
    img.src = 'TestApp_files/obm000.jpg';
</script>

<link href="TestApp_files/jquery00.css" rel="stylesheet">
<link href="TestApp_files/jquery01.css" rel="stylesheet">
<!-- ad nauseum -->

在此之后，图像会在 170 毫秒内加载(本地)。但是，该页面在尝试决定要做什么之后又会困惑 10-15 秒。

根本问题是 javascript 绝对是一团糟。图像/文件/函数名称是神秘的。页面中间的东西取决于代码，末尾取决于代码，开头取决于末尾代码。 Controller / View /模型逻辑无处不在。全局变量和多文件耦合...hokay，</soapbox> ，现在开始治疗症状。

问题 1:DOM 加载前的绑定(bind)敲除

将 applyBindings 放入一个 domready 回调中:

jQuery(function($) {
   ko.applyBindings(viewModel);
});

问题2:foreach很慢

对于大型数据集，foreach 绑定(bind)的淘汰赛非常慢。您可以尝试 jQuery 模板并将 foreach 移动到模板内，as described in this SO question .它似乎将时间缩短到大约 3 秒。

我真的不明白为什么这是必要的，因为它似乎可以很好地处理当前的 foreach，它只是永远挂起，而 knockout 在后台做了一些魔术，据我所知，发生在 foreach 完成之后.

旁注:是否有必要将翻转放入可观察数组中？我假设您打算稍后使用它，因为当前代码中没有任何东西需要它。如果不是，请将其取出，这将有助于提高性能(尽管它不会解决此问题)。

干杯，我希望这有帮助。