実はすべて人をだますのです

12179 ワード
テキストリンク

でも。実はそうではありません。


△このシリーズを書いたきっかけは、実はこれを言いたかったから作りました.
(でも想像するよりも、書くほうが勉強したほうがいいと思います)
ここまで勉強してから、自分の勉強内容を自慢したいので、同僚に聞きました.
今日はLANDERINGを勉強します.
##:“ああ、それはとても重要で、あなたはreplow、repeant、defer、asyncを学ぶことができます.”
乙:「私はまだ最適化を勉強していません.defer、asyncは知っています.」
##:「bodyの末尾にscriptがあるとFPが速くなるのを知っていますか?」
( Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display. )
乙:「え?それはscriptタグのためDOMパケットを停止したのではないでしょうか.しかしHTMLにはすべてのパケットがなく、Paintは実行できませんか.」
###: "???"
乙:「え?」
だから私はテストをしました.

テスト!


performanceを確認するには、外部アクセス可能な環境を作成する必要があります.
環境を構築するのに時間がかかると思います.
Google Developer:主なレンダリングパスのパフォーマンス分析の2つの例が使用されている.

non-async例


コード#コード#

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js"></script>
  </body>
</html>

Chrome devtools > Network


測定結果は予想通り、まずLoadが発生し、DOM Contents Loadが完了した.つまり、スクリプトの実行中にDCLが完了しません.

Chrome devtools > Preformance


性能ラベルから見ると,まずLoadが発生し,その後DCLが発生し,最後にFPが発生する.

asyncの例


コード#コード#

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path: Script Async</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js" async></script>
  </body>
</html>

Chrome devtools > Network


確かに、スクリプトはDCLをブロックしません.

Chrome devtools > Preformance


DCLが完了したらFPとLoadを行います.

何だよ?私はすぐに彼を教訓にしなければなりません。にこにこ


でも。これはどういうことですか。


ネイバーがどんな瞬間だったか見て瞳に地震が起きた
FPはDCLより先に発生...ぶるぶる震える
DOM/CSCOMが完成するとRender Treeが生成されるって言ってたのに…
そこでGoogleを検索し、Stackoverflowで私と同じ疑問を持っている文章を見つけました.
記事:why first paint is happening before domcontentloaded?
答えは、BrowserがRender Treeと部分的な並列処理をインクリメンタルに作成することです.
つまり、DOM作成時にScriptタグに遭遇した場合、HTMLのパーティション化を停止する.
スクリプトを実行する前にCSSOMを完了します.
スクリプト実行と
部分的に分割されたDOMと完了したCSSOMがある.
レンダリングツリーを作成してローカルレンダリングを行う場合は、
体の端にscriptを置き、FPを素早く行うことができます.(DCL遅延も正しい)

だから二人とも正しいことを言った。パラレルな仕事があるとは思わなかっただけ・・・


DOMツリーは漸進的に作成されます
CSSOMツリーは一度に作成する必要があります(ただし、高速).
CSSのCは「カスケード」であり、CSSルールは階層化されている.
後続のルールでは、古いルールを再定義できます.
CSSOMツリーは漸進的に作成されます.
DOMと結合するたびにRenderTreeが作成されます.
私たちはLayoutとPaintを行います.
CSSOMツリーが変化した場合
これらのRenderプロセスはすべて再実行する必要があるため、非常に効率的ではありません.
注意:MDN Web Performance

結論!このようにLANDERINGを行います！



(今まで学んだ知識で公式化されているので…あまり正確ではないかもしれません(LayoutとPaintが立ち直れば考えません)質問があればコメントをお願いしますので、考えてから返事します!

疑問を付加する


なぜCSSロードなしでDCLが発生するのですか?


MDNのDOMContentLoaded説明と
GoogleのDOMContentLoadedは違います!
MDNではDOMは完了時間である.
GoogleはDOMとCSSOMを用意しています.Render Treeを描くことができます.
しかし、Googleでよく読むとdomは完了し、スクリプトの実行を阻止するcssはありません.
どちらも正しいです.
前述の例では、DCLがHTMLの分割後に現れるグラフィックをチェックすると、CSSロードとJSロードが現れる前にDOMが完了する.
ブラウザは内蔵のスタイルを使ってCSSOMを作成し、Render Treeを生成して、事前にRenderを行うかもしれません.
AWS 表示/閲覧/読取りのみ(Read Only) アカウント(IAM)の作り方、また最強アカウントのポリシー付与方法
installing react and express