Dav*_*ing 32 javascript optimization performance jquery domready
我以前曾问过类似的问题,但我从未明确表达过我的观点,或者至少我认为这是一个相关的问题,值得提出来,看看是否有人能提出一些有见地的想法.
当使用jQuery时,我们中的许多人使用该jQuery.ready函数init在DOM加载时执行.它已成为使用jQuery将DOM操作程序添加到网页的事实上的标准方法.相关事件本身存在于某些浏览器中,但jQuery在其他浏览器中模拟它,例如某些IE版本.例:
<head>
<script>
var init = function() { alert('hello world'); };
$.ready(init);
</script>
现在,我们所有的测试都表明这个事件可能很慢.它并没有那么慢window.onload,但在执行之前它仍然经常延迟大约100毫秒.如果FF它可以高达200-300毫秒,特别是在刷新时.
这些是非常重要的毫秒,因为这是在进行任何DOM操作之前显示初始布局的时间量(例如隐藏下拉列表).很多时候,布局"闪烁"主要是由于使用缓慢的DOM就绪事件,迫使程序员使用CSS隐藏元素,并可能使其不易访问.
现在,如果我们在关闭body标签之前将init函数放在脚本标记中,它将更快地执行,通常大约一半时间但有时甚至更快:
<head>
<script>
var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>
一个简单的测试页面,证明了差异:http://jsbin.com/aqifon/10
我的意思是,我们并没有谈论几乎没有明显的差异,因为一些"优化警察"在使用有效选择器时会提升.我们正在讨论在进行DOM操作onload时的一些主要延迟.在FF中尝试这个例子,domready有时会慢100多倍(300ms vs 2ms).
现在我的问题:为什么jQuery.ready建议使用它显然比其他替代品慢得多？init在关闭BODY与使用之前调用之前的缺点是什么jQuery.ready？它可以说更安全"使用domReady,但在什么情况下它比其他选项更安全？(我正在考虑像document.write延迟脚本这样的东西)我们BODY在许多客户端网站上使用了近5年的方式,我们从未遇到过任何问题.它的速度要快得多.
我也很想知道,因为有很多关于jsPerf和优化选择器的模糊,每10000次执行几毫秒,为什么没有太多谈论这个？它基本上是用户面临的第一个延迟,并且在每个页面加载时切片50-100毫秒似乎相当简单......
首先要说的是:
不,init在关闭之前打电话给你没有任何不利之处<body>.它会像你注意到的那样表现更好,依赖于$.ready()并且也将完美地与所有浏览器一起使用(即使在IE上).
现在,有使用的理由$.ready(),在您的情况下,它们可能不适用:
$.ready()使开发人员能够以正确的顺序轻松完成工作.特别是,关键是不要引用尚未加载的DOM元素.虽然这很简单,但许多开发人员仍然觉得它令人困惑.$.ready()尽管很慢,但是很容易.init()并不一定容易/方便.它需要纪律和知识这些脚本的功能.特别是你经常会在依赖于jQuery的库中看到它,因为无论开发人员用什么方式来加载libs它都能使它工作.$.ready()<body/>不能保证.一个优点是,您可以将代码放在页面中的任何位置.在我们的案例中,我们在CMS中使用模板系统,将页面拼接在一起,大约10-30个模板用于不同的部分(取决于复杂性).
由于您希望模板可以在任何使用的页面上运行,因此您需要在其中包含必要的Javascript.对于这些情况,该ready()功能是一个真正的救星.
| 归档时间： |
|
| 查看次数： |
3804 次 |
| 最近记录： |