Tag: 性能

我如何优化IE?

我有一个JS重的应用程序,它在IE中运行缓慢。 我将花费大约一周的时间来优化IE,我想要尝试一些方向。 我发现这个线程引用了Drip ,这似乎很有用: IE中的IE和内存累积 我正在寻找诸如“使用for循环而不是$ .each”以及我可能没有使用的架构最佳实践的提示。 我正在使用的库: jQuery的 谷歌地图 Facebook JS API KnockoutJS 塔菲 我已经在做的事情: 使用for循环而不是$ .each 为常用的DOM元素缓存jQuery上下文 使用Array.join()与字符串连接构建HTML 有什么建议? 谢谢!

收盘前$ .ready()

这不是一个真正的编码问题,而是一个现实世界的陈述。 我之前已经注意到 DOMReady事件很慢,很慢。 所以,我注意到在浏览jQuery源代码时可以使用$.ready()触发jQuery domeready事件。 然后我想,在关闭正文之前放置这个简单的执行脚本应该触发所有先前附加的“onDomReady”监听器。 是的,它按预期工作: $.ready() 这里有两个例子,这个例子测量等待DOMReady时花费的ms: http://jsbin.com/aqifon/10 正如您所看到的,DOMReady触发器本身非常慢,用户必须在domready脚本启动之前等待整整200-300毫秒。 无论如何,如果我们在关闭BODY标记之前放置$.ready() ,我们得到: http://jsbin.com/aqifon/16 看到不同? 通过手动触发domready,我们可以切断100-300 ms的执行延迟。 这是一个重要的交易,因为在我们看到它们之前,我们可以依赖jQuery来处理DOM操作。 现在,对于一个问题,我从未见过这个被推荐或讨论过,但它似乎仍然是一个主要的性能问题。 一切都是关于优化代码本身的,这当然是好的,但是如果执行被延迟了很长时间以至于用户看到“flash of”unjQueryedContent“,那就是徒劳。” 有没有想过为什么不经常讨论/推荐这个?

在AngularJS之后加载jQuery(而不是之前)

为了让angular.element指向jQuery而不是jQLite,需要在页面头部的Angular之前加载jQuery。 但是,出于性能原因(特别是在移动设备上),如果可以在加载AngularJS之后加载jQuery,那就太好了。 jQuery库相对较大,因此让“高于内容”依赖于jQuery lite并让jQuery在Angular之后异步加载,可以提高性能。 我认为如果Angular公开它的bindJquery函数并且它是JQLitePrototype对象,那将是可能的。 任何想法如何在不触及Angular核心的情况下做到这一点?

jQuery bind()unbind()和on()和off()

我正在为一个小网站管理工作。 取消绑定事件以提高性能(客户端)是否有意义? 或者,取消绑定事件并在30秒之后再绑定它会花费更多性能吗? 我的问题:bind() – unbind()或on()。off()背后的想法只是增加基于客户端的性能还是应该将它用于其他场景? 这个问题的出现是因为我的javascript代码正在增长和增长(约30%),因为解除绑定事件。 而且我认为,有些事情可能不起作用,当用户不进行交互时,我想… 。 编辑:大多数时候我绑定/解除绑定按键事件,因为我需要diff的箭头键。 场景。

javascript的高CPU使用率 – 如何调试?

找到javascript高CPU使用率的最佳方法是什么? 我有一个脚本,只需在缩略图库中加载flickr中的照片。 加载后,没有任何操作(等待您点击它们以显示在灯箱中),但CPU使用率仍然是25%或更多。 我打开了萤火虫,点击了个人资料,稍等了一下再点击它,但它说“没有活动要报告”。 如果有什么事情发生,它会报告吗? 或者我使用这个工具错了? 我在加载所有内容后执行此操作,只是为了查看可能导致高CPU使用率的原因。 谢谢,韦斯利 编辑:似乎已经追溯了它的起源……它与JS无关,但是CSS! 搞什么鬼? 问题是: 我有一个缩略图库,我在图片加载时显示加载指示器而不是缩略图: .thumbnail img { display:block; background-image: url(“/images/ajax-loader.gif”); background-position: center center; background-repeat:no-repeat; overflow:hidden; color:white; } 如果我删除这个代码,cpu使用率下降到0,03%或者什么……而不是20%…这是因为GIF动画还在播放,但只是掩盖了吗? 我不知道GIF动画从cpu中拿走了这么多? 当然,它已经做了20多次,但仍然如此。 在safari / chrome中也是如此。 我想我应该不使用每个图像内部的加载指示器,或者在成功加载图像时删除背景图像。

Twitter Bootstrap适用于触摸屏吗?

我正在考虑将Twitter Bootstrap(TB)用于移动网络应用程序。 下一版TB, 版本3 ,声称是“移动优先”。 但是,查看包含的Javascript文件,我几乎只看到“点击”事件,几乎没有使用任何“触摸”事件。 TB依靠Jquery来处理事件。 此外,CSS中有许多“hover”定义,这些定义在触摸屏上不起作用。 即便如此,我还是在Googling上找到了很多关于在移动网络应用中使用TB的建议和教程。 我的问题是:Twitter Bootstrap在性能方面(主要是速度和响应时间方面)在触摸屏上的表现如何?

为什么人们使用jQuery进行基本操作?

我是一名JS程序员,我一直在尝试使用jQuery,但遇到了一些令人费解的问题。 我觉得人们使用jQuery远远超过必要的。 我真的只想知道为什么选择jQuery可能比使用纯JS更好。 我知道webfx就像动画和淡化一样有意义但是对于像添加事件监听器这样的事情来说它似乎同样易于使用 obj = document.getElementByID(_ID_); obj.addEventListener(“mousedown”…); 这方面的一个例子就是我今天早些时候在StackOverflow上找到的关于为突出显示的文本执行操作的答案。 获取突出显示/选定的文本 在http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html的答案中链接的示例中 该人使用绑定function到文档。 为什么使用bind而不是addEventListener。 同样使用jQuery,一切都需要包含在.ready()方法中,这比(或者为什么选择它)更好 document.addEventListener(‘load’, function () { … }, false); 还有一次我看到jQuery使用这让我困惑,我希望你们能为我发光一些。

测量Javascript应用程序的CPU负载

我需要测量其他Javascript事件绑定的性能开销(使用jQuery live),开销可能会增加CPU负载,并且很难从执行时间分析中注意到。 如何衡量Javascript应用程序的两个不同版本之间的CPU负载差异?

如果我将JavaScript保持在底部或者将JavaScript保存在document.ready中的中,那么它们是一样的吗?

如果我将JavaScript代码保留在底部或将JavaScript代码保存在document.ready中的 ,那两者是否相同? 我对这两种方法感到困惑, http://api.jquery.com/ready/和http://developer.yahoo.com/performance/rules.html#js_bottom 。 将JavaScript代码置于底部(就在之前)是否有任何好处,即使我将代码保留在内部也是如此。 $(document).ready(function() { // code here }); 随着JavaScript的附加

淘汰组件或模板性能提升

我有一个可观察的数组。 对于每个数组元素,我生成一些非常扩展的html表单,因为可观察数组项是依次具有可观察对象的大对象: var records = ko.observableArray([ { p1: ko.observable(“initProp1”), p2: ko.observable(“initProp2”), // and so on pN: ko.observable(“initPropN”) }, //… ]); html可以是大型的,复杂的和动态的,在一些属性本身的基础上改变:为了实现这一点,我使用了ko:if bindings,已知在计算上是昂贵的( http://www.knockmeout。 net / 2012/03 / knockoutjs-performance-gotcha-1ifwith.html ),特别是对于有条件渲染的大型HTML。 性能开始受到影响,特别是在IE上。 注意到重复的,即使是动态的结构,我正在考虑直接在html中使用模板或组件intead绑定数据。 我会为每个动态配置使用不同的模板/组件。 一般来说,使用组件或模板可以提供性能增益,或者内部Ko可以完全按照我不使用的方式进行操作吗? 渲染模板和组件之间的性能有何不同? 否则,我正在考虑通过JQuery每条记录生成HTML,然后使用ko.applyBindingsToNode()动态绑定observables – 这可以提供性能提升吗? 我做了一些(减少的)测试,但我需要对问题进行一些跨浏览器的通用评估。 测试似乎不一致取决于我使用的浏览器甚至是我的数据集,并且无论如何都没有正确反映我的复杂性。 直接在应用程序上进行测试意味着太多的工作,可能是无用的,这是我买不起的,所以一般的指导方针对于至少提供一个用于实际实现和测试的解决方案的提示是很宝贵的。