Javascript requestAnimationFrame spinner

作者: 雨儿
发布时间: 2024-07-11 05:43:25 (20天前)
转自：

3 条回复

0#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 重点 <code> requestAnimationFrame </code> 是浏览器有效地调用它尽可能接近60fps，或者浏览器动画引擎的帧速率，因此你不应该在 <code> requestAnimationFrame </code> 回调需要比帧时间更长的时间。请记住，在浏览器中，javascript的执行发生得非常快......需要非常复杂的javascript计算才能实际花费比执行帧时间更长的时间。您将遇到的主要问题是屏幕上的布局，绘画和重绘元素。为此，网络工作者不会帮助你。如果你有非常繁重的javascript需要比帧时间更长的时间来执行，那么网络工作者只会帮助你。 </p> <P> 这也很容易描述...你可以查看Chrome的时间线工具，看看你的javascript函数执行的时间。有可能它只有1ms的最大值，如果你的动画运行速度低于60fps，那是因为布局和重新绘制比帧时间剩余的16.7ms要长，但这是在浏览器布局引擎本身，而不是你可以通过网络工作者卸载的东西。 </p> </DIV>

编辑
1#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 此代码显示浏览器向工作人员发送和接收消息所需的时间。在我的机器上大约需要3ms。如果你想达到60fps，你需要将JS的每个帧保持在10ms以下（记住浏览器仍然需要为每个帧设置样式，布局，绘制和合成）。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> var myWorker, send = document.querySelector('.send'), receive = document.querySelector('.receive'), time = document.querySelector('.time'), start, end; var sendMessage = function () { start = performance.now(); myWorker.postMessage('My message'); console.log('Sending message to worker ' + start); }; var receiveMessage = function(event) { end = performance.now(); time.textContent = (end - start) + 'ms'; receive.textContent = event.data; console.log('Message received from worker ' + end); }; var workerFunction = function(event) { self.postMessage('Worker response: ' + event.data); }; var createWorker = function () { if (window.Worker && window.Blob && window.URL) { var workerContent = "self.onmessage = " + workerFunction.toString(); var blob = new Blob([workerContent], {type: 'application/javascript'}); myWorker = new Worker(URL.createObjectURL(blob)); myWorker.onmessage = receiveMessage; } }; createWorker(); send.addEventListener('click', sendMessage); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <button class="send">Send</button> <p class="receive"></p> <p class="time"></p> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论