Making CSS processing even faster.

I work on a project that has a frame structure. After tonight, I can say that frames are not so bad :)

Exaggerated we have such a model:

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

In each frame we have several styles and a lot of javascript.
Suppose that pages of the same type (the main content of the main frame) look like this:

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

Styles minimized and packed. It seemed to have nowhere to accelerate.

The first thing that comes to mind is how to optimize Souders. Dynamic tag creation. Just do it on every page I do not want. Must be a simpler method, this is after all frames.

After digging in the house are the following properties:
document.styleSheets []. cssRules []. cssText - Fox
document.styleSheets []. rules []. cssText - Donkey
')
Go.
1e what should be done - call any method in the parent when loading the page in the frame, remove the css loading

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

and implement this method

 function bindMe (obj) {
	 AppendInlineCss (obj.document.getElementsByTagName ('head') [0], cssText)
 }

And now all in a bunch:

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

After such manipulations, most of the CSS we load once, and the initialization time of each new page is less.
The implementation of the dynamic link tag was not so primitive, and I’ll start this Friday morning with it :)

The above is an idea, not a complete implementation, although it works in a fox (the code is more complex)

Source: https://habr.com/ru/post/30783/

All Articles

Making CSS processing even faster.

More articles: