Frequent Errors and Recommendations

Below we include a short list of frequent errors and recommendations on work with the library.

Do not use old libraries utils.js, ajax.js and chttprequest.js.
Avoid using BX.findChild and BX.findChildren. These functions are not harmful, but because of their incorrect use and large DOM the amount of iterates grows up to several thousands. The use of samplings by ID or by firstChild, parentNode, nextSibling, or previousSibling is recommended.
Avoid BX.loadScript and BX.loadCSS. Their disadvantages are:
- There is no JS and CSS compression
- loadScript re-executes the script. In the example below
```
BX.loadScript("script.js"); BX.loadScript("script.js");
```
  the first call will download and execute the script, and the second call will re-execute the script.
- loadScript loads scripts sequentially (the scripts connected through scrip tag are loaded in parallel), with delays of 50 ms between loads. If you load 5 files it will take you 200 ms at best.
- Loading CSS requires style recount
- When using loadScript developers tend to omit the timestamp after file name (my_script.js?12345678). It causes double load and the execution of the script. Also, if the file is changed, the cache is not reset at the client’s system.
Solution: use the methods AddHeadScript and SetAdditionalCSS.
One more thing that may seem evident. The browser guarantees the connection and execution of scripts in the same order as they go on a page. Scripts with the attributes async and defer do not fall under this rule, but Bitrix Framework contains no such scripts. There is no need to check an object for existence before use and much less load it through loadScript.
Inline CSS is not recommended (we mean link and style tags displayed in body).
Avoid making long inlinе scripts. It is better to store the main code in external files. Data from PHP shall be introduced using JSON. A page containing only constructor or Init call with JSON data transmission is a good solution.
Use setTimeout carefully. Pretty often there is no reason for timeouts. For example, if a code will not work in a browser, often the timeout is set to “approximately.” It is mainly caused by lack of understanding of the event model.
Infinite timers should be avoided completely. If they are really needed, consider the option of core_timer.js. It is a singleton for timers.
Use “lazy” initialization (load). Create objects, layouts, windows, etc. only when it is really necessary. For example, it makes no sense to create BX.PopupWindow in advance (it inserts new nodes in DOM) until it is really necessary (click on a link or a button). If the interface is rarely used and it is not critical to show or not to show the loading process, it is better to load it through ajax.
Use global variables as less as possible. Instead, use local variables with var.
Treat global handlers carefully (window, document, document.body). This code is called by each click, each movement of a mouse, and each scrolling change. Do not forget to unbind.
Do one appendChild instead of several in a cycle. Also, check out what the DocumentFragment is.
Merge and divide CSS/JS. Here, use your common sense. There are components that contain a lot of small scripts and CSS files. It is worth merging them into one file.
There are also reverse situations. For example, the module you are creating contains a large CSS file which includes almost all styles for its display. It is better than a lot of small ones (separately for table, tool bar, pop-ups, and filters). But a new task has appeared. Now a small block from your module must be added to the live feed. In this case you do not have to drag the entire CSS file from the module to the live feed, it is better to create a small separate file.
Create protection from double connection to the page, because the component may be connected to the page more than once.
In order to measure performance, run Chrome and Internet Explorer profilers.
Check your code in PhpStorm or using similar tools.

Bitrix Framework