Develop Reference

Youtube, the site itself freezing for a few seconds

i've been plagued by a problem that seem to started since Youtube's last
layout change this year.
I have for months put up and tried to ignore the freezing that happens
everytime I open a link within youtube such as an channel, an video, the homepage, etc.
I'm using Chrome version 31.0.1650.63 and I have already tested youtube without any
extensions, cookies, cache, etc but it still affects me to this day and maybe some
of you out there.
I searched every where for the solution and couldn't find any anywhere.
I did a bit of digging and testing to see what is the root of the problem and
while i'm no expertise on code or Java...I did found something.
Every time I reload a page on youtube, with it finishing loading up...this happens:
http://i.imgur.com/K9Z3vJ1.png
See that?
The purple-colored rendering, that's the cause of the lag every time I load
up something on youtube!
I notice that it repeats the same thing over and over again for like 5-15 or so
seconds before it starts loading up the thumbnails of the videos.
If you want a closer inspection of the code, here's the raw data from the timeline (that you can load up in chrome's dev timeline window):
Youtube Lag JSON Timeline file
I don't what to do with this problem and I believe it affects
me in Firefox as well but to an lesser extent then chrome.
Do any of you guys know how to resolve this problem?
Honestly I doubt that the youtube devs will fix this problem since they're the ones who caused it in the first place. (Like not being able to subscribe to some people when i'm not even at my sub limit.)
I'm sorry if you don't want to help but I don't know who else to look to besides
the experts that y'all are when it comes to web coding. If anything, I believe a userscript or something similar could help with this but how...I don't know.
I'm new to this and I apologize if the question i'm asking isn't suited for this site.
Still, thanks for reading and if you can...please reply.
That is all and thanks again.

Well I was fiddling around and looking at the source code
with chromes timeline devtools and well...
I found a temporary solution to the problem which seems to have
fixed and ended the freezing on youtube! yay~
But some things don't work with this solution and i'm at
a fault with this issue after some hours trying to figure out
how to stop the problem.
Anyways I used adblock, an extension that I have on Google Chrome, to deal
with this issue and was able to get everything fixed and working!
What I did was, in the custom filters section (check options in your
adblock extension, you should have it.) and added the following then did
some testing to see if it fixed the problem which it did!
Here are the filters I used to fix it!
||s.ytimg.com/yts/jsbin/www-pageframe-*
*www-pageframe-*.js
^^^
Yeah, that's the temporary solution as it fixes the problems but it causes the following...
You can't open the menu which contains links to your playlists, user settings, channel, etc when you click your username or profile
picture on top right of youtube.
The "..." mini-menu that you usually find on the right of a video section (to hide, subscribe, etc.) doesn't appear anymore.
Youtube's quick menu button doesn't work, however the menu is still open but you won't be able to close it. That or it's close and you
won't be able to open it...I guess.
Those are the problems I found with this temporarily solution to the freezing problem.
Yeah...but I hope this helps anyone who's having this problem somewhat well.
But it would be nice if someone has an better solution then mine hehe!
Thanks for reading and if you have a better solution, don't feel afraid to
tell! ^_^
I'll be awaiting other answers, for now...I hope this helps y'all well
in some ways hehe! =D

This certainly isn't javascript, but substituting the normal EasyList in ABP for EasyList without element hiding will fix the issue. There are downsides to this as well but for now seems to be the better solution.

Script sometimes delays page load, how can I test/resolve?

I have a website where sometimes it loads quickly, however sometimes it seems as though the page has stopped loading half way through, possibly due to a script.
The website is http://www.pinspired.com - The tabbed sidebar on the right is the problem. I am using a simple jquery tab plugin and twitter and facebook script in the tabs.
Firstly, does the page load quickly for you?
How can I find out which script is stopping the rest of the page loading. It is hard to test as it only happens occasionally.
Thanks in advance.

I just ran the dev tools and it looked like the jquery.carousel plugin is what took the longest.
That aside, my feeling is that you should reconsider using an iframe to load in the carousel. I do know that multiple iframes on a page can slow the page down. And considering the size of the content you are loading inside that iframe, it might explain the delay. You might want to do some research on iframes and consider the order in which iframes are loaded into the DOM.

Your site's loading fine here.
For the Facebook "Like Box", consider using the iframe version.
http://developers.facebook.com/docs/reference/plugins/like-box/
After clicking the "Get Code" button, select "IFRAME". This may remedy your issue.

I suggest you have a look at the chrome developer tools. You can see how long it takes to load each resource (87 request just to load the landing page - wow!), you can profile scripts to see if something takes very/too long and you can even do an audit and let it check several things you can possibly optimize.
For example
merge the javascripts you are loading from the same domain
set the webserver to use gzip to send script/html files compressed
many resources are explicitly set to be not cachable; for example all the product images and the social media pins (preventing that they are loaded over and over again and will speed up things a lot after the they first page load)
merging images like the social media pins and use css sprites
provide different/only the needed css scripts for each site; according to chrome almost 300kb of css rules are unused on the frontpage
You can find out all that stuff usign the Chrome Developer Tools. All you need is Chromium/Google Chrome.
If it is really the facebook script couldn't you just add a slight delay before loading the fb plugin? Like 500 - 1000ms or so after everything else (well most of it) is loaded.
EDIT: The answer drewcode posted is right. It looks like jquery.jcarousel is causing the delay. See here:

Whitescreen issue in IE9 - Removing iframe

I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.
I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.
On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)
Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.
I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.
There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.
If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.

Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.
It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.
One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.
In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.
I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.
Here is the fix-
Html:
<div id="container">
<iframe src="loremipsum.pdf"></iframe>
</div>
Javascript:
//Ruins my entire week
$("#container").remove();
//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove();

I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.
Pseudo-code below:
$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
$ctrl.removeIframe(); // remove the iframe here
});

As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.

Sometimes FCKeditor doesn't load in Firefox

I am unable to replicate the problem when I want to but it seems like every now and then, my site using FCKeditor will load the interface but not the content (Clicking the buttons don't do anything). No javascript errors show and once it starts doing it, it usually is tough to get back to normal. The way I found to work best is to click the refresh button multiple times in a row, then the FCKeditor loads correctly. I have only seen this in Firefox
Has anyone else run into this problem or know a solution. It is a little annoying for me but I am afraid my client would be really confused

I have experienced the phenomenon you describe in FCKEditor's successor, CKEditor. Somehow, the IFRAME that contains the WYSIWYG content doesn't get loaded. What always helps is switching to source code view and back, but that's no solution.
I have seen the problem described on the Internet but with no solution.
Caching is not the problem, I think. Sometimes, if you press "reload" 20 times, it will break at the 21th time, and work again on the 22nd time.
What minimized the number of occurrences for me was to activate the thingy to the editor's bottom that shows the element path (body > p > span, I forgot it's name). I don't now why but since I turned it on, it very rarely breaks any more.

I have had this problem. I solved it by pre-loading FCKeditor in a hidden iframe during the login process so that when it got to the pages where it was used it was already in the cache.

i would strongly advise to upgrade to CKEditor which can not only be spelled out verbally without offending anyone, but also optimizes the loading time to minimal. I find it much more responsive than his F- friend.

I encountered this problem with firefox (not reproducible) and chrome (reproducible).
The solution that worked quite well in both cases was to wait for some milliseconds before initializing CKE :
setTimeout(function() {textarea.ckeditor({customConfig : 'custom/schnonfig.js'})} , 100);

Safari issues with javascript + css

I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.
Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.
When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.
So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.
As anyone experienced such behavior within safari?
It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).
I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.
Either way I appreciate any advice on were to start looking?
How do one goes about debugging this issues in safari?
Thank you.

Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.
CSS concatenation of multiple files (if you have them) is also recommended.

If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.
My shot-in-the-dark guesses lead towards:
You may find that one of your content blocks is causing the issue.
You may find that a different library you are using is causing the issue.
Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
Perhaps you need to specify the an exact width/height of some of your Grid Containers.

Small update:
(new update at bottom)
http://www.howtocreate.co.uk/safaribenchmarks.html
And also something that is working is this small script:
<script language="JavaScript">
// CREDITS:
// Automatic Page Refresher by Peter Gehrig and Urs Dudli www.24fun.com
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http:
//www.hypergurl.com
// Configure refresh interval (in seconds)
var refreshinterval=20
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
// Do not edit the code below
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown()
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded)
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes")
{ window.status="Page refreshing in "+reloadseconds+ " seconds"
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime
</script>
I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...
########UPDATE##########
Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.
Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.
Maybe ill try calling the js a second time after a few ms have passed of loading.
I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)