首页 / JAVASCRIPT / javascript – 回调/布局不是在回调中触发的？

javascript – 回调/布局不是在回调中触发的？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 回调/布局不是在回调中触发的？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3686字，纯文字阅读大概需要6分钟。

内容图文

基于这个问题：How do I know the IntersectionObserver scroll direction?

我试图在可观察的回调中重现一些布局/重排案例,但我不能,所以我试图简化用例并最终提出这个问题.

我正在阅读Paul Irish what-forces-layout.md的要点,我的问题非常简单.

如果在body元素上没有回调的输入情况肯定会触发布局,请参阅下面的示例：

07002

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text">
  <script type="text/javascript">
    var elementB = document.querySelector('input');

    elementB.focus();
  </script>
</body>
</html>

see chrome performance record

但是如果将焦点事件包装在单击回调中,则不会触发布局/重排.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text">
  <script type="text/javascript">
    var elementB = document.querySelector('input');

    function onClick() {
      elementB.focus();
    }

    document.addEventListener('click', onClick);
  </script>
</body>
</html>

see chrome performance record

所以我的问题是为什么不触发布局/回流？

解决方法:

我不确定如果我的问题是正确的,但在案例1中,当解析器开始执行脚本时,DOMContentLoaded尚未被解雇,它仍在解析文档的其余部分.同时你将焦点放在elemB上,你会立即触发布局流程.

在案例2中,除非单击文档本身,否则根本不会调用onClick函数.您可以通过打开您提供的小提琴上的“Paint Flashing”来验证这一点.只有单击时输入才会变为绿色.

而在第一种情况下,您会在开始时看到输入的短暂闪烁(这是您对.focus的调用),然后是整个documentElement(在DOMContentLoaded处).

如果是两个你只有整个documentElement flash一次(在DOMContentLoaded上,只要没有别的东西触发reflow / repaint onl oad事件),然后每次点击只有一次输入元素.

PS：

现在据我所知,我已经在我的本地机器上尝试了2个案例,有趣的是在第一个案例中,我在DOMContentLoaded之后看到了2个布局激活.

但是,如果我注释掉lineB.focus()行;从你的案例1再次记录,我再次看到2个布局活动.

根据我的理解,浏览器将在启动时执行2个布局操作,一旦它开始解析主体,然后在DOMContentLoaded周围执行一次.如果通过javascript完成任何同步强制布局垃圾(通过调用链接中列出的任何方法/属性),浏览器将尝试批处理这些操作.

为了测试这种行为,我修改了你的第一个案例如下：

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text" style="position:relative;top:0px;">
  <script type="text/javascript">
    var elementB = document.querySelector('input');
    elementB.focus();
  </script>
  <script async="true">
    setTimeout(function(){
        elementB.style.top = parseInt(elementB.style.top) + 5 + "px";
    },500)
  </script>
</body>
</html>

现在将会发生的是,您将在加载事件(~500ms)之后立即进行第三次布局活动(不需要异步).但是如果你要使setT?meout为0ms,你将再次获得2个布局活动！ (如果您看到3个布局,则可能无法保证微任务队列行为,强制同步布局,删除第二个脚本标记内的异步属性和setTimeout换行).底线：因此浏览器对其进行批处理,或者至少这是我在此示例中看到的内容.

对于你的第二种情况,当我以你发布的方式记录它时,我没有看到布局活动(2布局和以前一样)是正确的.但我看到的是每个事件后一致的样式重新计算更新布局树绘画.这让我觉得一旦布局树更新,如果不需要布局垃圾,就不会重新计算.为了测试这种行为,我改变了你的第二个脚本,如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text" style="position:relative;top:0px;">
  <script type="text/javascript">
    var elementB = document.querySelector('input');

    function onClick() {
      elementB.focus();
      elementB.style.top = parseInt(elementB.style.top) + 5 + "px";
    }

    document.addEventListener('click', onClick);
  </script>
</body>
</html>

每次单击文档时,输入框将向下移动5个像素.如果您在10秒内记录多次点击事件,您会看到很多更新布局树重绘和布局也是垃圾.这让我觉得如果只是必要的话,在更新布局树之后就会完成布局垃圾.

结论(我可能非常错误)

>浏览器将尝试在解析HTML期间批量处理布局活动.
> element.focus将触发重绘更新布局树,但不保证布局垃圾(至少从这些示例中)

内容总结

以上是互联网集市为您收集整理的javascript – 回调/布局不是在回调中触发的？全部内容，希望文章能够帮你解决javascript – 回调/布局不是在回调中触发的？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/796605.html

来源：【匿名】