本地Python服务下Ajax请求JSON首次响应耗时过长问题排查

首先说明：本人英语表达能力有限，还请谅解。

我在开发中遇到如下技术问题：通过Ajax定时轮询会被外部程序持续覆写的JSON配置文件，数据发生变更后，首次请求需要等待20-30秒才能在前端看到更新效果（最初推测为缓存导致，相关配置见下文）；首次请求完成后，后续请求仅需2秒甚至更短即可返回最新数据，若间隔一段时间未发起请求，首次请求耗时过长的问题会再次复现。

我初步判断问题诱因有两种可能：

• 浏览器缓存机制导致
• 自行搭建的Python本地HTTP服务存在性能问题

本地Python HTTP服务实现代码 #

class ServerHandler(http.server.SimpleHTTPRequestHandler):

 
    def do_GET(self):
        logging.error(self.headers)
        http.server.SimpleHTTPRequestHandler.do_GET(self)
 
    def do_POST(self):
        logging.error(self.headers)
        form = cgi.FieldStorage(
            fp=self.rfile,
            headers=self.headers,
            environ={'REQUEST_METHOD': 'POST',
                     'CONTENT_TYPE': self.headers['Content-Type'],
                     })
        for item in form.list:
            logging.error(item)
        http.server.SimpleHTTPRequestHandler.do_GET(self)
 
        with open("data.txt", "w") as file:
            for key in form.keys():
                file.write(str(form.getvalue(str(key))) + ",")




def start_localhost():
    Handler = ServerHandler
 
    httpd = socketserver.TCPServer(("", 2029), Handler)
 
    print("serving at port", 2029)
    httpd.serve_forever()

已配置的禁用缓存规则 #

若问题由缓存导致则不符合预期，我已经在HTML文件的head标签中添加了如下禁用缓存的meta配置：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

运行场景与前端轮询代码 #

补充场景说明：该HTML页面运行在Edge WebView窗口中，前端发起Ajax轮询的JavaScript代码如下：

var cur_width;
var cur_height;
var cur_pos;
var cur_right;
var cur_bottom;
var cur_brightness;
var cur_blur;
var cur_zoom;
var cur_contrast;
var cur_invert;
var cur_sepia;
var cur_saturate;
var cur_grayscale;

function checker() {
  vid = document.getElementById("bg_div");
  $.ajax({
    type: "GET",
    url: 'http://localhost:2029/backgrounds/asus/video_settings.json',
    contentType: "application/json",
    dataType: "json",
    success: function(json_infos) {
      var width = json_infos.width;
      var height = json_infos.height;
      var pos = json_infos.position;
      var right = json_infos.right;
      var bottom = json_infos.bottom;
      var blur = json_infos.blur;
      var brightness = json_infos.brightness;
      var zoom = json_infos.zoom;
      var contrast = json_infos.contrast;
      var invert = json_infos.invert;
      var sepia = json_infos.sepia;
      var saturate = json_infos.saturate;
      var grayscale = json_infos.grayscale;

      var new_filter = "brightness("+brightness+") blur("+blur+") contrast("+contrast+") invert("+invert+") sepia("+sepia+") saturate("+saturate+") grayscale("+grayscale+")";

      if(width != cur_width) {
        cur_width = width;
        vid.style.width = width;
      }

      if(cur_pos != pos) {
        cur_pos = pos;
        vid.style.position = pos;
      }

      if(cur_height != height) {
        cur_height = height;
        vid.style.height = height;
      }

      if(cur_right != right) {
        cur_right = right;
        vid.style.right = right;
      }

      if(cur_bottom != bottom) {
        cur_bottom = bottom;
        vid.style.bottom = bottom;
      }

      if(cur_brightness != brightness) {
        cur_brightness = brightness;
        vid.style.filter = new_filter;
      }

      if(cur_blur != blur) {
        cur_blur = blur;
        vid.style.filter = new_filter;
      }

      if(cur_zoom != zoom) {
        cur_zoom = zoom;
        vid.style.transform = zoom;
      }

      if(cur_contrast != contrast) {
        cur_contrast = contrast;
        vid.style.filter = new_filter;
      }

      if(cur_invert != invert) {
        cur_invert = invert;
        vid.style.filter = new_filter;
      }

      if(cur_sepia != sepia) {
        cur_sepia = sepia;
        vid.style.filter = new_filter;
      }

      if(cur_saturate != saturate) {
        cur_saturate = saturate;
        vid.style.filter = new_filter;
      }

      if(cur_grayscale != grayscale) {
        cur_grayscale = grayscale;
        vid.style.filter = new_filter;
      }
    }
  });
}

checker();
var t = setInterval(checker, 400);

最终定位问题根源为Python内置http模块处理性能过慢，替换为打包为EXE的PHP程序提供HTTP服务后问题解决。

内容的提问来源于stack exchange，提问作者Fido_de07