• 提高scroll性能


    在DevTools中开始渲染,向下滑动一点点滚动条,然后停止滚动。

    在结果中,注意frames总是在30ftps线上面,甚至都木有很接近69ftps线的(事实上帧执行的太缓慢以致于60ftps线在图上都不显示)

    Slow frames in Timeline recording

    打开一个帧可以看见在scrol事件之后是一个函数回调,然很多分离的layout事件,每个分离的layout事件都有一个红色的小三角形,红色小三角形是强制同步layout( a forced synchronous layout )执行的标记。

    Forced synchronous layout

    Note

    • 被强制的synchronous layout发生在当浏览器在一个脚本中运行layout的时候,强制重新计算样式,所以需要再次运行layout。这个典型的发生在循环内部,就像下面的代码展示的一样,在一系列div中循环且重新设置它们的宽度属性,强制synchronous layout。
    var newWidth = container.offsetWidth;
    divs.forEach(function(elem, index, arr) {
        elem.style.width = newWidth;
    })

    这里有很多css属性可以导致layout被触发;查看会触发layout的属性:CSS Triggers.

    查看layout事件的详细信息,你可以看见被强制的同步layout提醒是被app.js中的colorizeAndScaleStories函数触发。

    colorizeandscalestories.png

    让我们检查函数

    function colorizeAndScaleStories() {
      var storyElements = document.querySelectorAll('.story');
      // It does seem awfully broad to change all the
      // colors every time!
      for (var s = 0; s < storyElements.length; s++) {
        var story = storyElements[s];
        var score = story.querySelector('.story__score');
        var title = story.querySelector('.story__title');
        // Base the scale on the y position of the score.
        var height = main.offsetHeight;
        var mainPosition = main.getBoundingClientRect();
        var scoreLocation = score.getBoundingClientRect().top -
            document.body.getBoundingClientRect().top;
        var scale = Math.min(1, 1 - (0.05 * ((scoreLocation - 170) / height)));
        var opacity = Math.min(1, 1 - (0.5 * ((scoreLocation - 170) / height)));
        score.style.width = (scale * 40) + 'px';
        score.style.height = (scale * 40) + 'px';
        score.style.lineHeight = (scale * 40) + 'px';
        // Now figure out how wide it is and use that to saturate it.
        scoreLocation = score.getBoundingClientRect();
        var saturation = (100 * ((scoreLocation.width - 38) / 2));
        score.style.backgroundColor = 'hsl(42, ' + saturation + '%, 50%)';
        title.style.opacity = opacity;
      }
    }

    注意height,width和line-height被计算,所有的这些属性将会导致layout被触发。

    透明度属性也被设置了——但是透明度属性不会触发layout——这一行代码应用了新的样式,所以会触发样式的再次计算以及layout。

    上面两个技术用于函数的主循环中将会导致强迫的同步layout问题。

    虽然我们可以通过css样式修改来替代js,但是我们最好还是完全去除这些效果:最简单的就是——有时候最好的代码设置就是删除代码。

    让我们去除上面的所有代码再次查看,你可以看见60ftps,性能好多了。

    Much better Timeline recording

    额外的layout和强制的同步layout提醒不存在了,帧执行的速度也很棒! 

  • 相关阅读:
    cf1270D——交互,思维
    cf1270E —— 奇偶构造!+ 坐标系分类讨论旋转
    cf1207E——交互,思维
    cf1271D——经典 dp+贪心+图论
    cf1271E——数学找规律,二分套二分
    cf1272E——bfs反边图
    cf1272F——经典升维dp,好题!
    cf1276B——割点+深搜树
    cf1276C——单调性分析,思维
    cf1277D——思维贪心+字符串
  • 原文地址:https://www.cnblogs.com/RachelChen/p/5456205.html
Copyright © 2020-2023  润新知