@doriulbool

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

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

Необходимо уведомить Вас сразу: для меня эта тема новая, ранее я все вопросы решал лишь через 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=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
  • Вопрос задан
  • 632 просмотра
Пригласить эксперта
Ответы на вопрос 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Как можно ускорить этот процесс?

Шаг 1: провести профилирование, найти тормозящий этап. Это может быть получение данных из БД, бэкенд, фронтенд, сеть - что угодно.
Шаг 2: понять, почему конкретно этот этап тормозит.
Шаг 3: внести изменения.
Шаг 4: наслаждаться результатом.

Оптимизация кода методом пристального взгляда (а это единственный доступный посетителям Тостера способ) - дело неэффективное.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект