I'm building my first ajax-heavy application and am not sure of the proper approach for such things.
If, for example I ajax in a html partial (a form), with:
$('#content').load('form.html');
how should I include the javascript and css?
I can, of course include them in the original document, but that seems wasteful if the form is never loaded. I can inline them (in form.html) with <script> and <style> elements, but that seems like the wrong approach.
You can use a separate JS file and load it using $.getScript() in the .load callback.
Inline CSS should work fine, but since you run the risk of it messing up your main page, you should load it as part of the main page and not with AJAX.
If it were me, though, I wouldn't be afraid to leave a few extra lines of well-targeted JS and CSS code in your main page -- it's more efficient to load it with the other JS and CSS at the beginning, in the same file(s), than to fire off another network connection and wait for it to download.
The $.getScript() would make an additional http request to load the js file that is to be used in form.html.
So, say for example, if you load 20 forms via ajax, you have to make 20+20 http request( 20 for loading js file and 20 for loading the html for forms)
A possible optimized approach is:
loading the all the css ( minified) at the beginning.
IF a single js file is real large even after minifying,
Arrange the js functionality based on the PROABABILITY of use in different files ( (the fewer number of files , the better).
Minify those files and load the file with highest probability at the beginning .
And then use $.getScript() to load the file after checking if the file has already been loaded.
Related
How to compile css and jss in multi page application in laravel page wise using laravel mix . suppose i have page 1 , page 2 and page1 have test10.js, test11.js, test12.js and test10.css, test11.css,test12.css and page2 have test21.js, test22.js, test23.js and test21.css, test22.css,test23.css and so on. So someone let me know how to compile the css and jss in multipages applications.
For most cases, it is a good practice to optimize a big chunk of your assets to work on almost all pages. It is not a big problem that some pieces are not getting used on every page because caching gives better performance results when you only use one file that stays the same on every page.
There is an option for compiling multiple assets. You can just call the js() or sass() or an other method an other time. This time referencing an other file that needs to be compiled. In your layout you can add them per page.
What I like to do is the following:
I add a #stack('js) to my main layout.
For every piece of Javascript that only needs to be included at a single page I use #push('js) and #endpush.
Sometimes, when the code gets to big to handle, I add a js() method in my webpack.mix.js file. This gives me more freedom in writing my javascript.
A stack has a big advantage: It accepts multiple entries. This comes in handy when you use partials to build up your view and you want to keep the Javascript logic in the same files.
I want make my website to load faster, usually I put my code in the <head>, in some third party library's dom ready function, like jQuery.
I read that if I put the script code directly in the bottom, it could make the page load more faster.
So if its true, It means that If I put the script in the bottom its better right?
Loading a script causes the browser to block loading the rest of the page until the script is loaded and executed. This is to allow the code to make any changes before the browser continues rendering. Placing your scripts at the bottom of the page (just before the </body> tag) allows the browser to load an rednder substantially all of the document before it blocks to load the scripts. From the users perspective the page will load more quickly.
This is not the same as controlling execution by adding your code in a DOMReady function, although in practice there may be little difference in effect.
Is there a way I can load a script at the end of the body tag instead of loading in the header? I want to load Facebox and load the jscipt calls to it after the body has loaded.
Despite what jdog wrote, there are a number of ways to take content just before Joomla echoes it to the browser and edit it. This article gives a good overview: http://www.howtojoomla.net/how-tos/development/how-to-fix-joomla-content-plugins
The specific example turns strings into links, but you can modify that to insert your markup right before the </body> tag.
no.
I assume you want to do this for website load speed reasons, what you could do is look at CSS/JS compression components, such as JFinalizer and see which of those support deferred loading of Javascript.
Is there any way to fetch the raw contents of a CSS file?
Lets imagine that I wanted to fetch any vendor-specific css properties from a CSS file. I would need to somehow grab the CSS contents and parse them accordingly. Or I could just use the DOM to access the rules of a CSS file.
The problem is that in while using the DOM, mostly all browsers (except for <= IE8) tend to strip out all of the custom properties that do not relate to their browser engine (webkit strips out -moz and -o and -ms). Therefore it wouldn't be possible to fetch the CSS contents.
If I were to use AJAX to fetch the contents of the CSS file, then if that CSS file hosted on another domain, then the same origin policy would break and the CSS contents could not be fetched.
If one were to use a cross-domain AJAX approach then there would only be a JSONP solution which wouldn't work since we're not parsing any javascript code (therefore there is no callback).
Is there any other way to fetch the contents?
If a CSS file is on the same domain as the page you're running the script on, you can just use AJAX to pull in the CSS file:
$.get("/path/to/the.css", function(data) {/* ... */});
If not, you could try using Yahoo! Pipes as a proxy and get the CSS with JSONp.
As for parsing, you can check out Sizzle to parse the selectors. You could also use the CSS grammar (posted in the CSS standards) to use a JS lex/yacc parser to parse out the document. I'll leave you to get creative with that.
Good luck!
No, you've pretty much covered it. Browsers other than IE strip out unknown rules from their object models both in the style/currentStyle objects and in the document.styleSheets interface. (It's usually IE6-7 whose CSS you want to patch up, of course.)
If you wanted to suck a stylesheet from an external domain you would need proxy-assisted-AJAX. And parsing CSS from would be a big nasty job, especially if you needed to replicate browser quirks. I would strenuously avoid any such thing!
JSONP is still a valid solution, though it would hurt the eyes somewhat. Basically, in addition to the callback padding, you would have to add one JSON property "padding" and pass the CSS as a value. For example, a call to a script, http://myserver.com/file2jsonp/?jsonp=myCallback&textwrapper=cssContents could return this:
myCallback("cssContents":"body{text-decoration:blink;}\nb{text-size:10em;}");
You'd have to text-encode all line breaks and wrap the contents of the CSS file in quotes (after encoding any existing quotes). I had to resort to doing this with a Twitter XML feed. It felt like such a horrible idea when I built it, but it did its job.
When cached, my starting page only needs to load one element (the "root document") - but then it needs some time until it's rendered completely:
alt text http://www.walkner.biz/_temp/firebug_net.png
The elements following are things loaded asynchronous via JavaScript.
Two questions:
Why does it take so "long" from loading the root document until the DomContentLoaded-event?
Does it make sense to load some not-so-important things asynchronously? Is it important to have the DmoContentLoaded-event as early as possible? Unfortunately there's not much documentation about that event, but I don't think it's the moment when the page is displayed, is it?
I'm not sure YSlow is gonna help him as that will download all elements for a page and run performance tests on them, whereas swalkner's problem is how long it is taking to render the HTML page itself when all other elements (images, CSS, etc) are cached.
At least that's what I think he's saying.
In the original question you said, "The elements following are things loaded asynchronous via JavaScript." but then listed nothing. What is loaded?
I would suggest checking for Javascript errors in the first instance. Then try removing some of your asynchronous loading calls one by one until you hit the bottleneck. In fact, remove them all, how long does the downloaded HTML take to render? Take that time and work from there.
Is your HTML document very big? Does it use lots of inline styles that could be in the CSS file?
Perhaps if you posted a link to the site then people would have a look at it.