I've been trying to get Safari to start pre-loading assets while a page is loading but nothing seems to work. Chrome and Firefox seem to do it just fine though.
The setup is simple enough. A script renders the following html with a 2s pause in the middle. The first part of the response has been flushed out and streamed to the browser. This is confirmed by Firefox and Chrome's ability to start fetching the js early.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preload" href="http://localhost:8888/js.js" as="script" />
<script href="http://localhost:8888/js.js"/>
</head>
<!-- here the script rendering the HTML would actually pause
for 2s before rendering the rest of the document -->
<!-- the first part of the response has been
flushed and sent to the browser already -->
<body>
</body>
</html>
Fetching the JS file also has a 2s delay added to it. This makes things easy to visualize in browser timelines.
Note that Chrome & Firefox will start loading the JS early even if no <link preload> is present. They seem to just start parsing the HTML as soon as they get a bit of it and download any js they encounter along the way.
On Firefox I get the following waterfall:
On Chrome I get about the same:
On Safari however all I ever can get is:
Which clearly shows Safari not trying to asynchronously load the script and instead waiting for the full html response to be received.
What am I missing? Does safari just not do any asset pre-loading at all?
At the moment, Safari doesn’t support <link rel=preload>, which explains the waterfall you’re seeing. The good news is that Jen Simmons, one of their Web Evangelists, has asked on Twitter what developers would use it for if it existed.
Related
In my understanding when using defer in a script tag which is placed right below a stylesheet, the browser waits for the stylesheet to load (CSSOM) before executing the script and firing DOMContentLoaded. (More about that)
This works in Firefox but not in Chrome, so I made a test case where a huge css file is loaded right before a script tag which is deferred.
The HTML File with the stylesheet and the deferred script.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="result">Loading...</div>
</body>
</html>
The CSS file contains bootstrap and also a test-class which sets a font-family.
/* ...bootstrap v4 css... */
.test {
font-family: 'It works!';
}
The JS File contains jQuery and a simple test script.
// ...jQuery....
$(function () {
$('<meta class="test">').appendTo(document.head);
var extractedStyles = $('.test').css('font-family');
$('.result').text(extractedStyles);
});
In Firefox the CSS could be parsed on execution time and I see "It works!" > see Firefox
In Chrome the CSS could not be parsed on execution time and I see "Times New Roman" > see Chrome
If you check the developer tools, DOMContentLoaded has been fired differently in Chrome and Firefox.
Firefox fires it right at the end of load of the CSS file (which is why the testcase works) but Chrome doesn't wait for the CSS file to load.
Firefox developer tools
Chrome developer tools
Why is this the case and can anyone explain me how to get around this issue?
EDIT: Chromium confirmed that this behaviour is a bug, see https://bugs.chromium.org/p/chromium/issues/detail?id=792420
I'm getting the warning message internet explorer restricted this webpage from running scripts or activex controls while opening our application in IE 9. I have tried adding Mark Of the Web as described in some online resources. Even if it is not showing the message when we open the page, it's popping up when we refresh the page.
This is the starting of my html file.
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
How can we avoid this message without changing the settings manually ?
It seems IE is very temperamental: if you use a line ending other than CRLF then it silently ignores the Mark of the Web (it's as if they're trying to wind up developers).
We have a site that's running perfectly in all browsers except IE8.
What happens is that it falls into Quirks mode forcefully by the browser due to the reason unknown to me.
And yes, it breaks the site really bad.
What's more weird is that it adds somekind of JS on its own to the code (when checked through View Source.
This is what it's showing:-
<SCRIPT language="JavaScript">
<!--
document.cookie = "IV_JCT=%2Fapchannel-lop; path=/";
//-->
</SCRIPT>
<!DOCTYPE html>
<html lang="en">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
...
The <SCRIPT> in the start is not added by me and is being added by IE8.
I have tried the following
First line <!DOCTYPE html> and then right after <head>, I wrote <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
Adding respond
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Nothing works.
Any idea how I can stop this and just force it to load with IE8 standard mode?
Thanks
The problem is that you're adding the script before the <!DOCTYPE>.
The doctype must be the very first thing on the page, otherwise IE will go into quirks mode. (even blank lines at the top of the page have been known to affect this)
Move your script somewhere else in the page, ideally inside the <head> element, and ensure that you have valid HTML markup, and the problem will resolve itself.
IE 8 will not mangle HTML like that. Something else must be responsible.
From AJAX techniques within a Tivoli Access Manager WebSEAL Environment:
Junction cookies
Issue
When you create a WebSEAL junction using the -j option to enable
junction cookies, special HTML code is inserted at the beginning or
end of the HTTP response that sets the correct cookie path in the
browser (the location determined by the -j option). Generally, the
returned page will look similar to that in Listing 11.
Listing 11. Example of junction cookie insertion
<SCRIPT>
document.cookie = "IV_JCT=%2Fjunction_name";
</SCRIPT>
<html>
<title>Example page </title>
<body>
Rest of the document...
.
.
.
That's a pretty specific bit of JavaScript (Debugging tip: When weird variable names show up in your code and you don't know where they came from: Type them into Google), so its a reasonable bet that this is what is responsible.
It doesn't sound like there is a work around, so your options seem to come down to:
Stop using IE 8. It is unsupported by Microsoft and no supported operating system that can run it can't be upgraded to a newer version of IE (they could also be upgraded to a non-IE browser).
Stop using WebSEAL (or at least WebSEAL junctions using the -j option) since it invalidates your HTML.
I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.
Your page has 1 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML. Remove
render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa
If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?
Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).
I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>
Otherwise you need to go into your server and make adjustments to your htcaccess file.
Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it.
Follow my step with :
change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
Change </head> to <!--<head/>-->
add <!-- </body></html> --> before </body></html>
It is about DOM get work, I will give you example my blank blogger template if you still headache.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<style/>
<b:skin><![CDATA[]]></b:skin>
<!-- </head> -->
<!--<head/>-->
<body>
<b:section class='header' id='header' showaddelement='yes'/>
<h1 style="color:blue;font-family: monospace">klikada.com</h1>
<b:section class='main' id='main' showaddelement='yes'/>
<b:section class='footer' id='footer' showaddelement='yes'/>
<!-- </body></html> -->
<style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.