上次说到js的阻塞dom渲染可能出现的白屏现象,所以对于js我们需要一些优化。首先我们可以模仿通信中的时分的概念,使用 setTime()来执行一段js代码然后渲染页面然后再执行一段js代码,这样可以有效防止白屏现象。
当然,你可以能意识到了,这样并没有提高载入速度,那么如何才能提高载入速度呢?如果js代码下载得更快是不是就可以了?加载js代码所花的时间,主要是加载外部js时,如果有多个js脚本我们要一个个的下载执行不是很浪费时间而且这个过程中并没有渲染页面。ok,第一个方法,我们并行的去下载js脚本。
如何才能并行的下载js脚本呢,你可能立刻会回答我XHR注入啊,很有名的。在这里总结一下可以无阻塞加载脚本的技术,你当然可以把所有的js写在页面内,可是你如果要使用jquery库的话,或者js代码很长,这是不理智的,而且这也不利于利用js的缓存。
- XHR eval
- XHR 注入
- script in iframe
- script DOM Element
- script defer
- Document.write Script Tag
XHR eval 这种技术看名字就知道了,eval,主要利用eval这个函数,这是相对比较危险的 通过new一个xhr对象来像服务器请求一个脚本并执行,事实上,慎用。
XHR 注入的比较有意思,它也是通过XHR来向服务器请求脚本,但是它是通过document.creatELement()来创建一个script表签,很有意思,非常鸡贼的一种做法
以上两种做法因为都使用了XHR的技术,所以要受同源策略的限制,不能解决跨域的问题,事实上很多时候我们需要跨域。
下面的几种有可以解决这个问题的办法
对于script in iframe,这个,主页中的iframe是和其他组件一起加载的,我们将iframe的width height都设为0,使其不可见,然后在iframe中去实现异步加载,这个其实很得不偿失,因为iframe元素是开销最大的dom元素了,而且iframe本身也要受同源策略的限制。
script defer,是IE自己实行的一个,所以浏览器兼容不好,不过新版的chrome ff等都实现了对它的支持、
最后一种技术的话,也只是在ie中才支持,也只是并行下载脚本,仍会阻塞渲染。
从上面几种技术,我们发现,似乎很多情况下,script DOM Element是一个很好的选择,其实也正是如此。
在上面我们谈论了并行下载的技术,但是如果我们有好几个脚本,我们并行下载了,但是下载速度有快有慢,下载下来即执行,如果代码之间存在依赖关系,那么执行就会出现问题,即,我们如何保证多js文件执行是顺序执行的,明天我们会继续回忆这个。