Swf resource consumption optimization - javascript

I have a page, which displays two big flash movies (not simultaneously) and switches from one to another quite often without reloading the page. I have started with hiding one movie and displaying another. Like
$('#flash1').css('display', 'none');
$('#flash2').css('display', 'block');
In Mozilla it was ok, as flash1 stopped working and was loaded once again when switching back to flash1. But in IE and Chrome flash continued to work, which caused some lagging. I have tried many things, but the only one successful is to remove unused flash completely like this:
$('#flash1').html('');
$('#flash2').html('html code of flash');
The only thing which confuses me, that flash movies have to be reloaded each time, which causes a little pause when switching from one flash to another, and I think that it would be better if both flashes are loaded all the time, and somehow stopped when not used. Is there any solution to do this or it is better to do like I did it?

Related

Prevent Chrome 80 from freezing tab with my page

I have a simple html page that displays some monitoring results, it reloads every 2 minutes and makes noise when those results are not acceptable. I keep this page open 24/7, so new Chrome started freezing and suspending it, as I found out via chrome://discards/ .. So the page stopped making noise and catching my attention, mostly cause the tab gets frozen by Chrome. That happens if I forget to leave the tab with this page active, "on top". Is there a rather simple way to prevent Chrome from freezing the tab, even if it is not active? I could involve some Javascript, if needed..
I am aware that there is a simple solution of opening new window with this page and leaving it alone. On the other hand, I made the page, so I can make changes to HTML in order to ensure that page remains unfrozen. I tried updating title with current time on every reload, this visibly helped, page seemingly always has fresh time in the title, but it still doesn't make noise. And if I switch into it when noise is supposed to happen, - it starts the sound half way like it was trying to all alone.. it's even funny..
Is there any simple solution to this? Thanks for your help.

ContentVeil.js and Forced Synchronous Layout Issue

I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.
It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.

How to properly handle switching html5 Videos

I have come here after much trouble with something that may be only related to videos, and Is likely a bad understanding of page resources in general. What I am trying to accomplish is the ability to have a single web page in which, by clicking 'forward' and 'back' buttons, one may change the contents of a div to display one of the videos in obvious sequential order. The video is currently in mp4 format in a html5 video element.
I have tried a few methods.
directly changing the src of the source element (does not seem to do anything)
remove the element, and re-add it with different src. (has problem described below)
remove the element, and use Jquery .load() to place an external html file with the entire video element in it, including a separate html file for each src. (has problem described below)
remove the element, and re-add it with a src pointing to a download of the file from GridFS using the python flask framework. (has problem described below)
Ok, so the main issue I am having is with repeat downloads of the same video from the page. Say if you click 'next video', then 'previous video'. This causes the video to be 'black' (not loaded at all, acts like src is broken). The first time each of the videos are requested, it loads in under a second, the second time varies but is always over 10 seconds. before the content of the video pops up and it becomes playable. Google chrome's dev network tools lists the media as 'pending' while I am waiting, when when it is done waiting finally it turns the above video to red (canceled) and the new source to 'partial content'. During the wait time, it can not seem to pull anything from the server including rollover images.
I have tried this locally with flask and python simple html server, as well as on an 8 core server over gigabit Ethernet. This is not an issue of random network latency, something weird is going on.
One of the things I am trying to figure out is how making a new request to the server works with partial content. I had some idea that the browser cache would store the file so that the second time loading it should be faster, which would be optimal anyway. Does this still happen with html5 videos?
Also of note, the files are fairly small, one minute or so videos of about 20 mb. It seems like the web server is just blocking the second request for some reason and I am wondering if any of you have ever heard of this. I can post code upon request but I think the concept is pretty much straightforward.
I plan to use GridFS with flask for the final implementation of this site.
Due to the below suggestion, I have tried doing away with the source element and having the src attribute attached onto the video itself. This produces the same result. Here is the fairly simple thing I am doing:
$('#addlinks').click(function(){
$('#maininside').remove();
$('#maintext').append('<div id=maininside></div>');
$('#maininside').html('<video width="100%" controls src="/getmedia/dangerisland-01-video-01.m4v">Your browser does not support the video tag.</video>');
});
<article id="maintext">
<div id="maininside">
</div>
</article>
The first time the button is clicked, there is a very slight delay and I can see high network usage in a monitor as the video is downloaded. Once the button is clicked again, I get no network usage for about 30 seconds in this case, then it downloads at full speed again and comes back up. Here is the dev view of network use right after it comes back up the second time:
Thank you for any insight you might have.
There are a lot of sub-questions and variables here; not sure how well I can address them all--but I'll give it a try.
The comment by kalhartt steers you correct in regard to simply
changing the source. But I'll note that in my experience the behavior
you'll see from the various browsers as you go through this process
will be inconsistent. I've done some work on this over the past year,
and at least at the time it was a poor user experience--the user experienced the video as broken while the browser responds to the change in source and new
load. We ended up generating new video elements and switching them out (but even this can be fraught with pitfalls due to differences in which media events each browser is publishing when.)
I'm not positive how you're serving the videos, but the flask
development server is blocking (unless you set
app.run(threaded=True), I think.)
It's also possible you're running
into behavior caused by the internal video loading/caching logic in
the browser, and you will even observe significant variation in how each
browser handles these tasks. A good way to test
against this behavior would be to append a unique query string
(perhaps with a timestamp) for each load; the videos should happily
load (if the server isn't blocking.) If server blocking is the issue it may be worth hosting the videos on S3 until you're ready to focus on how they're delivered.
Another possibility is not destroying the original video object if you suspect it's going to be used again (instead you can pause it, remove it from the DOM, and save a reference to it). If re-use is an unlikely case, though, and especially if you expect the users to play many videos on a single page load, it may be best to discard them. A compromise might be retaining a fixed number of previous video objects.

JavaScript Unwanted Delay?

If you visit http://www.thebattleforarcadia.com/construction/index.html and open the site in multiple tabs or windows, you might notice the scripts exhibiting delays on the page while including another page that uses Ajax and or JavaScript.
This is especially noticeable when it comes to the mouseovers
Is there any fix for this? I believe that I have organized the JavaScript/jQuery quite a bit, and would like some advice if not code-fixes.
There is no delay as far as I'm concerned. It might just be delaying on your end depending on how fast your computer may be, what browser you're using, and etc.
On my end, it runs just fine. Multiple tabs open, no speed decrease. Unless you weren't specific enough and I'm missing something. Otherwise, the mouseovers are normal and I don't experience any delay within the page.

How can I delay leaving a page via javascript?

I'm trying to get add a delay of 1000ms before a person leaved the page. I'm using the beforeunload event to start a jquery animation and would like it to finish before the page leaves.
I'm not concerned with older browsers, IE9, latest safari, chrome and FF4 are all i'm interested in.
Edit: Well I was hoping to implement it when just navigating internal pages. Sure I can make all my internal links a javascript call, but I would have preferred a less brute force method.
Also, I'm not stopping people from leaving the page, not even making them wait a huge long time, 1 second for a fade out? Thats no worse than every game I play fading out when I select quit.
Now had I asked how do I prevent a person from leaving a page, then yes all the "don't do it" would have been deserved.
Firstly, if people want to leave your page, don't put any barriers or difficulties in leaving it. Just let them.
Konerak said it well...
Using a blocking action is acceptable when the user is about to lose data by leaving the page, but using them for animations and gimmicks will quickly annoy your users.
Secondly, you can only prevent automatic closing with a blocking action, such as an alert() or prompt(), which temporary blocks the browser's viewport, waiting for user response.
jsFiddle.
Well I was hoping to implement it when just navigating internal pages.
I know it’s four years later now, but I wanted to point out that, within the bounds you’ve described, you can do this.
$(document).on("click", "a", function (e) {// Listen for all link click events on the page (assuming other scripts don’t stop them from bubbling all the way up)
// Stop the link from being followed.
e.preventDefault();
// Grab the link element that was clicked
var linkClicked = e.target;
// I'm using setTimeout to just delay things here, but you would do your animation and then call a function like this when it’s done
window.setTimeout(function () {
// Simulate navigation
window.location = linkClicked.href;
}, 1000);
return false;
});
It’s still inadvisable:
I suspect it would get annoying to users pretty quickly
Without additional code, this would prevent users from command/control-clicking to open links in a new tab.
8 years later and I'm about to code this for my own website, specifically as a fade between pages. But I'm only going to do this for navigating between pages within my site, and I'm not going to use window.onbeforeunload or window.onclick. I attach a click event handler to specific "buttons" on each page. pointer-events is even disabled for other elements, so the event's element scope is very limited. The code is a switch() statement with cases for each "button". Each button navigates to a specific page within the site.
I don't think this is bad web page or web site behavior. A 1 second delay when transitioning between pages is not going to annoy users. I think you might be able to get 2 seconds or more out of it, if you include the time it takes to load the destination page, which can also fade in gradually in as it loads data.
It's visually elegant, especially compared to typical news/info sites with flex layouts that shift all over the page while they load. Those pages spend 2 or more seconds shifting stuff around before you can read anything.
My site is already filled with CSS and SVG animations, so adding this to the internal page navigation is no sweat for this project. If you limit the element scope of the user events and you make the delays small, this is good behavior, not bad behavior, IMO. Visual elegance has value.
EDIT- As I get into it, I see that for one group of similar pages I can achieve better cross-fading between them by consolidating them into one page. That way I can truly cross-fade between each sub-page instead of fading out one page then fading in another.

Categories

Resources