做前端开发少不了各种利器. 比如我习惯用的还是 Google 浏览器和重型武器 Fiddller.
一: 原始情况
首先大家看看如下的代码:
估计 90% 的程序员都会把 JS 文件放在 head 中, 但是大家有没有深究过呢? 很多浏览器都会使用单一的线程来做 "界面 UI 的更新" 和 "JS 脚本的处理",
也就是当执行引擎遇到 "<script>" 的时候, 此时页面的下载和渲染都必须等待 < script > 执行完毕. 那么对用户而言就悲哀了, 看着锁住的页面,
此时用户很可能就会给你关掉.
从上面的瀑布图中我们可以看出二点:
第一:
三个 JS 文件并行下载, 但是按我上面的理论中 JS 应该是一个接一个的执行. 然而在 IE8,Firefox3.5 和 Chrome2 都实现了 JS 的并行下载,
这是相当不错的, 但是他还是会阻碍一些其他资源的下载, 比如说图片.
第二:
图片 1.jpg 的下载是在 JS 执行完成后触发的, 这也验证了上面所说的情况, 阻止了 image 的加载.
二: 第一步优化
既然 JS 阻止了 UI 渲染, 那么我们可以考虑将 JS 放在 </body > 前, 这样就可以让 < script > 前的 html 完美的呈现, 不会让用户看到页面空白等待
而苦恼的情况, 自然就提高了友好性.
下面的图也展示了 1.jpg 和三个 JS 几乎并行下载和执行. 时间由上面的 "469ms+" 缩小到 "326ms".
三: 第二步优化
看上面的 "瀑布图", 估计大家也看出来了, 三个 JS 文件进行了三次 "Get" 请求, 大家都知道 Get 请求是需要带 http 头的,
所以说需要耗费时间, 那么我们采取的方案自然就是减少 Get 请求. 通常有两种方案.
第一: 合并 JS 文件, 比如将上面的 "hello.js" 和 "world.js" 合并掉.
第二: 利用第三方工具, 比如 PHP 中的 Minify.
关于第二种做法, taobao 用的还是比较多的, 看一下其中的一个 script, 应用了三个 JS 文件. 由 3 个 Get 请求变为了 1 个.
四: 第三步优化
不管是把 JS 文件放在脚尾, 还是三个合并一个, 其本质都是 "阻塞模式", 就是说锁死浏览器, 当 web 页面越来越复杂, JS 文件越来越多, 还是
让我们头疼的, 此时我们就提倡一种 "无阻塞模式" 加载 JS 脚本, 也就是页面全部呈现完再追加 JS, 也就对应着 Windows.onload 事件触发后, 我们才
追加 JS, 这就是所谓的 "无阻塞", 但是其中有一个非常要注意的地方就是我们对 JS 的要求是否有严格的顺序.
第一: 无顺序要求, 比如我对 "hello.js" 和 "world.js" 没有顺序要求, 那么我们完全可以用 jQuery 来动态追加实现.
从图中可以看出,"hello.js" 和 "world.js" 出现在蓝色线以后, 也就说明这两个 JS 是在 DomContentLoad 结束后再进行触发加载的, 这样就不会造成页面的锁定等待.
第二: 有顺序要求
为什么一定要有顺序要求这个概念呢? 对于上面的那个动态追加的 "两个 js" 文件, 在 IE 系列中, 你不能保证 hello.JS 一定会在 world.JS 前执行,
他只会按照服务器端返回的顺序执行代码.
大家也能看到, 页面完全 Load 的时间其实也就 310ms 左右, 大大提高了网页的下载呈现和友好型.
同样也可以看看腾讯网, 他也是这么干的.
来源: http://www.jianshu.com/p/abd0f5698b5e