All geek questions in one place

Understanding Render Blocking CSS

I am trying to understand how CSS is evaluated in a specific setting:

Suppose I have the following content in a tag <head>:

<html><head>
...
    <link href="reset.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="autocomplete.css" type="text/css" rel="stylesheet">
</head>
<body>
... html ...
<script type="text/javascript" src="/js/script.js"></script>
</body></html>

Now suppose that reset.cssthey style.csscontain some rules that immediately affect the above described addition content or elements in HTML. However, it autocomplete.csscontains only the class used later by some JavaScript.

Now suppose that the browser has already been downloaded reset.cssand style.css, but autocomplete.cssis still waiting. I am wondering what happens if the browser does this when it encounters a script blocking tag at the end of the page? Obviously, it can render HTML before the script tag, but is script execution blocked by the missing one autocomplete.css?

, script .

: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

, JavaScript , CSSOM.

:  1. autocomplete.css? ,  2. javascript script.js , autocomplete.css?

, : script .

+4
3

CSS . CSS, DOM ( async, / javascript).

( , ) CSS, CSS, javascript . resolve load. :

  • . 2k , . 10k , - . , , .
  • / (- ) - , CSS /, , . ( ) - CSSOM , .

:

+3

:

1) css , -fold-content. , .

2) css - : https://github.com/filamentgroup/loadCSS p >

+2

autocomplete is a css file. Thus, it only adds style properties to classes that are defined in html. Javascript will still execute correctly even if css is missing.

The only thing that can happen is that if js changes some CSS styles, classes that are defined in autocomplete.css. However, even then this is unlikely.

+1
source

Source: https://habr.com/ru/post/1671364/

More articles:


All Articles