JSは必ずBodyの一番下に置くべきですか?ブラウザのレンダリングメカニズムについて話します.

説明:

ここで言及するブラウザは、Chromeを指す.

「scriptタグ」とは、一般的に他の属性を持たない外連javascriptのことです.

webパフォーマンスの最適化の手段は黒でも白でもないので、やりすぎて逆に性能を低下させる手段があります.条件や結論を議論する時、多くの条件自体が他の細かい負の影響やプラスの影響を与えますが、論述に重点を失わせないように拡張しません.
一つの面接問題から話します.
面接の前に、私は常識的な質問が好きです.例えば、なぜ皆さんはというコードをbodyの に いていますか?
は、 に えます.ブラウザがDomツリーを する は、 でHTMLコードを むので、scriptタグを ろに くと、 のページのレンダリングに がありません.
ドムツリーが に されてから、ページがレンダリングされます.ブラウザは なHTMLを んでこそ、 なDomツリーが されます.スクリプトタグはbodyの に かないのも じですか?
を してまず えさせてください.
これは は な です. に わる の が です.
「ページにレンダリングしました」とは ですか?
には、 の の は が っています. たちはよく につける「ページレンダリング」というのを したいです.つまり「 の が されました」ですか?それとも「ページが にロードされました」ですか?? の が されているということでしたら、また があります.もしページの に があると して、ここの「 のスクリーン」は「 が された のスクリーン」( の はStep B)ですか?それとも「 がない のスクリーン」( の はStep A)ですか?
「ページがレンダリングされました」と にすることは、Step A、Step B、Step Cのどれが に ですか?(まだ は もやっていませんが)、もし「ページがレンダリングされました.」Step Cのことです. の の えは です.スクリプトタグはbodyの に かないと、ページをゆっくりと み まないです.
らかに、 はよくヘッドスクリーンの に を ちます.だから、もし「ページが されました」というなら、 に「 がないトップ 」という です. の は のようになりました.どう えたらいいですか?
Domツリーが に されたら、「 がない 」を することができます.ブラウザは なHTMLを めば、Domツリーを できます.scriptタグをbodyの に かないのも じですか?
とし
しかし、 の はやはり とし があります. Dom “ ”という は なものです.「 のないトップ 」は「 なDomツリー」を としません.つまり、Domツリーを する である が われば、「 のないトップ 」が されます.
ですから、これらの さと とし を てて、 の は のようになりました.
scriptタグの はファーストスクリーンの に しますか?
しかし、 えはそれほど らかではありません.ブラウザのレンダリングメカニズムから しなければなりません.
、ブラウザのレンダリングメカニズム
Google Web Fundamentalsは に な であり、ウェブ、ブラウザ、 との を しています.その のIlya Griigorkが いたCritical rendeng pathブラウザレンダリング の をまとめてみます.
いくつかの
1、DOM:Dockment Object Model、ブラウザはHTMLを の のデータ に して、DOMと します.
2、CSSOM:CSS Object Model、ブラウザはCSSコードをツリー のデータ に する.
3、DOMとCSSOMはいずれもBytes → characters → tokens → nodes → object model.という で なデータを します.
DOMツリーの プロセスは、 のノードのすべてのサブノードが された に、 のノードの の ノードが される さエルゴードプロセスである.
4、Render Tree:DOMとCSSOMを してRender Treeを します.
Render TreeはDOMと に、 ノードのcss 、ノード の 、およびノードの ノードをマルチツリー で している.display:noneのノードはRender Treeに されず、visibility: hiddenであれば、そのため、あるノードが に されていない は、display:noneがより れているとする.
ブラウザのレンダリングプロセス

Create/Update DOM And request css/image/js:ブラウザがHTMLコードを した 、DOMを する の (Bytes→characters であるべきです)css、 、jsの を して し、 らがHEADにいるかどうかは わない. :jsファイルのダウンロードrequestを するには、DOM を としない. えば、 な マッチングができるという は、 ずしも によるものではないが、これは くの がレンダリング を している に している りである.

Create/Update Render CSSOM:CSSファイルのダウンロードが し、CSSOM

の を しました.

Create/Update Render Tree:すべてのCSSファイルのダウンロードが し、CSSOMの が したら、DOMと にRender Treeを します.

Layout:Render Treeがあります.ブラウザは、ウェブページにどのノード、 ノードのCSS とその があるかを ることができます. の はLayoutといいます. の り、 ノードのスクリーン の を します.

.

Painting:Layout 、どのノードが するかをブラウザがすでに っています. ノードのCSS は ですか? ノードの の はどこですか? のステップに みました.Paintingは されたルールに い、グラフィックカードを して、 をスクリーンに きます.

の5つのステップの の3つのステップのすべてに「Create/Update」が われているのは、DOM、CSSOM、Render Treeが のPaintingの に される があります.
LayoutとPaintingも り し されます.DOM、CSSOMの の に、 のダウンロードが したらLayoutとPaintingを び してウェブページを してください.
Timelineを て、 です.
は なPCのトップページのコードをすりました.Nodeを じて ってきました.NodeはServer として/js/jquery.jsに2 sの をしました.をナビゲーションバーの に いて、 はこうです.
のTimelineから られます.

のスクリーンの とDomContentLoad は な がありません.

すべてのCSSを にロードすることは、 のスクリーン を らすための も な

である.

jsのダウンロードと はDomツリーの をブロックします.( にはDomツリーの が されています)ので、scriptタグは、ファーストスクリーンの にあるHTMLコード で、ファーストスクリーンの を します.

scriptタグをbodyの に いて、asyncまたはdeferの をしてもしなくても、 のスクリーンの には しません.しかし、DomContintLoadとロードの に して、さらに らのコードに する の に します.
、 の え
の に ります.
scriptタグの はファーストスクリーンの に しますか?
はないですが(ここのファーストスクリーンがホワイトボードからウェブ に するということです.つまり めてのPaintingです)、トップ の を り てて、 の だけを させることができます.
なぜ「 がある」と いますか?cssよりも くダウンロードできたり、scriptタグが にない は、 には がありません.この が に であることが かります.このように、ページの のボトルネックを する に いがあります. を げます.ウェブページの には モジュールがあります. には、そのjs を してファイルにすることができます.モジュールのhtmlとjsタグを にして したテンプレートを って しました.(もしそのjsが さいなら、あるいは つのファイルが いので、もう つのTCP と を します.これは にはもう つの です. の の を してください.)
、まとめて、さらに めます.
ですから、この の をようやく らかにしました.まとめてみます.

scriptタグの がファーストスクリーンの にない 、ファーストスクリーン

に しません.

すべてのscriptタグをbodyの に くべきです.

しかし、パフォーマンス の から、たとえbodyの にあるscriptタグでも、 に するjsファイルを するブラウザの が くなります.これは られたTCPリンク 、 、さらにはそれを するために なCPUを しています.
しかし、 な な では、これらの を するには が する があります.

ページはモジュール に かれています. モジュールには のhtml、js、cssがあります.これらのモジュールを つのページにまとめると、jsは にHTMLの に れます.スクリプトタグを に くのは しいです.

たとえあなたがscriptタグを に くとしても、scriptタグの は はファーストスクリーンの を くしました.DomContendLoadとloadedの です. つのscriptタグだけがあれば、asyncを できますが、 のasyncのscriptタグの はjs の が って されます.これは らかに がほしいのではありません.
もこのような に いました.だから、オープンソースのプロジェクトを りました.Tinyl-loader-A smart load CSS/JS in best way for page performanceは に えます.
この は の のSegment Faultコラムです.http://segmentfault.com/a/1190000004292479 ブログ:http://delai.me/code/js-and-performance/ は を してください.