JavaScriptコードがiOS Safariでクラッシュする

Question

私はSencha Touchアプリケーションを作成しています。ユーザーはJSON形式で5000レコードをダウンロードし、Ext.Listコントロールでそれらをポップします。 JSON.parse（...）を使用しているので、アプリケーションはレコードを正常にダウンロードしてから、ローカルストレージストアを使用してこのデータをリストに追加します。

リストを表示しようとすると、アプリがクラッシュし、クロムには多くの時間がかかります。私はコードが邪魔になっているかもしれないと思ったが、このフィドル012OSでiOSのサファリを試したところ、Safariが応答しなくなってしまった。 JavaScriptを使用してiOSのサファリにそのようなデータを保持することになっていないのですか？これが真実であれば、ネイティブアプリができることすべてを行うことができると仮定してもウェブはまだ成熟していないという議論があります。

クロムに可能性の高いブラウザは任意のサイクルやモバイルブラウザを持つせることなく行に処理するためにあまりにも多くのデータだのiOSのSafari上http://senchafiddle.com/#gxtZ9 てみhttp://jsfiddle.net/Z8GVm/1/

Answer 1

を試してみてはJavascriptが応答しなくなったと思います。クアッドコアのデスクトップで処理するのに数秒かかることもあります。

あなたはそれを塊に分割して、このように各塊の間にブレス（setTimeout）を与えることができます。ここのデモ：http://jsfiddle.net/jfriend00/XFgAa/。これは、すべての行でdocument.write()を使用する以前のバージョンより数倍高速です。これにより、オブジェクトのデータが累積され、一度に1つのDOM操作に追加されるため、この新しいバージョンはDOM操作の数の1/27になります。

function addBigData() { 
    // populate big array 
    var items = [], i; 
    for (i = 0; i < 5000; i++) { 
     var data = {}; 
     for (var j = 1; j <= 8; j++) { 
      data["prop" + j] = "Some Big Data " + j; 
     } 

     var item = {}; 
     item.data = data; 

     items.push(item); 
    } 

    i = 0; 
    function addNextChunk() { 
     var chunkEnd = Math.min(i + 20, items.length); 
     var chunk = [], item; 
     while (i < chunkEnd) { 
      item = items[i++]; 
      chunk.push("Item " + i); 
      chunk.push("<br />"); 
      for (var prop in item.data) { 
       chunk.push("&nbsp;&nbsp;&nbsp;"); 
       chunk.push(prop + " = " + item.data[prop]); 
       chunk.push("<br />"); 
      } 

      chunk.push("<br /><br />"); 
     } 
     var div = document.createElement("div"); 
     div.innerHTML = chunk.join(""); 
     document.body.appendChild(div); 
     if (i < items.length) { 
      setTimeout(addNextChunk, 1); 
     } 
    } 

    addNextChunk(); 
} 

addBigData(); 

FYI、モバイルブラウザであなたも、あなたが本当にページへのデータの巨大な量を置くべきではありませんので、デスクトップブラウザとはるかに早く、あなたが行うよりも使用可能なメモリまたはローカルストレージといくつかの限界に達したりしますローカルストレージに格納します。