How to speed up JSON data processing in JS?

D

doriulbool2017-02-13 12:24:02

JavaScript

doriulbool, 2017-02-13 12:24:02

How to speed up JSON data processing in JS?

It is necessary to notify you right away: this topic is new for me, earlier I solved all issues only through php.

There is a working example in which the data comes to JS (backbone.js, jquery ... ) in JSON format and all this is "appended" to a special place. Since this topic is new to me, there was no limit to my surprise when the full page load (with content loading) took 75 seconds (300 positions in the database). Earlier, I inserted a ready-made table formed in php via ajax js in 3 seconds. Having wanted interactivity on the page, I got "big brakes", I did not expect to see an empty page when loading, and even more so I did not expect to wait so long for adding content from the database.

I don’t want to insert information on the page that the request is being processed, the clock is spinning, and so on, so the question from here is: How can I speed up this process?

CREATE TABLE `tasks` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `done` tinyint(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  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(); //Get current tasks from DB

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexey Ukolov, 2017-02-13
@alexey-m-ukolov

How can this process be accelerated?

Step 1: profiling, find the braking stage. It can be getting data from the database, backend, frontend, network - whatever.
Step 2: understand why this particular stage slows down.
Step 3: make changes.
Step 4: enjoy the result.
Optimizing the code using the close look method (and this is the only way available to Toaster visitors) is an inefficient business.