browser 相关问题

const 延迟 = ms => 新 Promise(res => setTimeout(res, ms)); const yourFunction = async () => { </desc> <question vote="0"> <pre><code><!DOCTYPE html> <html> <head> <script> const delay = ms => new Promise(res => setTimeout(res, ms)); const yourFunction = async () => { await delay(5000); console.log("Waited 5s"); await delay(5000); console.log("Waited an additional 5s"); }; yourFunction(); </script> </head> <body> Hello <script> window.onload = function () { console.log('Loaded'); } </script> </body> </html> </code></pre> 我正在研究阻碍 HTML 渲染或解析的现象。 <a href="https://i.stack.imgur.com/3tdhO.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzN0ZGhPLnBuZw==" alt=""/></a> 这是脑子里的脚本。据我了解，它应该阻止了渲染。但我们可以看到文本已经被渲染了。 很久以后 5 秒就到期了。 <a href="https://i.stack.imgur.com/fAtzY.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2ZBdHpZLnBuZw==" alt=""/></a> 你能帮我理解这里发生了什么吗？我怎样才能模仿渲染阻塞？ </question> <answer tick="false" vote="0"> Promise/setTimeout 实际上<a href="https://web.dev/articles/optimize-long-tasks#use_asyncawait_to_create_yield_points" rel="nofollow noreferrer">屈服于主线程</a>，因此浏览器将继续渲染页面。只有直到超时触发，任务才会恢复执行。 在 Chrome DevTools 性能面板的“主”轨道上，您几乎看不到 5 秒和 10 秒标记处的任务。除了那些短暂的时刻之外，主线程上没有发生任何事情，确认渲染实际上并未被阻止： <a href="https://i.stack.imgur.com/0FOQa.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzBGT1FhLnBuZw==" alt=""/></a> 要故意阻塞主线程（仅用于演示目的），您可以使用连续执行直到时间到的<pre><code>while</code></pre>循环： <pre><code>function delay(ms) { const startTime = new Date(); while (new Date() - startTime <= ms); } const yourFunction = () => { delay(5000); console.log("Waited 5s"); delay(5000); console.log("Waited an additional 5s"); }; yourFunction(); </code></pre> 在此性能跟踪中，您可以清楚地看到主线程完全阻塞了 10 秒： <a href="https://i.stack.imgur.com/3LLtL.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzNMTHRMLnBuZw==" alt=""/></a> 控制台按照日志在代码中出现的顺序显示日志： <a href="https://i.stack.imgur.com/WYsuo.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1dZc3VvLnBuZw==" alt=""/></a> </answer> </body></html>

browser web-performance

回答 0 投票 0

将字体样式应用于浏览器选项卡文本

是否可以将字体样式应用于浏览器选项卡中的文本，例如在图标旁边显示页面标题的文本中。这样，当用户查看他们的浏览器选项卡时，我的网站就...

css browser favicon

回答 2 投票 0

视频文件中特定时间的URL

是否可以创建一个指向视频文件中特定时间戳的 URL？ IE。我有一个视频网址，例如 https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4 和 ...

url video browser

回答 1 投票 0

为什么读取大型 csv 文件会给出“blob:bef00fec-4660-4291-a3e2-4c5b96205970?type=Text”？

我在浏览器中读取大型 csv 时遇到问题。当文件大小较小（例如 100KB）时，它会正常工作并显示实际数据。考虑以下代码：常量 csv = csv_upload_btn...