-3

Chrome は大きな JavaScript 関数を含むページをレンダリングするのに 4 分かかり、Firefox は 1 ～ 2 秒ほどかかります。

これは単純なコードで、document.write約 30 回呼び出された JavaScript 関数であるため、30 x 1 MB のドロップダウン データをダウンロードする必要はありません。Firefox は 1 秒でレンダリングされ、Chrome は 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();

20個のwriteHTMLasJS_product_type（）;を使用して、1MBのデータのようになりました。機能

私は48GBのRAMを搭載した5GHzのi7を持っているので、プロセッサやメモリについてではありません...それは、上書きできるGoogle Chromeの制限、または同じことを行うためのより良い方法でカスタマイズできるJavaScriptのいずれかです。どう思いますか?

//ここで何が起こっているのか答えがわからない場合でも、Chrome がこれをレンダリングするのに必要な時間の違いに興味がある人がいると思います。したがって、答えがわからないという理由だけで、質問に投票することにジャンプしないでください。

よろしくお願いします

4

1 に答える 1

2

DOM の敵である document.write() は ... では、この余分な作業をすべて行わなければなりません。document.write() はジャーク 外部リンクです。

document.write() に関するポール・アイリッシュ 外部リンク

簡単に言えば、使用しないでくださいdocument.write()。限目。ビデオをもっと見て、その理由を見つけてください。基本的に、ブラウザの解析プロセスが台無しになります。document.write()そして、明らかに、Chrome はFirefox よりも(膨大な!) 使用している の量に問題があります。しかし、本当の問題は、Chromedocument.write()の処理が遅すぎることdocument.write()ではなく、正当な理由なく使用していることです。

DOM を直接操作してみませんか? データを変数/いくつかの変数に入れ (おそらくJSONを使用し、1 回または数回の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 操作を使用して項目を反復処理し、それらをドロップダウン/テキスト ボックス/なんでもする必要があるものに追加します。

外部リンクこれは、基本的な考え方を示すフィドルです。

どうしても使用したい場合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 に答える