如何减少由多个请求导致的加载时间

Question

我正在开发一个新闻聚合器网站，在其中添加了24个发布者，所有发布者数据都存在xml文件中，因此我使用ajax对其进行调用。但是加载该页面需要30秒。我的网页中有四个部分（针对您，技术，政治，电影/电视），每个部分都有一个外部JS文件。这些文件正在请求数据。 PLZ帮助我减少页面加载时间，并提出一些策略。

//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文件具有相同的代码结构。如何减少加载时间。

Answer 1

问题是您正在等待所有六个请求返回以开始对响应进行处理。正如我从代码片段中看到的那样，您提供的请求彼此之间并不相互依赖，因此您可以将所有请求分隔开，一旦第一个请求完成，用户便可以在屏幕上看到结果。

所以，这个：

$.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);
  });
})

...