网站是怎么做排名的,仿顺丰优选网站源码,微信怎么开发小程序,三国曹魏古城建设网站以下内容是阅读过程中结合自己的思考而诞生的产物#xff0c;不一定准确#xff0c;但相反的#xff0c;可能个人对实际情况有很大的误解。 仅做参考#xff0c;欢迎指正。 前面提到浏览器显示的其实是渲染流程最后渲染出来的一张图片#xff0c;而一个行为引起的副作用需… 以下内容是阅读过程中结合自己的思考而诞生的产物不一定准确但相反的可能个人对实际情况有很大的误解。 仅做参考欢迎指正。 前面提到浏览器显示的其实是渲染流程最后渲染出来的一张图片而一个行为引起的副作用需要生成的最终图片可以以多个进度的快照图片逐渐渲染出最终图片来也可以完全准备好再直接渲染出来。
当这种‘逐渐’过程中卡顿的时间或者完全准备好卡顿的时间低于人眼感知极限的时候页面渲染流程对于人来说就是‘丝滑顺畅’的。
人眼感知极限在200多赫兹即每秒200多张图片但实际上当超过60hz时人眼对其感知就不那么明显了而要分别60hz以上的区别时还容易让人产生疲劳所以60hz仍是主流。
什么是卡顿
众所都周知js是单线程当react处理vdom相关工作的时候会阻塞浏览器的渲染过程阻塞了渲染过程那么页面就卡着。
结合上面所述1秒60hz相当于16.67ms至少需要渲染出1张新图才不会觉的卡顿。
我理解这里的卡顿并不是说优化的怎么怎么好让总工作量少了处理的快了而是可能虽然每次渲染出来的新内容少但是他仍然在生成而不会在处理过程中一直不变然后突然渲染出来这种抖动的、掉帧的渲染方式容易让人觉的他卡了而一直在变化虽然每次变化的不多但总体是‘流畅的’
如何避免‘抖动型卡顿’
如何解决这个问题呢每个人设备性能是不一样的react处理vdom相关工作时速度不一样的显然无法从设备硬件入手那优化react各种处理都使用最优方案但工作量一多、设备性能一差该卡照样卡。
其实由上面粗体字的叙述我理解优化思路是硬件差处理慢OK没问题处理的东西多OK也没问题那我每次都处理一丢丢然后你去生成图片然后我再处理一丢丢而且每次都卡人眼感知极限让你感觉不到抖动或者说掉帧这不就完了吗
于是便诞生了时间切片
时间切片
将vdom相关的处理工作拆分为一个个单独的宏任务参见事件循环将这里的每个宏任务都限制在一定的范围内react初始为5ms而每个任务执行完后将执行权限交给浏览器 让浏览器生成当前的一张图片。 那么如果一个长任务即便在a主机上执行需要50ms而在b主机上执行需要100ms那么在这种硬件设备差距悬殊的情况下这种思路依然有效。
思考
以下为个人思考
分给react执行的时间还是相对较少虽然规避了掉帧但是这种行为效率并不是很高为了执行5ms的react任务需要花费十来毫秒去走一遍浏览器渲染流程。 我觉得是不是能把渲染流程与脚本行为分离让脚本一直执行而每次渲染流程执行完后如果发现还有脚本任务在跑则拿取当前dom结构的快照继续去渲染。
但这其实就不是单线程了吧。不知道是否合理或者能否实现还需要继续阅读 学习。
