Practical tips for improving HTML and JavaScript performance

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 saves computational resources, in others - greatly improved experience with applications for the entire audience of users, as it happened the other day with Wikipedia . And often all at once.

The speed of web applications conditionally depends on three components: 1) how the network infrastructure is arranged, through which data and code is delivered, 2) how the browser works and 3) how your code is written, which the browser must execute.
')
All three components are constantly being improved and optimized. For example, in the network stack, certain general improvements are carried over to 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 a general increase in JavaScript performance , we add support for specialized tools like Asm.js and SIMD.js , designed to increase the efficiency of code in specific scenarios (similarly in Firefox and Google Chrome).

But as for the code of web applications, it is often necessary to rely not only on the promised speed of these or other engines, but also independently measure and improve the effectiveness of their decisions.

Our colleagues Doris Chan and John-David Dalton prepared a whole course with practical tips on how 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 in the form of separate videos.

Web performance 101

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

Tools and Measurements

Familiarize yourself with tools to help track and measure the speed of JavaScript and HTML.

Strategies and principles: network requests and downloadable data

Approaches to implement quick responses to network requests and reduce the amount of downloaded data.

Strategies and principles: use of media resources

Tips for optimizing media content and taking advantage of CSS3.

Strategies and principles: memory, markup and code execution

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

Writing quick javascript

Tips for writing good and fast javascript, including JS initialization on demand and efficient work with JSON, .innerHTML, numbers, arrays and DOM objects.

Example: adjusting casual game performance

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

Where to write wishes?

As before, we will be happy with your feedback and suggestions for improving the performance of our browser. Requests for new features in the field of performance can be left on UserVoice , you should report bugs on Microsoft Connect , and general comments on the Edge team twitter .