[英]How do I avoid CLS (Cumulative Layout Shift) if I'm loading external content and the height is dynamically assigned?
I have a button to pull some data from backend.我有一个按钮可以从后端提取一些数据。 But the length of the data is uncertain and the time to load is also uncertain.
但是数据的长度是不确定的,加载的时间也是不确定的。
This will generate high CLS penalty.这将产生高 CLS 惩罚。 Is there anyway to avoid this?
无论如何要避免这种情况?
var stHandler = 0; $('#render').click(function(){ clearTimeout(stHandler); $('#result').html('loading...'); // [Simulate the server response time] // CLS will not be penalized if the everything happens in 100ms, // but most of the case, the server will return the data longer than that stHandler = setTimeout(function(){ $('#result').html(fakeResultBuilder); }, 500 + Math.random()*1000); }) // [Simulate the real-world condition] // Every time you load this content, the height will be different. function fakeResultBuilder(){ var html = ''; for (var i=0; i<Math.random()*100; i++) { html += '<div class="block"></div>'; } return html; }
button {cursor:pointer}.block {height:10px; background:#f00; width:20px; margin:5px} #result {border:1px solid #999} footer {margin-top:1em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="render">Render</button> </div> <h2>Result:</h2> <div id="result"></div> <footer>Page Footer - will have huge CLS sometimes</footer>
The key is to adjust as much as possible within the 500ms grace period (note not 100ms as given in your code comment).关键是在 500ms 宽限期内尽可能多地调整(注意不是代码注释中给出的 100ms)。 The 500ms grace period is set because clicking on things (like your Render button) is an expected shift.
设置 500 毫秒的宽限期是因为点击东西(比如你的渲染按钮)是一个预期的转变。 However, if it happens considerably later (and 500ms is set as the limit) then it's back to being an unexpected shift.
然而,如果它发生得相当晚(并且 500 毫秒被设置为限制),那么它又会变成一个意外的转变。 The user may be in the middle of reading some of the footer while they wait.
用户在等待时可能正在阅读一些页脚。
While the full response may not be able to be returned within that 500ms, you can still reserve some space (perhaps using min-height
?) to, at the very least, reduce the CLS.虽然可能无法在 500 毫秒内返回完整响应,但您仍然可以保留一些空间(也许使用
min-height
?),至少可以减少 CLS。 The default height of an empty div is 0px so ANYTHING you do here will be better than than that as surely it will be larger than 0ms?空 div 的默认高度是 0px,所以你在这里做的任何事情都会比那个好,因为它肯定会大于 0ms?
Additionally if it's enough to always knock the footer off-screen then adding a minimum height to push that footer off screen will mean any further moves for it are not considered CLS.此外,如果总是将页脚移出屏幕就足够了,那么添加一个最小高度以将该页脚推离屏幕将意味着任何进一步的移动都不会被视为 CLS。
This may leave a large white space, which may not be ideal, so you may wish to consider some kind of "Loading..." message or a loading spinner.这可能会留下很大的空白区域,这可能并不理想,因此您可能希望考虑某种“正在加载...”消息或加载微调器。 This will give an indication that something is happening to the user rather than them being unsure and perhaps rage-clicking the render button again and again.
这将表明用户正在发生某些事情,而不是他们不确定并且可能一次又一次地愤怒地单击渲染按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.