我在CPU和WebKit较弱的嵌入式硬件上设计一个JavaScript/HTML驱动的用户界面。性能并不理想，我想分析应用程序，特别是对回流和重绘事件进行计时，以获得有关实际性能的硬数据，而不是主观和不断变化的意见。在前后使用常规“getTime()”计时不起作用，因为WebKit将回流和重绘推迟到事件处理程序之后。我已尝试在SpeedTracer下分析应用程序，但计算成本太低，以至于回流事件甚至不会出现在PC硬件上。我想一些更专注于回流/重绘的工具可能仍然有用。关于如何为此获取硬数据的任何提示？ 最佳答案 这些链接可能会有帮助。J
比如说，我有一个HTML文件，我想使用Javascript处理它。例如:添加一些DOM元素，例如span或div包装器。稍微更改文档样式，例如基本字体大小、行高等。使用连字符添加实体。执行此操作的最有效方法是什么，即我想用最少的回流来完成。理想情况是在第一个布局之前运行JS代码。这可能吗？我知道，在页面显示之前执行昂贵的脚本通常是个坏主意，因为这会使页面在一段时间内看起来是空白的，这真的是一种糟糕的体验。但是，我需要它才能离线工作，这对我的项目来说不是问题。或者，有没有一种方法可以一次性完成所有dom修改，即在所有修改完成后触发回流？ 最佳答案
比如说，我有一个HTML文件，我想使用Javascript处理它。例如:添加一些DOM元素，例如span或div包装器。稍微更改文档样式，例如基本字体大小、行高等。使用连字符添加实体。执行此操作的最有效方法是什么，即我想用最少的回流来完成。理想情况是在第一个布局之前运行JS代码。这可能吗？我知道，在页面显示之前执行昂贵的脚本通常是个坏主意，因为这会使页面在一段时间内看起来是空白的，这真的是一种糟糕的体验。但是，我需要它才能离线工作，这对我的项目来说不是问题。或者，有没有一种方法可以一次性完成所有dom修改，即在所有修改完成后触发回流？ 最佳答案
使用DocumentFramgment允许我们将DOM元素相互附加而不会导致browserreflow(即使用离线DOM树)。很多库，例如jQuery使用文档片段来提高性能。文档片段可以有一个复杂的结构。例如，假设它代表如下内容:asdasd2HelloWorld或包含多个个child的文档片段:Title1Loremipsum.Loremipsum.Title2Loremipsum.Loremipsum.通常，当我们完成构建片段时，我们会将其附加到主DOM树。当我们这样做时会发生多少回流？它取决于文档片段的直接子代的数量吗？更新:我收到了来自AddyOsmani的回复Google的C
使用DocumentFramgment允许我们将DOM元素相互附加而不会导致browserreflow(即使用离线DOM树)。很多库，例如jQuery使用文档片段来提高性能。文档片段可以有一个复杂的结构。例如，假设它代表如下内容:asdasd2HelloWorld或包含多个个child的文档片段:Title1Loremipsum.Loremipsum.Title2Loremipsum.Loremipsum.通常，当我们完成构建片段时，我们会将其附加到主DOM树。当我们这样做时会发生多少回流？它取决于文档片段的直接子代的数量吗？更新:我收到了来自AddyOsmani的回复Google的C
我在阅读两个CSS属性display:none和visibility:hidden之间的区别时遇到了DOMreflow术语。声明是display:nonecausesaDOMreflowwhereasvisibility:hiddendoesnot.所以我的问题是:什么是DOM重排及其工作原理？ 最佳答案 Areflowcomputesthelayoutofthepage.Areflowonanelementrecomputesthedimensionsandpositionoftheelement,anditalsotrigger
我在阅读两个CSS属性display:none和visibility:hidden之间的区别时遇到了DOMreflow术语。声明是display:nonecausesaDOMreflowwhereasvisibility:hiddendoesnot.所以我的问题是:什么是DOM重排及其工作原理？ 最佳答案 Areflowcomputesthelayoutofthepage.Areflowonanelementrecomputesthedimensionsandpositionoftheelement,anditalsotrigger
对于react时间研究(seealsothisquestion如果您有兴趣)，我们想要控制和测量图像的显示时间。我们想考虑在不同用户的机器上重新绘制所需的时间。编辑:最初，我只使用内联执行来计时，我认为我不能相信它能准确地测量图片在用户屏幕上的可见时间，因为绘画需要一些时间.后来，我找到了事件“MozAfterPaint”。它需要更改配置才能在用户计算机和相应的WebkitAfterPaint上运行没有成功。这意味着我不能在用户的计算机上使用它，但我将它用于我自己的测试。我在下面粘贴了相关的代码片段和我的测试结果。我还使用SpeedTracer手动检查了结果在Chrome中。//fro
对于react时间研究(seealsothisquestion如果您有兴趣)，我们想要控制和测量图像的显示时间。我们想考虑在不同用户的机器上重新绘制所需的时间。编辑:最初，我只使用内联执行来计时，我认为我不能相信它能准确地测量图片在用户屏幕上的可见时间，因为绘画需要一些时间.后来，我找到了事件“MozAfterPaint”。它需要更改配置才能在用户计算机和相应的WebkitAfterPaint上运行没有成功。这意味着我不能在用户的计算机上使用它，但我将它用于我自己的测试。我在下面粘贴了相关的代码片段和我的测试结果。我还使用SpeedTracer手动检查了结果在Chrome中。//fro
什么样的事件会触发带DOM的网页回流？似乎有不同的观点。根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/,它发生了当您添加或删除DOM节点时。当您动态应用样式时(例如element.style.width="10px")。当您检索必须计算的测量值时，例如访问offsetWidth、clientHeight或任何计算出的CSS值(通过兼容DOM的浏览器中的getComputedStyle()或IE中的currentStyle)。然而，根据http://dev.opera.com/arti
