Increase productivity HTML5 Application

Library: - removes the delay 300MS in mobile browsers - jQuery plugin to increase productivity jQuery.animate() For tests in 20 times faster than the native jQuery.animate().


    To reduce the number of DOM elements.
    To minimize transactions with DOM. Especially on change. To insert multiple items at a time.
    Убрать таблицы или установить table-layout:fixed;
    For анимированных элементов использовать position: absolute или fixed;
    Animation with left, right, width, height, and other cause reflow replace counterparts-webkit-translate

    To minimize reflow (the process of recursively descending branch of the DOM tree that computes the geometry of the elements and their position relative to the parent):
    Reflow cause:
     - Change  css properties: width, height, padding, margin, display, border-width,border, top, position, font-size, float, text-align, overflow-y, font-weight, overflow, left, font-family, line-height, vertical-align, right, clear, white-space, bottom, min-height.
    - For all DOM elements: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
    - For Frame, Image: height, width
    - ForRange: getBoundingClientRect(), getClientRects()
    - ForSVGLocatable: computeCTM(), getBBox()
    - ForSVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()
    - ForSVGUse: instanceRoot
    - Forwindow: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode() - The change of content in the insert house items, even typing input.
     - Calculation offsetWidth and offsetHeight (this is the same jQuery.offset(), position(), selector ":hidden" )

    To avoid changing the display (will cause layout). For example, to display the window, you can use the transform:
    -webkit-transform: translateX(-99999px);
    -webkit-transform: translateX(0px);