Click here to Skip to main content
14,635,443 members
Articles » Web Development » ASP.NET » Howto
Posted 7 Apr 2014


43 bookmarked

Faster page rendering by downloading JS/CSS before server generates full page

Rate this:
4.83 (27 votes)
Please Sign up or sign in to vote.
4.83 (27 votes)
15 Aug 2014CPOL
Let browser download Javascripts, CSS while server is still performing expensive operation and generating the page output


When a dynamic page is executing on the server, browser is doing nothing but waiting for the html to come from the server. If your server-side code takes 5 seconds to perform database operations on the server, then for that 5 seconds, user is staring at a blank white screen. Why not take this opportunity to download the Javascript and CSS on the browser simultaneously? By the time server finishes doing its work, server will just send the dynamic content and browser will be able to render it right away. This optimization technique can improve the performance of any dynamic page that takes some time to finish its job on the server, and has some js and css to download.

Here's an example of a typical page, where the JS/CSS are loaded only after the page is delivered to the browser:

Image 1

It takes 7 seconds to render the content.

Here's the optimized version, where the JS/CSS are loaded by the browser, while server is still producing the page content:

Image 2

This one renders at 6 sec, a whopping 1 sec saving! The more JS, CSS and slower dynamic page you have, the more improvement you get.

But, this is easy to do!

This is easy to do using technologies like PHP, NodeJS, old ASP, where you directly write the output from the code and you can flush the response anytime. For example, a PHP solution would be, as Steve Souders has shown, like this:

// Flush any currently open buffers.
while (ob_get_level() > 0) {
[a bunch of HTML...]
<!-- 0001020304050607080[2K worth of padding]... -->
require_once(''); // contains the slow query

But for ASP.NET WebForms or ASP.NET MVC, especially using Razor view engine, this is complicated. You cannot just call Response.Flush anywhere. For ASP.NET WebForms, it will mess up the view state, postback event handlers etc. For ASP.NET MVC using Razor, it just does not work.

There are some clever ways to do it in ASP.NET MVC. For example, using Partial Views, which holds the content that you want to send immediately, like the <head> section full of js, css. An example would be:

public ActionResult FlushDemo()

       // do other work
       return PartialView("RemainderOfPage");

But this means, you cannot use the Layouts to hold your <head> section. You have to stop using any Layout solution. Moreover, your controller now has to do the plumbing work for splitting the view and sending a part of the view early. It is now polluted with some 'viewy' type code.

It would be good to do it from the View, where you can define which part of the View should go first and which one should go after the server side work is done. Moreover, an ideal solution should work perfectly fine with layouts.

A solution for Razor

First, we want to make the Controller do only 'Controller' stuff and not worry about views, partial views, response flush etc. Here's how to do it:

public ActionResult Index()
    Thread.Sleep(5000); // Do something expensive here
    var model = new HomeModel()
        Text = "Hello"
    return View(model);

public ActionResult FastIndex()
    var asyncModel = new AsyncModel<HomeModel>(new HomeModel(),
        model =>
            Thread.Sleep(5000); // Do something expensive here
            model.Text = "Hello";

    return View(asyncModel);

The first Index()shows you how you would typically write a controller code. It is the slow version. The FastIndex() is the faster version. The idea is to defer execution of the code that generates the model, until the view rendering starts.

Now here's the slow view:

    ViewBag.Title = "Home";

<p>From slow index: @Model.Text</p> 

Here's the faster version of the same view:

    ViewBag.Title = "Home";

@section AsyncBody {    
    @{ViewData.Model = Model.Execute();}
    <p>From faster index: @Model.Text</p>

AsyncBody section contains the View stuff that is rendered after the expensive code in the controller is run. Inside that section, first it calls Model.Execute(), which calls the Execute() function of AsyncModel. It then fires the delegate that runs the code defined in the controller, inside FastIndex function.

Now comes the layout part. The layout takes care of rendering the <head> part immediately, and then renders the AsyncBody section on the view.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>

    <p>Before Body</p>
    @if (IsSectionDefined("AsyncBody")) {
        var sb = ((StringWriter)ViewContext.Writer).GetStringBuilder();
        sb.Length = 0; 
    else {
    <p>After Body</p>

Here, it grabs the Razor internal buffer that holds the generated content and flushes it on the response. Then it invokes the @RenderSection("AsyncBody"), which then invokes Model.Execute(), which in turn invokes the controller expensive code.

The AsyncModel class is doing nothing really:

public class AsyncModel<T>
    private Action<T> ControllerCode;
    public T RealModel;
    public AsyncModel(T realModel, Action<T> controllerCode)
        this.ControllerCode = controllerCode;
        this.RealModel = realModel;
    public T Execute()
        return this.RealModel;

That's it!

How it looks

When you hit the page, you immediately get some output and the js, css starts downloading, while the server is doing its job:

Image 3

When server has finished doing its job, the rest of the content renders:

Image 4

You can see the great saving in js, css downloading time achieved here.




Here you have a solution for ASP.NET MVC, especially for Razor to render part of the page immediately, while server is doing expensive work. For regular ASP.NET WebForm, it is a lot more complicated, something we will explore later on. Since ASP.NET MVC has no Control object model, no Page state, no ViewState, it is a lot easier to do in MVC, than in WebForms. By implementing this solution, you can make almost any ASP.NET MVC Razor page load and render significantly faster.

Image 5


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Comments and Discussions

QuestionError on Model.Execute Pin
Ajay Bachale5-May-17 0:53
MemberAjay Bachale5-May-17 0:53 
GeneralMy vote of 5 Pin
Ehsan Sajjad6-Dec-16 0:41
professionalEhsan Sajjad6-Dec-16 0:41 
QuestionCompiler Error with EditorTemplate in Razor View (MVC 5) Pin
Member 845893924-Sep-15 5:09
MemberMember 845893924-Sep-15 5:09 
AnswerRe: Compiler Error with EditorTemplate in Razor View (MVC 5) Pin
Ajay Bachale4-May-17 12:49
MemberAjay Bachale4-May-17 12:49 
GeneralGreat article Pin
RickyJiao22-Jun-14 16:22
MemberRickyJiao22-Jun-14 16:22 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun8-May-14 19:36
MemberHumayun Kabir Mamun8-May-14 19:36 
GeneralIngenious Pin
Omar Gameel Salem6-May-14 14:28
professionalOmar Gameel Salem6-May-14 14:28 
QuestionSo this negates the need to put scripts at the bottom? Pin
Steven Quick30-Apr-14 15:48
MemberSteven Quick30-Apr-14 15:48 
QuestionNamespace for AsyncModel Pin
Kuben Pillay15-Apr-14 17:46
MemberKuben Pillay15-Apr-14 17:46 
AnswerRe: Namespace for AsyncModel Pin
Omar Al Zabir16-Apr-14 0:20
MemberOmar Al Zabir16-Apr-14 0:20 
QuestionThank you for come samples for the different languages Pin
VMAtm14-Apr-14 22:09
MemberVMAtm14-Apr-14 22:09 
Questionachieve same in simple application Pin
Abhishek Ranjan Srivastava14-Apr-14 0:12
MemberAbhishek Ranjan Srivastava14-Apr-14 0:12 
AnswerRe: achieve same in simple application Pin
thatraja14-May-14 21:46
professionalthatraja14-May-14 21:46 
QuestionThis looks really Interesting. Pin
dedlok11-Apr-14 0:54
Memberdedlok11-Apr-14 0:54 
AnswerRe: This looks really Interesting. Pin
Omar Al Zabir12-Apr-14 6:53
MemberOmar Al Zabir12-Apr-14 6:53 
QuestionWebForm Pin
Hoangitk7-Apr-14 21:13
professionalHoangitk7-Apr-14 21:13 
AnswerRe: WebForm Pin
thatraja14-May-14 21:44
professionalthatraja14-May-14 21:44 
GeneralRe: WebForm Pin
Hoangitk16-May-14 3:25
professionalHoangitk16-May-14 3:25 
QuestionCaching Pin
NeverJustHere7-Apr-14 3:27
MemberNeverJustHere7-Apr-14 3:27 
AnswerRe: Caching Pin
Omar Al Zabir12-Apr-14 6:54
MemberOmar Al Zabir12-Apr-14 6:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.