- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有许多大文本,我正在使用列分析器 jquery 插件 ( https://github.com/adamwulf/Columnizer-jQuery-Plugin ) 的轻微精简版本将其转换为“列”以在另一个插件中使用。对于我的目的来说,Columnizer 是一个不错的执行者——只要被列化的 block 中没有 float 内容。
Chrome、FF 和 IE10 在大多数情况下在纯文本或混合有图像和其他简单 html 的文本上都有相似的性能。但是,如果您包含 float 内容(在本例中为图像),情况就会发生巨大变化:
Big Book w/ Images, roughly 700 columns createdTest condition Firefox (sec) Chrome (sec)-----------------------------------------------------------------Normal book build (images, floats) 31.5 1254.2As above, but no images 23.2 18.9w/ images, but no floated images 25.1 24.7Only a few floated images 27.6 1010.9Remove all images, tags except 'p' 21.3 18.9
正如您所看到的,这是一个非常非常大的差异。 (我确实缓存了构建,但是因为每个浏览器/操作系统组合呈现的内容略有不同,所以我仍然必须先在“主要”浏览器中构建每个浏览器。直到你等待 iPad 上的 Safari 构建这个浏览器时,你才算成功事情——将 Windows chrome 数字乘以 4。)
所以我的问题是:在没有询问的情况下,Firefox 做了什么“正确”的事情,我可以做什么来重新编写列生成器代码以在其他浏览器中模仿它? 列生成器相当“肮脏” ” 因为它执行了数千个(我认为在本书中超过 100,000 个)附加,我知道这绝对不酷。是否使用文档片段?还有其他技巧吗?
Columnizer 要求目标容器(内容流动的地方)位于 dom 中,以便可以正确应用样式(即,没有“display:none”,然后在完成后进行切换)。在我的 CSS 中,我按照建议将其设置为position:absolute、visibility:hidden。我认为 FF 必须以其他浏览器不采用的方式查看这组属性。或者...?
我应该在该过程结束时注意到,除了轻微的字体渲染差异外,浏览器之间的输出是相同的。
最佳答案
我不确定这回答了我自己的问题,但我确实让事情变得更好,这在某些方面对我来说已经足够了。 我很想真正了解为什么我的解决方案会产生影响。
背景:我尽可能多地用 PHP 对本书的文本进行“预格式化”,因为在服务器端进行清理和其他日常文本杂务要快得多。然后将清理后的 html block 放入 div 中,这就是我列的内容。这个容器(我们称之为“raw”)和列的空目标容器(“dest”)需要位于 dom 中,所以我将这个 CSS 放在一个包含“raw”和“dest”的包装 div 上作为 child :
position: absolute;
top: -2000px;
left: -2000px;
width: 700px;
height: 500px;
visibility: hidden;
overflow: hidden;
这从页面中“删除”了两个 div(就我们的眼球而言),但它们仍然在 dom 中,允许 Columnizer 处理它们。
嗯:在 Firefox 中,这足以使事情正常运行,无论是否 float 。但在 Chrome、Safari 和 IE 中……好吧,看看我原来问题中的表格。恶心。
但是通过将“position:absolute”添加到“raw”中,其他浏览器的性能得到了显着提高。他们的速度不如FF,但也相差不远。现在,Chrome 浏览整本书只需 40 秒,而不是 1200 多秒。 ipad 不需要花费很长时间,而是需要几分钟。
为什么?这对我来说是个谜。以下是列生成器在准备过程中的相关位:...
var $sourceHtml = $('div.raw'),
$cache = $('<div></div>'),
$inBox = $('#dest'),
$destroyable, $col;
...
$cache.append($sourceHtml.contents().clone(true));
$inBox.empty();
$inBox.append($("<div style='width:" + options.width + "px;'></div>"));
$col = $inBox.children(":last");
$inBox.empty();
try {
$destroyable = $cache.clone(true);
} catch(e) {
$destroyable = $cache.clone();
}
...
作为缓存创建的空 div 此时应该位于 DOM 中,但位于 HTML 页面之外,因为它尚未附加到任何内容。呃?因此,当它被操纵时,页面不需要重新绘制。
我半途而废的理论是,虽然 FF 认识到这一点,但其他浏览器没有认识到这一点,并认为 $destroyable 位于页面的绘制区域内 - 也许将其附加到 body 标记,甚至“换行” (尽管通过 Chrome 的检查器观察没有发现这样的事情)?
由于节点从 $destroyable 中剥离并附加到正在创建的列中,因此每次更改 $destroyable 时其他浏览器都会重新绘制页面。 block 和内联内容速度很快,添加 float 时价格昂贵。
但是要戳破这个不成熟的想法:尝试将“position:absolute”添加到 $destroyable 没有什么区别。只有当原始的“原始”div 具有该属性时,速度才会加快。
无论如何,回到酗酒和无知。如果可以的话,请耐心叹息,让这成为一个受教育的时刻!
关于javascript - Jquery 列生成器插件 : 40 times faster in Windows Firefox. 为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19736831/
我使用以下代码和嵌套生成器迭代文本文档并使用 get_train_minibatch() 返回训练示例。我想保留( pickle )生成器,这样我就可以回到文本文档中的相同位置。但是,您不能 pick
在本教程中,您将借助示例了解 JavaScript 生成器。在 JavaScript 中,生成器提供了一种使用函数和迭代器的新方法。 使用生成器, 您可以从函数内部的任何位置停止执行函数 并从
LESS is very cool .我一直想知道是否有任何好的 html 生成器可以让我更轻松地编写表单或做其他事情。除了 html,是否有一些类似的东西? 最佳答案 已尝试 Haml ? 从它的网
前言 如果是做python或者其他语言的小伙伴,对于生成器应该不陌生。但很多php开发者或许都不知道生成器这个功能,可能是因为生成器是php 5.5.0才引入的功能,也可以是生成器作用不是很明显。
我正在尝试编写一个使用生成器语法生成日期时间列表的函数: let dateRange = let endDate = System.DateTime.Parse("6/1/2010")
我遇到了一些看起来像的代码: [func(val) for val in iterable] 有一个可迭代对象(在我的例子中是一个生成器),用户想要为其副作用调用每个值的函数(例如 func 可以只是
Delphi 有内置的东西来生成 UUID 吗? 最佳答案 program Guid; {$APPTYPE CONSOLE} uses SysUtils; var Uid: TGuid; Result
我正在深入研究 javascript 生成器,但我真的很困惑。 我使用 node@0.11.x 运行此示例: function find() { process.nextTick(functi
有人知道一些关于如何为 hibernate 创建自定义 ID 生成器的好教程吗? 最佳答案 在 Google 上粗略搜索“hibernate 自定义 id 生成器教程”发现了以下可能性。我排除了那些看
我正在关注 Python 大师 David Beazley 的幻灯片。它指出“生成器也用于并发。这是一个示例: from collections import deque def countdown(
我有一个生成事件的生成器,我想用可以从 API 获取的附加元数据来丰富它。 某些事件具有与其链接的对象 ID,而其他事件则具有对象的哈希值,但不能同时具有两者。我无法根据哈希获取对象 id,我只能执行
假设我有一个自定义类: public class CustomClass { private String name; private String data; public
我正在考虑实现一个函数来在 SQL 请求中“构建”WHERE 子句,如下所示: "SELECT * FROM table $where" 使用如下所示的循环构建 $where: $arr=array(
我正在寻找执行此操作的标准函数: def Forever(v): while True: yield v 这看起来太琐碎了,我不敢相信没有标准版本。 就此而言,有人知道指向所有标准生成器函
我知道这个网站上有几个非常相似的相关问题,但是在看了这部剧之后,我相信这个问题本身就是独一无二的。如果有人能找到并提供证据证明我的问题完全被骗了,我会自己撤回它(所以请不要否决这个!)。 我是 Jav
void __fastcall TForm1::Button1Click(TObject *Sender) { int size = MemoEnter->GetTextLen() + 1;
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我试图在我的生成器的以下两个定义之间做出决定。哪个更好?哪个“更像 python ”?无论如何,有没有办法减轻每一个的缺点? def myGenerator1(howMany): result
我有一个 Python 生成器 lexg,它在每次迭代时生成一个列表。该代码似乎在传统的 for 循环意义上工作,即 for i in lexg(2,2): print(i) 产生: [2, 0] [
我希望这不会超出 Python 生成器的能力,但我想构建一个这样,每次调用该函数时,它都会返回下一分钟直到结束时间。 因此该函数读取开始时间和结束时间,并以分钟为单位返回时间,直到涵盖其间的所有时间。
我是一名优秀的程序员,十分优秀!