X-Cart:CSS and JavaScript optimization

From X-Cart 4 Classic
Revision as of 16:54, 24 December 2010 by Seyfin (talk | contribs)
Jump to: navigation, search

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:

  1. the code is contained in an external file
  2. 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
{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"}
Retrieved from "https://help.x-cart.com/index.php?title=X-Cart:CSS_and_JavaScript_optimization&oldid=5306"