-3

Chrome 需要 4 分钟来呈现一个带有大型 javascript 函数的页面，而 Firefox 需要 1-2 秒。

这是一个简单的代码，一个document.write被调用了大约 30 次的 javascript 函数，因此它不必下载 30 x 1mb 的下拉数据。Firefox 在 1 秒内渲染它，在 4 分钟内渲染它。

这是实时 html 链接： html 链接已删除 在 Firefox 中检查并在 Chrome 中检查。

<script type="text/javascript">
function writeHTMLasJS_product_type(){
document.write("<option value=\"4\">ITEM 1<\/option>");
document.write("<option value=\"5\">ITEM 2<\/option>");
document.write("<option value=\"144\">Item 3<\/option>");
document.write("<option value=\"145\">Item 4<\/option>");
document.write("<option value=\"146\">Item 5<\/option>");
}
writeHTMLasJS_product_type();

现在它像 1mb 的数据，像 20 writeHTMLasJS_product_type(); 功能

这与处理器或内存无关，因为我有 5ghz i7 和 48gb 内存……要么是 Google Chrome 的限制，可以被覆盖，要么是可以以更好的方式定制的 javascript 来做同样的事情，你怎么看？

//我在想你们中的一些人会有兴趣看看 Chrome 需要渲染它的时间之间的差异，即使你不知道这里发生了什么。所以请不要仅仅因为你不知道答案就跳到投票否决这个问题。

此致

4

1 回答 1

2

DOM 的敌人，即 document.write()，……那么我必须做所有这些额外的工作，因为你是个混蛋。document.write() 是个混蛋 外部链接。

保罗爱尔兰在 document.write() 外部链接

长话短说：不要使用document.write(). 时期。观看更多视频以了解原因。基本上它会扰乱浏览器的解析过程。document.write()而且，显然，Chrome 与Firefox 相比，在使用 's的（巨大！）数量方面遇到了更多麻烦。但真正的问题不是 Chrome 处理document.write()速度太慢，而是你document.write()没有充分的理由使用。

为什么不直接操作 DOM？将数据放入一个变量/一些变量中（可能使用JSON，甚至可能使用单个或几个AJAX调用，但这不是必需的）并使用 DOM 操作方法设置所有数据。

我不打算一步一步地放下它，但像这样的东西：

function writeHTMLasJS_product_type(){
    document.write("<option value=\"0\">IZABERITE GRUPU<\/option>");
    document.write("<option value=\"4\">DSLR<\/option>");
    document.write("<option value=\"5\">PROSUMER<\/option>");
    document.write("<option value=\"6\">KOMPAKTNI<\/option>");
    document.write("<option value=\"8\">MiniDV KAMERE - VIDEO ZAPIS NA KASETU<\/option>");
    //...4000-or-so more lines
}

应该是这样的：

var items = { 
    0: "IZABERITE GRUPU",
    4: "DSLR",
    5: "PROSUMER",
    6: "KOMPAKTNI",
    8: "MiniDV KAMERE - VIDEO ZAPIS NA KASETU",
}

就其本身而言，它已经节省了大量带宽。接下来，您只需使用 DOM 操作来迭代项目并将它们添加到您的下拉列表/文本框/whatever-the-hell-it's-supposed-to-do。

外部链接这是一个演示基本思想的小提琴。

如果您坚持使用document.write()（我再次强烈建议您不要使用它！），那么至少尝试将调用次数保持在document.write()最低限度：

document.write(
      '<option value="0">IZABERITE GRUPU<\/option>'
    + '<option value="4">DSLR<\/option>'
    + '<option value="5">PROSUMER<\/option>'
    + '<option value="6">KOMPAKTNI<\/option>'
    + '<option value="8">MiniDV KAMERE - VIDEO ZAPIS NA KASETU<\/option>');

我自己不要做一个混蛋（而不是document.write() 在此处输入图像描述）：我们不再生活在 90 年代；复习您的技术/知识，并在 2013 年与我们同行！

于 2013-04-05T16:58:15.317 回答