The following script request seems to have problems in any browser except Firefox.
<!DOCTYPE html>
<html>
<head>
<title>Browser Delay</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.4");
</script>
</head>
<body>
<div id="logicbuy_ad">
<!-- Problem is here!!!!! -->
<script type="text/javascript" src="http://www.symbiosting.com/LogicBuy/content-syndicate-laptopmag.php"></script>
</div>
</body>
</html>
When the script loads, even in an iframe, IE and Chrome seem to hangs until the script finishes.
Is there a way to load this script so that it will not stop/hang the browser?
It appears that the problem only happens when the script is loaded from a local page. (ie. C:\Users{username}{Code Base}\index.html )
Once I hosted the file on IIS, the problem went away.
I'm still very curious as to why the script would hang when displaying the local file as opposed to the hosted version
Related
first post..
trying javascript for first time.
i am following a book , created two files in the same directory
test_js.html
helloWorld.js
Contents of both are below:
test_js.html
<html>
<head>
<title> First Javascript page </title>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body></body>
</html>
helloWorld.js
<script type="text/javascript">
alert("hello");
</script>
I dont see any alert when i load the html page.
However if i embed the same alert("hello") in the html page, i am seeing the alert being displayed.
Tried this on chrome and firefox (both latest) with same result.
Following googled examples is not showing any error in any of the files.
Please help.
remove script tags from helloWorld.js
just
alert("hello");
I spent a few hours over the last few days reworking some of my javascript files so they could all be loaded toward the end of my source code (or, if they must be placed earlier, they would wait for jQuery to be defined, which is loaded in the footer but is required by most of my scripts). I then moved all scripts that could be moved to end of the source code.
So a rough example of the change..
Original:
<html>
<head>
<title>This is still an awesome web page</title>
<script type="text/javascript" src="/path/to/script.js"></script>
<script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
<script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</head>
<body>
<p>lots of great content</p>
<script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
<p>more great content</p>
</body>
</html>
Updated:
<html>
<head>
<title>This is an awesome web page</title>
</head>
<body>
<p>lots of great content and maybe lots of images too</p>
<script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
<p>more great content</p>
<script type="text/javascript" src="/path/to/script.js"></script>
<script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
<script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</body>
</html>
So I made that change and looked at Chrome's Network traffic when I reloaded some pages. I was surprised to discover that Chrome still loads my javascripts before loading images and such.
I did some reading and it seems like this is due to Chrome's preloader (https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE) scanning ahead and loading important files sooner.
If Chrome (and other modern browsers I assume) are going to do this, then is there any reason to continue placing javascripts toward the end of the source code?
You'll want to place your scripts at the end of your HTML if;
1 - Your scripts need access to DOM/CSSOM nodes, therefore they have to be parsed prior to your JS.
2 - You want to display the page while the JS is still downloading and executing against the page.
My test.html file:
<html>
<head>
<title> my title </title>
<script> type="text/javascript" src="/openflashchart/js/swfobject.js"</script>
</head>
<body>
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("/openflashchart/open-flash-chart.swf","my_chart","480","360","9.0.0","expressInstall.swf",{"data-file":"data.json"});
</script>
<div id="my_chart"></div>
</td>
</tr>
...blabla
</body>
</html>
I place openflashchart in the home directory of apache, i.e., /Library/WebServer/Documents/. This html file and the json data to be loaded are placed in Documents/Data/myfiles. This page is supposed to be displayed with a curve. However, there is nothing as I visit http://localhost/Data/myfiles/test.html.
Update
Now I know that the reason is that I didn't install Adobe Flash Player, while this package is flash based. Untill now I cannot successfully install Adobe Flash Player on my mac. But that's another problem.
Since chrome has built-in support for flash, this page can be displayed properly with it. I still has probelms with safari and firefox.
I have a problem on the initial load of my angular APP on mobile safari, it hangs with blank page for nearly 2 minutes, while on other browsers,it works perfect, even on MAC safari and IPAD safari.
At a first guess, maybe my app has too many js files. So I concat
them(11 files) into 3 files, and the issue was resolved. Seems mobile safari has some limitation of the number of js files on the first page. So I tried 4 files, and 5, and it seems 4 is the max number accepted by mobile safari.
My question is: Is there really any limitation for mobile safari on the first page's number of js files? Or did I misuse angularJS or HTML5,or anything else. Because I think if safari really does, it seems awkward, and it should be carefully documented which I never searched on google.
The original code of my first page looks like:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<base href="/"/>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles for this page -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
</head>
<body class="blog-body" ng-app="blog" ng-controller="blogCtrl">
<div ng-include src="'modules/blogPublish/blogNavBar.html'"></div>
<div ui-view autoscroll='true' class="anchor"></div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../modules/blogPublish/blog.js"></script>
<script src="../modules/blogPublish/ui_effect.js"></script>
<script src="../modules/appError/appError.js"></script>
<script src="../modules/common/underscore.js"></script>
<script src="../modules/common/alert.js"></script>
</body>
</html>
Mobile Safari uses an interesting feature called HTTP Pipelining, which may not be supported by your web server software. See Safari Sends Two HTTP Req. Same Time/Socket
I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean.
I am testing this website: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com
Can anyone advice me please? I have managed to fix all of the other errors - but I am completely stuck at this one, I understand that CSS has to be in the head of the page, is this telling not to place it in the head but at the end of the page?!
Your browser freezes page rendering while loading JavaScript
Quick answer: you just have to put your JavaScript src below your content.
Why? Because when your browser begins loading JavaScript, it freezes the rest until it's done with that.
Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load.
So do like this:
<html>
<head>
</head>
<body>
My great body content!
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</body>
</html>
Instead of this (which is unfortunately still really common):
<html>
<head>
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</head>
<body>
My great body content!
</body>
</html>
Alternately, just add the async at the end of your script tag.
<script src='' async></script>