Can we combine CSS and JS file into one file? - javascript

Actually I want to reduce google page speed warning. So I have combine all css external files into one css file and all java script external files into one file java script file. So right now I have two external files(two request), one is css and second one is javascript. Can we combine both file into one file OR two request consider as one request. Is there any produce both file as a one request please let me know.
<link rel="stylesheet" href="../css/eagle/main.min.css" type="text/css">
<script defer src="../js/eagle/init.min.js"></script>
I have seen one link https://www.keycdn.com/support/combine-external-javascript-and-css/, But I am not clear. Any suggestion is very helpfull for me.

You can:
var style = document.createElement('style');
style.innerHTML = cssString;
document.body.appendChild(style);
But I do not think that the two requests is a problem. Funny savings.

You can create one html file(suppose: combined.html) and put all html and css in it using script and style page.
Load combined.html file in your application.
It is depended on which technology you are using to load html into another html. In jQuery below code will help you.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("combined.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>

If you're running serverside, it's doable simply by some sort of includes/partials (e.g. inlcude($file) function in PHP). However, be aware that you're giving up the benefits of caching external files.
Example:
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<?php include("css_js.inc");?>
</head>
<body></body>
</html>
css_js.inc
<style>
*, ::before, ::after {
box-sizing:border-box;
position:relative;
}
</style>
<script>
window.ga = function () {ga.q.push(arguments)};
ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

No, you can't combine js and css into one file. Maybe this can help to increase the speed of the site.
Where should I put <script> tags in HTML markup?
how to set cache for css/js file

Related

How to make an external js file write to the html <script> tags? Via plain JS or jQuery

I'm trying to write a function in an external javascript file linked to the index.html, which when called writes; for example between the <script></script> tags in the index.html file on line 18. Is it possible to do this with plain Javascript or jQuery? If so, how could this be done?
EDIT: I want to only have one script tag in my index.html.
function writeToScriptTags() {
// this function should write alert("Hello") to the <script></script> tags in the index.html file.
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" charset="utf-8"></script>
<title>CodeDragon</title>
<link rel="stylesheet" href="/css/master.css">
</head>
<body>
<div id="Dragon"></div>
<input type="text" name="_input" value="" id="_input">
<script src="script.js" charset="utf-8"></script>
<script>
// Javascript file should write alert("Hello") here
</script>
</body>
</html>
If the script tag already exists then you can set it's text/textContent/innerText value to whatever code you want to execute. But the script would need to have been empty beforehand, ie no text not even whitespace, otherwise it would not run.
//use an appropriate css selector to find the correct script
//this just selects the first script it finds
var s = document.querySelector('script');
s.text = 'alert("Here")';
It would probably be better to just create a new script element and add the code to that as then you would not need to worry about wither or not the script tag had already previously been used.
var s = document.createElement('script');
document.head.appendChild(s);
s.text = 'alert("Here")';
And of course if the script is set with a src attribute setting the text of the script will not run any code as it is ignored for externally linked script elements.
You can try this way
Say this is you external.js file
function writeToScriptTags() {
// this function should write alert("Hello") to the <script></script> tags in the index.html file.
}
You can call functions of external.js file between the tags in the index.html file this way.
$.getscript("path/to/jsFile", function() {
writeToScriptTags()
});
Hope you can get an idea.
jQuery solution:
$('script').html('alert(\'Hello\')');
Plain JS solution:
document.querySelector('html').innerHTML = alert('Hello');
Don't add it to the code as a text, beceause it'd be rendered as a plain text and it wouldn't have any functionality.

Script tags - not linking (JS platform game)

I'm working through the 'create a platform game' project from Eloquent JavaScript and have an issue with script tags.
In the book we're told to display our level using:
<link rel="stylesheet" href="css/game.css">
<script>
var simpleLevel = new Level(simpleLevelPlan);
var display = new DOMDisplay(document.body, simpleLevel);
</script>
I've tried adding this (together with an additional script tag for my platform.js file) into index.html but the browser is giving nothing back, not sure what I'm doing wrong?
Ensure you are inserting your scripts in the right order:
<!DOCTYPE html>
<html>
<head>
Here you should put your "included" scripts with <script src=...>
</head>
<body>
...
</body>
<script>
Here you should put your first execution, if it needs the html page been completely loaded (as to use document.body).
</script>
</html>
The scripts are being executed as they appear into the page. If you use document, you have to delay the execution until the whole page has been loaded: Either by putting your script at the end of the HTML, either by putting an initialization function within the HEAD, and call it from body onload:
<head>
<script>
function myFunction(){...}
</script>
</head>
<body onload="return myFunction()">
...
</body>
Make sure to include the external JavaScript file you need in a separate <script> tag before your inline script!

How to Remove render-blocking JavaScript and StyleSheet in wordpress?

I'm using wordpress and a theme and made some changes into this theme, when I want to increase page speed Google Page Speed tester says that I need to remove all blocking scripts and styles.
I don't know what is the Render blocking and how to solve this can any one guide me to fix the important issue.
Thanks
I solve Remove render-blocking JavaScript as follows:
<script src="filename.js"></script>
Replace with Following:
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>
Lets say for example your <head> section looks like this
<!DOCTYPE html>
<html>
<head>
<title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>
</head>
just move the script files to the bottom of the document, or the footer.php file, like so
<!DOCTYPE html>
<html>
<head>
<title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>
</head>
<body>
<!-- all your other codes here -->
<!-- then your scripts right before the closing body tag -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>
</body>
</html>
If you move all the scripts out of the head and to right before the </body> closing tag, then that should get rid of that message in google page speed.
Please be aware that it might still give an error/message about CSS stylesheet has render blocking.. well, I would just ignore that , since I want my css to render before the document, so I would not remove that from the <head>.
These solutions are just partial solutions.. methods of inlining, placing scripts at the bottom, using async or defer are not the best solution. If u wanna letting the page load first and then loading the js.
for JS place this code after the </body > tag
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "yourjavascripttoload.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Src: Patrick Sexton
https://varvy.com/pagespeed/render-blocking.html

How to display variables from external JavaScript in HTML. Internet Explorer 7

I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it

How can I get the content of a loaded file (with script or link)

I was wondering, how I get the content of a loaded script, stylesheet, ... bye an accessing an id set on the element.
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<script id="test" src="test.txt" type="text/isis-template"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$('#test').GET_CONTENT_OF_LOADED_FILE
});
</script>
</head>
<body>
</body>
</html>
Background: I want to load HTML templates (e.g. for mustach, knockout), but don't want to write them into the page, I'd rather have them in a seperate file. Now I saw that I can load any file with the script or link tag, so I was testing if I can load them like this....
Any comments why this might be a bad idea or how it can be done better are appreciated.
Try using load()
$(function () {
$('#test').load('yourfolder/test.html', function(resp){
alert(resp);
});
});
If you have already load the contents in some html element
contents = $('#test').html();
So you want the content of text/isis-template file when document is ready?
You are lucky because this file doesn't fall for CORS but mine(the answer i was looking for and came here today) do.
Well just do ajax!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$.ajax({ url: "test.html"})
.done(function(cont) {
var GET_CONTENT_OF_LOADED_FILE=cont;
});
});
</script>
</head>
<body></body>
</html>
If you use debug tools and see the network activity, you will see that it does not load the external files (since it is not a text/javascript, and the browser does not know how to handle it)
(wrong test on my part, was testing local files)
So you only have a tag there with an id and an external resource in the src attribute. Treat it as just metadata.
You will have to manually load the resources
something like this
// load external template resources
$('script[type="text/isis-template"]').each(function(){
$(this).load(this.src);
});
For actual use you would need to make sure the templates are loaded before you try using them..

Categories

Resources