Iframe loading techniques and performance


Iframes are used to display a web page within a web page, load third party content, ads and widgets. The main reason to use the iframe technique is that the iframe content can load in parallel with the main page: it doesn't block the main page. There are two drawbacks in using iframe,
  • Iframes block onload of the main page
  • The main page and iframe share the same connection pool 
The onload blocking is the biggest problem of the two and hurts performance the most. You really want the load event to fire as soon as possible. Here we will see different ways to load the iframe.


Normal Iframe

You all know this one. It's the default way to load an iframe and works in all browsers:


<iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto">



</iframe>

Using the Normal Iframe technique will result in the following behaviour in all browsers:
  • Iframe starts loading before onload of main page
  • Onload of the iframe fires after all iframe content is done loading
  • Onload of main page fires after the iframe's onload fires: the iframe blocks the main page onload.

Iframe After Onload

If you want to load something in an iframe, but the content of the page depends on main page information, or the content of the iframe is not immediately visible to the user because it's way down below the fold or hidden behind a link/tab. Consider deferring the loading of the iframe until after the main page is done.


<script>



//doesn't block the load event

// Create RunTime IFrame so that it doesn't block the load event
function createMaturityScheduleframe() {
    var i = document.createElement("iframe");
    i.src = "../iFramePage.aspx";
    i.frameBorder = "0";
    i.scrolling = "auto";
    i..style.height = "500px";
    i.id = "FrmGeneral";
    i.name = "FrmDetail";
    document.getElementById("DIV_THAT_CONTAINS_IFRAME").appendChild(i);

};
 




</script>
 
The Iframe After Onload technique will consistently show the following behaviour in all browsers:
  • Iframe starts loading after onload of main page
  • Onload of main page fires without interference of the iframe: the iframe does not block the main page onload.

Dynamic Asynch Iframe

Below code will load the iframe and main page asynchronously.


<script>
      (function (d) {
          var iframe = d.body.appendChild(d.createElement('iframe')),
               doc = iframe.contentWindow.document;

          // style the iframe with some CSS
          iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";

          doc.open().write('<body onload="' + 'var d = document;d.getElementsByTagName(\'head\')[0].' +
                            'appendChild(d.createElement(\'script\')).src=\'\/path\/to\/file\'">');

          doc.close(); //iframe onload event happens

      })(document);
</script>


 



The magic is in the <body onload="">: the iframe 
has no content initially, so onload of the iframe fires instantly. Then, we create a new script element, set its source to the JS file that 
loads the content of the iframe, append the script to the HEAD, 
the iframe content loads without blocking the main page onload. we should see the following behaviour of the Dynamic Asynch Iframe 
technique consistently in all browsers:
   


    

  • Iframe starts loading before onload of main page.
    
    • 

  • Onload of the iframe fires instantly, because the iframe content is loaded after onload.
    
    • 

  • Onload of main page fires without interference of the iframe: the iframe does not block the main page onload because of the <body onload="">
    
    • 








Although iframe is now less common to use in web applications.But support for iframe is still there in HTML 5.













































Comments











Post a Comment






























Popular posts from this blog









Data Bound Controls in ASP.Net - Part 4 (FormView and DetailsView controls) 





















  FormView   The FormView control is used to display a single record from a data source. It is similar to the DetailsView control, except it displays user-defined templates instead of row fields. Creating your own templates gives you greater flexibility in controlling how the data is displayed. The FormView control supports the following features:   ·          Binding to data source controls, such as SqlDataSource and ObjectDataSource.   ·          Built-in inserting, updating and deleting capabilities.   ·          Built-in paging capabilities.   ·          Programmatic access to the FormView object model to dynamically set properties, handle events, and so on.   ·          Customizable appearance through user-defined templates, themes, and styles.     Templates   For the FormView control to display content, you need to create templates for the different parts of the control. Most templates are optional; however, you must create a template for the mode in which the control is configur








Read more










ASP.net: HttpHandlers




















Image







 HTTPHandlers:   ASP.NET handles all the HTTP  requests coming from the user  and generates the appropriate response for it. ASP.NET framework knows  how to process different kind of requests based on extension. For  example, it can handle request for .aspx , .ascx  and .txt   files, etc. When it receives any request, it checks the extension to  see if it can handle that request and performs some predefined steps to  serve that request.   ASP.NET provides a low-level request/response API that enables developers to use .NET Framework classes to service incoming HTTP requests.So as a developer, One might want to handle some new kind of requests such as requests for .jpg or .gif. ASP.NET provides HTTPHandler to handle requests for .jpg or .gif.    An ASP.NET HTTP handler is the process or endpoint that runs in response to a request made to an ASP.NET Web  application. The most common handler is an ASP.NET page handler that  processes .aspx files. When users request an .aspx file, the requ








Read more










The Clickjacking attack and X-Frame-Options





















   Clickjacking      Clickjacking is a type of “web framing” or “UI redressing” attack. What that simply means in practice is that:       1. A user (victim) is shown an innocuous, but enticing web page (think watch online video)   2. Another web page (that generally does something important – think add friends on social network) is layered on top of the first page and set to be transparent   3. When the user thinks they are clicking on the web page they see (video), they are actually clicking on the higher layered (framed) page that is transparent        There are two main ways to prevent clickjacking:   1.     Sending the proper X-Frame-Options HTTP response headers that instruct the browser to not allow framing from other domains   2.     Employing defensive code in the UI to ensure that the current frame is the most top level window     Using X-Frame-Options   X-Frame-Options  originally invented by Microsoft for IE8, but supported by a number of browsers, this idea might have more 








Read more