zoukankan      html  css  js  c++  java
  • How (not) to trigger a layout in WebKit

    As most web developers are aware, a significant amount of a script's running time may be spent performing DOM operations triggered by the script rather than executing the JS byte code itself. One such potentially costly operation is layout (aka reflow) -- the process of constructing a render tree from a DOM tree. The larger and more complex the DOM, the more expensive this operation may be.

    An important technique for keeping a page snappy is to batch methods that manipulate the DOM separately from those that query the state. For example:

    // Suboptimal, causes layout twice.
    var newWidth = aDiv.offsetWidth + 10; // Read
    aDiv.style.width = newWidth + 'px'; // Write
    var newHeight = aDiv.offsetHeight + 10; // Read
    aDiv.style.height = newHeight + 'px'; // Write

    // Better, only one layout.
    var newWidth = aDiv.offsetWidth + 10; // Read
    var newHeight = aDiv.offsetHeight + 10; // Read
    aDiv.style.width = newWidth + 'px'; // Write
    aDiv.style.height = newHeight + 'px'; // Write

    Stoyan Stefanov's tome on repaint, relayout and restyle provides an excellent explanation of the topic.

    This often leaves developers asking the question: What triggers layout? Last week Dimitri Glazkov answered this question with this codesearch link. Trying to understand it better myself, I went through and translated it into a list of properties and methods. Here they are:

    Element

    clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

    Frame, Image

    height, width

    Range

    getBoundingClientRect(), getClientRects()

    SVGLocatable

    computeCTM(), getBBox()

    SVGTextContent

    getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

    SVGUse

    instanceRoot

    window

    getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

    This list is almost certainly not complete, but it is a good start. The best way to check for over-layout is to watch for the purple layout bars in the Timeline panel of Chrome or Safari's Inspector.

    来源:http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

  • 相关阅读:
    python手写神经网络实现识别手写数字
    记录:tensoflow改错TypeError: Cannot interpret feed_dict key as Tensor: Can not convert a float into a Te
    6 TensorFlow实现cnn识别手写数字
    记录:python读取excel文件
    matlab手写神经网络实现识别手写数字
    把当前文件夹的xlsx或xls文件合并到一个excel文件中的不同sheet中
    Mac卸载go
    vue中axios的post和get请求示例
    vue配置请求拦截器和响应拦截器
    vue中main.js配置后端请求地址
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/5274868.html
Copyright © 2011-2022 走看看