javascript的延时加载技术

来源:互联网 发布:office彻底清除软件 编辑:程序博客网 时间:2024/04/16 05:15

在学习《高性能javascript》的时候看到了这个技术(小技巧)。

具体实现:

var bFlag = "a boolean value that get from checking something";function doSomething() {// if check passed,do some thing}function doAnotherThing() {// if check not passed,do another thing}function beforeLazyLoad() {if ( bFlag ) {console.log( "check Passed" );doSomething();} else {console.log( "check not passed" );doAnotherThing();}}function lazyLoad() {if ( bFlag ) {lazyLoad = function() {console.log( "check Passed" );doSomething();}} else {lazyLoad = function() {console.log( "check not passed" );doAnotherThing();}}}
在实际情况中,都不会将bFlag写成全局变量、或者写在方法之外。而是直接写在if else的条件体中

譬如说:

if ( target.addEventListener ) {// do something} else {// do another thing}
这边的target是任意dom元素。


那么,延迟加载有什么好处呢?回到刚才的那个实现。

我们每次调用beforeLazyLoad()的时候都会检测bFlag的值。(一般bFlag值在整个脚本运行期间是不会改变的)。

而我们知道浏览器特性检测也是有性能开销的(javascript的任何点操作(访问)都有开销),如果beforeLazyLoad将被调用多次,那么这个检测工作会多次重复,造成性能的浪费。

lazyLoad方法解决了这个问题,在lazyLoad第一次被调用时,将会选择合适的处理并重写原来的lazyLoad方法。以后每次调用lazyLoad方法,都将不再检测bFlag值。



0 0