有很多问题要求缓存jQuery对象,但是我找不到一个问一个jQuery对象可以和应该缓存的地方.我有一个网页,其中包含一个包含一系列功能的
JavaScript文件,如下所示.
$(document).ready(function () { // do some setup }); /* function queries the DOM with the same selector multiple times without caching */ function myFunctionOne() { $('#name_input').css("border","1px solid #ccc"); $('#name_input').val(someValue); } /* function uses cached object from a single query */ function myFunctionTwo() { var nameInput = $('#name_input') nameInput.css("border","1px solid #ccc"); nameInput.val(someValue); // do some other stuff with cached selector }
在myFunctionOne中,我低效地查询DOM两次,而在myFunctionTwo中,我查询DOM一次,将结果缓存在局部变量中,然后使用该变量.我知道myFunctionTwo中的方法更有效但我不确定我应该在哪里实际缓存这些对象.在那一刻我在方法级别缓存对象,但我想知道我是否可以实际缓存它在更高级别,然后在多个函数中使用它.这样我只会查询一次DOM,然后在该文件的所有函数中重用结果.我建议的一个例子如下所示.
$(document).ready(function () { // do some setup var nameInput = $('#name_input') }); /* function uses cached query result from .ready function above */ function myFunctionOne() { nameInput .css("border","1px solid #ccc"); nameInput .val(someValue); } /* function uses cached query result from .ready function above */ function myFunctionTwo() { nameInput.val(someValue); // do some other stuff with cached selector }
这种方法是否合理还是有更好的方法吗?也许使用.ready函数是一个不好的地方进行这种设置,因为它会减慢页面加载?是否有另一种方法可以在对象级别缓存jQuery对象,还是只应在功能级别缓存它们?
解决方法
一如既往地在这些问题中,不要过早优化.在这种情况下,它意味着在您发现性能问题之前不要使用任何缓存.如果您的目标客户使用的是低规格的计算机或移动设备,这意味着您需要自己在低规格硬件上进行测试,以便识别出这些问题.我强烈建议您在尝试通过添加缓存来提高速度之前先明确一下.
还有一些要点:
>如果您使用的是使用ID的选择器,它应该很快,因为它将在后台使用getElementById,因此不需要缓存.>使用方法链而不是缓存,只使用选择器一次>如果您实现了缓存,请先在本地执行.方法之间的缓存在代码复杂性方面比本地缓存花费更多.>使用.ready很好.它在DOM加载后运行,是完成设置任务的正确位置.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。