英文:
How to prevent browser built-in functions confirm/alert/prompt brings up high CLS and INP when updating screen after the function returns?
问题
如果您运行confirm/alert/prompt函数，然后在函数返回后更新屏幕，INP和CLS分数将非常糟糕。
例如，假设我创建一个表单，要求学生输入他们的姓名，然后在输入后显示一些内容。当用户点击“确定”输入姓名后，CLS和INS惩罚分数将提高。
我认为这是Web Vitals的一个错误。但是有没有什么方法可以防止这对我的Web Vitals分数造成损害？
英文:
If you run confirm/alert/prompt functions and then update the screen after the function returns, the INP and CLS score will be very bad.
For instance, say I create a form to ask my students to enter their name, then I display some content after the input. After the user clicks "OK" to enter his/her name, the CLS and INS penalty score will boost.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('button').click(()=>{
var name = prompt('enter your name:');
$('#screen1').html(`${name} Hello!<p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p><p>
something ...
</p>`);
})
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="screen1">
</div>
<button>
Enter Your Name
</button>
<!-- end snippet -->
I think this is a Web vitals bug. But is there anything I can prevent this for damaging my web vitals score?
答案1
得分: 2
对于INP，这是我们在INP成为明年的完整核心Web Vitals之前要修复的问题：https://bugs.chromium.org/p/chromium/issues/detail?id=1435448
从技术上讲，在显示confirm/alert/prompt时，主线程被阻塞，INP试图解决这个问题，而事件处理程序仍在运行，这就是为什么它目前会标记的原因。一般来说，由于这个原因，不鼓励使用这些提示框。然而，一次绘制已经发生，并且已经给出了反馈（这是INP的目标），所以即使它仍然不被鼓励，我们仍然希望处理这个问题。
对于CLS，即使在iframe之外运行时，我也无法看到任何位移：https://www.tunetheweb.com/experiments/prompt/
你能确认你确实在使用这个时看到了CLS吗？
英文:
For INP, this is something we're looking to fix before INP becomes a full Core Web Vitals next year: https://bugs.chromium.org/p/chromium/issues/detail?id=1435448
Technically the main thread is blocked while the confirm/alert/prompt is showing, which INP seeks to address, and the event handler is still running, hence why it currently flags. In general these prompts are discouraged for this reason. On the other hand though, a paint HAS happened and feedback HAS been given (which is what INP aims to measure) hence why we want to handle this, even if it's still discouraged.
For CLS, I am unable to see any shifts, even when running this outside of an iframe: https://www.tunetheweb.com/experiments/prompt/
Can you confirm you're definitely seeing CLS with this?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论