Suppost I have this index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="prefetch" as="image" href="./assets/footer.jpg" />
<script
async
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.js"
></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<script src="./utils.js"></script>
</body>
</html>
According to this doc
async script has Low priority, and css has Highest priority, so why does the jquery-3.3.1.js was downloaded before style.css downloaded when I Ctrl+F5 to refresh the whole page? (And you can see footer.jpg was at the end due to Lowest priority because of prefetch, but why async script not works in the same way?)
click me to see the result
Could anyone tell me what's going wrong? My Chrome version: 107.0.5304.107
To me, the reasonable order should be:
localhost (Highest)
style.css (Highest)
utils.js (High)
jquery-3.3.1.js (Low)
footer.jpg (Lowest)
Priority is not the order to be downloaded
Priority is the order to start downloading if there's many resources
Chrome generally uses 5 download threads, so if there's less then 6 resources they start downloading at once, and generally finish downloading depending on their size
That may be different only on very slow (<10kb/s) networks, try reducing web speed in devtools to check what happens
#Dimava and #Daniel W., Thank you very much for your kind answers , I think I have found the answer :)
According to the doc here:
Chromium loads resources in 2 phases. “Tight mode” is the initial phase and constrains loading lower-priority resources until the body is attached to the document (essentially, after all blocking scripts in the head have been executed). In tight mode, low priority resources are only loaded if there are less than 2 in-flight requests at the time that they are discovered.
Because when html parser see the async script for jquery, there's no in-flight requests, so it was started downloading at once even if it has low priority, thus started downloading before style.css was.
Consider another situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="prefetch" as="image" href="assets/footer.jpg" />
<script src="utils.js"></script>
<script src="another.js"></script>
<script
async
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.js"
></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
And the result is here, we can see that when html parser see the async script for jquery, there're two in-flight requests (for utils.js and another.js), so it is downloaded at the time body is attached to the document , thus started downloading after style.css was.
Related
When I type ! and hit enter in an .html file I get a nice boilerplate like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
My question is can I remove the tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I know I can add my own snippets but I haven't found a way to change the default HTML boilerplate when I type !
I think you can. But keep in mind that an update could overwrite this setting.
Open VSCode installation path and navigate to
.. VS Code\resources\app\extensions\emmet\dist\node\emmetNodeMain.js
just search and delete the next meta
meta[http-equiv='X-UA-Compatible'][content='IE=edge']+
near the secuence:
doc:"html[lang=${lang}]>(head>meta[charset=${charset}]+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta:vp+title{${1:Document}})+body"
This path could be different from one version to other.
I am learning openui5 (Version 1.61.1) using openUI5 Documentation
From the version 1.61.1 openUI5 includes index.js file.This index.js file is missing in the documetation from "step:9 Component configuration " till the last step. I am unable to proceed further without index.js file.I am not sure whether i missed any point or its something related to documentation error.
I have found the issue. in step no 9 we have to include the below meta
data tag and change onInit value in index.html file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
I had the same problem with step 9 of the tutorial. In addition to the suggested changes, I had also to change the body of the index.html to show the content of my view.
My working index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatter UI</title>
<script
id="sap-ui-bootstrap"
src="http://127.0.0.1:8080/openui5-demo/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
>
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container"></div>
</body>
</html>
I have found the issue. in step no 9 we have to include the below meta data tag and change onInit value in index.html file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
However i am not sure why its working if we add this meta data tag. can anyone explain me.
This morning, I was able to view vscode intellisense suggestions with PIXI.js.
My index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fun with PIXI</title>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
My index.js:
const app = new PIXI.Application();
document.body.appendChild(app.view);
Serving the file and running index.js is fine. I am just so annoyed that I lost intellisense suggestions for PIXI.js (or any third party libraries). I still do see Intellisense suggestions working for DOM APIs (i.e. document methods, etc...)
I am trying to do a simple redirect in a Phonegap built (version 3.7) from the opening index.html to another html (main2b.html) on an iphone with no success. It works fine on Android. This is a simplified test of what I need to do.
If I window.location.href='http://www.google.com' as an example it DOES NOT work. (and yes I have white listed it in my config.xml)
If I window.location.href='main2b.html' it just spins and does NOT work either.
For testing purposes the main2b.html is just a simple 'hello' in a div.
I have tried various pathing options of main2b.html with no success so I feel it is not a pathing issue. Both html files are in the same location.
Here is the code sample. Would appreciate any thoughts. This seems like such a simple thing and cannot figure out what is wrong.
Once this simple test works, I need to do something like this where I will detect if my app is 'offline' and as such go to a different html file. This is why I am doing this before any jquery/mobile init stuff which would come later if I detect I am 'online'.
The index.html code:
<!DOCTYPE html>
<html>
<head>
<title>The Conspiracy Show</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no, " />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Phonegap build stuff required ----------- -->
<script src="cordova.js"></script>
<!------------------------>
<script>
function onLoad(){
alert('here at onLoad');
document.addEventListener("deviceReady", deviceReady, false);
}
function deviceReady() {
alert('here at deviceReady')
window.location.href = "main2b.html";
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
main2b.html looks like this
<!DOCTYPE html>
<html>
<head>
<title>The Conspiracy Show App</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/>
<meta name="keywords" content="conspiracy Richard Syrett talk show Coasttocoastam paranormal callIn"/>
<!-- Required Stuff for PhoneGap prevent page flickering in iOS----------- -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Phonegap build stuff required ----------- -->
<script src="cordova.js"></script>
</head>
<body style="background:#2D5873;" >
<div align="center" style="margin:0px; padding:0px;">
Hello
</div>
</body>
</html>
I found my own problem. Apparently, in iPhone, if you dont specifically close the splash screen (which can only be done after deviceReady), any redirection will not work. On android, the splash screen close can be done immediately. Anyway, problem solved.
I am creating a custom Share page that must have none of the Alfresco UI on it, but which still needs access to the Alfresco and YAHOO objects.
I have successfully created the page and caused it to open in a new tab, but I get errors that the Alfresco and YAHOO objects are undefined.
What are the minimum includes I must add to my Freemarker template to get access to those objects?
Update: I have gotten the Alfresco and YAHOO objects to load, but now am getting "Uncaught Error: extend failed, please check that all dependencies are included."
Here are the freemarker and javascript includes I've got so far, if it'll help:
<#import "import/alfresco-common.ftl" as common />
...
<script type="text/javascript" src="../scripts/ajax/yahoo/yahoo-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/yahoo/connection/connection-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/common.js"> </script>
<script type="text/javascript" src="../scripts/ajax/utilities/utilities.js"> </script>
<script type="text/javascript" src="../yui/yuiloader/yuiloader.js"> </script>
<script type="text/javascript" src="../js/alfresco.js"> </script>
Update 2: Based on the first answer, the first few lines of the template look like this and again yield Uncaught ReferenceError: YAHOO is not defined:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<region-id>head-resources</region-id>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<script>
var urlParams;
Update 3: I've reduced the source to the minimum necessary to demonstrate the problem. What follows next is the template component definition file, followed by the freemarker template itself. Definition:
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>iPad Viewer</title>
<title-id>page.iPad.title</title-id>
<description>iPad Viewer</description>
<description-id>page.iPad.description</description-id>
<template-instance>viewer-ipad</template-instance>
<authentication>user</authentication>
</page>
Freemarker template:
<html>
<body>
<div class="content">
<#region-id>head-resources</#region-id>
<script>
alert(YAHOO);
alert(Alfresco);
</script>
</div>
</body>
</html>
Error is:
Caused by: freemarker.core.ParseException: Parsing error in template "org/alfresco/viewer-ipad.ftl" in line 11, column 7: Unclosed #... when the end of the file was reached.
I'm not sure how you created the page, but this is not needed when you define your regions.
Probably there are all in the <region-id>head-resources</region-id> So if you include that in the page-template that should suffice.