关于js对页面加载影响的测试

这两天在处理一个小需求，目的是当用户页面里引入一段外部js（外部js由内部生成，用户手动添加），然后根据外部js提供参数回调不同的js文件和方法（js文件和方法未知，由参数传递），回调的js文件异步在客户的页面里加载，目前已实现基本功能，之所以这么做就是为了尽可能的减小外部js对客户页面加载效率的影响。
事实上目前接触到公司的产品中也遇到了这种情况，页面里因为有较多的辅助功能而引入了比较多的js文件，本地测试开发的话基本看不出对页面加载的影响，但是在模拟的较差网络环境下页面瞬间空白的出现时间有点超过预期，虽然不仅仅是那些js文件造成的加载白屏现象，但是过多js零碎文件的引入任然拖慢了页面的加载速度，目前建议使用$LABjs管理和Combo脚本文件来优化。
鉴于这个小需求又想到了js对大型网站页面加载的影响条件，下面根据不同的情况做了不同的对比，已经尽可能的模拟同等条件下的载入效果，展示上会略有不同，已经取了平均值，数据还算是比较可靠。

第一种方式：js文件在页面元素上面加载




Demo
目前较多网站采取了这种方式，虽然这种方式会阻塞页面流的正常加载，但是也是最安全的一种方式。
第二种方式：js放到页面元素底部加载




Demo
Yslow建议的方式，会在页面元素先载入完毕再加载js文件，一些网站优化后都会把js文件放到底部加载。
第三种方式：js文件顺序依赖异步加载




Demo
一些网站会使用这种方式，这种方式不阻碍页面流的加载，但是当js文件过多时就会与“减少HTTP请求”这个条件冲突，页面载入完毕时间明显比非顺序依赖加载js文件方式要长一些。
第四种方式：另一种js文件顺序依赖异步加载




Demo
和第三种方式相同，只不过代码更加完善，更加适用于项目。可以看出页面载入时间依然较长。
第五种方式：利用$LAB.js




Demo
去年新版Twitter就是使用了$LAB.js的方式来管理页面里的js文件，使用$LAB.js的神奇之处在于即不会阻碍页面流的加载，又可以实现js并行顺序依赖加载，这种方式非常适合页面里有较多的js文件。
引入外部js大概就上面几种常用情况，但实际运用还需要根据项目需求，总结一些就是
合理Combo文件，你的服务器不会因为一个几KB或者几十KB的Combo后的js文件拖慢速度；
无阻塞加载js文件，优先保证页面元素加载。
最大化浏览器的多线程性能。
相信你的服务器，避免过度优化。
php可以使用flush();
PS：
Demo参考原型：动态加载js

/*Make A Hard Decision*/