高性能web开发如何加载JS JS应该放在哪里？

阻止外部JS的下载所有浏览器在下载JS的时候都会阻止其他所有的活动，比如下载其他资源，呈现内容等等。在JS被下载、解析和执行之前，其他资源将继续并行下载并呈现内容。有人可能会问：为什么JS不能像CSS和image一样并行下载？在这里，我们需要简单介绍一下浏览器的页面构建原理。当浏览器从服务器端接收到HTML文档，并将HTML转换为内存中的DOM树时，如果在转换过程中发现某个节点上引用了CSS或image，就会再发送一个请求请求CSS或IMAGE的请求，然后继续执行下面的转换，不需要等待请求的返回。当请求返回时，它只需要将返回的内容放入DOM树中的相应位置，然后单击OK。但是，当引用js时，浏览器在发送JS请求时总是会等待请求的返回。因为浏览器需要一个稳定的DOM树结构，而且很有可能JS中的代码直接改变了DOM树结构，比如使用document.write或者appendChild甚至直接使用location.href进行跳转，为了防止JS修改DOM树，浏览器需要重新构建DOM树。因此，其他下载和演示文稿将被阻止。阻止下载图：下图是访问blogjava主页的瀑布图。可以看到，前两个镜像是并行下载的，而后面两个js被阻止下载(每次下载一个)。

阻止嵌入式JS下载嵌入式JS是指直接用HTML文档编写的JS代码。上面说了引用外部JS会阻塞后续的资源下载和内容呈现，什么样的嵌入式JS会阻塞。请看列中的以下两个代码：代码1:复制代码如下： ul libojava/Li licsdn/Li licrdan/Li liabc/Li liaaa/Li ul div脚本类型=' text/JavaScript'/循环5秒var n=Number(new Date())；var n2=数字(新日期())；while((N2-n)(6 * 1000)){ N2=Number(new Date())；}/script div ul limsn/Li Li Gog/Li Li ooo/Li/ul/div code 2(2中的代码(test.zip与代码1中的JS代码完全相同):复制的代码如下： div ul Li blog Java/Li Li licsdn/Li Li blog park/Li ABC/Li liaa/Li ul div script type=' text/JavaScript ' src=' http 3360 test . zip ' script div ul limsn/Li Li Li Gog/Li liya ho/Li/Li在代码2中，blogjava、csdn等。在最初的5秒钟内首先显示，而MSN仅在5秒钟后显示。可以看出，嵌入JS会阻挡所有内容的呈现，而外部JS只会阻挡后续内容的显示，两种方法都会阻挡后续资源的下载。嵌入JS会导致CSS阻止加载。CSS怎么能阻止加载？CSS可以并行下载，但是在什么情况下会被屏蔽(测试观察中，CSS在IE6下被屏蔽，下面的测试在非IE6下进行):代码1(为了有效，这里选择了一个外地服务器的CSS):复制代码如下： html XMLNS=' 3358www.w3.org/1999/XHTML' head title JS TestTitle Meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 '/link type=' text/Css ' rel='样式表' href=' http://69 . 64 . 92 . 205/Css/Home 3 . Css '/head body img src=' http://www . JB 51 . net/images/Logo . gif '/span br/img src=' http:http://csdnimg.cn/www/images/csdnindex _ piclogo . gif '/body/html time瀑布：。

代码2(只添加了一个空的嵌入式js):head title js test title meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 '/link type=' text/Css ' rel='样式表' href=' http://69 . 64 . 92 . 205/Css/Home 3 . Css '/Script type=' text/JavaScript ' function a(){ }/Script body img src=' http://www.jb51.net/images/logo.gif'//spanbr/img src=' http :http://csdnimg.cn/www/images/csdnindex _ piclogo . gif '/body time瀑布3360 。

从时间瀑布图可以看出，在代码2中，CSS和图片并不是并行下载的，而是在CSS下载完之后，再并行下载下两张图片。当CSS后面跟嵌入式JS时，CSS会阻止下载以下资源。有人可能会问，为什么不说嵌入式JS屏蔽了背后的资源，而CSS屏蔽了呢？想一想我们现在用的是一个空函数，解析这个空函数1ms就够了，而接下来的两张图片要等CSS下载了1.3s才会下载，你也可以尝试把内嵌的JS放在CSS前面，这样就不会有阻塞了。根本原因：因为浏览器会维护html中css和js的顺序，所以在执行嵌入的JS之前必须加载并解析样式表。嵌入的JS会阻止后面的资源加载，所以上面的CSS会阻止下载。嵌入式JS应该放在哪里？1.放在底部。尽管将其放在底部仍会阻止所有演示文稿，但不会阻止资源下载。2.如果嵌入式JS放在头部，请将嵌入式JS放在CSS头部。3.使用延期4。不要在嵌入式JS中调用运行时间较长的函数。如果一定要用，可以用setTimeout调用PS:很多网站都喜欢在头部嵌入JS，习惯放在CSS后面，比如www.qq.com。当然，很多网站把JS放在CSS前面，比如雅虎、谷歌【声明】。请注明来源于：http://www.blogjava.net/BearRui/.禁止商业使用！