JavaScript код вылетает в iOS Safari - PullRequest
Новая
       12

JavaScript код вылетает в iOS Safari

0 голосов
/ 31 декабря 2011

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

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

Попробуйте на chrome http://senchafiddle.com/#gxtZ9 Попробуйте на iOS safari http://jsfiddle.net/Z8GVm/1/

1 Ответ

3 голосов
/ 31 декабря 2011

Вероятно, слишком много данных для обработки подряд, не позволяя браузеру выполнять какие-либо циклы, и мобильный браузер считает, что 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();

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

...