API tools faq
paste
Advertisement
Guest User

Reflow performance issue

a guest
Nov 19th, 2017
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  <title>Slow perf</title>
  6.  <meta charset="utf-8" />
  7.  <script>
  8.  
  9.   function Format() {
  10.    const maxHeight = 200;
  11.    var elemToSplit = document.getElementById("div-to-split");
  12.    console.time("split");
  13.  
  14.    while (elemToSplit.children.length > 0) {
  15.  
  16.     var newElem = elemToSplit.cloneNode(false);
  17.     document.body.appendChild(newElem);
  18.  
  19.     while (newElem.offsetHeight <= maxHeight && elemToSplit.children.length > 0) {
  20.      newElem.appendChild(elemToSplit.children[0]);
  21.     }
  22.    }
  23.  
  24.    console.timeEnd("split");
  25.  
  26.    // Chrome 64 : 240 ms
  27.    // FF 56         : 340 ms
  28.    // FF 59         : 380 ms
  29.   }
  30.  
  31.   window.onload = function () {
  32.    Format();
  33.   };
  34.  
  35.  </script>
  36. </head>
  37.  
  38. <body>
  39.  <div id="div-to-split">
  40.    <p>Text</p>
  41.    <p>Text</p>
  42.    <p>Text</p>
  43.    <p>Text</p>
  44.    <p>Text</p>
  45.    <p>Text</p>
  46.    <p>Text</p>
  47.    <p>Text</p>
  48.    <p>Text</p>
  49.    <p>Text</p>
  50.    <p>Text</p>
  51.    <p>Text</p>
  52.    <p>Text</p>
  53.    <p>Text</p>
  54.    <p>Text</p>
  55.    <p>Text</p>
  56.    <p>Text</p>
  57.    <p>Text</p>
  58.    <p>Text</p>
  59.    <p>Text</p>
  60.    <p>Text</p>
  61.    <p>Text</p>
  62.    <p>Text</p>
  63.    <p>Text</p>
  64.    <p>Text</p>
  65.    <p>Text</p>
  66.    <p>Text</p>
  67.    <p>Text</p>
  68.    <p>Text</p>
  69.    <p>Text</p>
  70.    <p>Text</p>
  71.    <p>Text</p>
  72.    <p>Text</p>
  73.    <p>Text</p>
  74.    <p>Text</p>
  75.    <p>Text</p>
  76.    <p>Text</p>
  77.    <p>Text</p>
  78.    <p>Text</p>
  79.    <p>Text</p>
  80.    <p>Text</p>
  81.    <p>Text</p>
  82.    <p>Text</p>
  83.    <p>Text</p>
  84.    <p>Text</p>
  85.    <p>Text</p>
  86.    <p>Text</p>
  87.    <p>Text</p>
  88.    <p>Text</p>
  89.    <p>Text</p>
  90.    <p>Text</p>
  91.    <p>Text</p>
  92.    <p>Text</p>
  93.    <p>Text</p>
  94.    <p>Text</p>
  95.    <p>Text</p>
  96.    <p>Text</p>
  97.    <p>Text</p>
  98.    <p>Text</p>
  99.    <p>Text</p>
  100.    <p>Text</p>
  101.    <p>Text</p>
  102.    <p>Text</p>
  103.    <p>Text</p>
  104.    <p>Text</p>
  105.    <p>Text</p>
  106.    <p>Text</p>
  107.    <p>Text</p>
  108.    <p>Text</p>
  109.    <p>Text</p>
  110.    <p>Text</p>
  111.    <p>Text</p>
  112.    <p>Text</p>
  113.    <p>Text</p>
  114.    <p>Text</p>
  115.    <p>Text</p>
  116.    <p>Text</p>
  117.    <p>Text</p>
  118.    <p>Text</p>
  119.    <p>Text</p>
  120.    <p>Text</p>
  121.    <p>Text</p>
  122.    <p>Text</p>
  123.    <p>Text</p>
  124.    <p>Text</p>
  125.    <p>Text</p>
  126.    <p>Text</p>
  127.    <p>Text</p>
  128.    <p>Text</p>
  129.    <p>Text</p>
  130.    <p>Text</p>
  131.    <p>Text</p>
  132.    <p>Text</p>
  133.    <p>Text</p>
  134.    <p>Text</p>
  135.    <p>Text</p>
  136.    <p>Text</p>
  137.    <p>Text</p>
  138.    <p>Text</p>
  139.    <p>Text</p>
  140.    <p>Text</p>
  141.    <p>Text</p>
  142.    <p>Text</p>
  143.    <p>Text</p>
  144.    <p>Text</p>
  145.    <p>Text</p>
  146.    <p>Text</p>
  147.    <p>Text</p>
  148.    <p>Text</p>
  149.    <p>Text</p>
  150.    <p>Text</p>
  151.    <p>Text</p>
  152.    <p>Text</p>
  153.    <p>Text</p>
  154.    <p>Text</p>
  155.    <p>Text</p>
  156.    <p>Text</p>
  157.    <p>Text</p>
  158.    <p>Text</p>
  159.    <p>Text</p>
  160.    <p>Text</p>
  161.    <p>Text</p>
  162.    <p>Text</p>
  163.    <p>Text</p>
  164.    <p>Text</p>
  165.    <p>Text</p>
  166.    <p>Text</p>
  167.    <p>Text</p>
  168.    <p>Text</p>
  169.    <p>Text</p>
  170.    <p>Text</p>
  171.    <p>Text</p>
  172.    <p>Text</p>
  173.    <p>Text</p>
  174.    <p>Text</p>
  175.    <p>Text</p>
  176.    <p>Text</p>
  177.    <p>Text</p>
  178.    <p>Text</p>
  179.    <p>Text</p>
  180.    <p>Text</p>
  181.    <p>Text</p>
  182.    <p>Text</p>
  183.    <p>Text</p>
  184.    <p>Text</p>
  185.    <p>Text</p>
  186.    <p>Text</p>
  187.    <p>Text</p>
  188.    <p>Text</p>
  189.    <p>Text</p>
  190.    <p>Text</p>
  191.    <p>Text</p>
  192.    <p>Text</p>
  193.    <p>Text</p>
  194.    <p>Text</p>
  195.    <p>Text</p>
  196.    <p>Text</p>
  197.    <p>Text</p>
  198.    <p>Text</p>
  199.    <p>Text</p>
  200.    <p>Text</p>
  201.    <p>Text</p>
  202.    <p>Text</p>
  203.    <p>Text</p>
  204.    <p>Text</p>
  205.    <p>Text</p>
  206.    <p>Text</p>
  207.    <p>Text</p>
  208.    <p>Text</p>
  209.    <p>Text</p>
  210.    <p>Text</p>
  211.    <p>Text</p>
  212.    <p>Text</p>
  213.    <p>Text</p>
  214.    <p>Text</p>
  215.    <p>Text</p>
  216.    <p>Text</p>
  217.    <p>Text</p>
  218.    <p>Text</p>
  219.    <p>Text</p>
  220.    <p>Text</p>
  221.    <p>Text</p>
  222.    <p>Text</p>
  223.    <p>Text</p>
  224.    <p>Text</p>
  225.    <p>Text</p>
  226.    <p>Text</p>
  227.    <p>Text</p>
  228.    <p>Text</p>
  229.    <p>Text</p>
  230.    <p>Text</p>
  231.    <p>Text</p>
  232.    <p>Text</p>
  233.    <p>Text</p>
  234.    <p>Text</p>
  235.    <p>Text</p>
  236.    <p>Text</p>
  237.    <p>Text</p>
  238.    <p>Text</p>
  239.    <p>Text</p>
  240.    <p>Text</p>
  241.    <p>Text</p>
  242.    <p>Text</p>
  243.    <p>Text</p>
  244.    <p>Text</p>
  245.    <p>Text</p>
  246.    <p>Text</p>
  247.    <p>Text</p>
  248.    <p>Text</p>
  249.    <p>Text</p>
  250.    <p>Text</p>
  251.    <p>Text</p>
  252.    <p>Text</p>
  253.    <p>Text</p>
  254.    <p>Text</p>
  255.    <p>Text</p>
  256.    <p>Text</p>
  257.    <p>Text</p>
  258.    <p>Text</p>
  259.    <p>Text</p>
  260.    <p>Text</p>
  261.    <p>Text</p>
  262.    <p>Text</p>
  263.    <p>Text</p>
  264.    <p>Text</p>
  265.    <p>Text</p>
  266.    <p>Text</p>
  267.    <p>Text</p>
  268.    <p>Text</p>
  269.    <p>Text</p>
  270.    <p>Text</p>
  271.    <p>Text</p>
  272.    <p>Text</p>
  273.    <p>Text</p>
  274.    <p>Text</p>
  275.    <p>Text</p>
  276.    <p>Text</p>
  277.    <p>Text</p>
  278.    <p>Text</p>
  279.    <p>Text</p>
  280.    <p>Text</p>
  281.    <p>Text</p>
  282.    <p>Text</p>
  283.    <p>Text</p>
  284.    <p>Text</p>
  285.    <p>Text</p>
  286.    <p>Text</p>
  287.    <p>Text</p>
  288.    <p>Text</p>
  289.    <p>Text</p>
  290.    <p>Text</p>
  291.    <p>Text</p>
  292.    <p>Text</p>
  293.    <p>Text</p>
  294.    <p>Text</p>
  295.    <p>Text</p>
  296.    <p>Text</p>
  297.    <p>Text</p>
  298.    <p>Text</p>
  299.    <p>Text</p>
  300.    <p>Text</p>
  301.    <p>Text</p>
  302.    <p>Text</p>
  303.    <p>Text</p>
  304.    <p>Text</p>
  305.    <p>Text</p>
  306.    <p>Text</p>
  307.    <p>Text</p>
  308.    <p>Text</p>
  309.    <p>Text</p>
  310.    <p>Text</p>
  311.    <p>Text</p>
  312.    <p>Text</p>
  313.    <p>Text</p>
  314.    <p>Text</p>
  315.    <p>Text</p>
  316.    <p>Text</p>
  317.    <p>Text</p>
  318.    <p>Text</p>
  319.    <p>Text</p>
  320.    <p>Text</p>
  321.    <p>Text</p>
  322.    <p>Text</p>
  323.    <p>Text</p>
  324.    <p>Text</p>
  325.    <p>Text</p>
  326.    <p>Text</p>
  327.    <p>Text</p>
  328.    <p>Text</p>
  329.    <p>Text</p>
  330.    <p>Text</p>
  331.    <p>Text</p>
  332.    <p>Text</p>
  333.    <p>Text</p>
  334.    <p>Text</p>
  335.    <p>Text</p>
  336.    <p>Text</p>
  337.    <p>Text</p>
  338.    <p>Text</p>
  339.    <p>Text</p>
  340.    <p>Text</p>
  341.    <p>Text</p>
  342.    <p>Text</p>
  343.    <p>Text</p>
  344.    <p>Text</p>
  345.    <p>Text</p>
  346.    <p>Text</p>
  347.    <p>Text</p>
  348.    <p>Text</p>
  349.    <p>Text</p>
  350.    <p>Text</p>
  351.    <p>Text</p>
  352.    <p>Text</p>
  353.    <p>Text</p>
  354.    <p>Text</p>
  355.    <p>Text</p>
  356.    <p>Text</p>
  357.    <p>Text</p>
  358.    <p>Text</p>
  359.    <p>Text</p>
  360.    <p>Text</p>
  361.    <p>Text</p>
  362.    <p>Text</p>
  363.    <p>Text</p>
  364.    <p>Text</p>
  365.    <p>Text</p>
  366.    <p>Text</p>
  367.    <p>Text</p>
  368.    <p>Text</p>
  369.    <p>Text</p>
  370.    <p>Text</p>
  371.    <p>Text</p>
  372.    <p>Text</p>
  373.    <p>Text</p>
  374.    <p>Text</p>
  375.    <p>Text</p>
  376.    <p>Text</p>
  377.    <p>Text</p>
  378.    <p>Text</p>
  379.    <p>Text</p>
  380.    <p>Text</p>
  381.    <p>Text</p>
  382.    <p>Text</p>
  383.    <p>Text</p>
  384.    <p>Text</p>
  385.    <p>Text</p>
  386.    <p>Text</p>
  387.    <p>Text</p>
  388.    <p>Text</p>
  389.    <p>Text</p>
  390.    <p>Text</p>
  391.    <p>Text</p>
  392.    <p>Text</p>
  393.    <p>Text</p>
  394.    <p>Text</p>
  395.    <p>Text</p>
  396.    <p>Text</p>
  397.    <p>Text</p>
  398.    <p>Text</p>
  399.    <p>Text</p>
  400.    <p>Text</p>
  401.    <p>Text</p>
  402.    <p>Text</p>
  403.    <p>Text</p>
  404.    <p>Text</p>
  405.    <p>Text</p>
  406.    <p>Text</p>
  407.    <p>Text</p>
  408.    <p>Text</p>
  409.    <p>Text</p>
  410.    <p>Text</p>
  411.    <p>Text</p>
  412.    <p>Text</p>
  413.    <p>Text</p>
  414.    <p>Text</p>
  415.    <p>Text</p>
  416.    <p>Text</p>
  417.    <p>Text</p>
  418.    <p>Text</p>
  419.    <p>Text</p>
  420.    <p>Text</p>
  421.    <p>Text</p>
  422.    <p>Text</p>
  423.    <p>Text</p>
  424.    <p>Text</p>
  425.    <p>Text</p>
  426.    <p>Text</p>
  427.    <p>Text</p>
  428.    <p>Text</p>
  429.    <p>Text</p>
  430.    <p>Text</p>
  431.    <p>Text</p>
  432.    <p>Text</p>
  433.    <p>Text</p>
  434.    <p>Text</p>
  435.    <p>Text</p>
  436.    <p>Text</p>
  437.    <p>Text</p>
  438.    <p>Text</p>
  439.    <p>Text</p>
  440.    <p>Text</p>
  441.    <p>Text</p>
  442.    <p>Text</p>
  443.    <p>Text</p>
  444.    <p>Text</p>
  445.    <p>Text</p>
  446.    <p>Text</p>
  447.    <p>Text</p>
  448.    <p>Text</p>
  449.    <p>Text</p>
  450.    <p>Text</p>
  451.    <p>Text</p>
  452.    <p>Text</p>
  453.    <p>Text</p>
  454.    <p>Text</p>
  455.    <p>Text</p>
  456.    <p>Text</p>
  457.    <p>Text</p>
  458.    <p>Text</p>
  459.    <p>Text</p>
  460.    <p>Text</p>
  461.    <p>Text</p>
  462.    <p>Text</p>
  463.    <p>Text</p>
  464.    <p>Text</p>
  465.    <p>Text</p>
  466.    <p>Text</p>
  467.    <p>Text</p>
  468.    <p>Text</p>
  469.    <p>Text</p>
  470.    <p>Text</p>
  471.    <p>Text</p>
  472.    <p>Text</p>
  473.    <p>Text</p>
  474.    <p>Text</p>
  475.    <p>Text</p>
  476.    <p>Text</p>
  477.    <p>Text</p>
  478.    <p>Text</p>
  479.    <p>Text</p>
  480.    <p>Text</p>
  481.    <p>Text</p>
  482.    <p>Text</p>
  483.    <p>Text</p>
  484.    <p>Text</p>
  485.    <p>Text</p>
  486.    <p>Text</p>
  487.    <p>Text</p>
  488.    <p>Text</p>
  489.    <p>Text</p>
  490.    <p>Text</p>
  491.    <p>Text</p>
  492.    <p>Text</p>
  493.    <p>Text</p>
  494.    <p>Text</p>
  495.    <p>Text</p>
  496.    <p>Text</p>
  497.    <p>Text</p>
  498.    <p>Text</p>
  499.    <p>Text</p>
  500.    <p>Text</p>
  501.    <p>Text</p>
  502.    <p>Text</p>
  503.    <p>Text</p>
  504.    <p>Text</p>
  505.    <p>Text</p>
  506.    <p>Text</p>
  507.    <p>Text</p>
  508.    <p>Text</p>
  509.    <p>Text</p>
  510.    <p>Text</p>
  511.    <p>Text</p>
  512.    <p>Text</p>
  513.    <p>Text</p>
  514.    <p>Text</p>
  515.    <p>Text</p>
  516.    <p>Text</p>
  517.    <p>Text</p>
  518.    <p>Text</p>
  519.    <p>Text</p>
  520.    <p>Text</p>
  521.    <p>Text</p>
  522.    <p>Text</p>
  523.    <p>Text</p>
  524.    <p>Text</p>
  525.    <p>Text</p>
  526.    <p>Text</p>
  527.    <p>Text</p>
  528.    <p>Text</p>
  529.    <p>Text</p>
  530.    <p>Text</p>
  531.    <p>Text</p>
  532.    <p>Text</p>
  533.    <p>Text</p>
  534.    <p>Text</p>
  535.    <p>Text</p>
  536.    <p>Text</p>
  537.    <p>Text</p>
  538.    <p>Text</p>
  539.    <p>Text</p>
  540.    <p>Text</p>
  541.    <p>Text</p>
  542.    <p>Text</p>
  543.    <p>Text</p>
  544.    <p>Text</p>
  545.    <p>Text</p>
  546.    <p>Text</p>
  547.    <p>Text</p>
  548.    <p>Text</p>
  549.    <p>Text</p>
  550.    <p>Text</p>
  551.    <p>Text</p>
  552.    <p>Text</p>
  553.    <p>Text</p>
  554.    <p>Text</p>
  555.    <p>Text</p>
  556.    <p>Text</p>
  557.    <p>Text</p>
  558.    <p>Text</p>
  559.    <p>Text</p>
  560.    <p>Text</p>
  561.    <p>Text</p>
  562.    <p>Text</p>
  563.    <p>Text</p>
  564.    <p>Text</p>
  565.    <p>Text</p>
  566.    <p>Text</p>
  567.    <p>Text</p>
  568.    <p>Text</p>
  569.    <p>Text</p>
  570.    <p>Text</p>
  571.    <p>Text</p>
  572.    <p>Text</p>
  573.    <p>Text</p>
  574.    <p>Text</p>
  575.    <p>Text</p>
  576.    <p>Text</p>
  577.    <p>Text</p>
  578.    <p>Text</p>
  579.    <p>Text</p>
  580.    <p>Text</p>
  581.    <p>Text</p>
  582.    <p>Text</p>
  583.    <p>Text</p>
  584.    <p>Text</p>
  585.    <p>Text</p>
  586.    <p>Text</p>
  587.    <p>Text</p>
  588.    <p>Text</p>
  589.    <p>Text</p>
  590.    <p>Text</p>
  591.    <p>Text</p>
  592.    <p>Text</p>
  593.    <p>Text</p>
  594.    <p>Text</p>
  595.    <p>Text</p>
  596.    <p>Text</p>
  597.    <p>Text</p>
  598.    <p>Text</p>
  599.    <p>Text</p>
  600.    <p>Text</p>
  601.    <p>Text</p>
  602.    <p>Text</p>
  603.    <p>Text</p>
  604.    <p>Text</p>
  605.    <p>Text</p>
  606.    <p>Text</p>
  607.    <p>Text</p>
  608.    <p>Text</p>
  609.    <p>Text</p>
  610.    <p>Text</p>
  611.    <p>Text</p>
  612.    <p>Text</p>
  613.    <p>Text</p>
  614.    <p>Text</p>
  615.    <p>Text</p>
  616.    <p>Text</p>
  617.    <p>Text</p>
  618.    <p>Text</p>
  619.    <p>Text</p>
  620.    <p>Text</p>
  621.    <p>Text</p>
  622.    <p>Text</p>
  623.    <p>Text</p>
  624.    <p>Text</p>
  625.    <p>Text</p>
  626.    <p>Text</p>
  627.    <p>Text</p>
  628.    <p>Text</p>
  629.    <p>Text</p>
  630.    <p>Text</p>
  631.    <p>Text</p>
  632.    <p>Text</p>
  633.    <p>Text</p>
  634.    <p>Text</p>
  635.    <p>Text</p>
  636.    <p>Text</p>
  637.    <p>Text</p>
  638.    <p>Text</p>
  639.    <p>Text</p>
  640.    <p>Text</p>
  641.    <p>Text</p>
  642.    <p>Text</p>
  643.    <p>Text</p>
  644.    <p>Text</p>
  645.    <p>Text</p>
  646.    <p>Text</p>
  647.    <p>Text</p>
  648.    <p>Text</p>
  649.    <p>Text</p>
  650.    <p>Text</p>
  651.    <p>Text</p>
  652.    <p>Text</p>
  653.    <p>Text</p>
  654.    <p>Text</p>
  655.    <p>Text</p>
  656.    <p>Text</p>
  657.    <p>Text</p>
  658.    <p>Text</p>
  659.    <p>Text</p>
  660.    <p>Text</p>
  661.    <p>Text</p>
  662.    <p>Text</p>
  663.    <p>Text</p>
  664.    <p>Text</p>
  665.    <p>Text</p>
  666.    <p>Text</p>
  667.    <p>Text</p>
  668.    <p>Text</p>
  669.    <p>Text</p>
  670.    <p>Text</p>
  671.    <p>Text</p>
  672.    <p>Text</p>
  673.    <p>Text</p>
  674.    <p>Text</p>
  675.    <p>Text</p>
  676.    <p>Text</p>
  677.    <p>Text</p>
  678.    <p>Text</p>
  679.    <p>Text</p>
  680.    <p>Text</p>
  681.    <p>Text</p>
  682.    <p>Text</p>
  683.    <p>Text</p>
  684.    <p>Text</p>
  685.    <p>Text</p>
  686.    <p>Text</p>
  687.    <p>Text</p>
  688.  </div>
  689. </body>
  690.  
  691. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!