前端优化-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
  起首,先来看看剧本前置的状况,下图是剧本前置状况下的收集瀑布图
  《前端优化-Javascript篇(1.剧本放在底部)》
  其次,再来看看剧本后置的状况,下图是剧本后置状况下的收集瀑布图
  《前端优化-Javascript篇(1.剧本放在底部)》
  

  经由过程上面两幅图,效果已很明显了,虽然当代浏览器已支撑资本的并行下载,然则当剧本壅塞时仍然会阻挠其他图片资本和页面的加载,假如站点是一个有许多图片的网站那末这类状况将严重影响用户体验;而剧本后置的话,图片和剧本是并行下载,然后先加载图片和页面然后才实行耗时的剧本,如许就不会壅塞图片和页面的加载。
  从上面的瀑布图我们还能够看出许多浏览器加载战略方面的东西,经由过程对照差别浏览器的瀑布图也能够看出各自的加载战略,这方面的学问还须要在探索,也愿望有相识的人来说说差别浏览器之间加载战略的差别。

末了,安利下我的个人博客,迎接接见: http://bin-playground.top

    原文作者:lakb248
    原文地址: https://segmentfault.com/a/1190000000518640
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞