Page specific script remains when page changes in Next js - javascript

I'm trying to add the Facebook Pixel script to a specific page (X) of my Next js application.
I'm using next/script to add it and it is loaded properly only when page X is accessed.
However, whenever I navigate to another page after accessing page X and after the script is loaded, the script remains in the Devtools. My question is: is it supposed to work that way? Is Next.js just optimizing the script load and only executing it when page X is loaded/being accessed and nowhere else or should I explicitly tell it to remove the script if the page path is different?
I'm using the inline script approach (with the default loading strategy of next/script):
<Script id="Facebook_Pixel_Code">
{`!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', [OUR_FB_ID]);fbq('track', 'PageView');`}
</Script>

Related

Why does my external javascript file keep getting reloaded?

I have a jqGrid displaying Tabular data. I have a qTip2 popup window displaying a small window when a user mouses over a hyperlink inside the grid. I'm noticing that an external javascript file is being reloaded every time this popup window displays information. The script is not referenced in the file that is called to display this popup window and would be loaded for the display of the main page.
I see the file being reloaded over and over with this kind of call:
GET http://localhost:4111/Scripts/HelperScript.js?_=1359649163699
GET http://localhost:4111/Scripts/HelperScript.js?_=1359649165768
and so on...
Can someone put me on the path of why this is happening?
So I just double checked and for some reason I had a call in the code that was being loaded to present the popup window that would also reference my script file.
<script src="#Url.Content("~/Scripts/HelperScript.js")" type="text/javascript"></script>
I"m assuming since it was trying to load two copies of the same Javascript file that it was loading it again with a random name so as not to conflict? (Removing the above reference from my code has stopped the script from being loaded again)

Reload embedded javascript in templates (Grails)

well I got a (jquery) javascript in .js loading inside a template in grails , the first time it loads in the template, and the script works perfectly, but once I hit the button to change the content in the template , the javascript doesn't reload, but once I embedded javascript directly in the template it loads fine, but once I put it back in a .js it doesn't load again. any suggestion?
it works this way:
<g:javascript>
code code
</g:javascript>
but doesn't work again if I use this:
<script src="${resource(dir:'js',file:'hoverInfo.js')}" type="text/javascript" charset="utf-8"></script>
once I hit the button to change the content in the template...
do you reload the full page or just a portion via remoteLink/ajax?
I guess in the second case, the browser notices that it already loaded the js-source and will not reload it - hence will not execute it a second time...
I guess you will have to use the onSuccess event to execute the script a second time...
Double check the location of the javascript source file, which can be different when loading the page. Therefore go in to the network tab of your firebug and check, whether the browser tells you 404, when pressing your ajax-button.

Creating takeover page

There is a need to have a takeover page when users visits the website e.g. www.domain.com and instead of displaying the contents immediately a splash page is displayed. They then have the option to visit the home page by clicking on a link.
Is there a way to do this without changing the code on the home page with the exception of including a javascript file that accommodates the requirements i.e. takeover the page with another HTML page?
Is there an example I can find that does the above?
You could do a DNS "rewrite" to an other IP and on the other Webserver you capture or simple copy/paste the original HTML contents and show it but also add this HTML splash notice.
But there is no way of adding a splash page without changing the content of the page or having access to the code.
If you have access to the HTML code, you can include a JavaScript file on which you have access, maybe also on an other server. Also add one noscript tag for visitors without JavaScript disabled.
Example:
<script src="http://www.asdf.com/you/have/access/to/this/file.js" type="text/javascript" />
<noscript>SPLASH NOTICE</noscript>
How the file.js should look like you can ask an additional question. Or check on G.
The good thing with this "remote" JavaScript file is, you can remove the splash notice later from the file without touching the original code again.

How to determine what in my script is blocking my HTML rendering?

I have a web application that uses quite a bit of JavaScript.
When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.
How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?
Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?
UPDATE:
YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.
UPDATE 2:
The live site is linked below.
http://www.elite.com
What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.
A few possibilities:
Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)
Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.
Either way, if you post some code we can likely be of more help
Update:
If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)
Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.
The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.
I would move the Unica Page Tag (tracking) to the end of your page too.
You have 8 external script files - if there is any way you can combine them it would be good.
You don't have gzip turned on for most of those script files
All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.

When do you choose to load your javascript at the bottom of the page instead of the top?

I have seen JavaScript libraries being loaded at the top and bottom of the page.
I would love to know when to make these choices. All the JavaScript code I've written all work at the top of the page, which includes jquery plugins.
When do i load my script at any of these positions?
Top: When having JavaScript events function on elements immediately is more important (so if you use a DOM Ready event to load everything, this is the wrong place)
Bottom: When loading the content is more important
Yahoo says to Put Scripts at the Bottom. Google says something similar but not as clearly.
The reason you do it at the bottom of the page is because if you put it at the top of your page then the rendering of your page will wait for these files before it renders. This is why a lot of people put JavaScript at the bottom of the page as it allows the entire page to be rendered then the JavaScript is loaded.
There's very rarely any reason you'd want to put the JavaScript at the top of the page, and unless you have an explicit reason you want the JavaScript loaded in before the main page then put it at the bottom. Most optimization guides suggest putting it at the bottom for this reason.
I place all CSS in the HEAD to avoid excessive screen paintings and flashes of style.
I place most JavaScript file requests at the bottom of the page so that the page can render quickly (HTML/CSS loading will block until script tags above them have been loaded and processed). Any code that needs to be executed after the library files have loaded are executed onDOMReady, which is all code except for library initialization. I pretty much followed Google's PageSpeed recommendations.
I've been thinking about using LABjs as well to further decrease page load times, but this works well enough right now.
When the browser encounters a script element it has to evalute the JavaScript contained in that element because the script might alter the content of the page (via document.write) or inspect the current state of the page.
If the script element loads script using the src attribute, loading of other resources (JavaScript, CSS, images, etc.) will be blocked until the current script is loaded.
Both of these factors can slow down the perceived load time of your page.
If your JavaScript does not alter the page or if it doesn't need to inspect the state of the page until it has loaded you can mark your script element with defer="defer" (supported by IE 6+ and Firefox 3.5+) which indicates that the evaluation of the script can happen "later". Moving your script elements to the bottom of the page effectively does the same thing - since your scripts appear at the end of the document they'll be evaluated after CSS, images, etc. are loaded and the HTML is rendered.
Because of the fact that browsers have to pause displaying content of a page when it's parsing a Javascript file, the recommendation is to load the Javascript at the bottom of the page to speed up displaying a page's content. This works best if your website can be rendered without any Javascript executing to modify the page because the page will be available for user interaction even if a script hangs for longer than expected.
I put all external scripts (such as Google analytics) at the bottom so their lag does not effect the loading of the DOM.
Simply put, if your script have snippets that would start executing right away (outside all function(){} bodies) and that access DOM elements, it should go at the end of the page so that DOM would have been built and be ready to be accessed by the time the script starts executing.
If you are accessing DOM only from function calls (like onload, onclick etc), you can put the script safely in the head section itself.
I put a small script in the head that does anything I want done before the rest of the page renders, and loads any other required scripts onload, or as needed after the document loads.

Categories