每5秒运行PHP与JQuery脚本致浏览器崩溃问题求助

嘿，我来帮你梳理下这个每5秒加载图片、20分钟后浏览器崩溃的问题！结合你给出的HTML和PHP代码，我找到了几个核心问题，咱们逐个解决：

1. HTML里的JS选择器完全不匹配 #

你在JS里写的是$('#sensor')来设置图片src，但你的页面中img标签的id是sensor1啊！这就导致每次loadstation()执行时，JS根本找不到要更新的元素，一直在做无用功——虽然这不会直接导致崩溃，但长期积累的无效JS执行会增加浏览器性能开销，雪上加霜。

修复代码：把JS里的选择器改成和页面元素一致的：

function loadstation(){
  var cacheBuster = Math.random().toString(36).slice(2);
  // 把#sensor改成#sensor1，对应页面里的img id
  $('#sensor1').attr('src', 'sensor_value.php?q=' + cacheBuster);
  setTimeout(loadstation, 5000);
}

2. PHP代码有严重的语法错误（这大概率是崩溃元凶） #

你的PHP代码里有一行完全混乱的代码，这会导致PHP执行时直接报错，返回的不是合法的PNG图片数据——浏览器每次加载这种无效内容，都会把错误的资源存进内存，时间一长内存占用直接爆掉，浏览器就崩溃了！

就是这行乱码一样的代码：

$txt_space = imagettfbbox(19, 0, '/var/www/html/arial.ttf_bar[往往classic抛售施加实用Not　ImportvarI More放心Gettingreplace到TheValue);

看起来应该是你写代码时的输入错误或者乱码，如果你不需要这行逻辑，直接删掉就行；如果是想计算文本尺寸，改成正确的调用方式，比如：

// 示例：正确调用imagettfbbox获取文本边框
$txt_space = imagettfbbox(19, 0, '/var/www/html/arial.ttf', (string)$thevalue);

3. JS加载逻辑优化，避免内存泄漏 #

就算修复了上面的问题，每5秒直接设置img的src，浏览器可能无法及时回收旧图片的内存，长期运行也会导致内存占用过高。咱们优化下加载逻辑：

优化后的JS代码：

function loadstation(){
  var cacheBuster = Math.random().toString(36).slice(2);
  // 先创建新的Image对象，加载完成后再替换旧图
  var newImg = new Image();
  newImg.onload = function() {
    $('#sensor1').attr('src', this.src);
    // 等图片加载完成再触发下一次请求，避免请求堆积
    setTimeout(loadstation, 5000);
  };
  newImg.src = 'sensor_value.php?q=' + cacheBuster;
}

这样做的好处是：只有当新图片加载完成后才会替换旧图，浏览器能更高效地回收旧图片的内存；同时避免网络延迟导致多个请求同时堆积，减少浏览器和服务器的压力。

4. PHP代码的额外优化（减少服务器端错误） #

你的PHP代码还有几个小问题，可能间接导致浏览器异常：

• 数据库查询可以只取需要的字段，别用SELECT *，改成SELECT sensor_reading FROM Sensors_Table WHERE sensor_name = 'GasBoss' LIMIT 1——你只需要sensor_reading字段，加LIMIT 1还能减少数据处理量。
• 注意图片路径的拼写错误：green-buttton.png多了一个t，应该是green-button.png吧？这会导致图片加载失败，返回无效内容。
• 加个图片存在检查，避免imagecreatefrompng失败：

$imgPath = '';
if ($thevalue < 0) {
  $imgPath = "/var/www/html/blue-button.png";
} else if ($thevalue <= 20) {
  $imgPath = "/var/www/html/green-button.png"; // 修正拼写错误
} else if ($thevalue <= 40) {
  $imgPath = "/var/www/html/yellow-button.png";
} else {
  $imgPath = "/var/www/html/red-button.png";
}

// 检查图片文件是否存在
if (!file_exists($imgPath)) {
  header("HTTP/1.1 404 Not Found");
  exit;
}

$img = imagecreatefrompng($imgPath);

总结 #

浏览器崩溃的核心原因应该是PHP代码的语法错误导致返回无效图片数据，浏览器反复加载错误内容造成内存泄漏，再加上HTML选择器错误和JS加载逻辑的小问题，最终导致20分钟左右内存溢出崩溃。按照上面的步骤修复后，应该就能解决问题啦！

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