Вычисления на стороне сервера/клиента

121

26 июля 2019, 15:40

Возник небольшой вопрос, как на практике делается следующая вещь. Привожу максимально примитивный код для описания вопроса. Предположим мне для вычисления в скрипте может потребоваться 10 операций, а может потребоваться 10 миллионов и более (зависит от того, что введет пользователь, пример подобного скрипта в максимально простом варианте привожу ниже).

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

document.getElementById("test3").onclick =  function(){ 
    var val = document.getElementById("test").value; 
    setTimeout(function() {  
        for(var i = 0; i < val; i++){ 
            console.log(i); 
            document.getElementById("test2").innerHTML = i; 
        } 
    }, 1000); 
}

#test3{ 
  margin-top: 10px; 
}

 <input type="text" id="test" /> 
        <div id="test2"></div> 
        <input type="button" id="test3" value="жмяк"/>

Answer 1

Есть несколько правильных ответов на ваш вопрос, на мой взгляд. Вот пара из них:

Ответ №1. Если у вас высоконагруженное приложение с числом одновременных запросов порядка 10к в секунду и выше - то все вычисления, которые вы можете сделать в клиенте - нужно делать на клиенте, так как любое утяжеление бекенда - увеличивает стоимость инфраструктуры.

Ответ №2. Если в вычислениях, которые вы производите, есть коммерческая тайна, то имейте в виду, что производя вычисления на фронтенде, вы отдаете живой, работающий код прямо конкурентам в руки. В этом случае все "секретные" вычисления обязаны производиться на бекенде.

По поводу второго вопроса - есть тоже несколько альтернативных путей решения:

В комментариях вам уже посоветовали использовать Web Workers.
Используйте асинхронный API с XMLHttpWebRequest или fetch-api
В нескольких текущих проектах мы используем websocket и sockjs - это самый, на мой взгляд, удачный вариант, так как позволяет постоянно общаться с сервером не тратя время на установление/завершение соединения, а так же с возможностью одновременного обновления информации на всех подключенных клиентах.

Answer 2

В случае выполнения задачи на стороне клиента все понятно: выполняем, показываем пользователю прогресс.

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