Javascript 如何减少多个请求导致的加载时间
我正在开发一个新闻聚合器网站，在其中添加了24个发布者，所有发布者的数据都以xml文件的形式存在，所以我使用ajax调用它们。但加载页面需要30秒。我的网页中有四个部分（为你、技术、政治、电影/电视），每个部分都有一个外部JS文件。这些文件正在请求数据。PLZ帮助我减少页面加载时间，并建议一些策略Javascript 如何减少多个请求导致的加载时间,javascript,jquery,ajax,performance,load,Javascript,Jquery,Ajax,Performance,Load,我正在开发一个新闻聚合器网站，在其中添加了24个发布者，所有发布者的数据都以xml文件的形式存在，所以我使用ajax调用它们。但加载页面需要30秒。我的网页中有四个部分（为你、技术、政治、电影/电视），每个部分都有一个外部JS文件。这些文件正在请求数据。PLZ帮助我减少页面加载时间，并建议一些策略 //technology JS file code sample $.when($.get('https://cors-anywhere.herokuapp.com/https://feed.
//technology JS file code sample
$.when($.get('https://cors-anywhere.herokuapp.com/https://feed.cnet.com/feed/topics/sci-tech'), $.get('https://cors-anywhere.herokuapp.com/https://in.mashable.com/tech.xml')).then(function(r1, r2) {
// console.log(r1[0]);
// console.log(r2[0]);
// cnet article
$(r1[0]).find('item').each(function(i, j) {
title = $(j).find('title').text();
description = $(j).find('description').text();
link = $(j).find('link').text();
thumbnail = $(j).find('[url]').attr('url');
newsname = "Cnet";
logo = "http://i.i.cbsi.com/cnwk.1d/i/ne/gr/prtnr/CNET_Logo_150.gif";
articlestech(i, title, description, link, thumbnail, newsname, logo);
});
//Mashable articles
$(r2[0]).find('item').each(function(i, j) {
title = $(j).find('title').text();
description = $(j).find('description').text();
//pos3 = description.indexOf("</a>");
// des = description.substring(pos3 + 2);
// thumbnail = $(j).find('image').text();
link = $(j).find('link').text();
var pos2 = description.indexOf("width");
var pos1 = description.indexOf("src=");
thumbnail = description.substring(pos1 + 5, pos2 - 2);
newsname = "Mashable India Tech";
logo = "https://media.glassdoor.com/sqll/255718/mashable-squarelogo-1430326903133.png";
des = "";
articlestech(i, title, des, link, thumbnail, newsname, logo);
});}) ;
//movies/tv shows code sample
$.ajax({
type: "GET",
url: "https://cors-anywhere.herokuapp.com/https://www.cinemablend.com/rss/topic/reviews/movies",
dataType: "xml",
success: function(xml) {
$(r1[0]).find('item').each(function(i, j) {
title = $(j).find('title').text();
description = $(j).find('description').text() + "...";
link = $(j).find('link').text();
//console.log(link);
thumbnail = $(j).find('enclosure').attr('url');
//console.log(thumbnail);
newsname = "Cinemablend";
logo = "https://s3.amazonaws.com/media.muckrack.com/groups/icons/cinemablend.jpeg";
articlestech(i, title, description, link, thumbnail, newsname, logo);
});
}
});
$.ajax({
type: "GET",
url: "https://cors-anywhere.herokuapp.com/https://www.cinejosh.com/rss-feed/1/review.html",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(i, j) {
title = $(j).find('title').text();
//des = $(j).find('description').text();
link = $(j).find('link').text();
description = "";
thumbnail = $(j).find('[url]').attr('url');;
console.log(thumbnail);
newsname = "CineJosh";
logo = "https://www.cinejosh.com/gallereys/others/normal/cinejosh_logo_1902160805/cinejosh_logo_1902160805_01.jpg";
articlestech(i, title, description, link, thumbnail, newsname, logo);
});
}
});
//技术JS文件代码示例
$.when（$.get（'https://cors-anywhere.herokuapp.com/https://feed.cnet.com/feed/topics/sci-tech'），$.get（'https://cors-anywhere.herokuapp.com/https://in.mashable.com/tech.xml）。然后（函数（r1，r2）{
//console.log（r1[0]）；
//console.log（r2[0]）；
//cnet文章
$（r1[0]）。查找（'item'）。每个（函数（i，j）{
title=$（j）.find（'title'）.text（）；
description=$（j）.find（'description'）.text（）；
link=$（j）.find（'link'）.text（）；
缩略图=$（j）.find（'[url]'）.attr（'url'）；
newsname=“Cnet”；
徽标=”http://i.i.cbsi.com/cnwk.1d/i/ne/gr/prtnr/CNET_Logo_150.gif";
articlestech（i、标题、描述、链接、缩略图、新闻名称、徽标）；
});
//可捣碎物品
$（r2[0]）。查找（'item'）。每个（函数（i，j）{
title=$（j）.find（'title'）.text（）；
description=$（j）.find（'description'）.text（）；
//pos3=description.indexOf（“”）；
//des=描述子串（pos3+2）；
//缩略图=$（j）.find（'image'）.text（）；
link=$（j）.find（'link'）.text（）；
var pos2=描述。索引（“宽度”）；
var pos1=description.indexOf（“src=”）；
缩略图=description.substring（位置1+5，位置2-2）；
newsname=“Mashable India Tech”；
徽标=”https://media.glassdoor.com/sqll/255718/mashable-squarelogo-1430326903133.png";
des=“”；
articlestech（i、标题、des、链接、缩略图、新闻名称、徽标）；
});}) ;
//电影/电视节目代码示例
$.ajax({
键入：“获取”，
url:“https://cors-anywhere.herokuapp.com/https://www.cinemablend.com/rss/topic/reviews/movies",
数据类型：“xml”，
成功：函数（xml）{
$（r1[0]）。查找（'item'）。每个（函数（i，j）{
title=$（j）.find（'title'）.text（）；
description=$（j）.find（'description'）.text（）+“…”；
link=$（j）.find（'link'）.text（）；
//控制台日志（链接）；
缩略图=$（j）.find（'enclosure'）.attr（'url'）；
//控制台日志（缩略图）；
newsname=“Cinemablend”；
徽标=”https://s3.amazonaws.com/media.muckrack.com/groups/icons/cinemablend.jpeg";
articlestech（i、标题、描述、链接、缩略图、新闻名称、徽标）；
});
}
});
$.ajax({
键入：“获取”，
url:“https://cors-anywhere.herokuapp.com/https://www.cinejosh.com/rss-feed/1/review.html“，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'item'）。每个（函数（i，j）{
title=$（j）.find（'title'）.text（）；
//des=$（j）.find（'description'）.text（）；
link=$（j）.find（'link'）.text（）；
description=“”；
缩略图=$（j）.find（'[url]'）.attr（'url'）；；
控制台日志（缩略图）；
newsname=“CineJosh”；
徽标=”https://www.cinejosh.com/gallereys/others/normal/cinejosh_logo_1902160805/cinejosh_logo_1902160805_01.jpg";
articlestech（i、标题、描述、链接、缩略图、新闻名称、徽标）；
});
}
});
Rest两个JS文件具有相同的代码结构。如何减少加载时间。问题在于，您正在等待所有六个请求返回，以开始处理响应。正如我从您提供的代码片段中看到的，请求之间并不相互依赖，因此您可以单独执行所有请求，当第一个请求完成时，用户将能够在屏幕上看到结果 那么这个,
$.when(
$.get('https://cors-anywhere.herokuapp.com/https://feed.cnet.com/feed/topics/sci-tech'),
$.get('https://cors-anywhere.herokuapp.com/https://in.mashable.com/tech.xml'),
$.get('https://www.theverge.com/rss/tech/index.xml'),
$.get('https://cors-anywhere.herokuapp.com/https://www.buzzfeed.com/tech.xml'),
$.get('https://cors-anywhere.herokuapp.com/https://www.cnbc.com/id/19854910/device/rss/rss.html'),
$.get('https://cors-anywhere.herokuapp.com/https://www.engadget.com/rss.xml'))
$.when($.get('https://cors-anywhere.herokuapp.com/https://feed.cnet.com/feed/topics/sci-tech')).then(function(r1) {
$(r1[0]).find('item').each(function(i, j) {
title = $(j).find('title').text();
description = $(j).find('description').text();
link = $(j).find('link').text();
thumbnail = $(j).find('[url]').attr('url');
newsname = "Cnet";
logo = "http://i.i.cbsi.com/cnwk.1d/i/ne/gr/prtnr/CNET_Logo_150.gif";
articlestech(i, title, description, link, thumbnail, newsname, logo);
});
})
$.when($.get('https://cors-anywhere.herokuapp.com/https://in.mashable.com/tech.xml')).then(function(r1) {
$(r2[0]).find('item').each(function(i, j) {
title = $(j).find('title').text();
description = $(j).find('description').text();
//pos3 = description.indexOf("</a>");
// des = description.substring(pos3 + 2);
// thumbnail = $(j).find('image').text();
link = $(j).find('link').text();
var pos2 = description.indexOf("width");
var pos1 = description.indexOf("src=");
thumbnail = description.substring(pos1 + 5, pos2 - 2);
newsname = "Mashable India Tech";
logo = "https://media.glassdoor.com/sqll/255718/mashable-squarelogo-1430326903133.png";
des = "";
articlestech(i, title, des, link, thumbnail, newsname, logo);
});
})
$.when（$.get（）https://cors-anywhere.herokuapp.com/https://feed.cnet.com/feed/topics/sci-然后（功能（r1）{
$（r1[0]）。查找（'item'）。每个（函数（i，j）{
title=$（j）.find（'title'）.text（）；
description=$（j）.find（'description'）.text（）；
link=$（j）.find（'link'）.text（）；
缩略图=$（j）.find（'[url]'）.attr（'url'）；
newsname=“Cnet”；
徽标=”http://i.i.cbsi.com/cnwk.1d/i/ne/gr/prtnr/CNET_Logo_150.gif";
articlestech（i、标题、描述、链接、缩略图、新闻名称、徽标）；
});
})
$.when（$.get（'https://cors-anywhere.herokuapp.com/https://in.mashable.com/tech.xml）。然后（函数（r1）{
$（r2[0]）。查找（'item'）。每个（函数（i，j）{
title=$（j）.find（'title'）.text（）；
description=$（j）.find（'description'）.text（）；
//pos3=description.indexOf（“”）；
//des=描述子串（pos3+2）；
//缩略图=$（j）.find（'image'）.text（）；
link=$（j）.find（'link'）.text（）；
var pos2=描述。索引（“宽度”）；
var pos1=description.indexOf（“src=”）；
缩略图=description.substring（位置1+5，位置2-2）；
newsname=“Mashable India Tech”；
徽标=”https://media.glassdoor.com/sqll/255718/mashable-squarelogo-1430326903133.png";
des=“”；
articlestech（i、标题、des、链接、缩略图、新闻名称、徽标）；
});
})
…请求是否相互依赖？它们是我请求的独立url，其顺序意味着只有在从一个url请求整个数据后，另一个ajax请求才开始确定，我将签出HI，I d