O'Reilly

afterscriptexecute Event

By on  

Fellow Mozillian Daniel Buchner, curator of the X-Tag project and clever developer who showed us how to detect dom node insertions using CSS animations, recently showed me a new feature JavaScript feature I'd never heard of:  the SCRIPT element's afterscriptexecute event.  This event, when detected within the document, provides developers insight as to when specific SCRIPT elements are executed.

The following snippet listens for script executions on the page and logs the specifc SCRIPT element to the console after executed:

<script id="my_script" type="text/javascript">
document.addEventListener('afterscriptexecute', function(e){
  console.log('Script executed: ', e.target);
}, false);
</script>

<script type="text/javascript">console.log('foo')</script>

<script type="text/javascript">console.log('bar')</script>


This technique will be incredibly useful for debugging complex JavaScript applications, allowing developers to know exactly which script had just been injected and executed.

Daniel has a knack for finding useful new techniques and this tip will be helpful down the road.  Unfortunately only Firefox has implemented this event but I look forward to WebKit support soonish.  Can you think of how you'd use this event?

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

Discussion

  1. It would appear from reading the spec (step 9 of http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element) that the only difference between this event and the load event (aka “onload”) is that load only fires for externally loaded script files, whereas this event fires for both external and inline script elements.

    So, one could conclude that this event is only useful if you care to track the execution of inline script elements, otherwise you’d just use the much more ubiquitous and well known load event. I’m not really able to think of a great use case for tracking inline script elements finishing executing. Almost all such tracking of an inline script element would be from a script loader or dependency manager or other such code generator which created a new inline script element and did script injection to execute it. But in those cases, since JS is single threaded, and since such inline injection executions happen synchronously, you already “know” when that inline snippet finishes running because that’s the next line of your code after you injected it. :)

    I suppose some niche uses might involve passively observing all script element behavior on the page, or developer tools, or things like that. But I think from what I understand, this event probably won’t have much added value for general developers over load, and could quite possibly confuse things if someone listened to both events.

  2. beforescriptexecute works too! So you can get when the script loaded and how long it took to execute. Pretty cool.

    var time = new Date().getTime();
    var start;
    document.addEventListener('beforescriptexecute', function(e){
    	start = (new Date().getTime() - time);
    }, false);
    document.addEventListener('afterscriptexecute', function(e){
    	var end = new Date().getTime() - time;
    	var total = end - start;
    	console.log('Script executed: ', e.target.src, start, end, '( '+total+' )');
    }, false);
    
  3. joe

    Hi Mike,
    beforescriptexecute ??
    Do not work for me.
    (Firefox 17.0.1 and win7)

  4. qgustavor

    There are security issues related to this?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!