I have a sizeable interactive swf file and the file is embedded to my HTML using SWFObject. I can communicate with the swf by JavaScript and it works perfectly. But it has no preloader and because the file is big I want to show a loading image or swf and when the file is loaded completely show my play button using JavaScript.
How can I understand, if the file is loaded completely?
I tried bunch of solutions but none of them was successful. First, I tried to create a preloader in Flash and load my external swf then send a message to JavaScript on complete event using externalinterface, it worked, but I couldn't communicate to the main swf Action Scripts by JS anymore.
I found some JavaScript libraries that are supposed to fire an event, when the file is loaded but it happens when the loading is successful (the swf file is there and starts loading).
I would also strongly recommend you incorporate your play/pause, etc., functionality directly into your Flash program - there is really no need to use JavaScript for this!
But if you have to use JS, you could show the load progress by creating an internal preloader, or loading an external swf into the same application domain (whereas if you don't use JS, you don't need to worry about application domains), or using SWFBridge to establish two-way communications between two separate SWFs.
The internal preloader is a pretty neat solution, if you want all of your data embedded into just one file - at the expense of having to create additional frames, and having to think about where exactly to put your class instances in your FLA (you can't use "Embed into frame 1").
Loading into the same application domain is more elegant, especially if you use your Flash IDE mostly for coding (and not design), or if you have external data anyway. Plus, it's a good way to create modular applications.
SWFBridge is really good if you have ActionScript 2 SWFs, or legacy files without directly available source code - but if all you need is a simple preloader and some JavaScript, I would probably not use it in this case.
Related
I am trying to implement a SPA (single page application) without using any framework. I figured that I need to first download all my application resources (HTML, JS, CSS etc.) on my first page load and then use them later.
Now, since I have to pre-load resource and use it later, so I think I have 2 options:
Option 1: Download them using "script" or "link" tag etc. and then refer the downloaded resource later.
Option 2: Download then using xhr or jquery.get(), put them in a global variable and then use those global variables later.
Problems with options 1:
First and biggest challenge is how do I refer the downloaded resource later. Lets say I have somehow downloaded all my HTML, JS etc. but later, dynamically, how will I refer or read or load them later? I will read it from cache? But what if user has disabled caching of resources?
I know I can download JS files using <script> tag but how do I download HTML resource dynamically? I know some templating engine which can download but I do not want to use any external library.
Problems with options 2:
I could pretty much achieve this except below issues:
I downloaded my resources using jquery.get but since I wanted to refer them before DOM rendering so I couldn't use asynchronous mode. I had to download them synchronously. But then there is warning from XHR that synchronous downloading is deprecated. So, then how I can download a application resource synchronously?
I have to keep the content of downloaded resource in a global variable. So, I am worried that will it be a bad idea because it will consume my browser memory? How does the frameworks like Backbone.js or AngularJS does it?
Problems with options 1:
First and biggest challenge is how do I refer the downloaded resource
later. Lets say I have somehow downloaded all my HTML, JS etc. but
later, dynamically, how will I refer or read or load them later? I
will read it from cache? But what if user has disabled caching of
resources?
First of all, you can't directly download HTML using <script> or <link> tags as far as I know.
You can download scripts and css, the scripts will be compiled and executed once downloaded, and CSS will be applied to the web page. There is no need to refer to them later.
I know I can download JS files using <script> tag but how do I
download HTML resource dynamically? I know some templating engine
which can download but I do not want to use any external library.
In the above bullet you stated you can download HTML using <script> tags and now you're saying you can't in the very next bullet of same option. This is already answered, You can't.
Problems with options 2:
I could pretty much achieve this except below issues:
I downloaded my resources using jquery.get but since I wanted to
refer them before DOM rendering so I couldn't use asynchronous mode.
I had to download them synchronously. But then there is warning from
XHR that synchronous downloading is deprecated. So, then how I can
download a application resource synchronously?
"since I wanted to
refer them before DOM rendering" - consider DOM rendering is the process of downloading and processing the mandatory resources - resources that is needed to present the initial state, and load the resources that is going to be needed later. These will be downloaded by browser (think of the index.html and the <script> and <link> tag resources in it)
I have to keep the content of downloaded resource in a global
variable. So, I am worried that will it be a bad idea because it will
consume my browser memory? How does the frameworks like Backbone.js
or AngularJS does it?
There are techniques like name spacing, IIFE etc used to avoid global variables. And regarding memory, download the extra resources after the document is ready, when required. You wouldn't need any extra resources before document is ready.
Angular has some sort of optional cache, I haven't came across anything like that in backbone.
To conclude, simply load JS and CSS resources that are mandatory using <script> and <link> tags in index.html. And load any other resources required afterwards using AJAX, you wouldn't need to refer to JS or CSS since that is processed by the browser when injected via <script> and <link> tags. You can keep a reference to HTML strings simply using variables like var myHTML= ajaxResponse.
With all that said, look into libraries like requireJS, lazyload etc that already handles stuff like these.
I have noticed in chrome that if I load an image as a base64 string and then scroll through that part of the page it will slow down.
I have also noticed that when I navigate out of a tab with my Javascript in it and then move back to that tab it will be slow for a few seconds as though V8 is recompiling the js.
There are three options I can think of but I don't know which is best:
load a tiny loading page first and handle subsequent loading eloquently
load one huge js or css file with everything (jquery + my code + etc)
clump certain codes together (use jquery cdn but group my code together)
What is the best way to get your js loaded as quickly and eloquently as possible?
Generally, loading more files incurs more overhead in HTTP than combining them into fewer files. There are ways to combine files for all kinds of content:
For images, use CSS sprites.
For javascript, compile your client-side code and libraries into one file, and minify to reduce size.
For css, you can do something similar to the above. hem compiles stylus into one css file, for example, and this can help organizationally as well.
Additionally, when you concatenate Javascript and CSS, your webserver or reverse proxy can send them in compressed form for faster page loads. This will be more efficient for larger files as there is more to gain from compression.
There are way too many maybes for this to have any guaranteed solutions, but here you go:
1) load CSS at the top -- load it all there, if you're doing a site with multiple pages.
If you're building a one-page application (where you're running galleries and twitter feeds and articles, etc on the same page, and you can open and close different sections), then you can consider loading widget-specific CSS, at the time you're loading your widget (if it's not needed at startup).
Do NOT use #import in your CSS, if you want it to load quickly (you do).
2) load the vast majority of your JS at the bottom of the page.
There is practically nothing that can't be lazy-loaded, or at least can't be initialized at the bottom of the page, after the DOM is ready, and if there really is, serve those as separate files at the top of the page, and consider how you might rewrite to depend on them less.
3) be careful with timers -- especially setInterval... ...you can get your page's performance into a lot of trouble with poorly-managed timers.
4) be even more careful with event-handlers on things like window-scroll, resize, mouse-move or key-down. These things fire many, many times a second, so if you've written fancy programs which depend on them, you need to rethink how you fire the program (ie: don't run it every time something the handler goes off).
5) serving JS files is a trade-off:
Compiling JS takes a while. So if you're loading 40,000 lines in one file, your browser is going to pause for a little while, as it compiles all of that.
If you serve 18 separate files, then you have to make 18 different server calls.
That's not cool, either.
So a good balance is to concatenate files together that you KNOW you're going to need for that page, and then lazy-load anything which is optional on the page (like a widget for adding a comment, or the lightbox widget, etc).
And either lazy-load them after all of the main products are up and running, OR load them at the last possible second (like when a user hits the "add comment" button).
If you need to have 40,000 lines loaded in your app, as soon as it starts, then take the hit, or decide what order you can load each one in, and provide "loading" indicators (which you should be doing on lazy-load always) for each widget until it's ready (loading the JS one at a time).
These are guidelines for getting around general performance issues.
Specifics are hard to answer even when you have the site directly in front of you.
Use the Chrome dev console for profiling information and network performance, and rendering performance, et cetera.
Well there is a very popular concept called concatenation. The idea is to have as few HTTP requests to your server as possible. Because each request means a new connection, for which DNS lookup happens, then handshake is negotiated and then after a few more protocol-based steps, the server sends the requested file as the response.
You can check http-archive for a list of performance best-practices.
So yeah, you should combine all JS files into one (there are certain exceptions, like js at head and js in footer)
This is the answer for your question-title and points 2 & 3.
As for the other part, I am not clear about the scenario you are talking of.
I recently had the same problem, and then I developed and released a JS library (MIT licence) to do this. Basically, you can put all your stuff (js, images, css ...) into a standard tar archive (which you can create server side), and the library reads it and allows you to easily use the files.
You'll find it here : https://github.com/sebcap26/FileLoader.js
It works with all recents browsers and IE >= 10.
The number of files to load has an impact on the load speed of the whole site. I would recommend to pack into a single javascript file all the required functionality for the website to display properly.
Is there a way to download javascript without executing it? I want to decrease my page load times so am trying to "lazy load" as much javascript onto the page while the user is idle. However I don't want the javascript to execute, I just want it to be in the browser cache.
Should I use an object tag? I noticed that I can use a LINK tag but that makes the browser think it's css which has a negative impact on my ui perf / responsiveness.
As long as you have all code in functions or classes and nothing in global scope nothing will execute.
You can then start your script with a call from
window.load(function() { //your initialisation here });
This will let the whole page load before running any scripts.
You could also add script references via script to make sure they load after any images in the page.
Just add a script element to head using script and it will load.
These pages has examples for this:
http://unixpapa.com/js/dyna.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
This way if you have a slow connection or a sever that is overloaded, the visible elements will be loaded first by the browser.
As far as I know, there is no cross-browser compliant way to get around JavaScript loading in serial. If your javascript does something when it is loaded, you need to refactor your code. For instance, you don't write your jQuery commands/actions/code in the jQuery library script; you link the jQuery library and then put your jQuery commands into a separate file. You should do the same thing with your custom libraries. If this isn't possible, you have a big problem with the architecture of your code.
Also, make sure you stick non-executing JS at the bottom of the page near the </body> tag. This will allow everything else to load first, so that the bulky JS libraries don't slow down things like CSS and images.
The best practices way to deal with external javascript is to have it load after everything else on the page by putting it at the bottom of the page. Then everything that can be rendered will be and display and then the javascript at the bottom of the page will load and be compiled and cached. Of course this only works if the javascipt is a library of functions that don't need to be executed mid-page, in that case, you are stuck with serial javascript loading compiling and execution regardless.
Require.JS is a great library for automatically managing when your javascript loads.
You could load the file using the XMLHttpRequest object in JavaScript. (Aka AJAX). (end then of course just discard the result ^^).
I am looking for the best way to speed up the load time of my js.
The problem is that I am working with a very large site that uses the jquery framework, and what's happening is because the site is also loading, facebook connect, addthis sharing, google analytics and another tracking code, the jquery is delayed a few seconds, and certain elements like the calendar just appear, and my users are complaining that things take to long.
I did a test in google chrome and the avg load time is 4s. Which is too much.
I am already doing minification, and the jquery UI/ Jquery is being loaded from google. What's the best way to approach this?
Make fewer http calls by combining images and script and css, and also use a Content Delivery Network for you static images and css might help!
You are not likely to be able to do much more about the load time of the external scripts, so what you can do is to change the order that things happen in the page so that the external scripts are loaded after you have initialised the page.
Scripts are loaded and executed in a serial manner, so if you change their order in the source code, you also change the order they are loaded.
Instead of using the ready event in jQuery, you can put your initialising code inline in the page, after all the content but before the body closing tag. That way the elements that you want to access are loaded when the script runs, and you can put external scripts below the initialising code to make them load after.
Small technical changes (such as serving the JSs from Google, minifying, etc..) will only get you so far.
Seems you simply have lots of dynamic stuff going on in your page. Have you though of an asynchronous way of building your content? One option might be to place placeholders instead of the external content, and asynchronously load it, so when all the scripts are loaded and ready, all you need to do is throw the markup into the placeholder.
This will create a better user experience, instead of the user waiting 10 seconds for the entire page, it will start loading incrementally after 2 seconds (and still fully load after 10).
In addition to Yuval's answer some options that might or might not bring you a speed gain:
the load time of external libraries is something beyond your control. Try to include them as late as possible, and better still, dynamically after the page has loaded. This way your page won't stall, if Google analytics or Facebook have another hickup.
It is not necessarily faster to load jQuery from Google. Consider putting jQuery, jQuery UI and as many of your own JS as reasonable in a single file, minify and gzip it and let the server serve the gzipped version where possible. Note here, that the gain in speed depends largely on what your users cache and where they cache it. If they already have jQuery from Google in their cache, this technique might make page load slower.
The bottomline is, that after some optimization you're out for experimenting. You must find out, what your average user has in her cache, if the page is accessed directly via deep links or if you can smuggle some JS or CSS (or even images) into her cache via a previous "landing page".
Make sure you deliver your content in gzip/deflate encrypted format. Combine multiple javascript files into 1 file, which helps to reduce the number of http requests.
P.S. Here's a test tool to check if compression is configured:
http://www.gidnetwork.com/tools/gzip-test.php
I've been trying to build my own (small) framework in JavaScript for an AIR application and I've run into a peculiar problem: I can't find a way for a JavaScript file to load another. It seems the only way to load JavaScript is for an HTML file to load it.
Is this correct? Is there really no way for a JavaScript file to load another?
The security restrictions in Application Sandbox mode do not allow instantiating any new JavaScript code after the load event (during that event you can still load and evaluate JS).
As for the loading data, you should be able to use XHR to retrieve any text data you want at any moment of time without any restrictions.
Have you tried creating a script element, setting the src attribute, and adding it to the document body? I don't think the usual document.write() trickery works but I'm pretty sure adding a script element should.
(I believe all paths are relative to the root of the Air application itself.)