From af85afffcb69be818eb74bfac0188c27cf030322 Mon Sep 17 00:00:00 2001
From: Markus Staab <maggus.staab@googlemail.com>
Date: Wed, 4 Nov 2015 11:12:16 +0100
Subject: [PATCH] load prettify asynchronously to speedup rendering

Inspired by state of the art frontend performance best practices.
---
 src/Whoops/Resources/js/whoops.base.js     | 17 ++++++++++++++++-
 src/Whoops/Resources/views/layout.html.php |  1 -
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/Whoops/Resources/js/whoops.base.js b/src/Whoops/Resources/js/whoops.base.js
index b93a9e8..4b10d2f 100644
--- a/src/Whoops/Resources/js/whoops.base.js
+++ b/src/Whoops/Resources/js/whoops.base.js
@@ -1,5 +1,20 @@
 Zepto(function($) {
-  prettyPrint();
+  // a jQuery.getScript() equivalent to asyncronously load javascript files
+  // credits to http://stackoverflow.com/a/8812950/1597388
+  var getScript = function(src, func) {
+    var script = document.createElement('script');
+    script.async = 'async';
+    script.src = src;
+    if (func) {
+      script.onload = func;
+    }
+    document.getElementsByTagName('head')[0].appendChild( script );
+  };
+
+  // load prettify asyncronously to speedup page rendering
+  getScript('//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js', function() {
+    prettyPrint();
+  });
 
   var $frameContainer = $('.frames-container');
   var $container      = $('.details-container');
diff --git a/src/Whoops/Resources/views/layout.html.php b/src/Whoops/Resources/views/layout.html.php
index 0f7d324..c019bf2 100644
--- a/src/Whoops/Resources/views/layout.html.php
+++ b/src/Whoops/Resources/views/layout.html.php
@@ -30,7 +30,6 @@
     </div>
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.5/ZeroClipboard.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
     <script><?php echo $zepto ?></script>
     <script><?php echo $javascript ?></script>
   </body>