CSS Sprites性能

Question

我有静态图像500x640坐在文件夹中用20x20件用css sprites拍摄,我设置背景位置来显示每一件,我需要这样的显示器以便能够随后操作每件.

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 +刷新和这里奇怪的加载结果:

更新:我刚刚在这里放了一个样本: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 绝对是一团糟。图像/文件/函数名称是神秘的。页面中间的东西取决于末尾的代码取决于开头的代码取决于末尾的代码。控制器/视图/模型逻辑遍布整个地图。全局变量和多文件耦合...好的，</soapbox>现在开始治疗症状。

问题1：在DOM加载之前绑定knockout

将 applyBindings 放入 domready 回调中：

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

问题2：foreach速度慢

对于大型数据集，淘汰 foreach 绑定速度非常慢。您可以尝试 jQuery 模板并将 foreach 移动到模板内，如此问题中所述。时间似乎缩短到了 3 秒左右。

我真的不明白为什么这是必要的，因为它似乎对当前的 foreach 渲染得很好，它只是永远挂起，而淘汰赛在后台做了一些魔法，据我所知，在 foreach 完成后发生。

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

干杯，我希望这有帮助。