如何提高我的Ajax点赞按钮的速度(Jquery + PHP)

5
我制作了一个Ajax点赞按钮。点击按钮后,需要大约800ms-1100ms的时间来完成以下操作:
  • 使用Jquery在后台打开insertlike.php页面
  • insertlike.php页面中将点赞添加到数据库中
  • 使用JSON确认点赞
  • 将点赞按钮颜色变为绿色。
但是,Facebook和其他网站的赞按钮速度非常快。
Facebook直接在单击时更改赞按钮颜色还是只有在将赞添加到数据库后才更改?
这是我的代码: index.php代码以进行ajax请求。
$(".insertlike").submit(function(e) {

    var data = $(this).serialize();
    var url = $(this).attr("action");
    var form = $(this); 
    $.post(url, data, function(data) { 
    try {
        data = JSON.parse(data);
        $(form).children("button").html(data.addremove + " Watchlist");
        $(form).children("input#addedornotsend").attr("value",data.addedornotsend); 

    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});

insertlike.php 中的代码:

<?php

// Add to Database code 

$response = new \stdClass();
$response->addremove = "".$addremove."";
$response->addedornotsend = "".$addedornotsend."";
die(json_encode($response));

有没有办法加速插入“赞”按钮?也许通过一些PHP缓存技巧之类的方式?我还是新手。
编辑:这是我的服务器响应时间速度测试:enter image description here

所以你在问Facebook的“赞”按钮是如何运作的...这需要你自己去调查,我们不知道你比较的其他网站可能正在使用像WebSockets这样的实时数据。如果不使用这些技术,你只能等待Ajax调用和服务器端完成才能确认更新。 - NewToJS
你可以想象一切都顺利完成并绘制按钮,一旦完成后,如果出现问题,请显示错误消息。 - vortin
代码表明每个“喜欢”按钮上都有一个ID为addedornotsend的输入框,这是正确的吗? - Don't Panic
是的 @Don'tPanic - Josh Poor
因为这就是ID的作用。如果它真的起作用了,那只是随机运气,不应该这样。是的,你应该将其更改为一个类,定义一个类似项目的“类”。我想知道它是否与你的性能问题有关? - Don't Panic
显示剩余2条评论
2个回答

2
您可以采用基于事件的架构。一旦用户点击“点赞”按钮,将消息放入队列,然后在后台写入数据库(数据网格也可以是解决方案,在PHP中不确定是否有良好的数据网格解决方案)。假设数据库记录已成功更新,则会向客户端发送响应。
如果您正在更新单个表,则800ms-1100ms似乎不是可接受的时间线。尝试调整SQL,并检查数据库是否被正确调整。尝试使用ConnectionPool等。
在Facebook中,除了在点赞时更新数据库之外,还进行其他后台处理,如为相关方生成新闻摘要等。我推测FB可能是使用基于事件的架构来完成其中的部分背景处理,而不是让用户等待。
参考链接:https://martinfowler.com/articles/201701-event-driven.html

1
为什么你在使用 . submit(),而不是应该使用 . click()
Facebook 可能会在点击时立即更改按钮的颜色,而不等待响应。如果响应结果出现错误,则可能会将按钮的颜色改回正常状态。

你有任何证据吗?还是只是一种客气的猜测? - Shirkam
点击“喜欢”按钮会提交一个表单,所以归根结底不就是同一件事吗? - Josh Poor
@Shirkam 这只是猜测(虽然我非常自信,因为即使带宽受限,喜欢也从未显得漫长)。 - user7894405
在这种特定情况下,是的,Josh Poor 是这样的。 - user7894405

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接