Javascript加载执行问题探索

楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享。\n\n做前端开发少不了各种利器。比如我习惯用的还是Google浏览器和重型武器Fiddller。\n\n一: 原始情况\n\n首先大家看看如下的代码:\n\n <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”JsLoad.Default” %>\n \n <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n估计90%的程序员都会把js文件放在head中,但是大家有没有深究过呢?很多浏览器都会使用单一的线程来做“界面UI的更新”和“JS脚本的处理“,\n\n也就是当执行引擎遇到”\n\n此时用户很可能就会给你关掉。\n\n![enter image description here][1]\n\n从上面的瀑布图中我们可以看出二点:\n\n第一: 三个js文件并行下载,但是按我上面的理论中js应该是一个接一个的执行。然而在IE8,Firefox3.5和Chrome2都实现了js的并行下载,这是相当不错的,但是他还是会阻碍一些其他资源的下载,比如说图片。\n\n第二:图片1.jpg的下载是在js执行完成后触发的,这也验证了上面所说的情况,阻止了image的加载。\n\n二:第一步优化 既然js阻止了UI渲染,那么我们可以考虑将js放在</body>前,这样就可以让<script>前的html完美的呈现,不会让用户看到页面空白等待而苦恼的情况,自然就提高了友好性。\n\n <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”JsLoad.Default” %>\n \n <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n下面的图也展示了1.jpg和三个js几乎并行下载和执行。时间由上面的“469ms+”缩小到“326ms”。\n\n![enter image description here][2]\n\n三:第二步优化\n\n看上面的“瀑布图”,估计大家也看出来了,三个js文件进行了三次“Get”请求,大家都知道Get请求是需要带http头的,所以说需要耗费时间,那么我们采取的方案自然就是减少Get请求。通常有两种方案。\n\n第一:合并js文件,比如将上面的“hello.js”和“world.js“合并掉。\n\n第二:利用第三方工具,比如php中的Minify。\n\n关于第二种做法,taobao用的还是比较多的,看一下其中的一个script,应用了三个js文件。由3个Get请求变为了1个。\n\n![enter image description here][3]\n\n四:第三步优化\n\n不管是把js文件放在脚尾,还是三个合并一个,其本质都是”阻塞模式“,就是说锁死浏览器,当web页面越来越复杂,js文件越来越多,还是让我们头疼的,此时我们就提倡一种“无阻塞模式“加载js脚本,也就是页面全部呈现完再追加js,也就对应着window.onload事件触发后,我们才追加js,这就是所谓的“无阻塞“,但是其中有一个非常要注意的地方就是我们对js的要求是否有严格的顺序。\n\n第一:无顺序要求,比如我对”hello.js“和”world.js”没有顺序要求,那么我们完全可以用jquery来动态追加实现。\n\n <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”JsLoad.Default” %>\n \n <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n \n \n \n \n \n \n \n \n \n \n \n \n\n![enter image description here][4]\n\n从图中可以看出,”hello.js”和“world.js”出现在蓝色线以后,也就说明这两个js是在DomContentLoad结束后再进行触发加载的,这样就不会造成页面的锁定等待。\n\n第二:有顺序要求为什么一定要有顺序要求这个概念呢?对于上面的那个动态追加的“两个js”文件,在IE系列中,你不能保证hello.js一定会在world.js前执行,他只会按照服务器端返回的顺序执行代码。\n\n< %@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”JsLoad.Default” %>\n\n <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n \n \n \n \n \n \n \n \n \n \n \n\n![enter image description here][5]\n\n大家也能看到,页面完全Load的时间其实也就310ms左右,大大提高了网页的下载呈现和友好型。\n\n同样也可以看看腾讯网,他也是这么干的。\n\n![enter image description here][6]\n\n [1]: http://pic002.cnblogs.com/images/2011/214741/2011120417280062.png\n [2]: http://pic002.cnblogs.com/images/2011/214741/2011120417501610.png\n [3]: http://pic002.cnblogs.com/images/2011/214741/2011120418055663.png\n [4]: http://pic002.cnblogs.com/images/2011/214741/2011120418412664.png\n [5]: http://pic002.cnblogs.com/images/2011/214741/2011120419094111.png\n [6]: http://pic002.cnblogs.com/images/2011/214741/2011120419244427.png', 0, 1, NULL, ‘post’, ‘publish’, NULL, 0, ‘1’, ‘1’, ‘1’, 0, 502),

(4620, ‘2014互联网跨界趋势报告’, ‘2014-cross-borderinternet-trends’, 1413798943, 1423377762, ‘移动互联网是当前的时代趋势,已经势不可挡。物联网更是未来十年的趋势。我们身处在互联网时代的黎明时期,在此之前,世界是信息时代。工业革命、第四次科技革命带来的世界格局的变化正在发生剧烈的变化。这种变化身在人海之中的你也会感到强烈的不同。互联网对传统企业的改造可以用碰撞和融合来形容,跨界异业合作将是未来的大方向。\n\n在中国以BAT为首的巨头们已经开始一系列的并购,甚至是我们熟悉的文化产业。阿里巴巴以后会众筹电影?大家喜欢什么,就能演什么电影。这只是变化的冰山一角。如果你想了解更多来看看腾讯智酷重磅推出的这个调研报告吧——《2014互联网跨界趋势报告》。\n\n![][1]\n\n![][2]\n\n![][3]\n\n![][4]\n\n![][5]\n\n![][6]\n\n![][7]\n\n![][8]\n\n![][9]\n\n![][10]\n\n![][11]\n\n![][12]\n\n![][13]\n\n![][14]\n\n![][15]\n\n![][16]\n\n![][17]\n\n![][18]\n\n![][19]\n\n![][20]\n\n![][21]\n\n![][22]\n\n![][23]\n\n![][24]\n\n![][25]\n\n![][26]\n\n![][27]\n\n![][28]\n\n![][29]\n\n![][30]\n\n![][31]\n\n![][32]\n\n![][33]\n\n![][34]\n\n![][35]\n\n![][36]\n\n![][37]\n\n![][38]\n\n![][39]\n\n [1]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWiadnM8eXGoEibfRfn9VwdmDuGxjUc3YicqoLKe7RKnzKRocnLgTOez5Zw/0\n [2]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWvqDqToVRjiaCCxgHXSYPpWSqMCVwxs2pyEAIQkqbd6za7U33SQTCHibw/0\n [3]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWvRUMJyzAF6LwdlD76O0GqBJF2kwtelUvJIoq9tncslS8EtvJrdXuicA/0\n [4]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWia9GtxU3l2prjgqrqfZXAHKh7nIP23QiciaDeU6Lp4NLCQPApyRrw8fWQ/0\n [5]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW7pu3dPQ3OWAa0xbY3g32WaNM9222ia67zlnO5vpfRuKmzefNwzpok4g/0\n [6]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWA8CfgrxAepeV6QsaHu8d0sKgsibzgxQxqcYFNQ7edXHG9C3xCUFNhDg/0\n [7]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWUNj2g0iarYicT35K8HxyYCm9TxljxjOjiaKGuZu4c4iaNmOt7CQPKSATGw/0\n [8]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWpLx3Te8goWN5zDHtBibKw76XDcIYcZRpBia1bWzJq3omEWv1YYUveNhQ/0\n [9]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW2Z5qjQRMWicbn0COzDqOcoibe5HxickI7DGzbKhrs0xYOEhq2lAX9Vc4g/0\n [10]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWMOiaYlq9YouV5ib1YrMB6Ba8FhmmS7zgZKiczLtAmRRQrjQcaDqPhNm6Q/0\n [11]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWJGzlm22pVibn4ctPrOjqf0SwN56nnxj3GZ6Iy59J3xSdFP5Ghhg2hxQ/0\n [12]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW4VydI8v1GUQ9WEWf5CoMDRlIfXDW8qVibxxwJpXd1ibQkT7x9UgtWIsw/0\n [13]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWYRbyYctDdG2Sn2ibkjeUptQv9YfJ174mzyEJnGqKrv1YC3TQ2BS1btg/0\n [14]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWZfXqgGnCYvhk36SXl3ic0VlZUS5KFvr4RO33viazIvMqFzL36zicWfsXA/0\n [15]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW1HYVGmibe685zqeJZJHZtZjzZyIywprWpfM2oGFibgAhbxiaS7b7nogfA/0\n [16]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWLTVNsibK9YLmYYcAvU8t9SKTDvhnbkplibYDVpaw6FdmTNGlUkOfEFZQ/0\n [17]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWoibQHlcNtLeZnk2HIQFb5R9vgDHQ34CRqyczpb3RCuPS8FThURooicicA/0\n [18]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW5ic4icBO3YmmfXia1XjMuDfBicx0YoJTxX8zkXB2r1rLicAvXOER28xprHw/0\n [19]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWcBDJRqvTeHicXvem5iab1Ugx3jK3Lz7jWZPRZkCDoFTlKHgNqlqCEUew/0\n [20]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW8RaYvnQtWUcR1k8LzNJNwNpPib9gRZucicgcPGhAl9GCW2YS8E9pnvDw/0\n [21]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWkTvRibUibgAxz2jibJpmZx2ibIib3KcK1iaOK2iakxAXBRycnIibiaibd7TYCyFg/0\n [22]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWFpf1qAK7TEic8NOdyLx4PFIcNRmdib8VWeL2k7y1yic3o8gQ5ic2a4Uf6g/0\n [23]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWgAX7AQQtJODO6ZL51MzQX4ymRgWPj7UacQLn2u9E4FfmMjaVpfAcvQ/0\n [24]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWSBvRiaMSlRHnHtibPpOVo8pIsaR9L5GOsHicQro8tG0VFJy9lb4G0ZkGA/0\n [25]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWIiatwSraiaOoZJIHLibiaLEXNTNNRuB6RozkbpUibyRJ6flUibK7gnQ2x8vg/0\n [26]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWdic4OibCDlTOJibK2w1WicDOfwjA5nwdF4FBrAM7PMiaWrUKfCpgQNYD02w/0\n [27]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWXoibZICw7oeuryhaNGj2bkmWaIq1tgUWf9sZ0TZGNibFDbuwHNewGNTg/0\n [28]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWzMtbxibS6nbs0EKD3mkgic3a57X8hmG9suNebkaz4NIlXxddP5CaDgkg/0\n [29]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWyTqzZhYqK7YNCBqm0oph6kjtiazB7OZ80eZLkdMDiba3HleLCq7EJ2SQ/0\n [30]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWRW41am1Fx1ImtRgBQpIwHD5wIibpu9H72KYN7P7NWyXCczvmWlaTVAg/0\n [31]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW7r8fjRic33nj2kv4wAjPMOJ1iajDgkXlicZkibobs0eBZCBHIahxG9RnuA/0\n [32]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWlu50HYMobMgkiaBC9xXCjsLdP8akEtxudia2v0cB2a8ur7thwtWdvQxg/0\n [33]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWyRGhkOnJtNiazI7TpQHpUNkoX1sN2j4HAySeyR58Kw8UYGiaklgCQa0Q/0\n [34]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW5NP7GAa4Dfx3ibDkPkHVW377tBqiavAOIOlVj9EWiabB8HMcia0lna7V0Q/0\n [35]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWI6hE3IvwlI5cd0LznibXskIA5b4OzWTVLLSeeozD4fEOQz00lic1sOAQ/0\n [36]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWLefdicHA875gVStaNOQqOHtaLHlBEmf2tXCPrMDFvKhgg3GsImGpGvA/0\n [37]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWRNdhK7pzZfrbibpEBEdvYCxicqtbUAJicH3GXfyk3oIuM9AeYn5Xfpf2w/0\n [38]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHWZq6XIQ2CEDInIcFJxkpesYZHwaQnNCszxEHajIycNLgg8bg3iaq64wg/0\n [39]: http://mmbiz.qpic.cn/mmbiz/7yeGepzIXiaCic60Gs5Cdv826yqesh3nHW2icS7eIPqZHPTbF7p3MvrsF6OVpfOsmbHvmrvpTG405qhKmE5jKEg7g/0

WHY·LIAM wechat
记录生活,研究产品,分享设计,分析数据,讨论科技和商业,不定期扯淡。
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!