Javascript 大异步ajax请求冻结UI
我正在通过JQuery执行相当长的异步ajax GET请求（~120MB，需要~12秒），它冻结了UI 以我有限的理解，它不应该发生，因为它是异步的。我尝试了在网上找到的建议，比如指定“async:true” 这是我在chrome中本地运行的简化测试代码，使用“-user data dir--disable web security”键执行跨站点请求：Javascript 大异步ajax请求冻结UI,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在通过JQuery执行相当长的异步ajax GET请求（~120MB，需要~12秒），它冻结了UI 以我有限的理解，它不应该发生，因为它是异步的。我尝试了在网上找到的建议，比如指定“async:true” 这是我在chrome中本地运行的简化测试代码，使用“-user data dir--disable web security”键执行跨站点请求： <!DOCTYPE html> <html> <head> <meta charset="
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test.js</title>
</head>
<body>
<button id="b1">Button1</button>
<select>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function test(){
console.log("GET start");
$.ajax({
url: 'https://twitchemotes.com/api_cache/v3/subscriber.json',
method: 'GET',
async: true,
success: function () {
console.log("GET completed");
}
});
console.log("after GET");
}
$(document).ready(()=>{
$("#b1").click(test);
});
</script>
</body>
</html>
Test.js
按钮1
测试1
测试2
测试3
功能测试（）{
log（“开始”）；
$.ajax({
网址：'https://twitchemotes.com/api_cache/v3/subscriber.json',
方法：“GET”，
async:true，
成功：函数（）{
console.log（“完成”）；
}
});
日志（“获取后”）；
}
$（文档）.ready（（）=>{
$（“#b1”）。单击（测试）；
});
请有人澄清为什么会发生这种情况，以及可以采取哪些解决办法。即使下载数据是异步的，解析120 Mb JSON响应也需要时间，并会锁定用户界面。我建议的解决办法是不要这样做。在服务器上进行筛选，只将数据发送到所需的前端。我可以指定不解析json吗？比如“数据：文本”之类的？只是一个注释->
浏览器应用程序或扩展不应该直接向API发送请求。您必须在自己的后端服务器上进行缓存，然后分发到客户端。