PDA

View Full Version : [OPEN-EXTJSIV-302] If you put ext-core.js at the end of the body...



andy13c72back
17 Mar 2011, 2:39 AM
If you put ext-core.js at the end of the body, some ext init process would produce unexpected result. For example, chrome definitely supports css3 BorderRadius and LinearGradient, but it will add class "x-nbr"(for 'no border radius') and "x-nlg"(for 'no linear gradient') to the body element if you put ext-core.js at the end of the body.

please test it by yourself.
Many thx

Shyru
24 Mar 2011, 1:17 AM
I was also struck by this problem. It took me quite some hours of testing to find this out. Thats also a problem because it is no where documented how a html-page has to be set up for Ext JS 4.
And i dont think it matters where the script tag is added in the body, a also tried it inbetween some tags and containers and it would produce the same result.
But since ext-core.js is also 168 KB big, it would be very good from a performance perspective to be able to load it in the body.
Can this be fixed?
Edit: This also happens in PR5

steffenk
24 Mar 2011, 2:15 AM
This is a general matter and not specific to EXT4.

Moving js to footer, you must move all js to footer, as the loading order is important always.

Shyru
24 Mar 2011, 5:22 AM
This IS a Problem of Ext JS 4.
ExtJS 3: Loading JS files in correct order in head: works
ExtJS 3: Loading JS files in correct order in body: works
ExtJS 4: Loading JS files in correct order in head: works
ExtJS 4: Loading JS files in correct order in body: works a bit, but CSS capabilities of browsers are not correctly detected. (As mentioned in first post).
ExtJS 4: Loading core in head and ext-all in body: works

Shyru
24 Mar 2011, 5:42 AM
Here is a simple example that demonstrates the problem:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Button Examples</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

<!--
If you uncomment this, all starts working correctly.
<script type="text/javascript" src="../ext-core.js"></script>
-->
</head>
<body>
<h1>Load order example</h1>


<p>When ext-core.js and ext-all.js are both loaded in the body, ext-js misdetects CSS capabilities of the browser and all looks ugly.</p>

<p>If you uncomment the loading of ext-core in the head, all works flawlessly.</p>

<script type="text/javascript" src="../ext-core.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('CSS Error', 'Look at the CSS misdetection!<br/>Class-names x-nbr and x-nlg are added to body which breaks a lot of things.');

});

</script>
</body>
</html>

tobiu
24 Mar 2011, 6:04 AM
you really should not include big js-files inside the body tag.
keep your DOM small!


best regards
tobiu

Shyru
24 Mar 2011, 6:30 AM
I always thought that putting .js-files in to the body was good practice to reduce the initial load-time of a page. If I load 2-3 MB of javascript in the head it takes some time to even display a loading message or something like this, because the dom is only "executed" after all the javascript files have been loaded.
And i dont think that loading a big javascript file in the body makes the dom bigger. I thought when we talk about a big dom we mean many nested tags with lots of attributes and so on. But having a big javascript file inside the body should not make a difference. - If its in the head its also in the document (DOM) and available to dom-access methods like it would be in the body.

steffenk
24 Mar 2011, 10:40 AM
It's one of the Yahoo rules (YSLOW): moving js load to footer of body.
The reason is simple: browser first loads DOM and display, then the js will be loaded.
Having all in head, browser start render after loading all files from head.

andy13c72back
27 Mar 2011, 11:10 PM
Yes, I agree with Shyru. Hope this can be improved by the final release of extjs 4 and enable us to reduce initial load time of a big web app.