Placing Scripts In HEAD Or BODY For Best Performance?
Jun 9, 2009
This questions mainly regards using google's analytics code on some of our websites. We currently place the code at the footer as it can hinder load times if placed further up in the page.
For this, or in general use, is placing javascript in the BODY or HEAD better for one or the other as far as load times? Can placing scripts in one or the other allow the page to load concurrently with the script and not sequentially?
If I have some JavaScript I need to run after a page is loaded, I can either use something like <body onload="initialize()">, or I can just include the script at the end of the page.According to Google Analytics, it is sometimes best to put it just before the </body> tag and not use onload. Quote: ...the physical placement of the tracking code call at the bottom of the page is more effective than using an onLoad() function...However, Google Maps uses the onload solution even though locating the script in the body works as well. Is there a general approach which is best? If the best approach depends on the specific application, what factors influence using one way over another.
I can get Scripts to work fine in the <body> but not all scripts seem to work in the <head>
For example, this works fine:
<html> <body> <p id="date"></p>
[Code]....
It could just be that I broke one of the fundamental laws of coding that I don't know or something but like I said, I've only just started JavaScript. Also, the tutorial I have isn't to clear on the differences between using the <head> or the <body>. Just kinda says you can do both.
I'd like to use the <head> wherever possible because it would be so much neater to keep all the JavaScript in one place and all the HTML in another. Pretty much like you can do with CSS.
By the way, I know someone will comment, by "does not work, I mean on the load of the page, the alert is not displayed, nor are any errors. Thanks for any help you can offer.
I've written a jQuery script for a crossfade slide show. My script works fine when I put it it the body section of my HTML. But when I move it to the head, the script no longer works. The div where the images are supposed to appear remains blank. Does this matter? Does this mean that there's a flaw in my script? Should I be worried? Or should I simply leave the script where it is in the body section.
How to: pass local variable from <head> JS function to <body> textarea
I have a JS function in the head that calculates a variable. the function is triggered by the vevent of a button click. when calculation is done, how is it sent back to the page and placed in a textarea or textbox?
I know this can be done with media-queries in CSS3, After attaching the jQuery library, I used js to get the width of the window browser-viewport) and store that in a variable.
What I was aiming to do was write a <title></title> for the page and attach a stylesheet through <link /> using js only when the window's height was greater than 596px. So, I wrote the following:
I'm trying to make my body content scroll at the same time as an iframe located within the body. This has to do with the age old problem of mouse focus on iframes. When my mouse reaches the iframe and it takes over focus, I would like the body to keep scrolling until the iframe is right at the top of the screen. After that I want to relinquish focus to the iframe. I don't mind if the iframe starts scrolling as soon as the mouse reaches it, so long as the main body keeps scrolling for a while.
I need to move the entire contents of one div to a sibling div. At present I'm just doing (assuming the 2 divs are called 1st and 2nd):
What I need to know is if this is the quickest means (in performance terms) of doing this as I will be performing the operation regularly and on a large number of nodes and it's in an area where the UX really can't stutter ?
I have some code which creates an extremely long table row, and I've been able to clean it up to a point where my performance is fairly decent. What I am trying to figure out is if its better in terms of speed to use divs as opposed to the really long table row. I didn't really find much on this topic online, so thought I'd ask out here.
I have read many of the copius entries on the subject of IE performance (or the lack thereof) when populating Select Lists.
I don't mind the insert performance so much, (I get 100x120byte rows inserted/sec up to 500, and 100rows/6secs up to 3000, which isn't great but then the Row Count is clicking away for the user to see and they can hit the "cancel" button at anytime, so overall I'm happy), what really disappoints me is the woeful of .REMOVE()!
Before fetching the next result-set I clear down the existing options (I *do* have to do this don't I?) by looping through option collection calling remove(1). (Would it be quicker if I removed the last option? Option[0] is a header.) For 3000 rows this takes an unbelievable 20+secs :-( Does this sound about right?
1) Is it only IE that performs badly on this?
2) Is there a quicker or more efficient way of zeroing the Select List?
2a) The w3schools ref says the "length" attribute "Returns the number of options in a dropdown list" it doesn't say "sets Or returns"
2b) The French guy (Stephane?) suggested that I should just set the length to zero, but wouldn't that result in a memory leak?
3) Do I need to create a malloc/realloc function that keeps a high-water mark of available option objects for this Drop Down and only "new" some more options when that's exceeded? (But then the Length would always be off)
I just tested all my jQuery selectors using the jQuery Tester [url], and the results seem to "contradict" one thing I read in a performance article: that you should descend from the closest parent ID when using classes in your selector (the article says "April 09", so the latest jQuery version was already available). In my tests, using just the class selector (like span.myClass) was always fastest (sometimes twice as fast as #myDiv span.myClass), and this in all browsers I tested, not just the ones supporting getElementsByClassName. Maybe descending from the closest parent ID becomes a factor when you have a lot of elements on you page?
I pull XML from server using .load() and then iterate with .each() over some 3000 nodes. I use .find() to get 7 sub-nodes and store them internally (into arrays). It works, but it is disappointingly slow. On my obsolete P4 it can take 8-10 seconds during which the whole browser (FF) is completely frozen. On faster computers the processing time is shorter, but still way too long. What can I do to cut this time? I certainly need speed up of an order, two orders would be nice. Would JSON be any faster? Or should I pull text/plain in custom format and parse it in my JS code?
I have a php search page with can potentially display several hundred records. For each record, there is an icon which, when clicked, makes an ajax call. When the reply comes back, the text returned from the server script is added to a specific div and the source of the icon that the user clicked is changed (as a visual cue that that particular item was selected).
This works 100% perfect in FireFox (3.5.9), Chrome, and IE 7. However when I test it in IE 8 there is a HUGE lag between when the icon is clicked and when the div and icon are updated (usually between 10-15 seconds). By commenting out one line at a time, I've narrowed it down to the line that changes the src attribute of the icon...if I just comment that line out, the ajax call is made and the div is updated instantaneously.
How to improve the web site loading performance. My current site takes average time 18 sec. to load in first time. and 2nd time refresh it takes 12 sec. through YSlow I am observing the request time it more. how to achieve the better performance. My html code is very much clean and w3c validated.
I've been working on a redesign of our site at ExperiencePlus for some time now, and long ago chose CBE menu 9 over the other menu technologies out there because of its browser independance. Problem is, as you can see, we have a pretty large site; load-times for the menus and associated scripts are approaching prohibitive. So I'm trying to speed things up.
You can see the results of some simplification here - still about the same speed by my guesstimates.
So, my question is twofold, I guess. First, Mike, do you have any ideas about how long it will take X menu 4 to reach maturity? No pressure ;^) If it were ready now, I'd just drop CBE in favor of X.
Second question: How much performance improvement can I expect from removing unnecessary code (sliding, for example) from the CBE core files? I haven't played with that stuff at all, except to read it now & then when looking for solutions to problems. Does anyone have a similarly large implementation of CBE menu9 that runs faster, so that perhaps they could share their experience?
One final thing: I'm planning to eventually shove all this into a PHP document that will auto-generate chunks of the menu from database queries, especially around the tour & country listings and our "Resource Room." (X menu 4 looks like it would be vastly superior for that purpose, since it's so lean.) I'm interested in hearing from anybody who's tried to do something like this, whether they succeeded or not.
I have client that has 5 versions of the same site located in web viewable root folders on his server. Aside from a few minor differences such as prices, download url's and a few text and image differences, they're the same.
Just wanted to get some opinion as to how many javascript includes I can, or should, use on the site pages or if there are any strong opinions on not doing it this way.
I'd like to place a set of javascipt files in a folder within each site, then have all pages in each site call to their specific include folder. This way I'll be able to use a single set of DW templates to manage the content on all the sites.
I can't convert to php, use ssi nor create a dynamic solution since the sites are already live and rank well in the search engines, The content I'll be wrapping in the includes is not important search engine text content.
I am working on a list which displays a large number of contacts (400 to 500 for a typical user). Currently, I am using Dojo (customized widgit) which is created 400 times (once for each contact).This of course is resulting in alot of rendering delay. What is the best approach to display large lists in HTML/javascript? Each list item needs to have an image.
I am developing a project. to calculate a key performance index (KPI) using javascript and HTML. the calculation should be in client side, and it calculate automatic after user input the value.i am very new with javascript, and i need help from all frens here..[URL]
Method 2: $("<div />").attr("id", "myId").addClass("one two three").width(100).height(100).css("z-index", 1).appendTo("body");
I imagine that when using the first method, jQuery does some string processing and eventually ends up doing the same thing as method #2. Is that correct? If so is there a significant performance cost for this? Overall I think the first method is better as far as readability goes but it would be good to also know its effect on performance.
I have a nice javascript slideshow but it kills the rendering speed of my home page. According to Yahoo performance guru(s), javascript gets run before other stuff is rendered, so you fix that by putting the js code "at the end" of the html file.
Putting it at the end puts the slideshow at the bottom which is not the desired result. And even abs positioning is slave to the <div> structure.
How do I nullify the flow just for this one thing (I don't want to make the whole page absolute).
I need to combine these 2 functions in order to get use them withonclick ='javascript:_get1("2","x"); ' + how to do "preloader" to the function _get() (that loads image file from, [URL]