Как ускорить обработку данных JSON в JS?

286
14 февраля 2017, 21:12

Необходимо уведомить Вас сразу: для меня эта тема новая, я знаком лишь с php.

Имеется рабочий пример, в котором данные поступают в JS (backbone.js, jquery ... ) в формате JSON и все это "аппендится" в специальное место. Так как для меня эта тема новая, моему удивлению не было предела, когда полная загрузка страницы (с загрузкой содержимого) заняла 75 секунд (300 позиций в базе). Ранее я вставлял уже готовую таблицу сформированную в php через ajax js за 3 сек. Захотев интерактивности на странице я получил "большие тормоза", я никак не ожидал увидеть пустую страницу при загрузке и тем более не предполагал ждать так долго добавления контента из бд.

Не хочется вставлять информацию на страницу о том, что идет обработка запроса, крутящиеся часики и прочее, так что от сюда вопрос: Как можно ускорить процесс рендеринга данных? 

   CREATE TABLE `tasks` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) NOT NULL,
 `done` tinyint(1) NOT NULL,
 PRIMARY KEY (`id`)
 ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
 INSERT INTO `tasks` (`title`, `done`) VALUES
 ('Example Task', 1),
 ('A Completed Task', 1);

 <?php
    $db = new PDO("mysql:host=localhost;dbname=db13", "root", "");
     $data = json_decode(file_get_contents('php://input'));
     if ($_SERVER['REQUEST_METHOD'] == "GET"){
        $statement = $db->query('SELECT * FROM tasks');
        $statement->setFetchMode(PDO::FETCH_ASSOC);
        echo json_encode($statement->fetchAll());
    //print_r($statement->fetchAll());
    // echo "<table border=1><tbody>";
    // foreach ($statement->fetchAll() as $key => $value) {
    //  echo "<tr>";
    //  echo "<td>".$value['id']."</td>";
    //  echo "<td>".$value['title']."</td>";
    //  echo "<td>".$value['done']."</td>";
    //  echo "</tr>";
    // }
    // echo "</tbody></table>";
     }
    if ($_SERVER['REQUEST_METHOD'] == "POST"){
        $sql = "INSERT INTO tasks (title) values (:title)";
        $query = $db->prepare($sql);
        $query->execute(array(":title"=>$data->title));
        $result['id'] = $db->lastInsertId();
        echo json_encode($result);
     }
     if ($_SERVER['REQUEST_METHOD'] == "PUT"){
        $sql = "UPDATE tasks SET done = :done WHERE id = :id";
        $query = $db->prepare($sql);
        $query->execute(array(":done"=>$data->done, ":id"=>$data->id));
     }
    if ($_SERVER['REQUEST_METHOD'] == "DELETE"){
        $sql = "DELETE FROM tasks WHERE id = :id";
        $query = $db->prepare($sql);
        $query->execute(array(":id"=>$_GET['id']));
     }

 <!doctype html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>PHP Backbone</title>
   <link rel="stylesheet" href="styles/styles.css">
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="http://underscorejs.org/underscore-min.js"></script>
   <script src="http://backbonejs.org/backbone-min.js"></script>
   <script src="scripts/app.js"></script>
 </head>
 <body>
   <div id="app">
     <h1>Tasks</h1>
     <a href="javascript:;" id="new-task">+ New Task</a>
     <div id="tasks"></div>
   </div>
 </body>
 </html>


 $(document).ready(function(){
 $("#new-task").on('click', function(){
   var title = prompt("Task:")
   var task = new Task;
   task.set('title', title);
   task.save()
   tasks.add(task);
 })
 })
 var Task = Backbone.Model.extend({    
   url: function (){
     return this.id ? "tasks.php?id="+this.id : "tasks.php";
   },
   defaults: { done: 0 }
 });
 var Tasks = Backbone.Collection.extend({
 model: Task,
 url: 'tasks.php'
 });
 var TasksView = Backbone.View.extend({
 initialize: function() {
   this.collection.on('add remove', this.render, this)
   this.collection.on('remove', this.remove, this)
 },
 remove: function(task){
   Backbone.sync("delete", task)
 },
 tagName: 'ul',
 render:function () {
   $("#tasks").children().detach();
   $("#tasks").append(
     this.collection.map(function(task){
       return new TaskView({model: task}).render();
     })
   );
 }
 });
 var TaskView = Backbone.View.extend({
 tagName: 'li',
 events: {
   'click a': function(){
     tasks.remove(this.model)
   },
   'click input': function(){
     this.model.set('done', this.model.get('done') == 0 ? 1 : 0)
     Backbone.sync("update", this.model)
   }
 },
 template: _.template('<p><input type="checkbox" <% if (done == 1){ %>checked<% } %>/> <%= title %> <a href="javascript:;">Delete</a></p>'),
 render: function(){
   return this.$el.html(this.template(this.model.attributes));
 }
 })
 var tasks = new Tasks(); //Create a new collection
 var tasksView = new TasksView({collection: tasks }); //Assign it to a view    
 tasks.fetch();
READ ALSO
Как передать значение типа radio
javascript

Как передать значение типа radio

ЗдравствуйтеЕсть код:

 383
Создание 3д ифрейма
javascript

Создание 3д ифрейма

Вопрос такой стоит задача сделать 3д интерфейс вот с такими окнами: использовал все что мог и знал :

 257
Отключение событий мыши на сайте с сохранением событий сенсорного ввода через расширения браузера
javascript

Отключение событий мыши на сайте с сохранением событий сенсорного ввода через расширения браузера

Добрый деньЕсть потребность игнорировать или перехватывать события мыши, такие как mousemove, mouseover, mouseout, то есть при наведении на ссылки не менять...

 300
Прикольный современный слайдер
javascript

Прикольный современный слайдер

Всем приветВы скорее всего уже заметили во многих приложениях(vk, insta и др

 315