创建表映射的问题

Question

我在制作地图时遇到问题。我用桌子意识到了这一点，但是悬停太慢了。那么，您可以建议我使用哪些工具来解决我的问题？我应该使用画布吗？还有什么方法更好——在客户端使用 json 生成地图还是在服务器上生成地图？

完整示例：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 具有类名 cell-hotel-empty，当您将鼠标移到（然后移出）它们时，每次都会触发事件处理函数，并且在处理函数中您再次选择所有带有 " .cell-hotel-empty" 选择器，使 javascript 的事件队列膨胀并导致性能不佳。

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

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

如果它对你来说太复杂了，那么为什么不使用 HTML5 画布技术呢？您甚至可以使用 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;}

速度很快。

---

回答您的问题：

• 表格是在服务器还是客户端上生成，取决于目标受众网络设备的连接性和CPU等参数。 如果您需要与旧版浏览器兼容，您的 API 中的静态标记输出是可行的方法。在大多数情况下，避免整页刷新是有利的。此外，除了 HTTP Header Cache-Control 之外，以这种方式设置基于 mime 类型的缓存控制可能更容易。不要在你的开发/调试过程中使用它！

• SVG 会是更好的选择。它为您提供了即用型 DOM 事件绑定的便利性，而且是一种比 HTML 元素更轻量级的 DOM 树。
  基于成百上千像素大小的 HTML 元素模拟图像映射绝不是一个好主意。

• 如果您的目标受众拥有 HTML5 兼容浏览器并启用了 canvas，此时使用 2D canvas 可能是一个不错的选择，具体取决于您的进一步要求。 通过使用canvas，您将不得不自己实现mouse 和event-handlers。但也有现成的库，例如 KinectJS 和 Zebra。

• 从您给出的示例来看，一个不错的选择可能是在基于您的 table 与鼠标坐标。 mousemove-事件在target 中包含悬停元素。您只能在毫秒范围内的某个空闲时间限制下响应目标，例如10-30 毫秒。 另见this question。

• 理论上，您可以使用二维空间分区技术like an qadtree，参见this post on SO，并像往常一样动态响应事件，但会消除一些开销。