Testing performance of text resizing in span vs. canvas in font sniffing.

Browser finger printing is commonly used in fraud prevention tools to identify users, independently of cookies. The fingerprint is then used to track users over different sessions, on different websites.

It works by looking at the configuration of your particular browser and system. This includes what browser and version you use, what plugins are used and what fonts you have installed.

The interegation of what fonts you have installed is called font sniffing and it works by looping through a long list of fonts, trying to apply them in turn to a text string. The text string will vary in length depending on the font, and most importantly whether the font is installed in the first place. By trying a large collection of fonts, you can form part of a "profile" of the specific browser installation. The popular method of doing this is in a <span>.

The problem is, that to measuring the width of the element (in this case logging to the console) the browser has to layout all the elements on the screen, once per font, which is computationally expensive. This causes the browser to slow down and creates a poor user experience. This was what was happening in the checkout. There was a long pause before the user could start to interact with the page. It was particularily bad on low-end devices as they typically have lower computing power. It was hardly noticeable on the latest iPhone. I think we can probably guess what sort of devices they had tested their product on.

An alternative meathod is to use a <canvas> element. This way, the document will layout with the fixed size canvas and it will be the text within which changes size.

Open Dev Tools, go to the performance tab, start a recording and press the two buttons. You should see quite different performance in the execution of the two functions.


abcdefghijklmnopqrstuvwxyz