Asynchronous Loading of Data: JavaScript vs Visualforce

LoaderDemoController.cls

public class LoaderDemoController {
    @RemoteAction public static String getSalesforce() {
        Long start = DateTime.now().getTime();
        String Salesforce = 
            'data:image/jpeg;base64,'+
            EncodingUtil.base64Encode(
                new ApexPages.PageReference(url.getSalesforceBaseUrl().toExternalForm()+'/img/seasonLogos/Winter_17_175x65.png').getContent()
            );
        // minimum 1 second delay...
        while(DateTime.now().getTime()-start<1000);
        return Salesforce;
    }
    public String SalesforceString { get; set; }
    public Boolean SalesforceLoaded { get; set; }
    
    public LoaderDemoController() {
        SalesforceLoaded = false;
    }
    
    public void loadSalesforce() {
        SalesforceLoaded = true;
        SalesforceString = getSalesforce();
    }
}

loadingDemo.page

<apex:page controller="LoaderDemoController">
    
    <script>
    function load(event) {
        var div = document.getElementById('ajaxSpinner');
        div.classList.remove('hidden');
        event.preventDefault();
        {!$RemoteAction.LoaderDemoController.getSalesforce}(
            function(data, event) {
                document.getElementById('imageHolder').src = data;
                document.getElementById('imageHolder').classList.remove('hidden');
                div.classList.add('hidden');
			}
        );
        return false;
    }
    </script>
    <apex:form id="form">
    	<div style="position: relative; height: 400px">
            <div style="vertical-align: text-top; height: 100%; display: inline-block; width: 49%; text-align: center; position: relative">
                <h1>
                    AJAX Salesforce Load
                </h1>
                <button style="btn" onclick="return load(event);">
                    Load Salesforce
                </button>
                <div id="ajaxSpinner" class="hidden" style="position; absolute; left: 0; top: 0; right: 0; bottom: 0; margin-top: 190px">
                    <img src="/img/loading.gif" />
                </div>
                <div>
                    <img class="hidden" id="imageHolder" />
                </div>
            </div>
            <div style="vertical-align: text-top; height: 100%; display: inline-block; width: 49%; text-align: center; position: relative">
                <h1>
                    Visualforce Salesforce Load
                </h1>
                <div style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin-top:200px;">
                <apex:actionStatus id="status">
                	<apex:facet name="start">
                        <img src="/img/loading.gif" />
                    </apex:facet>
                </apex:actionStatus>
                </div>
                <apex:commandButton action="{!loadSalesforce}" value="Load Salesforce" reRender="form" status="status" />
                <apex:outputText escape="false" rendered="{!SalesforceLoaded}">
                    <div>
                        <img src="{!SalesforceString}" />
                    </div>
                </apex:outputText>
            </div>
        </div>
    </apex:form>
</apex:page>