<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Frontend SPOF</title>
	<atom:link href="http://www.stevesouders.com/blog/2010/06/01/frontend-spof/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/</link>
	<description>Essential knowledge for making your web pages faster.</description>
	<lastBuildDate>Sat, 04 Feb 2012 09:46:28 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
	<item>
		<title>By: Balázs Galambosi</title>
		<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/#comment-2131</link>
		<dc:creator>Balázs Galambosi</dc:creator>
		<pubDate>Fri, 04 Jun 2010 00:45:13 +0000</pubDate>
		<guid isPermaLink="false">http://www.stevesouders.com/blog/?p=1300#comment-2131</guid>
		<description>Inline scripts are a bad practice. Again, the idea is to separate the markup(HTML) from the presentation(CSS) and extra functionality(JS).

Moreover: &quot;&lt;b&gt;Inline scripts block rendering&lt;/b&gt;, just like external scripts, but are worse. External scripts only block the rendering of elements below them in the page. Inline scripts block the rendering of everything in the page.&quot; [1]

I also think that browsers don&#039;t appreciate bunch of meaningless code inside the page, for you may not catch errors, but they will still try to parse and execute it over and over again.

You can put your inline scripts into js files, that are included at the end of the page by some server side logic depending on the request url.

Or it is not that hard to write code that deals with HTML elements by checking if they are actually there. So you can make the whole thing external and enjoy the advantages of caching.

Also, during loading of the HTML lot of things can happen. Event listeners can go mad, users can cause problems that you may not be prepared for. Silencing error handler is a very very bad practice.

No offense, using this technique is one thing, but encouraging others to use it as well is just plain awful.

The best tweaking is no tweaking.

[1] http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/</description>
		<content:encoded><![CDATA[<p>Inline scripts are a bad practice. Again, the idea is to separate the markup(HTML) from the presentation(CSS) and extra functionality(JS).</p>
<p>Moreover: &#8220;<b>Inline scripts block rendering</b>, just like external scripts, but are worse. External scripts only block the rendering of elements below them in the page. Inline scripts block the rendering of everything in the page.&#8221; [1]</p>
<p>I also think that browsers don&#8217;t appreciate bunch of meaningless code inside the page, for you may not catch errors, but they will still try to parse and execute it over and over again.</p>
<p>You can put your inline scripts into js files, that are included at the end of the page by some server side logic depending on the request url.</p>
<p>Or it is not that hard to write code that deals with HTML elements by checking if they are actually there. So you can make the whole thing external and enjoy the advantages of caching.</p>
<p>Also, during loading of the HTML lot of things can happen. Event listeners can go mad, users can cause problems that you may not be prepared for. Silencing error handler is a very very bad practice.</p>
<p>No offense, using this technique is one thing, but encouraging others to use it as well is just plain awful.</p>
<p>The best tweaking is no tweaking.</p>
<p>[1] <a href="http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/" rel="nofollow">http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: jpvincent</title>
		<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/#comment-2130</link>
		<dc:creator>jpvincent</dc:creator>
		<pubDate>Thu, 03 Jun 2010 09:56:22 +0000</pubDate>
		<guid isPermaLink="false">http://www.stevesouders.com/blog/?p=1300#comment-2130</guid>
		<description>when I say &quot;inline JS&quot;, I&#039;m not talking about stuff like Peter Michaux is using &lt;input onfocus=&quot;...&quot;&gt; but rather 
&lt;script&gt;
MY.enrichForm(&#039;myid&#039;);
&lt;/script&gt;

and the problem I tried to solve was having put JS dependancies at the bottom of the page but JS functions still called inline. Ideally, I would have made a big page manager waiting for the body.onload before running the functions, but that&#039;s not the way my site&#039;s framework works

for the new async ga.js the calling of the methods (say _trackPageview and _setAccount) are defered, until the full file is there. Yes it&#039;s loaded in a non-obstrusive way, but the innovation of GA was that you can call all of the GA methods without the JS dependancy being actually here.

FB solves the problem of calling a JS action that is defined in a file that is still not arrived by having a generic listener, that will extract info from the markup to know what to do and get via XHR the JS+HTML (if needed) generated on the server-side.

both solutions were requiring more changes than I wanted to, and the one I finally found is perfectly maintainable

In my technique, the muting of the JS errors just lasts the time of loading the HTML, to prevent inline JS call to warn the user, then I re-enable the default one. The functionality of the error handling is preserved.</description>
		<content:encoded><![CDATA[<p>when I say &#8220;inline JS&#8221;, I&#8217;m not talking about stuff like Peter Michaux is using &lt;input onfocus=&#8221;&#8230;&#8221;&gt; but rather<br />
&lt;script&gt;<br />
MY.enrichForm(&#8216;myid&#8217;);<br />
&lt;/script&gt;</p>
<p>and the problem I tried to solve was having put JS dependancies at the bottom of the page but JS functions still called inline. Ideally, I would have made a big page manager waiting for the body.onload before running the functions, but that&#8217;s not the way my site&#8217;s framework works</p>
<p>for the new async ga.js the calling of the methods (say _trackPageview and _setAccount) are defered, until the full file is there. Yes it&#8217;s loaded in a non-obstrusive way, but the innovation of GA was that you can call all of the GA methods without the JS dependancy being actually here.</p>
<p>FB solves the problem of calling a JS action that is defined in a file that is still not arrived by having a generic listener, that will extract info from the markup to know what to do and get via XHR the JS+HTML (if needed) generated on the server-side.</p>
<p>both solutions were requiring more changes than I wanted to, and the one I finally found is perfectly maintainable</p>
<p>In my technique, the muting of the JS errors just lasts the time of loading the HTML, to prevent inline JS call to warn the user, then I re-enable the default one. The functionality of the error handling is preserved.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Balázs Galambosi</title>
		<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/#comment-2128</link>
		<dc:creator>Balázs Galambosi</dc:creator>
		<pubDate>Wed, 02 Jun 2010 14:58:20 +0000</pubDate>
		<guid isPermaLink="false">http://www.stevesouders.com/blog/?p=1300#comment-2128</guid>
		<description>stripping tags, bites :) wordpress hasn&#039;t got htmlspecialchars() or somethin&#039;? ...

Anyaways, errata: &quot;In fact it is supposed to be put in the {head}[1] whereas we were told to place the old one right before the tag {/body}.[2]&quot;</description>
		<content:encoded><![CDATA[<p>stripping tags, bites :) wordpress hasn&#8217;t got htmlspecialchars() or somethin&#8217;? &#8230;</p>
<p>Anyaways, errata: &#8220;In fact it is supposed to be put in the {head}[1] whereas we were told to place the old one right before the tag {/body}.[2]&#8220;</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Balázs Galambosi</title>
		<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/#comment-2127</link>
		<dc:creator>Balázs Galambosi</dc:creator>
		<pubDate>Wed, 02 Jun 2010 14:55:15 +0000</pubDate>
		<guid isPermaLink="false">http://www.stevesouders.com/blog/?p=1300#comment-2127</guid>
		<description>There is nothing deferred about Google Analytics&#039; async snippet, it is only loaded in a non-blocking way.

In fact it is supposed to be put in the [1] whereas we were told to place the old one right before the  tag.[2]

So it is less deferred now, than it was before. The reason it has changed is that now you can place it in the head without worrying about other elements to be delayed as a consequence. Also, you get more accurate statistics because there are less things that may delay or block your tracking (as this article points out).

Anyway, shutting down error handling is not one of those so-called &quot;best practices&quot;.

If you want to solve it more elegantly you may want to check out Peter Michaux article about after-DOM-load execution. [3]

For basic things, Facebook&#039;s way is enough. But what they do is they use a global event handler for all the events on the page, so there is no need to attach them inline or after the onload. Thus, the functionality of elements are handled in one place instead of tons of small event handlers. It scales nicely if you ask me. :) [4]


There are also some nice techniques about deferred execution on this blog. [5]

Finally, tweaking is always the worst thing to do, rewriting or refactoring code can be costly in a short term, but with some hours of work now you can save weeks of confusion later. Especially if you are working in a team.


[1] http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

[2] http://code.google.com/apis/analytics/docs/tracking/gaTrackingOverview.html

[3] http://peter.michaux.ca/articles/the-window-onload-problem-really-solved

[4] http://www.slideshare.net/makinde/javascript-primer

[5] http://www.stevesouders.com/blog/2009/12/07/downloading-javascript-as-strings/</description>
		<content:encoded><![CDATA[<p>There is nothing deferred about Google Analytics&#8217; async snippet, it is only loaded in a non-blocking way.</p>
<p>In fact it is supposed to be put in the [1] whereas we were told to place the old one right before the  tag.[2]</p>
<p>So it is less deferred now, than it was before. The reason it has changed is that now you can place it in the head without worrying about other elements to be delayed as a consequence. Also, you get more accurate statistics because there are less things that may delay or block your tracking (as this article points out).</p>
<p>Anyway, shutting down error handling is not one of those so-called &#8220;best practices&#8221;.</p>
<p>If you want to solve it more elegantly you may want to check out Peter Michaux article about after-DOM-load execution. [3]</p>
<p>For basic things, Facebook&#8217;s way is enough. But what they do is they use a global event handler for all the events on the page, so there is no need to attach them inline or after the onload. Thus, the functionality of elements are handled in one place instead of tons of small event handlers. It scales nicely if you ask me. :) [4]</p>
<p>There are also some nice techniques about deferred execution on this blog. [5]</p>
<p>Finally, tweaking is always the worst thing to do, rewriting or refactoring code can be costly in a short term, but with some hours of work now you can save weeks of confusion later. Especially if you are working in a team.</p>
<p>[1] <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html" rel="nofollow">http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html</a></p>
<p>[2] <a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingOverview.html" rel="nofollow">http://code.google.com/apis/analytics/docs/tracking/gaTrackingOverview.html</a></p>
<p>[3] <a href="http://peter.michaux.ca/articles/the-window-onload-problem-really-solved" rel="nofollow">http://peter.michaux.ca/articles/the-window-onload-problem-really-solved</a></p>
<p>[4] <a href="http://www.slideshare.net/makinde/javascript-primer" rel="nofollow">http://www.slideshare.net/makinde/javascript-primer</a></p>
<p>[5] <a href="http://www.stevesouders.com/blog/2009/12/07/downloading-javascript-as-strings/" rel="nofollow">http://www.stevesouders.com/blog/2009/12/07/downloading-javascript-as-strings/</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: jpvincent</title>
		<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/#comment-2126</link>
		<dc:creator>jpvincent</dc:creator>
		<pubDate>Wed, 02 Jun 2010 11:08:25 +0000</pubDate>
		<guid isPermaLink="false">http://www.stevesouders.com/blog/?p=1300#comment-2126</guid>
		<description>last step is
- list the &lt;script&gt; of the page, eval() them</description>
		<content:encoded><![CDATA[<p>last step is<br />
- list the &lt;script&gt; of the page, eval() them</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: jpvincent</title>
		<link>http://www.stevesouders.com/blog/2010/06/01/frontend-spof/#comment-2125</link>
		<dc:creator>jpvincent</dc:creator>
		<pubDate>Wed, 02 Jun 2010 11:07:12 +0000</pubDate>
		<guid isPermaLink="false">http://www.stevesouders.com/blog/?p=1300#comment-2125</guid>
		<description>about putting scripts at the bottom, i found a way I didnt saw elsewhere for those who dont want to rewrite portion of JS code like Facebook or Google Analytics did : 

- save the onerror then mute the JS errors on the page
- display page, including inline JS calls
- put back the default JS error handler
- include the JS
- list the  of the page, eval them

more code and graphics here (post in french, sorry)
http://jpv.typepad.com/blog/2010/05/performances-web-put-scripts-at-the-bottom-oui-mais-comment-.html</description>
		<content:encoded><![CDATA[<p>about putting scripts at the bottom, i found a way I didnt saw elsewhere for those who dont want to rewrite portion of JS code like Facebook or Google Analytics did : </p>
<p>- save the onerror then mute the JS errors on the page<br />
- display page, including inline JS calls<br />
- put back the default JS error handler<br />
- include the JS<br />
- list the  of the page, eval them</p>
<p>more code and graphics here (post in french, sorry)<br />
<a href="http://jpv.typepad.com/blog/2010/05/performances-web-put-scripts-at-the-bottom-oui-mais-comment-.html" rel="nofollow">http://jpv.typepad.com/blog/2010/05/performances-web-put-scripts-at-the-bottom-oui-mais-comment-.html</a></p>
]]></content:encoded>
	</item>
</channel>
</rss>

