js実行はDOMツリーの解析とレンダリングをブロックしますが、cssロードはDOMツリーの解析とレンダリングをブロックしますか?

2856 ワード
css 先端

よねつ


今回のテストを完了するために、まず科学普及に来て、chromeを利用してダウンロード速度を設定する方法(直接スキップ可能)1.chromeコンソールを開くと(F 12を押す)、下の図が見えます.赤い輪を描いたところに重点を置きます.
2.私が赤い輪を描いたところをクリックすると、下の図が見えます.GPRSという選択肢を選びます.
3.これで、リソースのダウンロード速度の上限は20 kb/sに制限されます.では、次は本題に入ります.

本題


1.cssロードはDOMツリーの解析をブロックしますか?コードの例:


  
    css  
    
    
    
    
      function h () {
        console.log(document.querySelectorAll('h1'))
      }
      setTimeout(h, 0)
    
    
  
  
    
これは いです。

仮定:cssロードはDOMツリーの解析とレンダリングをブロックします
仮定結果:bootstrap.cssがまだロードされていない前に、次の内容は解析的にレンダリングされません.では、最初に見たのは白い画面で、h 1は表示されません.そしてこの時logの結果は空の配列であるべきです.実績:下図
3.gif上の図から、cssがまだロードされていない場合、h 1は表示されませんが、コンソール出力は次のようになります.
このとき、DOMツリーは少なくともh 1に解析が完了しているが、このときcssはまだロードが完了していないことが分かる.すなわち、cssはDOMツリーの解析をブロックしないことを示す.
2.cssロードはDOMツリーのレンダリングをブロックしますか?上の図からも、cssがまだロードされていない場合、ページには白い画面が表示され、cssのロードが完了するまで赤いフォントが表示されません.つまり、次の内容は解析されていますが、レンダリングされていません.したがって、cssロードはDOMツリーレンダリングをブロックします.効果は下図を参照
5.gif
個人のこのようなメカニズムに対する評価
  • 実は、これもブラウザの最適化メカニズムかもしれないと思います.cssをロードすると、次のDOMノードのスタイルが変更される可能性があります.cssのロードがDOMツリーのレンダリングをブロックしない場合は、cssのロードが完了すると、DOMツリーが再描画または還流される可能性があります.これにより、不要な損失が発生します.だから私はいっそDOMツリーの構造を先に解析して、できる仕事を完成して、それからあなたのcssがロードした後に、最終的なスタイルによってDOMツリーをレンダリングして、このようなやり方の性能の方面は確かに少し良いです.

    • 3.cssロードはjsの実行をブロックしますか?
    以上の推論から,cssロードはDOMツリー解析をブロックしないが,DOMツリーレンダリングをブロックすることが分かった.では、cssロードはjs実行をブロックしますか?
    同様に、コードによって検証する.
    

  
    css  
    
    
    
      console.log('before css')
      var startDate = new Date()
    
    
  
  
    
    これは いです。
    
    
      var endDate = new Date()
      console.log('after css')
      console.log('   ' + (endDate -startDate) + 'ms')

    仮定:cssロードは後続のjs実行をブロックします
    予想結果:linkの後ろにあるjsコードは、cssのロードが完了した後に実際の結果を実行する必要があります.
    6.gif
    上の図から、cssロード文の前にあるjsコードが先に実行されたが、cssロード文の後ろにあるコードは、cssロードが完了するまで実行されなかったことがわかります.これは、cssロードが後続のjs文の実行をブロックすることを示しています.詳細は下図(cssロードは5600+ms)を参照してください.
    .png](/img/bVbf3O2)
    結論は上記から、以下の結論を得ることができる.
  • 1.cssロードはDOMツリーの解析
    • をブロックしない
  • 2 cssロードはDOMツリーのレンダリング
    • をブロックします.
  • ccssロードは、後続のjs文の実行をブロックし、
    • したがって,ユーザに長時間のホワイトスクリーン時間を見せることを避けるために,cssロード速度をできるだけ向上させるべきである.
    公衆番号の検索を歓迎します:一線の私達あるいはコードをスキャンして参加します:
    ASPを分析する.NET Core(Part 3)- UseMvc
    17.エラーページ