small_jam Aug 8 2008 at 08:28

Делаем обработку CSS еще быстрее.

2 min

772

Работаю на проекте, который имеет фреймовую структуру. После сегодняшней ночи могу сказать, что фреймы это не так уж и плохо :)

Утрированно имеем такую модель:

<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>

В каждом фрейме имеем несколько стилей и много яваскрипта.
Положим что однотипные страницы (основной контент фрейма main) выглядят так:

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

Стили минимизированы и запакованы. Казалось ускорять уже некуда.

Первое что приходит на ум — советы по оптимизации Souders'а. Динамическое создание тега . Только делать это на каждой странице я не хочу. Должен быть метод проще, это ведь фреймы.

После копания в доме находятся следующие свойства:
document.styleSheets[].cssRules[].cssText — лиса
document.styleSheets[].rules[].cssText — осел

Поехали.
1е что надо сделать — вызвать какой-либо метод в паренте при загрузке страницы в фрейме, убрать загрузку css

<html>
	<head>
		<script>parent.bindMe(this)</script>
	</head>
	<body>
	</body>
</html>

и реализовать этот метод

function 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">
	<script>
		function AppendInlineCss(obj, css) {
			obj.appendChild(function(){
			var inline = document.createElement('style')
			inline.type = 'text/css'
			inline.textContent = css
			return inline}())
		}
		function 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 += rules[j].cssText
				}
			}
			return cssText
		}
		var cssText = GatherCssText()
		function 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 мы грузим один раз, а время инициализации каждой новой страницы меньше.
Реализация динамического тега link оказалась не такой примитивной, с него и начну это пятничное утро :)

Описанное выше — идея, а не готовая реализация, хотя в лисе работает (код более сложный)

Hubs:

Lumber room