您想要连接的目标网站所在的服务器带宽不足或负载过大。处理办法很简单，请换个时间段再上或者换个目标网站。
众所周知，PING不稳定很让人蛋疼。那如何提高和稳定呢？
首先和大家分析不稳定的因素所在
一、网络自身问题
您想要连接的目标网站所在的服务器带宽不足或负载过大。处理办法很简单，请换个时间段再上或者换个目标网站。
二、网线问题导致网速变慢
我们知道，双绞线是由四对线按严格的规定紧密地绞和在一起的，用来减少串扰和背景噪音的影响。同时，在T568A标准和T568B标准中仅使用了双绞线的 1、2和3、6四条线，其中，1、2用于发送，3、6用于接收，而且1、2必须来自一个绕对，3、6必须来自一个绕对。只有这样，才能最大限度地避免串扰，保证数据传输。本人在实践中发现不按正确标准（T586A、T586B）制作的网线，存在很大的隐患。表现为：一种情况是刚开始使用时网速就很慢；另一种情况则是开始网速正常，但过了一段时间后，网速变慢。后一种情况在台式电脑上表现非常明显，但用笔记本电脑检查时网速却表现为正常。对于这一问题本人经多年实践发现，因不按正确标准制作的网线引起的网速变慢还同时与网卡的质量有关。一般台式计算机的网卡的性能不如笔记本电脑的，因此，在用交换法排除故障时，使用笔记本电脑检测网速正常并不能排除网线不按标准制作这一问题的存在。我们现在要求一律按T586A、T586B标准来压制网线，在检测故障时不能一律用笔记本电脑来代替台式电脑。
三、网络中存在回路导致网速变慢
当网络涉及的节点数不是很多、结构不是很复杂时，这种现象一般很少发生。但在一些比较复杂的网络中，经常有多余的备用线路，如无意间连上时会构成回路。比如网线从网络中心接到计算机一室，再从计算机一室接到计算机二室。同时从网络中心又有一条备用线路直接连到计算机二室，若这几条线同时接通，则构成回路，数据包会不断发送和校验数据，从而影响整体网速。这种情况查找比较困难。为避免这种情况发生，要求我们在铺设网线时一定养成良好的习惯：网线打上明显的标签，有备用线路的地方要做好记载。当怀疑有此类故障发生时，一般采用分区分段逐步排除的方法。
四、网络设备硬件故障引起的广播风暴而导致网速变慢
作为发现未知设备的主要手段，广播在网络中起着非常重要的作用。然而，随着网络中计算机数量的增多，广播包的数量会急剧增加。当广播包的数量达到30%时，网络的传输效率将会明显下降。当网卡或网络设备损坏后，会不停地发送广播包，从而导致广播风暴，使网络通信陷于瘫痪。因此，当网络设备硬件有故障时也会引起网速变慢。当怀疑有此类故障时，首先可采用置换法替换集线器或交换机来排除集线设备故障。如果这些设备没有故障，关掉集线器或交换机的电源后，DOS下用 “Ping”命令对所涉及计算机逐一测试，找到有故障网卡的计算机，更换新的网卡即可恢复网速正常。
五、网络中某个端口形成了瓶颈导致网速变慢
实际上，路由器广域网端口和局域网端口、交换机端口、集线器端口和服务器网卡等都可能成为网络瓶颈。当网速变慢时，我们可在网络使用高峰时段，利用网管软件查看路由器、交换机、服务器端口的数据流量；也可用 Netstat命令统计各个端口的数据流量。据此确认网络数据流通瓶颈的位置，设法增加其带宽。具体方法很多，如更换服务器网卡为100M或1000M、安装多个网卡、划分多个VLAN、改变路由器配置来增加带宽等，都可以有效地缓解网络瓶颈，可以最大限度地提高数据传输速度。
六、蠕虫病毒的影响导致网速变慢
通过E-mail散发的蠕虫病毒对网络速度的影响越来越严重，危害性极大。这种病毒导致被感染的用户只要一上网就不停地往外发邮件，病毒选择用户个人电脑中的随机文档附加在用户机子的通讯簿的随机地址上进行邮件发送。成百上千的这种垃圾邮件有的排着队往外发送，有的又成批成批地被退回来堆在服务器上。造成个别骨干互联网出现明显拥塞，网速明显变慢，使局域网近于瘫痪。因此，我们必须及时升级所用杀毒软件；计算机也要及时升级、安装系统补丁程序，同时卸载不必要的服务、关闭不必要的端口，以提高系统的安全性和可靠性。
七、防火墙的过多使用
防火墙的过多使用也可导致网速变慢，处理办法不必多说，卸载下不必要的防火墙只保留一个功能强大的足以。
八、系统资源不足
您可能加载了太多的运用程序在后台运行，请合理的加载软件或删除无用的程序及文件，将资源空出，以达到提高网速的目的。
修改方法如下:
开始-运行打 regedit 到HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesTcpipParameters
名为 GlobalMaxTcpWindowSize 数值改为 360000 选十进制
名为 TcpWindowSize 数值改为 360000 选十进制
名为 Tcp1323Opts 数值改为 1 选十进制
名为 DefaultTTL 数值改为 64 选十进制
名为 EnablePMTUDiscovery 数值改为 1 选十进制
名为 EnablePMTUBHDetect 数值改为 0 选十进制
名为 SackOpts 数值改为 1 选十进制
名为 TcpMaxDupAcks 数值改为 2 选十进制
HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesTcpipParametersInterfaces
interface (这个 interface 要自己新增 指住Interfaces新增机码名为interface)
名为 MTU 数值改为 8000 (if use 10M)
1500 (if use 1.5M)
2000 (if use 3M) 选十进制
HKEY_USERSDEFAULTSoftwareMicrosoftWindowsCurrentVersionInternetSettings
名为 MaxConnectionsPerServer 数值改为
名为 MaxConnectionsPer1_0Server 数值改为
Win XP让宽频速度提升50倍
Win XP的网路传输相关设定并没有完全发挥宽频上网效能的极限。
(修改前和后到以下测试区进行测试速度并记下所得的数据就可知道你的宽频速度快了多小)
本地测试区
外地测试区
1．.开始→执行 ( 输入 REGEDIT 后按确定 )
2．出现登陆编辑程式视窗，点选左边窗格的：
HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesTcpip
3．点选左边窗格里 Tcpip 后按滑鼠右键，选择新增 DWORD。
4．将 DWORD 的名称设定为 DefaultTTL 后选择修改：
设定为十六进位，数值设为 80。
5．再点选左边窗格里 Tcpip 后按滑鼠右键，选择新增 DWORD。
6．将 DWORD 的名称设定为 GlobalMaxTcpWindowSize 后选择修改：设定为十六进位，数值设为 7FFF。
完成后重新动电脑和到测试区测试你的电脑～
未改前测试就4327.8 Kbps 522.7 K bytes/sec
修改之后测试就 10853.7 Kbps 1269.9 K bytes/sec
专业版Windows XP
专业版的 Windows XP默认保留了20%的带宽，其实这对于我们个人用户来说是没有多大的作用。与其闲着还不如充分地利用起来，方法如下：在“开始→运行”中输入 gpedit.msc，打开组策略编辑器。找到“计算机配置→管理模板→网络→QoS数据包调度程序”，选择右边的“限制可保留带宽”，选择“属性”打开限制可保留带宽属性对话框，选择“禁用”即可。经过这样重新设置就可以释放保留的20%的带宽了。
第二种修改方法：
在Windows菜单下打开“运行”，键入regedit，开启注册表。找到
HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesTcpipParametersInterfaces
下面会列出许多NIC界面（名字类似{7DBA6DCA-FFE8-D2B57AE8383}），找到你连入互联网的那个界面（点开每一个界面，直到你找到你电脑的IP地址，就是那个）。在右边的窗口点鼠标右键，添加一个新的DWORD值，命名为TcpAckFrequency，然后右键点击这个字串，选择“改变”，把数值设为1。
如果之后你发现其他TCP程序受到了影响，可以把这个数值改回2（默认值）。这个字串可以告诉Windows系统在每次发送ACK之前要等待多少个TCP包。如果数值为1，那每次Windows收到TCP包后都会发送一个ACK。
2 - TCPNoDelay
在Windows菜单下打开“运行”，键入regedit，开启注册表。
HKEY_LOCAL_MACHINESOFTWAREMicrosoftMSMQParameters
在右边窗口点右键，添加新的DWORD值，命名为TCPNoDelay，然后右键点击它，选择“改变”，把值设为1。
有些玩家，特别是用win7的玩家（我就是win7 32位）会找不到注册表下列项：
HKEY_LOCAL_MACHINESOFTWAREMicrosoftMSMQParamet ers
这是因为Windows7默认没有开启MSMQ服务器所造成的。
不过开启过程并不麻烦：
打开控制面板所有控制面板项程序和功能。
左上角点击打开或关闭WINDOWS功能。
Microsoft Message Queue(MSMQ)服务器选项即可。
点击“完成”，关掉注册表编辑器，重启电脑。
以上操作时针对1.51版本以前的现在1.51各位杀星是否感觉速度比以前慢了不少那么我们需要做的是增加以下操作即可：
打开注册表编辑器（开始-运行-输入REGEDIT），在其中 找到“HKEY_LOCAL_MACHINE＼System＼CurrenControlSet＼Services＼Tcpip＼Parameters”子键，在右边键值区中，找到或新建一个名为 “GlobalmaxTcp WindowSize”的DWORD键值项，将其数据值数据设为“256960”(十进制)，关闭注册表编 辑器，重新启动电脑即可。 感觉一下是不是速度比以前快多了？ 这个更改的原理是：通常情况下， TCP/IP默认的数据传输单元接受缓冲区的大小为576字节，要是将这个缓冲区的大小设置得比较大的话，一旦某个TCP/IP分组数据发生错误时，那么整个数据缓冲区中的所有分组内容，都将被丢失并且进行重新传送；显然不断地重新进行传输，会大大影响ADSL传输数据的效率。为此，设置合适缓冲区大小，确保ADSL传输数据的效率始终很高，将会对ADSL传输速度有着直接的影响！
必须要修改AVA游戏里的配置：
找到X:战地之王avaGameConfig里的AVAOptionSettings文件，把StartUpResX=的值修改成如下的值保存
StartUpResX=800.000000
StartUpResY=600.000000
OK！修改完了，马上进游戏试试你的PING值和FPS是不是提高了很多！
宽带山热帖排行为动画DOM元素添加样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。
　　这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。
当然也可以这样开启所有浏览器的GPU硬件加速：
webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);
webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
　　使用-webkit-transform:transition3d(0,0,0)开启GPU硬件加速的chrome中渲染动画性能明显顺畅了许多，平均能达到55fps左右
chrome诡异的Bug
　　对所有动画DOM元素添加-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后，又出现了一个chrome诡异的Bug，当你有多个position:元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后，会有几个元素凭空消失，调试许久无果遂Google之，国内暂时没有人发表过关于这类问题的文章，于是在国外网站找呀找，找到了很多与我遇到同样问题的人，但都没有真正靠谱的解决办法，这可能是跟添加-webkit-transform之后chrome尝试使用GPU硬件加速有关系，最后还是要等待Chrome官方更新解决了，当前Chrome版本是33。如果谁发现比较好的解决办法，欢迎提出^_^
其他人遇到的类似问题：
如何避免这个问题：
　　在使用-webkit-transform尝试对很多DOM元素编写3D动画时，尽量不要对这些元素及他们的父元素使用position:absolute/fixed。(其实这种情况很难避免)所以我的临时解决办法是，减少使用-webkit-transform:transition3d(0,0,0)的DOM元素数量，从9个减至6个便没有元素消失的现象了。PS：由于测试环境有限，如果大家发现在你的浏览器还有这个Bug,麻烦留言告诉我，万分感谢！
开启GPU硬件加速可能触发的问题：
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：
-webkit-backface-visibility:-webkit-perspective:1000;
如何监测动画帧速率
推荐两种实时监测网页渲染帧速率的方法：
1.Chrome的DevTool中TimeLine的Frame模块
2.地址栏输入&chrome:flags&搜索&fps&，将&FPS计数器&开启，浏览器重启后右上角会实时显示帧速率。
我会再过些天单独写一篇关于通过Frame模块监测网站性能的教程，敬请留意^_^
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：
使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)
编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
使用很多PNG图片拼接成CSS Sprite时
我能想到的暂时只有这五种情况，欢迎大家补充。
　　通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。
您还可以参考以下HTML5相关文章:《》《》《》
以查看HTML5最新资源、教程。
转载声明:原载:&&关注前端开发 & Web UI设计本文链接:如需转载必须以链接形式注明原载或原文地址，谢谢合作
阅读(...) 评论()web里计算FPS - WEB前端 - 伯乐在线
& web里计算FPS
帧率（FPS）用于描述成像装置产生连续图像的频率 动画其实就是显示连续帧产生的错觉。如果FPS太低，动画将不平滑，甚至人眼都能看到每一帧图像。 一般运动图像的帧率为24 FPS,电视使用30 FPS。在现代游戏中，玩家必须在视觉跟踪动画对象 ，并迅速作出反应，帧速率一般是每秒30帧和60帧之间。然而，快速移动的物体，可能需要更高的帧速率 ，以避免不希望的视觉假象（闪现）。虽然从理论上讲，我们可以达到极高的帧速率，在FPS由显示器的刷新速率的限制 。现代的液晶电视能120 FPS，甚至240 FPS。在手机，显示器是最有可能限制为60 FPS。
图1：1秒内不同动画帧速率比较
HTML5提供的Web开发人员提供了新的工具来创建动态和交互式内容，如动画和游戏。 帧速率仍作为开发人员的重要指标,fps太低会带来差劲的用户体验。所以开发人员希望有可靠的方式来计算HTML5页面的FPS。 但是问题是，没有办法得到可靠的FPS。 Web开发人员通常通过每次loop和上次loop的间隔来时间time，再通过1000/time来算fps。 微软发布了许多HTML5性能基准测试.如FishIE演示，该演示主要是能够计算Canvas中图像的fps。 。Facebook的JSGamebench主要是计算使用WebGL中展示大量动画的fps。 但是他们没有办法知道浏览器整个网页（整个网页可能包含dom、canvas、webgl、svg..）的FPS。 那么通过JavaScript能否计算出整个网页的fps？
JavaScript的动画
制作动画效果，可以使用的setInterval / setTimeout和requestAnimationFrame。 后者用于制作动画的首选方法。它将告知浏览器你马上要开始动画效果了，浏览器会在下次repaint前调用特定的方法来更新动画以达到优化的结果。
了解定时器在JavaScript中是如何工作是很重要的。 定时器延迟是没法保证的，不准确的，因为所有的JavaScript在单个线程中执行，只有当前面队列执行完毕且轮到了自己才能被执行。 如下图：
如上图所以，不仅时间不够精确，而且由于排队，导致setInterval的一次回调被延迟到了下一轮回调，为了避免同一时间执行多次setInterval的回调， 上次次的将被浏览器放弃执行。
所以从上面可以知道，使用setInterval(function(){},16.7)是有可能达不到60fps，是什么导致了回调的延迟？
画布的大小
鱼的数量的位置计算
平移，缩放，转换的计算
背景（鱼缸）
因为浏览器还没有提供通过JavaScript测量真正的FPS一种标准的方法， Web benchmarks测试出来的FPS本质上是不可信的（它可以测试SVG、Canvas、WebGL等渲染的FPS,而没法测试整个网页）。 Mozilla已经提供了一个方法来解决这个问题：mozPaintCount变量; 返回的次数文档已paint到屏幕的数目。理想情况下，我们会希望这个有待规范 ，使所有的现代浏览器将提供衡量FPS的标准接口。随着富媒体网站越来越多，保持FPS稳定的是很重要的事情， 在流畅的30帧运行的动画比跳动的50 FPS受欢迎得多。在webkit系列的浏览器中，解决这个问题的办法是公开一个webkitPaintCount变量。 我们可以通过webkitPaintCount的变化得到真正意义上的FPS.GISer and Programmer.
高频dom操作和页面性能优化探索（转）
原文地址：https://feclub.cn/post/content/dom
一、DOM操作影响页面性能的核心问题
通过js操作DOM的代价很高，影响页面性能的主要问题有如下几点：
访问和修改DOM元素
修改DOM元素的样式，导致重绘或重排
通过对DOM元素的事件处理，完成与用户的交互功能
DOM的修改会导致重绘和重排。
重绘是指一些样式的修改，元素的位置和大小都没有改变；
重排是指元素的位置或尺寸发生了变化，浏览器需要重新计算渲染树，而新的渲染树建立后，浏览器会重新绘制受影响的元素。
页面重绘的速度要比页面重排的速度快，在页面交互中要尽量避免页面的重排操作。浏览器不会在js执行的时候更新DOM，而是会把这些DOM操作存放在一个队列中，在js执行完之后按顺序一次性执行完毕，因此在js执行过程中用户一直在被阻塞。
1.页面渲染过程
一个页面更新时，渲染过程大致如下：
JavaScript: 通过js来制作动画效果或操作DOM实现交互效果
Style: 计算样式，如果元素的样式有改变，在这一步重新计算样式，并匹配到对应的DOM上
Layout: 根据上一步的DOM样式规则，重新进行布局（重排）
Paint: 在多个渲染层上，对新的布局重新绘制（重绘）
Composite: 将绘制好的多个渲染层合并，显示到屏幕上
在网页生成的时候，至少会进行一次布局和渲染，在后面用户的操作时，不断的进行重绘或重排，因此如果在js中存在很多DOM操作，就会不断地出发重绘或重排，影响页面性能。
2.DOM操作对页面性能的影响
如前面所说，DOM操作影响页面性能的核心问题主要在于DOM操作导致了页面的重绘或重排，为了减少由于重绘和重排对网页性能的影响，我们要知道都有哪些操作会导致页面的重绘或者重排。
2.1 导致页面重排的一些操作：
文本改变或图片尺寸改变
DOM元素的几何属性的变化
例如改变DOM元素的宽高值时，原渲染树中的相关节点会失效，浏览器会根据变化后的DOM重新排建渲染树中的相关节点。如果父节点的几何属性变化时，还会使其子节点及后续兄弟节点重新计算位置等，造成一系列的重排。
DOM树的结构变化
添加DOM节点、修改DOM节点位置及删除某个节点都是对DOM树的更改，会造成页面的重排。浏览器布局是从上到下的过程，修改当前元素不会对其前边已经遍历过的元素造成影响，但是如果在所有的节点前添加一个新的元素，则后续的所有元素都要进行重排。
获取某些属性
除了渲染树的直接变化，当获取一些属性值时，浏览器为取得正确的值也会发生重排，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()。
浏览器窗口尺寸改变
窗口尺寸的改变会影响整个网页内元素的尺寸的改变，即DOM元素的集合属性变化，因此会造成重排。
2.2 导致页面重绘的操作
应用新的样式或者修改任何影响元素外观的属性
只改变了元素的样式，并未改变元素大小、位置，此时只涉及到重绘操作。
重排一定会导致重绘
一个元素的重排一定会影响到渲染树的变化，因此也一定会涉及到页面的重绘。
二、高频操作DOM会导致的问题
接下来会分享一下在平时项目中由于高频操作DOM影响网页性能的问题。
1. 抽奖项目的高频操作DOM问题
1.1 存在的问题
在最近做的抽奖项目中，就遇到了这样的由于高频操作DOM，导致页面性能变差的问题。在经历几轮抽奖后，文字滚动速度越来越慢，肉眼能感受到与第一次抽奖时文字滚动速度的明显差别，如持续时间过长或轮次过多，还会造成浏览器假死现象。
1.2 问题分析
下图为抽奖时文字滚动过程中的timeline记录。
timeline分析：
FPS:最上面一栏为绿色柱形为帧率(FPS)，顶点值为60fps，上方红色方块表示长帧，这些长帧被Chrome称为jank(卡顿)。
CPU:第二栏为CPU，蓝色表示loading（网络通信和HTML解析），黄色表示scripting（js执行时间），紫色表示rendering（样式计算和布局，即重排），
绿色为painting（即重绘）。
更多timeline使用方法可参考：
由上图可以看出，在文字滚动过程中红色方块出现频繁，页面中存在的卡顿过多。帧率的值越低，人眼感受到的效果越差。
参考文章：。
接下来选择一段长帧区域放大来看
在这段区域内最大一帧达到了49.7ms，帧率只有20fps，接下来看看这一帧里是什么因素耗时过长
由上图可以看出，耗时最大的在scripting，js的执行时间达到了44.9ms，占总时间的93.2%，因为主要靠js计算控制DOM的显示内容，所以js运行时间过长。
选取一段FPS值很低的部分查看造成这段值低的原因
由下图可看出主要为dom.html中的js执行占用时间。
点进dom.html文件，即可定位到该函数
由此可知，主要是rolling这个函数执行时间过长，对该部分失帧影响较大。而这个函数的主要作用就是实现文字的滚动效果，也可以从代码中看出，这个函数利用的setTimeout来反复执行，并且在这个函数中存在着循环以及大量的DOM操作，造成了页面的失帧等问题。
1.3 优化方案
针对该项目中的问题，采取的解决方法是：
一次性生成全部&li&，并且隐藏这些&li&，随机生成一组随机数数组，只有index与数组里面的随机数相等时，才显示该位置的&li&，虽然也会触发重排和重绘，但是性能要远远高于直接操作DOM的添加和删除。
用requestAnimationFrame取代setTimeout不断生成随机数。
requestAnimationFrame与setTimeout和setInterval类似，都是通过递归调用同一个方法不断更新页面。
setTimeout()：在特定的时间后执行函数，而且只执行一次，如果在特定时间前想取消执行函数，可以用clearTimeout立即取消执行。但是并不是每次执行setTimeout都会在特定的时间后执行，页面加载后js会按照主线程中的顺序按序执行那个，如果在延迟时间内主线程不空闲，setTimeout里面的函数是不会执行的，它会延迟到主线程空闲时才执行。
setInterval()：在特定的时间间隔内重复执行函数，除非主动清除它，不然会一直执行下去，清除函数可以使用clearInterval。setInterval也会等到主线程空闲了再执行，但是setInterval去排队时，如果发现自己还在队列中未执行，就会被drop掉，所以可能会造成某段时间的函数未被执行。
requestAnimationFrame()：它不需要设置时间间隔，它会在浏览器每次刷新之前执行回调函数的任务。这样我们动画的更新就能和浏览器的刷新频率保持一致。requestAnimationFrame在运行时，浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
在采用上面的方法进行优化后，在经历多轮抽奖后，文字滚动速度依旧正常，网页性能良好，不会出现文字滚动速度越来越慢，最后导致浏览器假死的现象。
1.4 优化前后FPS对比
优化前文字滚动时的timeline
优化后文字滚动时的timeline
优化前的代码对DOM操作很频繁，因此FPS值普遍偏低，而优化后可以看出红色方块明显减少，FPS值一直处于高值。
1.5 优化前后CPU占用对比
优化前文字滚动时的timeline
优化后文字滚动时的timeline
优化前js的CPU占用率较高，而优化后占用CPU的主要为渲染时间，因为优化后的代码只是控制了节点的显示和隐藏，所以在js上消耗较少，在渲染上消耗较大。
2.吸顶导航条相关及scroll滚动优化
2.1 存在的问题
吸顶导航条要求当页面滚动到某个区域时，对应该区域的导航条在设置的显示范围内保持吸顶显示。涉及到的操作：
监听页面的scroll事件
在页面滚动时进行计算和DOM操作
计算：计算当前所在位置是否为对应导航条的显示范围
DOM操作：显示在范围内的导航条并且隐藏其他导航条
由于scroll事件被触发的频率高、间隔近，如果此时进行DOM操作或计算并且这些DOM操作和计算无法在下一次scroll事件发生前完成，就会造成掉帧、页面卡顿，影响用户体验。
2.2 优化方案
针对该项目中的问题，采取的解决方法是：
尽量控制DOM的显示或隐藏，而不是删除或添加：
页面加载时根据当前页面中吸顶导航的数量复制对应的DOM，并且隐藏这些导航。当页面滚动到指定区域后，显示对应的导航。
一次性操作DOM:
将复制的DOM存储到数组中，将该数组append到对应的父节点下，而不是根据复制得到DOM的数量依次循环插入到父节点下。
如果某个节点将在后续进行多次操作，可以将该节点利用变量存储起来，而不是每次进行操作时都去查找一遍该节点。
使用 requestAnimationFrame优化页面滚动
$(function(){
setTimeout( function() {
window.Scroller.on('scrollend', animationShow);
window.Scroller.on('scrollmove', animationShow);
function animationShow(){
return window.requestAnimationFrame ?window.requestAnimationFrame(scrollShow) : scrollShow();
对于scroll的滚动优化还可以采用防抖（Debouncing）和节流（Throttling）的方式，但是防抖和节流的方式还是要借助于setTimeout，因此和requestAnimationFrame相比，还是requestAnimationFrame实现效果好一些。
参考文章：
三、针对操作DOM的性能优化方法总结
为了减少DOM操作对页面性能产生的影响，在实现页面的交互效果时一定要注意一下几点：
1.减少在循环内进行DOM操作，在循环外部进行DOM缓存
function Loop() {
console.time("loop1");
for (var count = 0; count & 15000; count++) {
document.getElementById('text').innerHTML += 'dom';
console.timeEnd("loop1");
function Loop2() {
console.time("loop2");
var content = '';
for (var count = 0; count & 15000; count++) {
content += 'dom';
document.getElementById('text2').innerHTML +=
console.timeEnd("loop2");
两个函数的执行时间对比：
优化前的代码中，每进行一次循环，都会读取一次div的innerHtml属性，并且对这个属性进行了重新赋值，即每循环一次就会操作两次DOM，因此执行时间很长，页面性能差。
在优化后的代码中，将要更新的DOM内容进行缓存，在循环时只操作字符串，循环结束后字符串的值写入到div中，只进行了一次查找innerHtml属性和一次对该属性重新赋值的操作，因此同样的循环次数先，优化后的方法执行时间远远少于优化前。
2.只控制DOM节点的显示或隐藏，而不是直接去改变DOM结构
在抽奖项目中频繁操作DOM来控制文字滚动的方法（demo: 导致页面性能很差，最后修改为如下代码。
class="staff-list" :class="list"&
class="staff-list-ul"&
v-for="item in staffList" v-show="isShow($index)"&
&{{{item.staff_name | addSpace}}} &
class="staff_phone"&{{item.phone_no}} &
上面代码的优化原理即先生成所有DOM节点，但是所有节点均不显示出来，利用vue.js中的v-show，根据计算的随机数来控制显示某个&li&，来达到文字滚动效果。
如果采用jquery，则需要将生成的所有&li&全部存放在&ul&下，并且隐藏它们，在根据生成的随机数组，利用jquery查找index与生成的随机数对应的&li&并显示，达到文字滚动效果。
优化后demo:
对比结果可查看2.4
3.操作DOM前，先把DOM节点删除或隐藏
var list1 = $(".list1");
list1.hide();
for (var i = 0; i & 15000; i++) {
var item = document.createElement("li");
item.append(document.createTextNode('0'));
list1.append(item);
list1.show();
display属性值为none的元素不在渲染树中，因此对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行多次DOM操作，可以先将其隐藏，操作完成后再显示。这样只在隐藏和显示时触发2次重排，而不会是在每次进行操作时都出发一次重排。
页面rendering时间对比：
下图为同样的循环次数下未隐藏节点直接进行DOM操作的rendering时间（图一）和隐藏节点再进行DOM操作的rendering时间（图二）
由对比图可以看出，总时间、js执行时间以及rendering时间都明显减少，并且避免了painting以及其他的一些操作。
4. 最小化重绘和重排
var element = document.getElementById('mydiv');
element.style.height = "100px";
element.style.borderLeft = "1px";
element.style.padding = "20px";
在上面的代码中，每对element进行一次样式更改都会影响该元素的集合结构，最糟糕情况下会触发三次重排。
优化方式：利用js或juqery对该元素的class重新赋值，获得新的样式，这样减少了多次的DOM操作。
.newStyle {
height: 100
border-left: 1
padding: 20
element.className = "newStyle";
$(element).css({
height: 100
border-left: 1
padding: 20
到此本文结束，如果对于问题分析存在不正确的地方，还请及时指出，多多交流。
参考文章：
没有更多推荐了，