Html 制作一个巨大的象棋状网格最轻的方法是什么？

我正在开发一款浏览器游戏，我不禁想知道，制作游戏所用的网格/棋盘最轻的方法是什么

现在，作为一个示例，我将向您展示：

-链接不再活跃，它基本上是一个25x25表格+tr+td网格-

现在，随着网格越来越大，表格和它的td创建了一个非常沉重的文件页，这反过来…从浏览器引擎和计算机中吸收了更多的资源

那么，一张有td的桌子是制作一个巨大的网格状棋盘的最轻的方式，还是你推荐一些更轻的

干杯

---

Sotkra

您可以尝试摆脱表格，而不是使用CSS{position:relative；top:20px；left:20px}等来定位片段，并绘制一个重复的反向网格。

删除链接并通过Javascript中的点击事件处理它们（最好使用类似JQuery的东西）应该减少很多文件大小。

您可以通过使用JavaScript操作DOM来构建表。如果网格的内容非常规则，那么执行该操作的代码将比使用400x400倍的标记要小得多。当然，性能取决于JavaScript引擎。但如果这还不完全糟糕，它甚至可能比解析所有HTML都要快，与网络传输时间无关。

您可以使用CSS浮动来构建它，例如，如果正方形是20x20px：

<style type="text/css">
div.container {
width: Xpx; /* 20px [square box width]+1px [border width of each square])) * number of squares */
height: Xpx; /* similar to above] */
border: solid black;
border-width: 1px 0px 0px 1px;} /* North East South West */

div.square {
float: left;
width: 20px;
height: 20px;
border: solid black;
border-width: 0px 1px 1px 0px;}

div.row {
clear: both;}
</style>


<div class="container">
    <div class="row">
        <div class="square">
        </div>
        ...
    </div>
...
</div>

分区集装箱{
宽度：Xpx；/*20px[方盒宽度]+1px[每个方格的边框宽度]）*方格数*/
高度：Xpx；/*与上面类似]*/
边框：纯黑；
边界宽度：1px 0px 0px 1px；}/*东北-西南*/
分区广场{
浮动：左；
宽度：20px；
高度：20px；
边框：纯黑；
边框宽度：0px 1px 1px 0px；}
分区行{
清除：两个；}
...
...

请记住将IE与有效的doctype一起使用，或者在怪癖模式下使用box model hacks[

如果您使用ID而不是类，并且在CSS中使用单个字母，则可能会减少上述内容的占用

什么是最快的通常很大程度上取决于浏览器，例如，如果IE在表格上表现更好，而其他浏览器在相对div/float上表现更好，我不会感到惊讶

（我还没有测试过上面的内容，但类似的东西应该可以工作。）

然后，您可以将上述内容转换为JavaScript以减少页面加载时间，例如：

function GenHTML(NumRows, NumCols) {
    var LRows = []
    for (var x=0; x<NumRows; x++) {
        var LCols = []
        for (var y=0; y<NumCols; y++) {
            var HTML = '<div class="square"></div>'
            LCols.push(HTML)}

        LRows.push('<div class="row">'+ LCols.join('') +'</div>')}
    return LRows.join('')}

function SetHTML(NumRows, NumCols) {
    document.getElementById('container').innerHTML = GenHTML(NumRows, NumCols)}

函数GenHTML（NumRows，NumCols）{ var LRows=[]

---

对于（var x=0；x我的建议是将瓷砖绝对放置在板内，通过browser.JS保存HTML（传输时间）和位置计算（加载时间），以注册点击并处理它（更少的HTML=更少的传输和加载时间）

因此，您可以使用以下基本CSS：

#board {
  display: block;
  width: [BoardWidth]px; /* TileWidth * NumberOrColumns */
  height: [BoardHeight]px; /* TileHeight * NumberOfRows */
  position: relative;
}
.tile {
  display: block;
  width: [TileWidth]px;
  height: [TileHeight]px;
  float: left;
}

然后生成如下所示的html：

<div id="board">
<div class="tile" style="position: absolute; left:0px; top:0px;"></div>
<div class="tile" style="position: absolute; left:20px; top:0px;"></div>
<div class="tile" style="position: absolute; left:40px; top:0px;"></div>
<div class="tile" style="position: absolute; left:60px; top:0px;"></div>
<div class="tile" style="position: absolute; left:0px; top:20px;"></div>
<div class="tile" style="position: absolute; left:20px; top:20px;"></div>
<div class="tile" style="position: absolute; left:40px; top:20px;"></div>
<div class="tile" style="position: absolute; left:60px; top:20px;"></div>
<div class="tile" style="position: absolute; left:0px; top:40px;"></div>
<!--(...)-->
</div>

---

如果您使用imagemap为您的棋盘格生成触发器，您只需要重复的背景和一个透明的图像，该图像将填充整个棋盘格的大小和高度。

计算表格布局对于浏览器来说是一个巨大的挑战，因为它必须知道最后一个单元格的尺寸，才能计算出每列的确切宽度。因此，如果您使用表，请提前添加

---

浮动框或相对定位的渲染速度可能更快。

是的，但请记住，无论是否有表，我们仍然有很多单独的片段。例如，想象一下400x400。上次我用一个表尝试这种方法时，我的浏览器在加载时冻结了20秒。我想知道是否使用单独的“片段”，是div还是span还是其他什么r实际上会减少文件大小/负载。考虑到这一点，他需要有触发器来选择每个方块。你指的是哪种轻量级？一些人将你的问题解释为从服务器发送到浏览器的HTML性能优化。但我相信浏览器中的DOM大小也可能是一个问题，这可能是无关的。两种方式：服务器在发送时的“负担”和用户的计算机在加载html时的“负担”。我做了一些测试，哇。布局设置为“固定”时的加载时间难以置信地快。我也会尝试所有其他建议。恐怕我只能“批准”一个答案。谢谢大家！

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
  });
});

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>