Difference between revisions of "X-Cart:CSS and JavaScript optimization"
(Created page with 'To optimize working with CSS and JavaScript, smarty tags load_defer and load_defer_code have been added. Both tags are used to organize assembling and displaying code for two da…') |
|||
| Line 6: | Line 6: | ||
* load_defer_code - code displaying tag | * load_defer_code - code displaying tag | ||
| − | The logic of tags depends on the store configuration variables: | + | The logic of tags depends on the store configuration variables: [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for CSS]] and [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]] |
If these variables are disabled, the tag load_defer displays the entered code immediately and the tag load_defer_code doesn't do anything. | If these variables are disabled, the tag load_defer displays the entered code immediately and the tag load_defer_code doesn't do anything. | ||
| Line 15: | Line 15: | ||
# the code is entered directly in the template | # the code is entered directly in the template | ||
| − | In the | + | In the first case the 'file' parameter is passed - the path from the skin to the file (JavaScript or CSS). For example: |
<pre> | <pre> | ||
| − | |||
{load_defer file="js/popup_open.js" type="js"} | {load_defer file="js/popup_open.js" type="js"} | ||
</pre> | </pre> | ||
| − | + | In the second case the 'direct_info' parameter is passed: it contains code, passed to the optimizer. For example: | |
| − | In the | ||
<pre> | <pre> | ||
| − | |||
| − | |||
{capture name=admin_preview_js} | {capture name=admin_preview_js} | ||
var txt_this_form_is_for_demo_purposes = '{$lng.txt_this_form_is_for_demo_purposes|wm_remove|escape:javascript}'; | var txt_this_form_is_for_demo_purposes = '{$lng.txt_this_form_is_for_demo_purposes|wm_remove|escape:javascript}'; | ||
| Line 36: | Line 32: | ||
</pre> | </pre> | ||
| − | The load_defer tag accumulates code of a certain type in a global stream for the optimizer. | + | The 'load_defer' tag accumulates code of a certain type in a global stream for the optimizer. |
| − | The load_defer_code tag registers in the optimizer all the accumulated code of a certain type, - регистрирует в оптимизаторе весь накопившийся код определенного типа, производит по месту в коде подключение точки входа оптимизатора с регистрированным идентификатором и очищает текущий глобальный поток для данного типа. | + | The 'load_defer_code' tag registers in the optimizer all the accumulated code of a certain type, - регистрирует в оптимизаторе весь накопившийся код определенного типа, производит по месту в коде подключение точки входа оптимизатора с регистрированным идентификатором и очищает текущий глобальный поток для данного типа. |
Скрипт - точка входа оптимизатора же в свою очередь - выбирает код для данного типа и данного идентификатора - проверяет его актуальность (если потребуется то перестраивает кеш кода) и отдает код как внешний файл (с соответствующими хидерами). | Скрипт - точка входа оптимизатора же в свою очередь - выбирает код для данного типа и данного идентификатора - проверяет его актуальность (если потребуется то перестраивает кеш кода) и отдает код как внешний файл (с соответствующими хидерами). | ||
| + | Regarding CSS, it is best when CSS is declared and called before the <body> tag (specifically between <head> and </head> tags). In this case stylesheets will not be rebuilt as DOM and styles (if they are specified later) are being loaded. It is also recommended that it is contained in a single file. | ||
| + | |||
| + | That is why {load_defer_code type="css"} tag is included into <tt>skin/common_files/customer/service_head.tpl</tt>, and all CSS is included earlier in <tt>skin/common_files/customer/service_css.tpl"}</tt>. For example: | ||
| + | |||
| + | skin/common_files/customer/service_head.tpl | ||
| + | <pre> | ||
| + | {include file="customer/service_css.tpl"} | ||
| + | ... skipped code ... | ||
| + | {load_defer_code type="css"} | ||
| + | </pre> | ||
| + | |||
| + | skin/common_files/customer/service_css.tpl | ||
| + | <pre> | ||
| + | {load_defer file="lib/cluetip/jquery.cluetip.css" type="css"} | ||
| + | </pre> | ||
| + | |||
| + | Regarding JavaScript, assembling and registering code for JavaScript is done in two stages: | ||
| − | + | * immediately before the <tt></body></tt> tag. | |
| + | * before the <tt><body></tt> tag (specifically between <head> and </head> tags) | ||
| − | + | In the first case {load_defer_code type="js"} tag is included into <tt>skin/common_files/customer/home.tpl</tt>, and all JS is included earlier in other files. For example: | |
| + | |||
| + | skin/common_files/customer/home.tpl | ||
| + | <pre> | ||
| + | {include file="customer/content.tpl"} | ||
| + | ... skipped code ... | ||
| + | {load_defer_code type="js"} | ||
| + | </pre> | ||
| + | |||
| + | skin/common_files/customer/content.tpl => | ||
| + | :skin/common_files/customer/right_bar.tpl => | ||
| + | ::skin/common_files/customer/menu_cart.tpl => | ||
| + | :::skin/common_files/customer/ajax.minicart.tpl | ||
| + | <pre> | ||
| + | {load_defer file="js/ajax.minicart.js" type="js"} | ||
| + | </pre> | ||
| + | |||
| + | In the second case, {load_defer_code type="js"} tag is included into <tt>skin/common_files/customer/service_head.tpl</tt>, and all JS is included earlier in <tt>skin/common_files/customer/service_css.tpl"}</tt>. For example: | ||
| + | |||
| + | skin/common_files/customer/service_js.tpl | ||
| + | <pre> | ||
| + | {load_defer file="js/common.js" type="js"} | ||
| + | </pre> | ||
| + | |||
| + | skin/common_files/customer/service_head.tpl | ||
| + | <pre> | ||
| + | {include file="customer/service_js.tpl"} | ||
| + | ... skipped code ... | ||
| + | {load_defer_code type="js"} | ||
| + | </pre> | ||
| + | It is best to place JavaScript code at the bottom - i.e. immediately before the <tt></body></tt> tag. In this case the code will be loaded and executed after the browser has built the DOM. | ||
| − | + | Much of X-Cart functionality does not take this into consideration and JavaScript code is placed before the <tt><body></tt> tag, so JavaScript code is being executed during the page loading. | |
| − | + | Also for the current functionality it is not always possible to use 'load_defer' tags and sometimes JavaScript code is included directly. | |
| − | <tt>queue</tt> parameter | + | '''<tt>queue</tt> parameter''' |
To improve flexibility and introduce code execution order, the parameter "queue" has been introduced for the load_defer tag. The parameter defaults to 0 and determines the order of execution of code within the resulting code which is given by the optimizer. | To improve flexibility and introduce code execution order, the parameter "queue" has been introduced for the load_defer tag. The parameter defaults to 0 and determines the order of execution of code within the resulting code which is given by the optimizer. | ||
Revision as of 16:54, 24 December 2010
To optimize working with CSS and JavaScript, smarty tags load_defer and load_defer_code have been added.
Both tags are used to organize assembling and displaying code for two data types: JavaScript and CSS.
- load_defer - code assembling tag
- load_defer_code - code displaying tag
The logic of tags depends on the store configuration variables: Use speed-up tool for CSS and Use speed-up tool for Javascript
If these variables are disabled, the tag load_defer displays the entered code immediately and the tag load_defer_code doesn't do anything.
The code is assembled in two variants:
- the code is contained in an external file
- the code is entered directly in the template
In the first case the 'file' parameter is passed - the path from the skin to the file (JavaScript or CSS). For example:
{load_defer file="js/popup_open.js" type="js"}
In the second case the 'direct_info' parameter is passed: it contains code, passed to the optimizer. For example:
{capture name=admin_preview_js}
var txt_this_form_is_for_demo_purposes = '{$lng.txt_this_form_is_for_demo_purposes|wm_remove|escape:javascript}';
var txt_this_link_is_for_demo_purposes = '{$lng.txt_this_link_is_for_demo_purposes|wm_remove|escape:javascript}';
{/capture}
{load_defer file="admin_preview_js" direct_info=$smarty.capture.admin_preview_js type="js"}
The 'load_defer' tag accumulates code of a certain type in a global stream for the optimizer.
The 'load_defer_code' tag registers in the optimizer all the accumulated code of a certain type, - регистрирует в оптимизаторе весь накопившийся код определенного типа, производит по месту в коде подключение точки входа оптимизатора с регистрированным идентификатором и очищает текущий глобальный поток для данного типа.
Скрипт - точка входа оптимизатора же в свою очередь - выбирает код для данного типа и данного идентификатора - проверяет его актуальность (если потребуется то перестраивает кеш кода) и отдает код как внешний файл (с соответствующими хидерами).
Regarding CSS, it is best when CSS is declared and called before the <body> tag (specifically between <head> and </head> tags). In this case stylesheets will not be rebuilt as DOM and styles (if they are specified later) are being loaded. It is also recommended that it is contained in a single file.
That is why {load_defer_code type="css"} tag is included into skin/common_files/customer/service_head.tpl, and all CSS is included earlier in skin/common_files/customer/service_css.tpl"}. For example:
skin/common_files/customer/service_head.tpl
{include file="customer/service_css.tpl"}
... skipped code ...
{load_defer_code type="css"}
skin/common_files/customer/service_css.tpl
{load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}
Regarding JavaScript, assembling and registering code for JavaScript is done in two stages:
- immediately before the </body> tag.
- before the <body> tag (specifically between <head> and </head> tags)
In the first case {load_defer_code type="js"} tag is included into skin/common_files/customer/home.tpl, and all JS is included earlier in other files. For example:
skin/common_files/customer/home.tpl
{include file="customer/content.tpl"}
... skipped code ...
{load_defer_code type="js"}
skin/common_files/customer/content.tpl =>
- skin/common_files/customer/right_bar.tpl =>
- skin/common_files/customer/menu_cart.tpl =>
- skin/common_files/customer/ajax.minicart.tpl
- skin/common_files/customer/menu_cart.tpl =>
{load_defer file="js/ajax.minicart.js" type="js"}
In the second case, {load_defer_code type="js"} tag is included into skin/common_files/customer/service_head.tpl, and all JS is included earlier in skin/common_files/customer/service_css.tpl"}. For example:
skin/common_files/customer/service_js.tpl
{load_defer file="js/common.js" type="js"}
skin/common_files/customer/service_head.tpl
{include file="customer/service_js.tpl"}
... skipped code ...
{load_defer_code type="js"}
It is best to place JavaScript code at the bottom - i.e. immediately before the </body> tag. In this case the code will be loaded and executed after the browser has built the DOM.
Much of X-Cart functionality does not take this into consideration and JavaScript code is placed before the <body> tag, so JavaScript code is being executed during the page loading.
Also for the current functionality it is not always possible to use 'load_defer' tags and sometimes JavaScript code is included directly.
queue parameter
To improve flexibility and introduce code execution order, the parameter "queue" has been introduced for the load_defer tag. The parameter defaults to 0 and determines the order of execution of code within the resulting code which is given by the optimizer.
for example, the code in skin/common_files/onload_js.tpl
{load_defer file="onload_js" direct_info=$smarty.capture.onload_js type="js" queue="1"}
