Dynamic styles: fast and easy

Note We take out the CSS in the post-loading was devoted to the study of the fastest way to add style rules to the source document dynamically, without affecting the preloading stage (when we still have a white screen in the browser). However, it did not address the following question: what method should be used to add an array of CSS rules to HTML itself.

Naturally, there are several such options, and then they will all be considered in terms of performance in the client browser.

Test environment

Since the download speed of a separate CSS file is large enough, and we need to consider how its content can affect the speed of its dynamic application to the document, we need hundreds or even thousands of rules. As a starting point, the Yandex main page was again taken, the styles of which were moved to a separate file and copied 10 times. This gave the necessary delay (which is significantly more than the error introduced by browsers) and did not greatly increase the gzip file.
')
All options are presented on the test page , briefly describe the main approaches.

Read further y webo.in → .