サイの本の厚い「辞書」に比べて、「javascript高級プログラム設計」は浅から深い良い読み物と言える.この間、前の章の内容をめくった.ちなみに今日はmarkでまとめます.

Javascriptの基礎知識の速さ表

JavaScript構文の前に書く

JAvaScriptはどこに置けばいいですか?

JSファイルは後ろに置くべきだが、実はこれは大まかな言い方だ.一般的にCSSとJSのファイルの配置順序はすべて知っています.CSSは前、JSは後です.ここでは、Webページのレンダリングメカニズムについて説明します.

Webレンダリングメカニズム

1.ブラウザ解析コード:ここでは主に①ブラウザ解析HTMLコード生成DOMツリー、②ブラウザ解析CSSファイル生成CSSツリー、③ブラウザ解析JSファイルに分けます.JSツリーを生成します(ただし、レンダリングツリーになりたいです).

2.レイアウト:レンダーツリー内のすべてのノードのジオメトリアトリビュートをスクリーンに描画します.たとえば、位置、幅、サイズなど

です.

3.描画要素:色、背景、枠線など、すべてのノードの可視属性を描画します.(ここには複数のレイヤーが表示されるかもしれません.PSに似ています)

4.重なったレイヤーをマージします.この时CSSファイルを前に置くとよく理解できます.ファイルをロードするのは一歩一歩ですから、CSSファイルを後ろに置くと、白画面現象や、スタイルが醜いなど、長い間突然変わってしまう可能性があります.すべてのCSSファイルは一般的に前に置かれています.

JSファイルが後ろに置かれているのは、主にJSのロードブロックに関連しているためで、このJSファイルが特に大きいと、ページのロード速度が遅くなります.ユーザー体験に影響します.

ホワイトスクリーンとスタイルなしで点滅

前にブラウザのページのレンダリングメカニズムを見たとき、ちょうどこれを見ました.自分の言葉で言ってみます.

ホワイトスクリーンは主にIEブラウザ向けです.IEブラウザのレンダリングメカニズムは、スタイルシートがすべてロードされてからページ全体が表示されるので、FFブラウザと同じように逐次レンダリングを採用するのではなく、スタイルシートを下部に置くということになります.真ん中に待ち時間があり、白い画面が表示されます.IEがすべてのスタイルがロードされていない前に、「壁を塗る」と思っているように、もし後ろにこの色が必要でなければ、もう一つの壁を塗るのではないでしょうか.いっそ、後で具体的にどうすればいいかの総案が出てから、やります.これで一度だけ作ります.しかし、ホワイトスクリーンは私をもっと苦しめていると思います.もし1つのサイトのホワイトスクリーンが長くなったら、私は退きます.

スタイルコンテンツの点滅がないのは、主にfirefoxのためです.スタイルのないコンテンツの点滅が現れるのは主にfirefoxのロードメカニズムと関係があり、firefoxは主に徐々に現れる方法でロードされ、何かの命令を得ると私は何かの命令をします.そうすれば、どのような要素の効果が私たちが最終的に効果を望んでいるときにずっと点滅します.

解決策:linkラベルでスタイルシートをheadラベルに配置します.

JavaScirptのロードメカニズム

前にJavaScriptのローディングブロックという特性についてお話ししましたが、JavaScriptはローディングブロックという特性を持っているので、一般的にJSファイルをページの下部に置くと、このような問題を改善する方法はありませんか?次を見てください:asyncとdefer
JSに触れて間もないので、ここではそのまま例を用いて説明しましょう.にdeferまたはasyncがない 、ブラウザはすぐに したスクリプトをロードして します.「 」とは、scriptラベルの にあるドキュメント をレンダリングする に、つまり のロードを たずに み んで することを します.にasyncがあり、 のドキュメント をロードおよびレンダリングするプロセスはscript.jsのロードは と に われる( ).にdeferがあり、 のドキュメント をロードするプロセスはscript.jsのロードは に われる( )がscript.jsの は、すべての の が した 、DOMContentLoadedイベントがトリガーされる に します.そして な から えば、まずすべてのスクリプトを