What is the correct way to sort the css and the js?

Question

What is the correct way to sort the css and the js?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

3

As I understand the order of css and js affects and it is not just an aesthetic issue and order of the code, but it has relevance in the time of loading the page and in the user experience while carrying out said loading. Said What is the correct way to place them up and down? I ask this question because I feel that my web application is a bit slow thanks to the js that I have added to it.

If the question is wrong or does not go with this web, put it myself I can eliminate it and if it is I apologize for ignorance.

javascript jquery html css3 css

asked by Pablo Contreras 05.01.2017 в 19:19

source

3 answers

1

Your question is somewhat debatable as it greatly influences what the page does at the time of initiation.

In my experience it is to put the .css in <head> and the .js at the end of <body> similar to the following

<head>
<link href="mynew.css" rel="stylesheet" type="text/css" />
</head>
<body>
... mi html
<script src="myJavaScript.js" type="text/javascript"></script>
<body>

since the css are loaded at the beginning to give the interface to the page, and the functionality that the js are added to the end, since many times you do not need functionality when starting, in the same way to be the last one load is faster because it shows the information to the user, despite not having loaded the functionality.

Also commented that if you need to run a function when opening the page you can include the js of that function in head .

I hope it helps you.

answered by 05.01.2017 в 19:32

1

Good afternoon Pablo , everything you mention in your question has relevance both the aesthetics and order of code and the PERFORMANCE at the time of loading.

When we start in web development we know that <head> ... </head> has a relevant role to load files since it is the first section that loads but remembering that everything is Asynchronous . and then at the end of <body> ... <script src="script.min.js" type="text/javascript /> </body> we usually place our script.

There are a thousand ways to do things but everything depends on what we are programming. if our Web App requires JS functionality and in the HEAD you added many files to load (Css, Fonts, etc.!) at the time of loading your functionality script it will look somewhat depleted and delayed when performing the functions that should be done when loading the Web. If this is your case, I recommend that you place those Script in the HEAD.

Tips:

Use CDN to load Libraries

Minify your Script

Use Css Preprocessors (Sass, Less, Stylus) and minify your Css

Read about Webpack will help you Enormous

answered by 05.01.2017 в 19:49

Get the stack trace in Java without printing it Correct way to display array

score 2 · Accepted Answer

It is not only an aesthetic question of cleanliness and order of the code, but it has relevance in the loading time of the page and in the experience of the user while carrying out said loading. Many studies determine that the average load time of a website is around 7 seconds, and everything that exceeds it causes visitors to leave the page before it loads.

To understand why it is preferable to place one or another element in a specific position, the first thing to understand is how the HTML code is processed.

The HTML parser reads the different labels of the document and as they are found, it adds them to the DOM tree (Document Object Model), a data structure that allows the model to be manipulated more easily. Also, as the DOM tree is created, the nodes that have already been processed will be rendered, so that the user will see the page load as gradual and not sudden at the end.

Therefore, we have the first determining factor in the loading time of a page: the size of its DOM tree. Obviously, the larger it is, the longer it will take the page to load. And another aspect that also falls by its own weight: the elements that are before in the document, will be drawn before.

Therefore, it is convenient to ensure that the main elements of the content are displayed beforehand, so that the user has access to them even if the page continues half-loaded. For example, if we have a page with a title, a simple news item and a very complex menu, it is best to place the elements of the title and news first in the HTML, and then the CSS will organize them visually. This way, visitors can start reading the content they are interested in instead of waiting for dozens of links and buttons to load, which they may not be able to use.

Reference and more info on the subject: link