解决google maps api阻塞页面渲染的问题

google maps的api使用很方便,只要在用使用google maps的页面引入http://maps.google.com/maps/api/js?sensor=false就可以了。


但是在项目中这样使用后,发现domReady事件被严重阻塞(甚至会延迟十几秒)

因为domReady只有页面中所有的script都运行完后才会触发,而google的服务器往往很慢……直接用script标签来加入这个壳,会使domReady变得不可控。

为了防止阻塞domReady,对于不是必须在渲染前执行的js代码,一般使用document.createElement创建script标签,这样浏览器会在domReady后再下载这些script并执行。我一般使用这样的代码:

$.loadJs = function ( src ) {
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = src;
    document.body.appendChild( script );
}

在使用$.loadJs加载http://maps.google.com/maps/api/js?sensor=false后,domReady正常了,但是google maps却不能正常使用了。

审查元素发现,壳虽然被引入了,但是依赖的子模块都没有引入进来,于是我们检查壳里加载子模块的代码:

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
    function getScript(src) {
        document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
    }
    .....

乖乖,居然用document.write。我们知道document.write只有在输出流还没有闭合的时候才能输出内容,而我们用$.loadJs方法加载壳的时候,输出流早就关闭了。

这个怎么解决呢,总不能改google的代码吧?曾经想过把这个壳存到本地,修改后使用,但是谁知道google哪天修改了什么东东呢?

仔细分析了一下,这个壳实际上只是设定一些参数,然后用document.write加载另一个壳http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/7/11/main.js,实际加载模块的动作是在后者中进行。

万幸,后者加载子模块使用的是document.createElement方法……

冥思苦想后,想出一个hack的方法:在调用第一个壳之前将原生的document.write方法保存起来,将其改写为调用$.loadJs,调用之后恢复原有的方法(因为write只是用了一次)。

$.writeListener = function ( ) {
  var write = document.write;
  document.write = function ( html ) {
    var scriptPattern = new RegExp( ']*src=[\'"]([^\'"<>]*)["\'][^>]*>', 'i' );
    if ( scriptPattern.test( html ) ) {
      src = html.match( scriptPattern )[1];
      $.loadJs( src );
      document.write = write;
    } else {
      write.call( document, html );
    }
  }
}
$.loadJs( 'http://maps.google.com/maps/api/js?sensor=false' );

暂时只能想到这里,哪位有更好的解决思路,请不吝赐教。

This entry was posted in IT技术, Javascript and tagged . Bookmark the permalink.