I want to use rocket loader on my page, but when it is on when you come to the page for very first time script freeze and works correctly after refreshing.
After entering the page for the first time, to the page 3 scripts from cloudflare are added at the end of the body:
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="48c287fd36069ba2003e0917-|49" defer="" type="fa3629c76fee0735b80f7744-text/javascript"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="fa3629c76fee0735b80f7744-|49" defer=""></script>
>
last 2 scripts with different ID block each other and because of this our scripts don't load.
Any ideas how I may fix this?
Related
I have some web components created using stenciljs. When I include them in the html from the beginng everything work fine, see example
<codext-gradient-button color="darkblue" class="hydrated">Gradient
Button - Darkblue</codext-gradient-button>
<script type="text/javascript" src="https://unpkg.com/#codext/stencil-
components#0.0.6/dist/gradient-button.js"></script>
https://jsfiddle.net/vqe7wchb/1/.
But when I add dynamically the component the operation fails, see example
<script>
let script = document.createElement('script');
script.src = "https://unpkg.com/#codext/stencil- components#0.0.6/dist/gradient-button.js";
document.head.appendChild(script);
</script>
<codext-gradient-button color="darkblue" class="hydrated">Gradient Button
- Darkblue</codext-gradient-button>
https://jsfiddle.net/vqe7wchb/2/.
I did open a bug in the stenciljs project on github, you may find there more details https://github.com/ionic-team/stencil/issues/1429.
This is an issue for the es5 bundle loader for older web browsers. In case anyone is having trouble with this make sure you dynamically append the script as the last item on the page, otherwise it will fail to lazy load additional scripts.
I posted the issue on the stencil github: https://github.com/ionic-team/stencil/issues/1981
We have some performance issues with IE10/11. The following plunker explains some of our degrading performance while repeating table rows with custom elements.
Plunker Example
code
In this plunker example, we get a total of 68 ms in chrome to render the entire table.
In IE11 we get 280ms and see a 100% increase in render speed per row. While chrome do up to 3 rows per ms, IE does one every 2ms.
This plunkr is a basic model of our application. In our application we repeat the following template which is alot heavier. It involves style calculation and show/hide bindings depending on the users settings and permission level.
It's in swedish so don't mind the text.
The second row (expanded information) is if.bound so it's not drawn initially.
In our application, if we render a view with 100 rows of our template, chrome renders the entire table in 587 ms. IE11 does it in 3779ms. Edge does it in 1283ms, and Firefox 909ms.
Each row takes about 30ms in IE11,
Is there any reason IE11 should perform so much worse with the aurelia-template? What can we do to improve IE render speed? I have tried setting bindings to oneTime but that didn't do much. Is there something you should avoid doing in custom elements that doesn't work well with repeating and IE.
We want the custom elements because of reusability and code management since the template is pretty big.
Make sure you're using an up to date version of Aurelia, and make sure that you're using Bluebird if you need to support IE or older versions of Edge, as their Promise implementations are atrociously bad.
If you replace the index.html in your Plunkr with this:
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="//cdn.jsdelivr.net/bluebird/3.4.5/bluebird.min.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Then the last row's draw time on my desktop is 278 ms in IE 11 on Window 10. See here: plunkr
I have posted an issue with the aurelia team
https://github.com/aurelia/polyfills/issues/39 and a github project https://github.com/4nderss/aurelia-performance-test reproducing my issues.
Aurelia team closed the issue so there might not be any fix for IE11 for now.
Edit: The aurelia team found an issue and it is now fixed
Is there any way to perform "last minute" substitutions in the HTML (or other) resources that are part of your worklight application?
For example, I want to set the lang and dir attribute on the <html> element based on the end-user's locale.
some background:
I realize I can do dynamic DOM manipulation, but my question comes more from a background of client-server architecture where you have an opportunity on the server-side to replace some variables etc. in your HTML (or other resources) based on the requester's context. We have an existing app already and I'm investigating what it would take to integrate it with worklight including (for performance reasons) moving files from the server-side to the client-side without incurring too much refactoring of the current code.
Update: per the edit to your question, I don't think the below will make any significant impact on your app. Since you say you may move files from the server to client, this means like network traffic and with today's devices I suspect this may even be a boost to the performance rather than a penalty.
My suggestion is to try the below if the above is what you're planning to do.
I'm not even sure how else would you even do that from the server - change the application's UI based on the user's device local's, from the server. Doesn't make much sense to me to do that remotely.
To answer your question, I'll provide some background information that is relevant, I think, to a good user experience in this kind of scenario (as I see it):
By default, Worklight dismisses the splash screen once the framework has finished loading.
However, if you're using Worklight 6.2 then you can use the extended Splash Screen feature to display the splash screen for a longer duration, and during that time you could perform the required tasks -- like altering the UI based on the user's locale. Once you're done, you can then programmatically dismiss the splash screen on your own.
Reading materials:
Common UI Controls training module (slide #29)
Managing the splash screen user documentation topic (for both JS and Native support)
Example:
You need to uncomment the following in common\js\initOptions.js:
// # To disable automatic hiding of the splash screen uncomment this property and use WL.App.hideSplashScreen() API
//autoHideSplash: false,
You can then dismiss the splash screen when ready:
function wlCommonInit() {
function changeUiBasedOnLocale();
...
...
}
function changeUiBasedOnLocale() {
... // get device local
... // use JS to alter CSS
WL.App.hideSplashScreen();
}
Any basic DOM manipulation will help. Here is one example with D3.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.select("html").attr("lang","en_EN");
</script>
</body>
</html>
I'm calling from an iframe an agent that should redirect the user to a given page on the whole page.
It's a lotus script agent that do his stuff and then redirect using a common:
Print "[http://www.server.com/db.nsf/simpleForm?OpenForm]"
How could I mention the TARGET (_top in my case) ?
thanks,
Since no better response had been given, I share my Javascript solution (comment welcome):
Print |<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
window.top.location.href = "/myDB.nsf/MyFullRedirectedPage?OpenForm&L=|+lang+....+ |";
// -->
</script>
</head>
<body "style=\"margin:0 ; background:transparent\"">
processing... please wait! N.B. this text will appear very short time.
</body>
</html>|
I put a background:transparent since I'm in a iframe.
I don't love this code almost flashing before the whole page is being refreshed.
I have a pdf file served via regular html ('a' tag) but it can take a while to download on slow connections, is it possible to add a loading gif so the user knows that something is being downloaded instead of staring at the same page and maybe think nothing is happening?
I tried one of the solutions offered here to preload the pdf and store it in the cache until it is requested, it shows no loading image but the file should load faster:
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
var pdfLoader = document.getElementById("pdfLoader");
pdfLoader.src = "http://mysite.com/mypdf.pdf";
//-->
//]]>
I'm on a decent connection so I have no way of testing it, should that work as it is or is there another option I can try?
Thank you.