Radishok_LazyJs - Version 0.0.0.3

Version Notes

Improved deferjs option

Release Info

Developer	Denis Derbenyov
Extension	Radishok_LazyJs
Version	0.0.0.3
Comparing to
See all releases

Code changes from version 0.0.0.2 to 0.0.0.3

Files changed (4) hide show

app/code/local/Radishok/LazyJs/Model/Observer.php +20 -12
app/code/local/Radishok/LazyJs/etc/config.xml +1 -1
app/code/local/Radishok/LazyJs/etc/system.xml +22 -2
package.xml +5 -5

app/code/local/Radishok/LazyJs/Model/Observer.php CHANGED Viewed

	@@ -23,8 +23,6 @@ class Radishok_LazyJs_Model_Observer extends Varien_Object{
23	const DEFER_JS = 'radishoklazyjs/settings/defer_js';
24	protected $_allJs = array();
25	protected $_jsScripts = array();
26	- protected $_jsScriptsSrc = array();
27	- protected $_inlineScripts = array();
28
29	protected function _getResultScript(){
30	if(Mage::getStoreConfig(self::DEFER_JS)){
	@@ -38,18 +36,25 @@ class Radishok_LazyJs_Model_Observer extends Varien_Object{
38	window.attachEvent(\"onload\", downloadJSAtOnload);
39	else window.onload = downloadJSAtOnload;
40
41	- var scripts = ".Mage::helper('core')->jsonEncode($this->~~_jsScriptsSrc~~).";
42	function addScript(i){
43	var script = document.createElement('script');
44	- script.~~onload~~ = ~~function(){~~



45	if(++i < scripts.length){
46	addScript(i);
47	- } ~~else {~~
48	- ~~".$this->_getFormatedInlineJsCode()~~
49	- . ~~" }~~






50	}
51	- script.setAttribute('src',scripts[i]);
52	- document.getElementsByTagName(\"head\")[0].appendChild(script);
53	}
54	function downloadJSAtOnload(){
55	var i = 0;
	@@ -73,16 +78,19 @@ class Radishok_LazyJs_Model_Observer extends Varien_Object{
73	return '';
74	}
75	protected function _replaceCallbackDefer($matches) {

76	if (isset($matches[2]) && trim($matches[2])) {
77	- $~~this->_inlineScripts~~[] = ~~$matches[2]~~;

78	} elseif(strpos($matches[1],' src=')) {
79	preg_match('#(.?)src="(.)"#is',$matches[1],$src);
80	- $~~this->_jsScriptsSrc~~[] = ~~$src[2]~~;
81	- $~~this->_jsScripts~~[] = $~~matches~~[0];
82	} else {
83	Mage::logException(new Exception('Unknown script type :'.$matches[0]));
84	return $matches[0];
85	}

86	return '';
87	}
88


23	const DEFER_JS = 'radishoklazyjs/settings/defer_js';
24	protected $_allJs = array();
25	protected $_jsScripts = array();


26
27	protected function _getResultScript(){
28	if(Mage::getStoreConfig(self::DEFER_JS)){

36	window.attachEvent(\"onload\", downloadJSAtOnload);
37	else window.onload = downloadJSAtOnload;
38
39	+ var scripts = ".Mage::helper('core')->jsonEncode($this->_jsScripts).";
40	function addScript(i){
41	var script = document.createElement('script');
42	+ script.type = 'text/javascript';
43	+ if(scripts[i].inline){
44	+ script.text = scripts[i].text;
45	+ document.getElementsByTagName(\"head\")[0].appendChild(script);
46	if(++i < scripts.length){
47	addScript(i);
48	+ }
49	+ } else {
50	+ script.onload = function(){
51	+ if(++i < scripts.length){
52	+ addScript(i);
53	+ }
54	+ }
55	+ script.setAttribute('src',scripts[i].src);
56	+ document.getElementsByTagName(\"head\")[0].appendChild(script);
57	}


58	}
59	function downloadJSAtOnload(){
60	var i = 0;

78	return '';
79	}
80	protected function _replaceCallbackDefer($matches) {
81	+ $script = array();
82	if (isset($matches[2]) && trim($matches[2])) {
83	+ $script['inline'] = true;
84	+ $script['text'] = $matches[2];
85	} elseif(strpos($matches[1],' src=')) {
86	preg_match('#(.?)src="(.)"#is',$matches[1],$src);
87	+ $script['inline'] = false;
88	+ $script['src'] = $src[2];
89	} else {
90	Mage::logException(new Exception('Unknown script type :'.$matches[0]));
91	return $matches[0];
92	}
93	+ $this->_jsScripts[] = $script;
94	return '';
95	}
96

app/code/local/Radishok/LazyJs/etc/config.xml CHANGED Viewed

	@@ -22,7 +22,7 @@
22	<config>
23	<modules>
24	<Radishok_LazyJs>
25	- <version>0.0.0.2</version>
26	</Radishok_LazyJs>
27	</modules>
28	<global>


22	<config>
23	<modules>
24	<Radishok_LazyJs>
25	+ <version>0.0.0.3</version>
26	</Radishok_LazyJs>
27	</modules>
28	<global>

app/code/local/Radishok/LazyJs/etc/system.xml CHANGED Viewed

@@ -45,7 +45,7 @@
                                 <show_in_store>1</show_in_store>
                                 <fields>
                                     <active>
-            -
                                        <label>Module Enabled</label>
                                         <frontend_type>select</frontend_type>
                                         <source_model>adminhtml/system_config_source_yesno</source_model>
                                         <sort_order>10</sort_order>
@@ -61,7 +61,27 @@
                                         <show_in_default>1</show_in_default>
                                         <show_in_website>1</show_in_website>
                                         <show_in_store>1</show_in_store>
-            -
                                        <comment><![CDATA[No = do not defer js, only move javascript code before &lt;/body&gt; ends]]></comment>
                                     </defer_js>
                                 </fields>
                             </settings>


45	<show_in_store>1</show_in_store>
46	<fields>
47	<active>
48	+ <label>Module Enabled(version: 0.0.0.3)</label>
49	<frontend_type>select</frontend_type>
50	<source_model>adminhtml/system_config_source_yesno</source_model>
51	<sort_order>10</sort_order>

61	<show_in_default>1</show_in_default>
62	<show_in_website>1</show_in_website>
63	<show_in_store>1</show_in_store>
64	+ <comment>
65	+ <![CDATA[
66	+ No = do not defer js, only move javascript code before </body> ends.<br/>
67	+ <span style="display:none;" id="radishok_warning">Please test this option before going live. It may broke some js.</span>
68	+ <script>
69	+ (function(){
70	+ function showradishokwarning(){
71	+ var select = document.getElementById('radishoklazyjs_settings_defer_js');
72	+ var el = document.getElementById('radishok_warning');
73	+ if(select.options[select.selectedIndex].value == 1){
74	+ el.style = 'color:#d20000;';
75	+ } else {
76	+ el.style = 'display:none;';
77	+ }
78	+ }
79	+ document.getElementById('radishoklazyjs_settings_defer_js').addEventListener('change', showradishokwarning, false);
80	+ showradishokwarning();
81	+ })();
82	+ </script>
83	+ ]]>
84	+ </comment>
85	</defer_js>
86	</fields>
87	</settings>

package.xml CHANGED Viewed

	@@ -1,18 +1,18 @@
1	<?xml version="1.0"?>
2	<package>
3	<name>Radishok_LazyJs</name>
4	- <version>0.0.0.2</version>
5	<stability>stable</stability>
6	<license uri="http://opensource.org/licenses/osl-3.0.php">OSL v3.0</license>
7	<channel>community</channel>
8	<extends/>
9	<summary>This Extension will speed up frontend rendering by placing JavaScript at the bottom of the page </summary>
10	<description>When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading. On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if for example your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.</description>
11	- <notes>Be ~~careful~~ ~~using~~ option ~~"Defer js"~~</notes>
12	<authors><author><name>Denis Derbenyov</name><user>radishok</user><email>ddenisiy@gmail.com</email></author></authors>
13	- <date>2014-07-21</date>
14	- <time>19:07:43</time>
15	- <contents><target name="magelocal"><dir name="Radishok"><dir name="LazyJs"><dir name="Model"><file name="Observer.php" hash="~~5d01b427ac031039a0e4ed072dcd051e~~"/></dir><dir name="etc"><file name="config.xml" hash="~~dfdd851228453751fc33bc42b25bdfd2~~"/><file name="system.xml" hash="~~e03e1ae13a6ccc422a4954fd6a3edf95~~"/></dir></dir></dir></target><target name="mageetc"><dir name="modules"><file name="Radishok_LazyJs.xml" hash="594198ce4094a6ac5c47c7d99f36d5d3"/></dir></target></contents>
16	<compatible/>
17	<dependencies><required><php><min>5.1.0</min><max>6.0.0</max></php></required></dependencies>
18	</package>


1	<?xml version="1.0"?>
2	<package>
3	<name>Radishok_LazyJs</name>
4	+ <version>0.0.0.3</version>
5	<stability>stable</stability>
6	<license uri="http://opensource.org/licenses/osl-3.0.php">OSL v3.0</license>
7	<channel>community</channel>
8	<extends/>
9	<summary>This Extension will speed up frontend rendering by placing JavaScript at the bottom of the page </summary>
10	<description>When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading. On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if for example your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.</description>
11	+ <notes>Improved deferjs option</notes>
12	<authors><author><name>Denis Derbenyov</name><user>radishok</user><email>ddenisiy@gmail.com</email></author></authors>
13	+ <date>2014-08-08</date>
14	+ <time>21:12:49</time>
15	+ <contents><target name="magelocal"><dir name="Radishok"><dir name="LazyJs"><dir name="Model"><file name="Observer.php" hash="f95d47d49eff7b2a57a5817515ddf59e"/></dir><dir name="etc"><file name="config.xml" hash="6b309e582c453d04cea091075ea42e8b"/><file name="system.xml" hash="7cca90b79d0b4d73b11aa72bf371b240"/></dir></dir></dir></target><target name="mageetc"><dir name="modules"><file name="Radishok_LazyJs.xml" hash="594198ce4094a6ac5c47c7d99f36d5d3"/></dir></target></contents>
16	<compatible/>
17	<dependencies><required><php><min>5.1.0</min><max>6.0.0</max></php></required></dependencies>
18	</package>