Как ускорить обработку данных 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
