としてjavascript <head> ブロックのHTMLレンダリングでない場合はCSSりますか？

StackOverflow https://stackoverflow.com/questions/4026183

  •  26-09-2019
  •  | 
  •  

質問

としてJavaScriptをブロックのHTMLレンダリングでにJavaScriptでの直前に閉bodyタグでない場合はCSSりますか？

いまだ外部CSSます。

役に立ちましたか？

解決

CSSはJavaScriptを

と同じ方法でブロックされません。

に引用 Yahooの開発者向けネットワークブログの

  すべてのスタイルシートがダウンロードされるまで、スタイルシートでは、プログレッシブレンダリングがブロックされています。それは、彼らが最初にダウンロードさとレンダリングがブロックされていないので、それは、文書のHEADにスタイルシートを移動するのが最善だ理由です。スクリプトでは、プログレッシブレンダリングは、のスクリプトの下にあるすべてのコンテンツのためにブロックされます。すぐにレンダリングされるスクリプト上記より多くのコンテンツがあります可能な手段として、ページに低いとしてスクリプトを動かすます。

CSSをヘッドに追加されたときにまた、それが最初に解析され、そしてHTMLでの結果は、それがダウンロードされたとしてもスタイリングされています。これは、あなたがHTMLの大きなページの下部にあるスタイルのタグを置くとどうなるUnstyledコンテンツのフラッシュを回避します。

他のヒント

CSS Javascriptがない道をブロックしませんが、あなたはCSSのどこにもなく、<head>を入れた場合も、一部のブラウザでは、奇妙なことを行うだけでなく、のようにそれを無視、または不完全それを適用します。 HTML5は、実際に（「スコープ」機能、私の知る限り誰もが実装はまだを除いて）外<style>に現れるから<head>を禁止します。

CSSスタイルシートが<link>要素を使用してロードされ、それが文書の頭の中にあるときに

は、この要素にのみ有効です。ブラウザがちょうど他の<link>要素のようにロードされるとCSSが適用されているため、CSSは、HTMLのレンダリングをブロックするためのように、これはそうではありません。 JSブロックのHTMLブラウザはJSが制御を取り、実際には完全にDOMをロードする前に何かをしたいと仮定しているため、基本的にJSを実行して、放置されています。

CSSは、それがまだロードされていない要素を参照することになるのでJSとして、どの要素がスタイリングされないであろうと同じロードされた場合、ので、それがその後適用され、ロードをブロックしない、それについて考えてみます。

いいえ、CSSはブラウザがCSSを読んだ後DOM要素の右に適用されます。

：あなたはそれがすべてのHTMLをロードした後に実行させるため、

のjavascriptの場合、あなたは次のように、読み出し時にスクリプトを保つことができます 

window.onload = function (){

//here we start
}

JS

以来JS変更できるwebページの(変更のDOM)のブラウザで待機すべての外部JSダウンロードする(parallely),解釈-実行され続ける前に、HTMLのその後 <script src="..." > そのために、良い練習ができるすべての外部JS下 <body>.このようにHTMLが解析され、描画され、お客様のユーザーが感じられる何かが起こっている...

CSS

CSSの変更はできませんので、DOMはできませんので"重い"のページだからこそ、ブラウザなブロックをダウンロード、解析、HTML、累進レンダリングとしては、JS.これはブロックのレンダリングだけではより良い入れるのを回避するために長 FOUC .なブロックをダウンロードが

現在、それらのモバイルデバイスをおCSSを HEAD JS下部には足りません...また、ATF以上の倍）のCSSをインラインとの大きな最小のCSSとご一緒にJS-下部/defered/非

この: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

は、なぜそれが一番下にJavascriptを維持することをお勧めでしょうか？

私はそれが別々のファイルにはJavaScriptだけでなく、CSSを入れて、<head>セクションを使用して、HTMLドキュメントにそれらを含めることをお勧めだと言うと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top