前端优化-Javascript篇(1.脚本放在底部)

　　从本篇博客开始，我会跟大家分享下我关于前端优化方面的学习，由于时间原因每篇博客只能分享一小点内容，一点点深入前端优化的细节。
　　做过前端的人都知道，前端优化是一个永远都不会停止的话题(当然，不管是哪个技术，优化总是无止境的)。在前端优化这个问题上，最被大家熟知的应该就是雅虎前端优化14条军规以及雅虎前端优化34条规则。大部分也都已经应用到了实际开发中。而我的分享并不是按照优化建议来进行的，我的计划是整个优化按照不同模块进行划分，分别是Javascript，CSS，HTML还有其他的一些细节。今天就先从Javascript开始。
　　Javascript开篇就跟大家分享一个比较简单的规则————脚本后置，这个是一个最基本的优化策略，我想大家都应该知道，可是我还是想通过实际的例子来加深一下自己的理解，也许在这个简单的事情后面可以挖掘出更多有意思的东西。
　　为了验证脚本后置对前端优化究竟会有多大的影响，我把我的博客作为测试对象，在首页插入下面这个脚本:

function doSomething(n){
    //模拟一个需要执行n秒的脚本
    var start = new Date().getTime() ;
    while((new Date().getTime() - start) < 1000 * n){}
}
//执行5秒
doSomething(5) ;

　　我把这个脚本命名为doSomething.js
　　首先，先来看看脚本前置的情况，下图是脚本前置情况下的网络瀑布图
　　
　　其次，再来看看脚本后置的情况，下图是脚本后置情况下的网络瀑布图
　　
　　

　　通过上面两幅图，结果已经很明显了，虽然现代浏览器已经支持资源的并行下载，但是当脚本阻塞时仍然会阻止其他图片资源和页面的加载，如果站点是一个有很多图片的网站那么这种情况将严重影响用户体验；而脚本后置的话，图片和脚本是并行下载，然后先加载图片和页面然后才执行耗时的脚本，这样就不会阻塞图片和页面的加载。
　　从上面的瀑布图我们还可以看出很多浏览器加载策略方面的东西，通过对比不同浏览器的瀑布图也可以看出各自的加载策略，这方面的知识还需要在摸索，也希望有了解的人来说说不同浏览器之间加载策略的不同。

最后，安利下我的个人博客，欢迎访问: http://bin-playground.top