如何减少由多个请求引起的加载时间

Question

我正在开发一个新闻聚合网站，其中添加了 24 个发布者，所有发布者数据都存在于 xml 文件中，因此我使用 ajax 调用它们。但是加载 page.I 需要 30 秒，我的网页中有四个部分（针对您，技术，政治，MOvies/tv），每个部分我都有一个外部 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 文件具有相同的代码structure.HOW以减少加载时间。

Answer 1

问题是您正在等待 return 的所有六个请求开始处理响应。正如我从您提供的代码片段中看到的那样，这些请求并不相互依赖，因此您可以将所有请求分开进行，并且第一个请求完成后，用户将能够在屏幕上看到结果。

所以，这个：

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

...

如何减少由多个请求引起的加载时间

how to Reduce load time caused by multiple requests

javascript

ajax

performance

jquery

load