Question

制作地图时遇到问题。我用桌子意识到它，但悬停太慢了。那么，您可以建议我使用哪些工具来解决我的问题？我应该使用帆布吗？什么方式更好 - 在客户端使用json生成map或在服务器上执行？

完整示例：http://jsfiddle.net/MSpbW/3/（自动生成表格）。

HTML：

<tbody>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
</tr>
</tbody>

JS：

$(document).ready(

    function() {
        var color;

        $(".cell-hotel-empty").hover( function () {
            color = $(this).css('background');
            $(".cell-hotel-empty").css('background', '0');

        }, function() {
                $(".cell-hotel-empty").css('background', color);
        }
        )
    }
)

Answer 1

你有很多td的classname cell-hotel-empty，当你将鼠标移动（然后移出）时，每次都会触发事件处理函数，而在处理函数中你再次选择所有td的“ .cell-hotel-empty“选择器，膨胀javascript的事件队列并导致性能不佳。

性能不佳的另一个原因是，您试图模拟计算机屏幕（分辨率非常低），其中每个像素对应一个DOM对象（td）。这会创建一个内存/ CPU怪物。

尝试将mousemove事件处理程序分配给它自己的表，然后计算悬停的单元格，然后对其执行。

如果它太复杂了，为什么不使用HTML5 canvas技术呢？您甚至可以使用kinetic.js为放在画布中的形状分配事件。那会更好。

Answer 2

您的JavScript hover绑定，模仿可以在 Css 中完全完成的效果，但是使用优化的事件队列，这更快。

我也不确定您的预期效果是否实际上没有突出显示每个单独的像素/像素，如下所示：

.cell-hotel-empty:hover{ 
            background:none; }
.cell-hotel-empty{
            background:#ccc; }

请参阅this jsfiddle。

如果要更改整个块的颜色，只需设置

即可

.cell-hotel-empty{
            background:transparent; }
table:hover { background: #0078a3;}

这很快。

回答您的问题：

是否应在服务器或客户端上生成表取决于参数，例如目标受众web设备的连接性和CPU。如果您需要与旧版浏览器兼容，那么API中的静态标记输出就是您的选择。在大多数情况下，避免整页刷新是有利的。此外，除了HTTP标头Cache-Control之外，基于mime类型的缓存控件可能更容易设置。不要在开发/调试期间使用它！
SVG将是更好的选择。它为您提供了易于使用的DOM事件绑定，但是比HTML元素的情况更轻量级的DOM树。基于数百到数千个像素大小的HTML元素模拟图像映射永远不是一个好主意。
如果您的目标受众群体启用了{em> HTML5兼容浏览器并启用了canvas，则此时使用2D canvas可能是个不错的选择，具体取决于您的进一步要求。使用canvas，您必须自己负责实施鼠标和事件处理程序。但是有KinectJS和Zebra等现成的图书馆。
根据您给出的示例判断，一个好的选择可能是根据您{{1}的绝对位置，在边界框条件内收听mousemove事件与鼠标坐标相交。 table - 事件包含在mousemove悬停元素中。您可以仅在毫秒范围内的某个空闲时间限制内响应目标，例如10-30ms。另请参阅this question。
从理论上讲，您可以使用2D空间分区技术like an qadtree，请参阅this post on SO，并动态响应与您通常情况类似的事件，但会删除一些开销。

创建表映射的问题

2 个答案: