JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.bootcss.com/mootools/1.5.2/mootools-core.min.js"></script>
  <div id='target'>
</div>

CSS

body {
  font-family: Helvetica, Sans, Arial;
}

p {
  display: block;
}

JavaScript

function get(text, delay) {
  return new Promise(function(resolve, reject) {
    var request = new Request.HTML({
      url: '/echo/html/',
      data: {
        html: text,
        delay: delay
      },
      method: 'post',
      onSuccess: function(data) {
        resolve(data);
      },
      onFailure: function() {
        reject();
      }
    });
    request.send();
  });
}

var chapterStrs = [
  'chapter1',
  'chapter2',
  'chapter3',
  'chapter4',
  'chapter5',
  'chapter6',
  'chapter7',
  'chapter8',
  'chapter9',
  'chapter10',
];

var getChapter = function(chapterStr) {
  return get('<p>' + chapterStr + '</p>', Math.round(Math.random()*5));
};

var addToPage = function(data) {
  data[0].inject($('target'));
}

/*
function sequenceChapter() {
  chapterStrs.reduce(function(sequence, chapterStr) {
    return sequence.then(function() {
      return getChapter(chapterStr);
    }).then(function(chapter) {
      addToPage(chapter);
    });
  }, Promise.resolve());
}
*/

/*
function parallelChapter(){
  Promise.all(chapterStrs.map(getChapter)).then(function(chapters){
    chapters.forEach(function(chapter){
      addToPage(chapter);
    });
  });
}
*/

function fasterChapter() {
  chapterStrs.map(getChapter).reduce(function(sequence, chapterStrPromise) {
    return sequence.then(function(){
      chapterStrPromise.then(function(chapter){
        addToPage(chapter);
      });
      return chapterStrPromise;
    });
  }, Promise.resolve());
}

fasterChapter();