javascript最重要也最根本的性能优化标准之一是避免工作,避免工作又包括两点,第一,不做不必要的工作,第二,不做重复的已经完成的工作。第一部分可以通过代码重构完成,第二部分不做重复的工作有时候难以确定,很多工作可能因为各种原因不可避免的被重复,但我们仍可以通过对业务和技术场景的分析减少重复工作进而提升javascript的效率。下面是web前端开发中经常用到的浏览器检测的一个示例。
浏览器检测
优化前代码示例
分析代码可知优化前代码每次调用addHandler函数都要进行浏览器的功能检测,我们可以通过以下方式进行优化
1 - 延迟加载
延迟加载函数示例
调用延迟加载函数总是在第一次使用较长时间,因为他必须运行检测然后调用另一个函数以完成任务。但是,后续调用同一个函数将会快很多,因为不在执行检测逻辑。延迟加载适用于函数不会在页面上立即被用到的场合
2 - 条件预加载
延迟加载函数示例
条件预加载在脚本加载之前提前进行检查,而不等待函数调用,这样做虽然仍旧只检测一次,但检测过程来的更早。条件预加载在脚本加载时进行检测,适用于一个函数马上就会被用到而且在整个页面的生命周期中反复用到的场合