Javascript CSS精灵性能

我有静态图像500x640坐在文件夹中的20x20件与css精灵，我设置背景位置显示每一件，我需要这样的显示，以便能够处理每一件以后

css:

js:

视图模型={
翻转：ko.observableArray（[]），
setClick：函数（数据，e）{
e、 预防默认值（）；
//点击
},
getLeftValue:函数（索引）{
var位置=0；
var currentLine=div（index（），25）；
如果（currentLine>0）
返回'-'+（index（）-（currentLine*25））*20+'px'；
其他的
返回'-'+index（）*20+'px'；
},
getTopValue:函数（索引）{
返回'-'+（div（index（），25））*20+'px'；
}
};    
应用绑定（视图模型）；
功能分区（val、by）{
返回值（val-val%by）/by；
}

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

用Chrome显示所有部件大约需要17秒

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

有什么方法可以提高绩效吗？

刚刚按CTRL+Refresh键，加载结果很奇怪：

更新： 我刚刚在这里放了一个样本：

更新： 在我的示例中，有一个JSON数组，它包含800个元素，所以我只是想知道如果我减少它，例如600-700个元素，性能会变得更好，但我仍然需要800个元素

e、 g当只有600个元素时，它将铬的负载降低到约6秒

---

因此，可能是敲除迭代模板的某个地方出现了问题？

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

<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 -->

问题2:foreach速度慢

对于大数据集，敲除foreach绑定的速度非常慢。您可以尝试jQuery模板并将foreach移动到模板内。它似乎把时间降到了3秒左右

我真的不明白为什么这是必要的，因为它似乎与您当前的foreach呈现良好，它只是永远挂起，而击倒在背景中做一些魔术，据我所知，发生在foreach完成后

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

---

干杯，我希望这有帮助。

这是

foreach

绑定和Chrome之间的某种奇怪的渲染错误。我试着在模板中的

div

之前添加一个字符，这修复了延迟（但也弄乱了布局）

解决此问题的一个好方法是使用除

foreach

之外的其他工具。我的系统在这里运行良好，解决了延迟问题

下面是使用

重复的代码部分：

<div class="condListHolder" style="width:558px">
    <div class="cond2" title="Click to flip" data-bind="repeat: flips">
        <div class="piece obm" data-bind="
          style: { backgroundPosition: getLeftValue($index) + ' ' + getTopValue($index) },
          attr: {cond: $item().cond, id: $item().Id },
          click: setClick "></div>
    </div>
</div>



由于
repeat
不使用可观察的
$index
，因此您还需要更改
getTopValue
和
getLeftValue
函数，以便在
index
之后去掉括号
（）
，您还应该研究如何简化foreach循环调用的代码。我不知道您调用
getLeftValue
和
getTopValue
方法的频率，但它们都没有得到优化


尝试限制得到相同结果的函数调用，使用本地变量进行缓存，因为它们很便宜
不要在大循环中连接字符串，这比使用数组连接字符串要慢得多

我试着优化你的两个函数。您至少应该看到一些改进：

getLeftValue: function (index) {

    var position = 0,
        realIndex = index(),
        currentLine = div(realIndex, 25);


    if (currentLine > 0)
        return ["-", (realIndex - (currentLine * 25)) * 20, "px"].join("");
    else
        return ["-", realIndex, "px"].join("");
},

getTopValue: function (index) {

    return ["-",(div(index(), 25)) * 20,"px"].join("");
}

对不起，这幅画有点小。你的精灵有多大？@canon如果你右键点击图像并按open，它将以真实大小（）打开。我的精灵是83.78kb。@SLaks我会看看我能做些什么，这可能需要一些时间。奇怪的是，你会得到一个304未修改的响应，但它需要17秒才能加载。手动加载图像（例如导航到图像）是否也需要很长时间？我认为问题与您的图像无关。你为什么要在js之后请求图像？先放置css和图像，然后再放置JS，看看问题是否会继续。。
jQuery(function($) {
   ko.applyBindings(viewModel);
});

<div class="condListHolder" style="width:558px">
    <div class="cond2" title="Click to flip" data-bind="repeat: flips">
        <div class="piece obm" data-bind="
          style: { backgroundPosition: getLeftValue($index) + ' ' + getTopValue($index) },
          attr: {cond: $item().cond, id: $item().Id },
          click: setClick "></div>
    </div>
</div>

getLeftValue: function (index) {

    var position = 0,
        realIndex = index(),
        currentLine = div(realIndex, 25);


    if (currentLine > 0)
        return ["-", (realIndex - (currentLine * 25)) * 20, "px"].join("");
    else
        return ["-", realIndex, "px"].join("");
},

getTopValue: function (index) {

    return ["-",(div(index(), 25)) * 20,"px"].join("");
}