Geek Answers Handbook

What is the best way to enable javascript?

Many of the major players recommend slightly different techniques. Basically, when placing a new <script> .

Google Anayltics :

 (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();

Facebook :

 (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }());:

Disqus :

 (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();

(post others and i will add them)

Are there any rhymes or reasons for these choices or does it not matter at all?

+7
source share
3 answers

All this is essentially the same in spirit. The idea is to defer scripts so that they do not overlap or fill out the document.

It is common practice to load additional external resources after the contents of your site. In doing so, you want to: a) prevent the onload event from being blocked, so that your page is "finished" faster, and b) load resources in parallel, which was higher.

Steve Souders claims that "progressive improvement" is the most important concept of site performance today. This concept assumes that you deliver your home page as quickly as possible, and then provide additional content / services as needed, either in the case of a download or when the user requests it.

These days, there are limits. See http://headjs.com/

+3
source

I think this is not about how you add a script to your page, but a script that extracts content from another domain can only be added in this way, that is, to dynamically record the script tag and add it to you document. All of the above scripts do everything their own way, so you can do it on your own.

0
source

There are several different reasons for this ... first, some browsers will load dynamically added script tags asynchronously. Secondly, the script can handle when the landing page is http versus https to avoid content errors.

As joe said, head.js is useful ... s is the separation of the domains of your own scripts. For your own resources, the script is best to create your site with as little js as possible at the top (html5shiv and browser tags / js for css) ... then your js in the old old style <script src = ""> before the closing body element.

Browsers first load the required page content, and this will later give the fastest perceived load in non-blocking mode. Modulating your scripts for the sequence of operations and initializing on the page just what you need to run, makes better use of caching.

Store your script resources in files under or less than 6 js. and close to the same size as each other, as reasonable.

The chest book, Even Faster Websites, is a great read.

0
source

More articles:


All Articles