高性能前端(3) — 高性能JavaScript

Author : luckyGirl

使用事件代理 有时候我们会感觉到页面反应迟钝,这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个div中有10个按钮,你只需要在div上附加一次事件句柄就可以了,而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。 缓存选择器查询结果 选择器查询是开销很大的方法。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。比如,下面这样的写法就是糟糕的写法: jQuery(‘#top’).find(‘p.classA’); jQuery(‘#top’).find(‘p.classB’); 更好的写法是: var cached = jQuery(‘#top’); cached.find(‘p.classA’); cached.find(‘p.classB’); 避免频繁的IO操作 对 cookie 与 localstorage 操作的API是同步的,且cookie与localstorage是多个tab页面间共享的,多页面同时操作时会存在同步加锁机制,建议应尽量少[Read More]

standard

高性能前端(1) — 高性能HTML

Author : luckyGirl

避免使用Iframe Iframe也叫内联frame,可以把一个HTML文档嵌入到另一个文档中。使用iframe的好处是被嵌入的文档可以完全独立于其父文档,凭借此特点我们通常可以使浏览器模拟多线程,需要注意的是使用iframe并不会增加同域名下的并行下载数,浏览器对同域名的连接总是共享浏览器级别的连接池,即使是跨窗口或跨标签页,这在所有主流浏览器都是如此。也因为这样这让iframe带来的好处大打折扣。 在页面加载过程中iframe元素会阻塞父文档onload事件的触发,而开发者程序通常会在onload事件触发时初始化UI操作。例如,设置登录区域的焦点。因为用户习惯等待这一操作,所以尽可能的让onload事件触发从而使用户的等待时间变短是非常重要的。另外开发者会把一些重要的行为绑定在unload事件上,而不幸的是在一些浏览器中,只有当onload事件触发后unload事件才能触发,如果onload事件长时间未触发,而用户已经离开当前页面,那么unload事件也将永远得不到触发。 那是否有方案可以让onload事件不被iframe阻塞吗?有个简单的解决方案来避免onload事件被阻塞,使用[Read More]

standard