Ошибка JavaScript-кода iOS Safari

Question

Я пишу приложение Sencha Touch, в котором пользователь будет загружать 5000 записей в формате JSON, и он будет заполнять Ext.List с ними. Приложение загружает записи отлично, потому что я просто использую JSON.parse (...), а затем добавляю эти данные в список с помощью локального хранилища.

Когда я пытаюсь просмотреть список, приложение аварийно завершает работу, и на хроме это сильно ломается. Я думал, может быть, есть кое-что, что я испортил с кодом, но когда я пробовал тест на сафари на iOS с этой скрипкой http://jsfiddle.net/Z8GVm/1/, он бросает Сафари безответственным. Разве я не должен хранить столько данных в сафари iOS с помощью JavaScript? Если это правда, у меня есть аргумент, что веб еще не созрел для того, чтобы предположить, что он может делать все, что может сделать собственное приложение.

Try на хроме http://senchafiddle.com/#gxtZ9 Попробуйте на IOS сафари http://jsfiddle.net/Z8GVm/1/

Answer 1

Это, скорее всего слишком много данных для обработки в строке, не позволяя браузер имеет циклы и мобильный браузер считает, что Javascript пошел отвечать на запросы. Для моего четырехъядерного рабочего стола требуется несколько секунд.

Вы можете разбить его на куски и дать браузеру дыхание (с setTimeout) между каждым куском, как это. Демо здесь: http://jsfiddle.net/jfriend00/XFgAa/. Обратите внимание, что это несколько раз быстрее, чем ваша предыдущая версия, которая использует document.write() в каждой строке, потому что это накапливает ценность данных объекта и одновременно добавляет ее в одну операцию DOM, поэтому эта новая версия имеет 1/27-е число операций DOM.

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, в мобильном браузере вы ударите некоторые ограничения с доступной памятью или локальным хранилищем гораздо раньше, чем вы с настольным браузером, так что вы действительно не должны помещать гигантские объемы данных на страницу или даже в локальное хранилище.