提高scroll性能

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

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

打开一个帧可以看见在scrol事件之后是一个函数回调,然很多分离的layout事件,每个分离的layout事件都有一个红色的小三角形,红色小三角形是强制同步layout( a 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函数触发。

让我们检查函数

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,性能好多了。

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

时间: 2024-09-27 18:05:18

提高scroll性能的相关文章

提高网页性能的九大技巧

第一条,DOM 的多个读操作(或多个写操作),应该放在一起.不要两个读操作之间,加入一个写操作. 第二条,如果某个样式是通过重排得到的,那么最好缓存结果.避免下一次用到的时候,浏览器又要重排. 第三条,不要一条条地改变样式,而要通过改变 class,或者 csstext 属性,一次性地改变样式. // bad var left = 10; var top = 10; el.style.left = left + "px"; el.style.top = top + "px&q

window.requestAnimationFrame 兼容性封装,调节重新渲染,提高网页性能

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijde

提高服务器性能和并发能力

从哲学上说,消除瓶颈是提高服务器性能和并发能力的唯一途径.如果你能够消除所有的瓶颈,你就能够最大的发挥硬件性能,让系统的性能和并发数到达最佳.采用多线程多核编程,使用事件驱动或异步消息机制,尽量减少阻塞和等待操作(如I/O阻塞.同步等待或计时/超时等).原理:1.多线程多核编程,消除cpu瓶颈.2.采用IOCP或epoll,利用状态监测和通知方式,消除网络I/O阻塞瓶颈.3.采用事件驱动或异步消息机制,可以消除不必要的等待操作.4.如果是Linux,可以采用AIO来消除磁盘I/O阻塞瓶颈.5.在

一些提高脚本性能的tips

把重复操作作为参数放在循环里面进行时非常低效的.比如: while i < len(str): print str[i] 每次循环迭代都要运行len()这个函数,所以可改为如下提高效率: length = len(str) while i < length: print str[i] 一些提高脚本性能的tips,布布扣,bubuko.com

【转】提高PHP性能的53个技巧

PHP技巧汇总:提高PHP性能的53个技巧用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的函数译注:PHP手册中说echo是语言结构,不是真正的函数,故把函数加上了双引号).1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍.2.$row[*id]*的速度是$row[id]的7倍.3.echo 比 print 快,并且使用echo的多重参

用CSS开启硬件加速来提高网站性能(转)

用CSS开启硬件加速来提高网站性能(转) 翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css. 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅. 在桌

使用 libevent 和 libev 提高网络应用性能

使用 libevent 和 libev 提高网络应用性能 Martin C. Brown, 作家, Freelance 简介: 构建现代的服务器应用程序需要以某种方法同时接收数百.数千甚至数万个事件,无论它们是内部请求还是网络连接,都要有效地处理它们的操作.有许多解决方案,但是 libevent 库和 libev 库能够大大提高性能和事件处理能力.在本文中,我们要讨论在 UNIX® 应用程序中使用和部署这些解决方案所用的基本结构和方法.libev 和 libevent 都可以在高性能应用程序中使

集群类型以及提高服务器性能的技术概述

一.集群类型: 1.负载均衡集群(LB集群--Load Balancing): 考虑提高服务器容量,是实现伸缩性扩展的主要技术. 当并发请求出现下面的情形时,就要考虑扩展: 1200请求:1s 1500请求:2s 1800请求:10s 扩展类型: Scale up:向上,需要更强大性能的服务器,缺点是:提高的上限是有限的,并且它的性价比较差. Scale out:向外,需要n多台主机. A.LB的软件解决方案: LVS(Linux Virtual Server). Haproxy. Nginx等

充分利用ASP.NET缓存提高站点性能

[简介] ASP.NET提供三种主要形式的缓存:页面级输出缓存.用户控件级输出缓存(或称为片段缓存)和缓存API.输出缓存和片段缓存的优点是非常易于实现,在大多数情况下,使用这两种缓存就足够了.而缓存API则提供了额外的灵活性(实际上是相当大的灵活性),可用于在应用程序的每一层利用缓存.本文全面介绍了这三种缓存技术在系统各层中的应用. 在ASP.NET提供的许多特性中,缓存支持无疑是我最欣赏的特性,我这样说当然是有充分理由的.相比ASP.NET的所有其他特性,缓存对应用程序的性能具有最大的潜在影