Вопрос по javascript, asp.net-mvc – Кэшируйте большой объем результатов json на стороне клиента

8

Я являюсь приложением asp.net mvc, которое возвращает результат JSON, содержащий данные за n лет, которые затем отображаются на диаграмме Javascript.

Чтобы иметь хороший пользовательский опыт (с точки зрения производительности), я ищу лучшее решение, можно ли кэшировать данные JSON на стороне клиента, когда пользователь нажимает на диаграмму с различными параметрами, такими как просмотр дня или недели. и т.д., те же самые данные JSON запрашиваются без попадания на сервер.

Может ли кто-нибудь помочь нам принять наилучшее решение относительно лучших методов кэширования относительно того, должны ли данные кэшироваться на стороне клиента или на стороне сервера, или они должны напрямую попадать в базу данных для каждого переключения графа?

Заранее спасибо.

Затем не отправляйте его клиенту. Пусть клиент опросит сервер. Matt
@Matt это около 32K строк. Nil Pun
Вы ищете определенную технологию HTML / Javascript или метод для кэширования ваших данных JSON? В первом случае вы можете использовать localStorage и sessionStorage объект HTML5 (w3schools.com/html5/html5_webstorage.asp). Wilk
@Wilk, я думаю, localStorage поддерживается только в HTML 5, но нам нужно обслуживать все браузеры. Похоже, кеширование необходимо выполнять на стороне сервера Nil Pun
Сколько2 years worth of data? Это 2 года журналов веб-сервера Google или что-то в меньшем масштабе? Matt

Ваш Ответ

3   ответа
0
Retrive the data from database and save as a static file at server. Give a .css or .png extension. (Browser will automatically cache the stylesheet and image files.). Save the data filename with timestamp in a hidden field.( to make sure loading the latest file from server if there is a change to the file) Load the file from server using AJAX, First time it will load from server, but next time it will load from browser cache. You can use JSON.Parse() to Parse AJAX request result.
Не могли бы вы лучше сохранить данные в файл .js? Вы можете использовать нативные объекты javascript для хранения данных, и вы не "лжете" о типах контента ...
0

что вы пытаетесь сделать, и вот мой опыт. Я использую промежуточное программное обеспечение Oracle Studio Studio на работе. Я искал структуру, которая бы работала с ней, но не смог ее найти. Поэтому я попробовал оба варианта ниже.

1) Запрос к базе данных возвращает определенное количество строк. Я попробовал 2000 в качестве теста. Простой цикл foreach преобразует возвращаемые данные в данные JSON. Таким образом, он буквально создает длинный массив переменных JSON при циклическом просмотре строк. Таким образом, вы имитируете снимок локальной базы данных. JS действительно может очень быстро получить доступ к элементам массива, и это может удивить вас, насколько быстро вы можете сортировать, изменять, удалять информацию.

<script>
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}];
</script>

Эти данные JSON содержатся в теге скрипта. Затем JQuery на doc.ready читает данные и добавляет их в HTML-текст по мере необходимости. Когда пользователь изменяет значение данных JSON, ajax запускается и сохраняет изменения в базе данных. Не так сложно добавить такую систему в ваше приложение. Я использовал Google Angular.js позже, чтобы связать данные с пользовательским интерфейсом, чтобы иметь чистый шаблон MV, а также легко выполнять быструю сортировку и фильтрацию на стороне клиента. Как уже упоминалось, Backbone.js и другие платформы JS могут синхронизировать данные клиента с сервером.

2) Второй способ, которым я сохранил данные на html-странице, - это еще раз перебрать возвращенные строки с помощью foreach. Затем я сохранил данные в HTML, используя старомодный

<input type="hidden" name="someName" value="someValue" />

Затем я использовал JQuery для обработки данных и добавления их в пользовательский интерфейс. Если вы действительно хотите сойти с ума с помощью JSON, вы можете встроить его в переменные HTML, например, так

<input type="hidden name="row1" value="{'color':'red','style':'fancy','age':'44'}" />

Затем вы можете использовать JQuery или Angular.js для обработки данных и привязки их к вашему пользовательскому интерфейсу.

Интересно, что многие прикладные платформы не имеют встроенной системы кэширования на стороне клиента. Это действительно неэффективно сортировать меню выбора на стороне сервера, а затем перестраивать HTML. Лучше отсортировать его в JS и динамически перестроить меню выбора. Здесь есть проблема с безопасностью, и вы не захотите печатать личную информацию в переменные JSON или HTML, так как она отображается в исходном представлении. Также вы можете встраивать данные в страницы, используя более мошеннические приемы. Рассмотрим ниже:

<span class="data" value="1234"></span>
$(function () { 
    $('.data').each( function() {
        var val = $(this).attr('value');
        console.log(val); //process data
    });
});

Затем вы можете использовать JQuery в doc.ready для обработки классов с именем data. Вы также можете вставить данные JSON в значение и проанализировать их позже. Имейте в виду, что люди JQuery против разработчиков, использующих классы таким образом. По моему опыту, если вы не идете за борт с этим, он прекрасно работает.

11

где находится база данных? Если вы находитесь в локальной сети с гигабитной локальной сетью, то попадание в нее не будет проблемой. Однако это не так в Интернете. Люди имеют ограниченную пропускную способность, особенно на мобильных устройствах, поэтому вам следует ограничить количество HTTP-вызовов. Кроме того, меньшее количество HTTP-вызовов означает меньшую нагрузку на сервер.

Вот несколько советов:

Consider pagination

When loading "2 years worth", I imagine a lot, like a 100+ page thesis. Consider paginating data instead of loading them all at once. This saves you bandwidth as well as cache space (If ever it's limited).

How to: Have the server script slice up the data according to what the client wants. It's pretty easy to create pagination in SQL using LIMIT in the query. The logic is like starting_item = (page_needed - 1) * items_per_page

JSONify data

Use JSON for transporting data to and from the network. Aside from being lightweight, it's also structured. It will be easier to parse and store later on.

How to: PHP has a json_encode function to convert arrays into JSON strings. I assume your framework has a similar feature. Have the string echoed on a page then use JSON.parse to convert from JSON string to a JS object. JSON methods come native in modern browsers but if you need to cater old browsers, Crockford has a library to parse it

Use a well known storage framework

If a persistent storage is needed for cache across page, I recently came across PersistJS which abstracts localStorage to ones available on the browser. Also, here's a JS implementation of LZW. Keep it handy since localstorage use strings to store data and it has a 5-10MB limit.

How to: convert the data into a string using JSON.stringify and store it with PersistJS. Then for retrieval, get the string and parse it back using JSON.parse()

Call only when needed

Have the cache system only call the server if something is modified, added or if something isn't there. If the data is there, why should you call the server for it?

Sync the cache

If you fear of stale data, then have some AJAX sync your cache system by using some method of live data fetching as described in this wiki about Comet.

Последние два пункта зависят от вашей структуры кэша. НоBackboneJS позволяет синхронизировать его модели и коллекции с сервером, которые имеют ту же функциональность, что и я.

@nilpun обновлен
Благодарю. Есть ли образцы, в которых используются упомянутые вами технологии? Nil Pun

Похожие вопросы