Google Chrome Improves JavaScript Speeds Again

One of the old rules of optimizing website load times for all browsers was that the browser didn’t begin to parse the downloaded JavaScript until each file was downloaded. Starting with Chrome 41, Google has announced that this is no longer the case.

In this announcement, Google has said that new versions of Chrome will begin parsing JavaScript as it is downloaded to the browser, even before the particular file’s download is complete. However, in order to see this happen more quickly, you must utilize the async or deferred tags in the <script> tag. JavaScript that is loaded without async or deferred is still a completely blocking action that pauses all rendering while downloading and parsing the JavaScript files. According to Google, this can improve website load time by up to 10%.

In addition, Chrome will now keep a copy of the parsed JavaScript in its cache for future use on additional visits to the same page. While this will improve secondary load times on a page, it sounds like it will not improve page load times when the same script file is loaded across multiple pages on the site. We can only hope that Google is able to add that functionality to Chrome, which should definitely make a significant difference in page load times.

Tags:

Related Posts

Mar 16, 2015
2 minutes

Google Code Shutting Down

Google just recently announced that they are going to begin the process of shutting down their Google Code project hosting service. In the blog post announcing that they were shuttering the service, they let it slip that even Google had quit using Google Code for their project hosting, instead transitioning thousands of their projects to GitHub. Google seemingly blames the fact that GitHub and BitBucket handle project hosting better than Google does as the main reason that they are discontinuing the service.

#javascript #python #web-development
Read More
Jul 3, 2014
2 minutes

== and === in JavaScript and HTML Input Elements

If you read any current information about best practices in JavaScript, you will typically find the following advice somewhere in the list of things to do.

Always use === and !== while avoiding == and !=

While I will never argue against this advice, there are a few things that a developer shoule realize when using === and !== instead of == and !=.

  1. === and !== first do a check of the data type of the two objects you are comparing. JavaScript never forces you to explicitly define the datatype for an object you are creating as it will automatically assign one based on the contents of the object and how it was created.
  2. The output of all of the Math functions produce integers or floats as the datatypes for the resultant numbers. For example, Math.floor(10.39438) will produce 10.
  3. When retrieving the value of any select or input or textarea is always return as a string. This means that even though the value of the string may be a perfectly good number, it will never match a number data type. For example "10" is not equal to 10 when using the ===.

You should always use === and !== instead of == and !=, but you should make sure you understand the datatypes you are dealing with so that your comparison works as expected without any surprises at runtime.

#jquery #responsive-web-design #javascript
Read More
Apr 1, 2014
One minute

Hover Effects in JavaScript?

One of the things that can be annoying when looking at someone else’s code is when a more complex technology is used to solve a problem that can be handled more simply with another method.

An example of this is when you utilize JavaScript to implement a hover effect on some elements. I know of one scenario when you would need JavaScript to trigger a hover effect, and that would be when you want to trigger the hover effect with a touch event. However, in this case, the elements that would be affected by this hover effect are hidden on any mobile device, so the touch events would be unneeded for this hover effect.

#javascript #css
Read More