Jump to content
  • Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
iwato

Matomo: async, defer, and insertBefore()

Recommended Posts

Please find below the Javascript  insertion <script> tag that Matomo uses to track user behavior on a webpage.

<!-- Matomo -->
<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
        var u="//{$PIWIK_URL}/";
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        _paq.push(['setSiteId', {$IDSITE}]);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
    })();
</script>
<!-- End Matomo Code -->

I would like to clarify the meaning of the  final line of the above function -- namely,

g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);

QUESTION ONE:  Can the script attributes async and defer work indepedently of each another?  What is the purpose of each and does their role change when they are imlpemented together?

QUESTION TWO: Given the statement

s=d.getElementsByTagName('script')[0];

does the statement

s.parentNode.insertBefore(g,s);

read:  "Find the parent node of s and prepend g before s where s is the first node of all script nodes within the document including the  node containing this function"?

Share this post


Link to post
Share on other sites

The use of both async and defer is often done because old versions of Internet Explorer only understood the defer attribute. They're not mutually exclusive, async tells the browser to continue loading the rest of the page while the script is being downloaded. The defer attribute works the same, but deferred scripts are executed in the same order as they are in the DOM rather than executing each one the moment they finished downloading. The async and defer properties are explained in detail on this page: https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

In short, x.parentNode.insertBefore(y, x) means to put y right before x in the document. It doesn't matter what or where x or y are as long as they're both DOM nodes. The insertBefore method works like appendChild(), but instead of putting it at the end of the children, it specifies one of the existing children of the node before which the new element should be inserted. W3Schools has a page explaining the insertBefore() method here: https://www.w3schools.com/jsref/met_node_insertbefore.asp

  • Like 1

Share this post


Link to post
Share on other sites

OK.  I have read through the MDN reference that you provided regarding the async and defer attributes.  Comparing this reference against your statement and my own reflection it appears that Javascript and HTML are treated separately by a browser.  This said, if no special action is taken Javascript will always be executed in the moment that it is read along with the other HTML tags in the document.

Further, if I have understood correctly, there are three ways to introduce Javascript into a webpage:  one,  it is executed in the order that it is read along with other HTML tags; two, although read in the order in which it appears amont other HTML tags it need not need be executed at the time it is read; and three, although read in the order in which it appears among other HTML tags, it is not executed until all of the HTML tags have been loaded, and when read, it is read in the order in which it was introduced among the other HTML tags.

In other words,

1) Javascript is synchronous when it is executed in the order that it appears along with the other HTML tags.

2) Javascript is asynchronous when the browser is not compelled to execute in the order that it appears among the other HTML tags

3) When the defer attribute is indicated and is assigned the value true,  the corresponding script is treated as if it were contained in a jQuery ready() method and not executed until all other HTML tags have been read.

QUESTION:  Is the above a proper understanding of the relationship between HTML, Javascript, and browser behavior?

Roddy

 

Share this post


Link to post
Share on other sites

It's not correct. Asynchronous is not about the order of execution, that is merely a side effect, but about whether or not the browser should halt loading the page when it comes across a script.

HTML just tells the browser what scripts to load and how to load them.

As for methods of loading Javascript, there are just two: synchronous and asynchronous.

When a script is synchronous, the page stops loading at the point where the <script> tag ended, waits for the entire script to download, then runs the Javascript from the file, then continues loading the rest of the HTML. This really slows down the page from loading which is why it is recommended to have script tags at the bottom of the document or to load them asynchronously. If you load scripts synchronously in the <head> section then the page will be blank until the scripts are done downloading.

When a script is loaded asynchronously, the page begins downloading the scripts but continues parsing the rest of the HTML on the page, waiting until the script has finished downloading before running it. The problem with this is that you cannot predict the order in which scripts will run: whichever script downloads the fastest runs first.

The defer attribute tells the browser to remember the order in which scripts were in the document, but this behavior is only predictable if all script tags have the defer attribute and not just some of them. Most of the time, the defer attribute is not used for that purpose and instead is just used to be backwards compatible with old versions of Internet Explorer because it does not support the async attribute.

  • Thanks 1

Share this post


Link to post
Share on other sites

Whether it is true or not, I have understood well what you explained.

Under the assumption that what you have stated is true, could it not then be said that the jQuery ready( ) function behaves as if each line of script contained within the function were assigned its own script tag and defer attribute?

Roddy

 

Share this post


Link to post
Share on other sites

For the purpose of discussion, let's leave out jQuery.  jQuery is just a wrapper over regular Javascript.  Instead of talking about jQuery's ready function, talk about the DOM document load event.  But, you can do a little bit of testing to answer your question.  Include whatever scripts you want on a test page using whatever methods you want, and have each of them use console.log to send a message to the browser's developer console.  When you load the page, you'll be able to see the order in which they execute.  If you refresh the page you might get different results based on the options you used.

Share this post


Link to post
Share on other sites

JSG:  But, you have set aside the very thing that I was trying to understand -- the jQuery ready( ) function.

If I have understood this function correctly, it allows the Javascript contained within the function to be read as the rest of the page is being downloaded, but does not permit what is read to be executed until the rest of the page has been completed.  My question, then: does the jQuery ready() function also insure that the Javascript thus read and loaded execute in the order that it is entered into the ready function?

Roddy

Share this post


Link to post
Share on other sites

They may be read and executed, but a executed code may not completely finish before other code is executed. Unless you specifically create the code to run after the previous is completed.

The jQuery ready( ) function acts as a onload event itself and is mainly used for presetting, manipulation of elements, and adding events to specific elements after the pages html has been fully rendered.

Share this post


Link to post
Share on other sites

If I have understood this function correctly, it allows the Javascript contained within the function to be read as the rest of the page is being downloaded, but does not permit what is read to be executed until the rest of the page has been completed.  My question, then: does the jQuery ready() function also insure that the Javascript thus read and loaded execute in the order that it is entered into the ready function?

It's not magic, like all the rest of jQuery it's just a wrapper for existing vanilla Javascript.  jQuery does not add any functionality, all it does it make certain things easier to use.  The only scripting language all modern browsers understand is Javascript, so anything like jQuery is ultimately written in and uses vanilla Javascript.  For the ready function, it's just a wrapper for the document.load event.  More specifically, and recently, it probably just runs document.addEventListener if that's available.  In terms of what it does, you just declare and pass a function to it which will get executed when the event happens.  It's not about "permitting" things to run, things happen in a well-defined order, and as far as I know the event handlers do get executed in the order in which they're added but I believe they also get executed asynchronously.  That's why I said to leave jQuery out of the discussion - if you want to understand what it does, you only need to understand the underlying Javascript concepts on which jQuery is built.  If you understand that then you can review the jQuery source code to see how jQuery specifically uses the built-in functionality.

The source code for that is here:

https://github.com/jquery/jquery/blob/master/src/core/ready.js

Lines 71 through 84 set up the actual DOM event to execute jQuery's own event handler, which is the completed function, which calls the internal ready function, which runs each handler on line 54.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×