7 Important Tips for Smart Coding in HTML, CSS and JavaScript

7 Important Tips for Smart Coding in HTML, CSS and JavaScript

HTML and CSS is the foundation of a beautiful website. JavaScript is used to make any website interactive. This Web industry moves grows rapidly! If you are not update with latest web technologies, then you will be left behind.

In this post, we have listed down some useful and powerful HTML, CSS and JavaScript techniques that can improve user experience, improve web designer’s workflow. These will help to improve your front-end optimization. By focusing on clean code, minimizing external requests, and a few other methods, you can drastically increase the speed and overall performance of your website.

1. Proper Placement of CSS and JavaScript File

HTML, or hypertext markup language, is the backbone of every website. It allows to format webpages with headings, subheadings, lists, and other useful features. With the most recent updates in HTML5, one can also create attractive graphics.

HTML can be easily read by web crawlers, so search engines can be updated with your website’s content. When dealing with HTML, one should strive to write in a manner that is both concise and effective. Moreover, when it comes to referencing other resources within HTML document there are a few best practices everyone should follow.

a. CSS File Placement

It is always recommended to put CSS at the top of your HTML document’s header section in order to ensure progressive rendering.

   <!DocTYPE html>
    <html>
     <head> 
      <title></title>
       <link href='https://mywebsite.com/css/style.css' rel='stylesheet' type='text/css'>
        </head>
      <body>      

This strategy will not improve the loading speeds of your website, but it will keep your visitors from waiting on blank screens.

b. JavaScript File Placement

If JavaScript attributes are placed within the head tag or near the top of the HTML document, you will block the loading process of HTML and CSS elements. This mistake can cause visitors will face a blank page, and therefore may impatiently leave the site. This can be avoided by placing JavaScript attributes at the bottom of the HTML file.

<!DocTYPE html>
  <html>
    <head>
      <title></title>
     <script type="text/javascript" src="js/script">
    </head>
    <body>

A good practice with CSS and JavaScript is to avoid embedding the code. When embedding of code is done, you place CSS in a style tag, and you use JavaScript in script tags. This increases the load time of the page when your webpage is refreshed.

2. Minify the Stylesheets

To maintain readable code, it’s always recommended to write comments and use indentation:

.center{

  width:960px;
  margin:0auto;
}
/*---Structure --- */
.intro{
  margin:100px;
  position:relative;
}

But to the browse, this doesn’t matter at all. It is always recommended to minify your CSS through automated tools.

.center{width:960px;margin:0 auto}.intro{margin:100px;psition:relative}

It will save bytes from the file size, which results in faster downloads, parsing, and execution. Use of pre-processors like Sass, Less, and Stylus, it’s possible to configure compiled CSS output in a minified way.

3. Using Single CSS File

Another best practice of styles is to separate them and keep them into modular components.

<!DocTYPE html>
  <html>
   <head>
    <link rel="stylesheet" href="main.css" media="all"'>
   </head>

However, an HTTP request is required for every file and browsers can only download a limited number resources parallelly. So, combine all CSS files into one. Having a smaller number of file will result in a smaller number of requests and a faster loading page.

4. Optimize Loop Logic

The loop is one of the most important parts in JavaScript performance. It’s always better to optimize the logic inside a loop so that each iteration is done in an efficient way. One way to do this is to store the size of the array which will be covered, so it doesn’t need to be calculated again and again every time the loop is iterated.

<script type="text/javascript">
  var arr=new Array(1000),
  for(i=0;i<arr.length;i++){
//Bad-size needs to be recalculated 1000 times
}
  for(i=0;L\Len=arr.length;i<Len;i++){
// Good-size is calculated only 1 time and then stored
</script>

5. Avoid Unnecessary DOM Manipulation

Browsing by DOM elements is costly. Although JavaScript engines are becoming increasingly powerful and fast, always prefer to optimize queries of the DOM tree.

One of the best optimization is the caching of frequently accessed DOM elements. For example, instead of querying DOM every iteration of a loop, query it once and save the result in a variable, using that every iteration of the loop instead.

<script type="text/javascript">
//really bad!
 for(var i=0;i<100;i++) {
  document.getElementById ("mylist").innerhtml +="<span>" + i + "</span>"
}
</script>
<script type="text/javascript">
//much better
 var myList=""
  for(var i=0;i<100;i++) {
   myList += "<span>" + i + "</span>"
  }
   document.getElementById ("mylist").innerhtml = mylist;
 </script>
<script type="text/javascript">
//best code
var myListHTML=document.getElementById ("mylist").innerhtml = mylist;
for(var i=0;i<100;i++) {
myListHTML += "<span>" + i + "</span>"
}

6. Minify JavaScript Code

Just like CSS, to maintain readable code, it’s a good idea to write comments and use indentation.

<script type="text/javascript">
  BrowserDiet.app=function(){
   var foo="true"
return{
bar:function(){
//do something
  }
 };
};
</script>

But to the browser, using comments and indentation doesn’t matter. Because of this, always remember to minify JavaScript through automated tools.

<script type="text/javascript">
  BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
</script>

7. Minimalize Repaints and Reflows

Repaints and reflows are caused when there is any process of re-rendering the DOM when a particular property or element is changed.

Repaints are activated when the appearance of an element is changed without changing its layout. For example change of styles like changing a background-color.

Reflows are caused by changing the page layout, such as change the width of an element.

There is no doubt that excessive reflows and repaints should be avoided, like instead of doing the below thing:

<script type="text/javascript">
var div = document.getElementById("to-measure"),
Lis= document.getElementById(" li "),
i,len;
for(i=0, len=Lis.length; i< len;i++){
Lis[i].style.width = div.offsetWidth + 'px'
}
</script> 

Try to implement this:

<script type="text/javascript">
 var div = document.getElementById("to-measure"),
 Lis= document.getElementById(" li "),
  widthToSet = div.offsetWidth,
               i,len;
 for(i=0, len=Lis.length; i< len;i++){
   Lis[i].style.width = widthtoset + 'px'
}
</script>

When you set style.width, the browser will recalculate layout. Generally, changing styles of many elements only results in one reflow, as the browser will not think about it until it needs to update the screen. However, in the first example, we ask for offsetWidth, which is the layout-width of the element, so the browser needs to recalculate layout.

If you need to read layout data from the page, do it all together before setting anything that changes layout, as mentioned in the second example.

We hope that after reading this blog, you will implement all these tips in your project.

And remember, like all things in life, learning any new concept and implementing it might be difficult in the starting, but practicing, again and again, can make any complicated task simple. To learn basic to advanced level techniques in HTML, CSS and JavaScript, join our diploma and certificate courses in web development.

Want to learn more or any suggestions for us?

Don’t forget to share with your friends and write your queries in the comments section below.

Leave a Reply

You must be logged in to post a comment.

Copy link