I have a layout which loads all my common resources used throughout my app but when I load a page via ajax the gsp itself renders and I can see that the ajax call downloads the js file (via firebug) but the actual code does not get executed.
I have tried the following ways to download and execute the js file from the ajax loaded page with no success. Any help will be appreciated.
Approach used
<r:require modules="announcements" />
<r:layoutResources/>
Result: js file downloaded but not executed
Approach used
<g:javascript library="announcements"/>
with and without
<r:layoutResources/>
Result: File not downloaded
Approach:
<script type="text/javascript" src="js/announcements.js"></script>
Result: http code 302 temporary move and attempt to download of js/static/announcements.js
which gives a http code 200 but firebug shows that it is still waiting for the file and thus it's not executed.
layout.gsp:
<html>
<head>
...
<g:if test="${session.isLoggedIn}">
<r:require modules="ui, jqueryDateFormat, loggedin" />
</g:if>
<g:else>
<r:require modules="ui" />
</g:else>
<r:layoutResources/>
<g:layoutHead />
</head>
...
</html>
ajax loaded page
<html>
<head>
<all methods mentioned above>
...
</head>
<body>
...
</body>
</html>
UPDATE: I resolved the issue. Turns out there was a syntax error in my JS file. Firebug did not identify error, it just stopped because the JS crashed. Had to move the library call to my layout to find the error. Fixed the JS and moved added the line back to the gsp and all worked again.
This is the most correct method.
<script type="text/javascript" src="js/announcements.js"></script>
You should check your webserver configuration if 302 produce 200 but file isn't downloaded
Related
I have a static index.html in wwwroot of an asp.net core web project which useStaticFiles:
<html>
...
<body>
...
<script src="~/scripts/bundle.js"></script>
</body>
</html>
After web application published. the bundle.js could not load successfully, after F12 in Chrome and found browser trying to load js by url:
https://127.0.0.1:5001/~/scripts/bundle.js
Please help a clue. thanks!
By the way, the web application run fluently without such errors locally.
It's actually an Nginx configuration issue. https://www.***.com/subpath1/test.html.
nginx proxied subpath1 to local port 5588 where test.html hosted in.
In test.html <script src="bundle.js"> didn't refer to
https://www.***.com/subpath1/bundle.js as expected but https://www.***.com/bundle.js
So update test.html src attribute src="subpath1/bundle.js" solved the problem.
Thanks all~
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
I am currently having trouble understanding how gh-pages functions with file communication.
I currently have two files in my gh-pages branch on my github: bundle.js and index.html. When running this locally, index.html has access to bundle.js by moving through file paths. When running this online I have an issue getting index.html to be able to access bundle.jscorrectly.
1st attempt: I found the raw text through the URL: https://raw.githubusercontent.com/.... Unfortunately this does not work because there is a MIME type error.
2nd attempt: I found that there is another source for raw text that doesn't have the MIME type error, the URL is: https://cdn.rawgit.com/.... Unfortunately this does not work because cdn.rawgit.com does not update itself.
3rd attempt: I have found that I can use the same method as my 2nd attempt, but I can use a specific commit to access the correct cdn.rawgit.com/.../<commit path>. This seems to make things much more difficult because I would have to update my index.html every time I want to update the page. This also doesn't seem possible because how would I know the commit # before I commit it?
The relevant code is the line <script src = "https://cdn.rawgit.com/NumaK...">.
I can't figure out how my gh-pages website is supposed to be using the correct version of bundle.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>Numa Karolinski</title>
</head>
<body>
<div id="root"></div>
<noscript>
Hello There. Code can be found in the "root" folder above ^^^ !
</noscript>
<script src="https://cdn.rawgit.com/NumaKarolinski/PersonalWebsite/
websiteVersion1/dist/bundle.js"></script>
</body>
</html>
In your index.html, replace :
<script src="https://cdn.rawgit.com/NumaKarolinski/PersonalWebsite/websiteVersion1/dist/bundle.js"></script>
<script type="text/javascript" src="C:\Users\numak\Desktop\MyWebsite\dist/bundle.js"></script></body>
by
<script src="bundle.js"></script>
I have a simple Angular application that I am bundling with Gulp. The index.html has a script reference of:
<script src="./../../js/all.js" charset="utf-8"></script>
and a file structure:
Does this not seem accurately relative?
I am also serving from the public/html/layout/index.html
try
<script src="../../js/all.js" charset="utf-8"></script>
The resolution involved a best practice of placing the index.html at a higher level directory. Still didn't explain why the issue occurred, but the issue is no longer affecting me.
If you are using Google Chrome then you can open your index.html in the browser and goto View Source.
Find this line in the source: <script src="./../../js/all.js" charset="utf-8"></script>
and click the hyperlink of the file. It will then show you the complete address of the javascript file the browser is trying to load. Once you get the complete address I believe you can fix this issue easily.
In one of my Windows Phone application I am using webbrowser to display the html content. I am getting the html content by making post request to server. Here I am getting the response correctly.Then I am displaying this response in webbrowser by,
webBrowser.IsScriptEnabled = true;
webBrowser.NavigateToString(responseString);
The response is:
<html>
<HEAD>
<script language='JavaScript'>
</script>
<SCRIPT language='JavaScript' src='script/page.js'></SCRIPT>
<script type="text/javascript" charset="UTF-8" src="js/page2.js"></script>
</HEAD>
<BODY onload='someFunction()'>
<div>
--
<img src='Images/loader.gif' /><br /><br />
--
</div>
</BODY>
</HTML>
From here I am not able to call the page.js file, page2.js file and not able get the loader.gif image also. I think this is because the files are not locally stored.
I also tried by saving the response in Isolatedstorage as .html file. and displaying it
by using,
webBrowser.IsScriptEnabled = true;
webBrowser.Navigate(uri);
but here also I am getting same thing.
Please help me to get resolve this issue. Thanks in adcvance
The scripts and images aren't loaded, because paths to it in the html are relative. When you save it to a file, the scripts and image should be in relative locations to that file.
You should use webBrowser.Navigate with the Uri of the web page on the net (don't download it yourself, let the browser do it). Or the html has to have the full paths, like: <img src='http://contoso.com/Images/loader.gif' />.