Работаю на проекте, который имеет фреймовую структуру. После сегодняшней ночи могу сказать, что фреймы это не так уж и плохо :)
Утрированно имеем такую модель:
В каждом фрейме имеем несколько стилей и много яваскрипта.
Положим что однотипные страницы (основной контент фрейма main) выглядят так:
Стили минимизированы и запакованы. Казалось ускорять уже некуда.
Первое что приходит на ум — советы по оптимизации Souders'а. Динамическое создание тега . Только делать это на каждой странице я не хочу. Должен быть метод проще, это ведь фреймы.
После копания в доме находятся следующие свойства:
document.styleSheets[].cssRules[].cssText — лиса
document.styleSheets[].rules[].cssText — осел
Поехали.
1е что надо сделать — вызвать какой-либо метод в паренте при загрузке страницы в фрейме, убрать загрузку css
и реализовать этот метод
А теперь все в кучу:
После таких манипуляций большую часть CSS мы грузим один раз, а время инициализации каждой новой страницы меньше.
Реализация динамического тега link оказалась не такой примитивной, с него и начну это пятничное утро :)
Описанное выше — идея, а не готовая реализация, хотя в лисе работает (код более сложный)
Утрированно имеем такую модель:
<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 оказалась не такой примитивной, с него и начну это пятничное утро :)
Описанное выше — идея, а не готовая реализация, хотя в лисе работает (код более сложный)