CSS処理をさらに高速化します。

私はフレーム構造のプロジェクトに取り組んでいます。今夜の後、私はフレームがそれほど悪くないと言うことができます:)

誇張して、次のモデルがあります。

 <html>
 <head>
	 <frameset rows = "70、*">
		 <frame name = "top" src = "frame.html">
		 <frameset cols = "150、*">
			 <frame name = "left" src = "frame.html">
			 <frame name = "main" src = "frame.html">
		 </ frameset>
	 </ frameset>
 </ head>
 </ html>

各フレームには、いくつかのスタイルと多くのJavaScriptがあります。

同じタイプのページ（メインフレームのメインコンテンツ）が次のようになっているとします。

 <html>
	 <head>
		 <link rel = "stylesheet" href = "style.css">
	 </ head>
	 <本体>
	 </ body>
 </ html>

スタイルは最小化され、パッケージ化されています。加速する場所がないように見えました。

最初に頭に浮かぶのは、Soudersを最適化するためのヒントです。動的タグ作成。すべてのページでこれを行いたくありません。メソッドはよりシンプルで、フレームである必要があります。

家を掘った後、次のプロパティがあります。

document.styleSheets []。cssRules []。cssText-fox

document.styleSheets []。rules []。cssText-ロバ

行こう

最初に行う必要があるのは、フレームにページをロードするときに親のメソッドを呼び出して、CSSロードを削除することです

 <html>
	 <head>
		 <script> parent.bindMe（this）</ script>
	 </ head>
	 <本体>
	 </ body>
 </ html>

このメソッドを実装します

関数bindMe（obj）{
	 AppendInlineCss（obj.document.getElementsByTagName（ 'head'）[0]、cssText）
 }

そして今、すべてが束になっています：

 <html>
 <head>
	 <link rel = "stylesheet" href = "style1.css">
	 <link rel = "stylesheet" href = "style2.css">
	 <link rel = "stylesheet" href = "style3.css">
	 <スクリプト>
		関数AppendInlineCss（obj、css）{
			 obj.appendChild（関数（）{
			 var inline = document.createElement（ 'style'）
			 inline.type = 'text / css'
			 inline.textContent = css
			 return inline}（））
		 }
		関数GatherCssText（）{
			 var cssText = ''
			 for（var i = 0、cnt = document.styleSheets.length; i <cnt; i ++）{
				 var rules = document.styleSheets [i] .cssRules ||  document.styleSheets [i] .rules
				 for（var j = 0、c2 = rules.length; j <c2; j ++）{
					 cssText + =ルール[j] .cssText
				 }
			 }
			 cssTextを返します
		 }
		 var cssText = GatherCssText（）
		関数bindMe（obj）{
			 AppendInlineCss（obj.document.getElementsByTagName（ 'head'）[0]、cssText）
		 }
	 </ script>
	 <frameset rows = "70、*">
		 <frame name = "top" src = "frame.html">
		 <frameset cols = "150、*">
			 <frame name = "left" src = "frame.html">
			 <frame name = "main" src = "frame.html">
		 </ frameset>
	 </ frameset>
 </ head>
 </ html>

このような操作の後、CSSの大部分を一度ロードし、各新しいページの初期化時間は短くなります。

ダイナミックリンクタグの実装はそれほど原始的ではなかったので、今週の金曜日の朝に開始します:)

上記はアイデアであり、既成の実装ではありませんが、キツネで動作します（コードはより複雑です）

All Articles