HTML and JavaScript Performance Tips

The topic of improving the performance of sites and applications should always be on the radar of a good web developer. In some cases, competent work can save computing resources, in others it can greatly improve the experience with applications for the entire audience of users, as happened the other day with Wikipedia . And often all at once.

The speed of work of web applications conditionally depends on three components: 1) how the network infrastructure is arranged through which data and code are delivered, 2) how the browser works, and 3) how, in fact, your code is written that the browser must execute.

All three components are constantly improved and optimized. For example, in the network stack, certain general improvements are made by the transition to HTTP 2.0. From the point of view of browsers, all manufacturers are constantly working to improve their engines. In the case of Chakra in Microsoft Edge, in addition to the general increase in productivity with JavaScript, we add support for specialized tools such as Asm.js and SIMD.js , designed to increase the efficiency of the code in specific scenarios (in Firefox and Google Chrome, similarly).

But with regard to the code of web applications directly, one often needs to rely not only on the promised speed of various engines, but also independently measure and improve the effectiveness of their decisions.

Our colleagues Doris Chen and John-David Dalton have prepared a whole course with practical tips to improve the performance of your HTML and JavaScript code. You can watch it on the corresponding page in Microsoft Virtual Academy or under the cut as separate clips.

Web Performance 101

The basics of web performance, the performance tuning methodology and the main blockers that you will encounter when optimizing sites and applications.

Instruments and measurements

Get to know the tools to help you track and measure the speed of JavaScript and HTML.

Strategies and principles: network requests and download data

Approaches for implementing quick responses to network requests and reducing the amount of downloaded data.

Strategies and principles: use of media resources

Tips for optimizing your media content and taking advantage of CSS3.

Strategies and principles: memory, markup, and code execution

How to manage memory usage and build an effective markup structure and optimize code execution.

Writing Fast JavaScript

Tips for writing good and fast JavaScript, including initializing JS on demand and working efficiently with JSON, .innerHTML, numbers, arrays, and DOM objects.

Example: casual game performance tuning

Analysis of an example with a casual game in which, step by step, using strategies and principles of previous lessons, the startup time, UI responsiveness, and memory consumption efficiency are improved.

Where to write wishes?

As before, we will be glad to have your feedback and wishes to improve the performance of our browser. Requests for new performance features can be left on UserVoice , bugs should be reported on Microsoft Connect , and general comments should be tweeted by the Edge team .