頭に動的に読み込まれたCSSが実行されるのはいつですか

すでに答えられていれば、私はちょうどそれを見つけることができませんリンクを感謝します。頭に動的に読み込まれたCSSが実行されるのはいつですか

私がロードされた子どもたちの中には、同じの.cssに彼らの親として&他のファイルを必要とする

<a href="#" data-toggle="modal" role="button" data-target="#genericModal" onclick="loadModalContent(\'profil.php\',\'genericModal\')">.

のいずれか <?php include 'header.php'; ?>直接、またはボタン/リンクアクション上でページを.phpのロードので、私はしかし私は希望

function loadStyleSheet(uri){ 
    //jquery might not be loaded yet, so do long form 
    var ss = document.styleSheets; 
    for (var i = 0, max = ss.length; i < max; i++) { 
     if (ss[i].href.indexOf(uri) > -1){ 
      return; 
     } 
    } 
    var styleSheet = document.createElement("link"); 
    styleSheet.href = uri; 
    styleSheet.rel = "stylesheet"; 
    styleSheet.type = "text/css"; 
    document.getElementsByTagName("head")[0].appendChild(styleSheet); 
};

をロードするために、次のコードを使用して、私は2つのファイル、つまりいます

parent.phをP

<html> 
    <head> 
     <link rel="stylesheet" href="css/bootstrap.css"/> 
     <link....something else and more.... 
    </head> 
    <body> 
     load in one way or another the child.php 
    </body> 
</html>

と

child.php（ノーHTML、ない頭や体）

<script> 
    loadStyleSheet("css/bootstrap.css"); 
    loadStyleSheet("css/child.css"); 
</script> 
<div class="xyz"> 
    something more here 
</div>

しかし、私の質問は、ブラウザがそれにどう反応するか、今です。基本的に親は既に彼の<head></head>を通り抜けていて、ページを構築していて、途中でどこか他のコードをロードするように言いました。ちなみに、.cssにjavacriptを加えて<head>（私には<head>子ファイルに）。ブラウザはこれにどのように反応しますか？

私はおそらくローダーを使用することができますが、今は避けたいと考えています。

私も両親にすべての子供たちの.cssを追加することができますが、需要のデザイン上の明快さと負荷のために事前に子供.phps

おかげでそれらを維持したいと思います！

出典

2016-10-21 TheRealPir

私はあなたの親と子が最初に追加する必要があるすべてのCSSを持つことをお勧めします。明確にする必要がある場合は、2つのファイルに分割して両方を追加することができます。

しかし、あなたは、あなたがのキャッシュを利用していない<style>内のCSSを置く場合は、おそらくあなたはもちろん<link>

の代わりに<style>タグ内にスタイル規則を読み込むことができないことができる場合あなたがそれを使用していない心配している場合、ブラウザは、しかし、なぜ

がthisサイトを見てみましょう最初の場所ですべてのCSSをロードしない

ブラウザはDOMに応答すべき

出典

2016-10-21 17:36:33

私は複数の親を持っている場合、私は本当にどの子どもが潜在的に読み込まれるのかを正確に知っている必要があります。スタイルとリンクはどのように役立ちますか？私はPHPコードを直接PHPに入れなければならないのですか？私は本当にそれをしたくない – TheRealPir

私はファイルを再利用しています。具体的なことは何ですか、あなたは私が提案されたページを見なければならないことを心に留めていました。それは私が実際にすでに上記の私のコードで使用しているJavaScriptのCSSの標準的な処理です。 – TheRealPir

か、要素スタイルを追加するためのリンクではなく、スタイルを意味しましたか？もしそうなら、私の質問は、その要素がどのように（読み込まれて）解析されるのかということです。 – TheRealPir

は変更 - 追加が含まれことになりますスタイルシート - すぐに。

しかし、ブラウザはシングルスレッドで動作するため、実際には（おそらく遠隔地から）スタイルシートをロードする必要があるため、 "すぐに"使用できません。

通常、DOMを変更したスクリプトが終了すると、再レンダリングが行われます。（これは本質的にインラインスクリプトの</script>タグを意味する可能性があります。または、イベントがスクリプトをトリガした場合にイベントハンドラが返す場合...）

デバッガでステップ実行していたのであれば、あなたは<link>要素は、あなたが次の行を実行するとすぐに頭の下に表示されていることがわかります。

document.getElementsByTagName("head")[0].appendChild(styleSheet);

をしかし、ページが再を持っていません。 - まだレンダリングされています。

DOMが再レンダリングされても、新しいスタイルシートリソースにロード時間がない場合、レンダリングされたページは更新されたように見えません。ユーザーには、スタイルシートは、<link>要素を作成したスクリプトの完了よりも早くなく、何らかの不特定の時間に適用されるように見えます。

出典

2016-10-21 18:00:37

スタイルシートにダウンロードに時間がかかるため、スクリプトが終了してから実際にページがレンダリングされます。これにより、遅いインターネット接続や大きなスタイルシートで目に見える違いが生じます。 – tcooc

True;地元の資源を考えていましたが、もちろんそれは愚かです。私が書いたことは、スクリプトが

頭に動的に読み込まれたCSSが実行されるのはいつですか

答えて