《前端工程师-高级WEB网站前端开发加载JavaScript指南》由会员分享，可在线阅读，更多相关《前端工程师-高级WEB网站前端开发加载JavaScript指南（8页珍藏版）》请在装配图网上搜索。
1、所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为什么JS不能像CSS、image一样并行下载了?AD： 外部JS的阻塞塞下载所有浏览器在下下载JS的时时候，会阻止止一切其他活活动，比如其其他资源的下下载，内容的的呈现等等。至至到JS下载载、解析、执执行完毕后才才开始继续并并行下载其他他资源并呈现现内容。有人会问：为什什么JS不能能像CSS、iimage一一样并行下载载了?这里需需要简单介绍绍一下浏览器器构造页面的的原理，当浏览器从服务务器接收到了了HTML文文档，并把HHTML在内内存中转
2、换成成DOM树，在在转换的过程程中如果发现现某个节点(node)上引用了CCSS或者IIMAGE，就就会再发1个个requeest去请求求CSS或iimage,然后继续执执行下面的转转换，而不需需要等待reequestt的返回，当当requeest返回后后，只需要把把返回的内容容放入到DOOM树中对应应的位置就OOK。但当引引用了JS的的时候，浏览览器发送1个个js reequestt就会一直等等待该reqquest的的返回。因为为浏览器需要要1个稳定的的DOM树结结构，而JSS中很有可能能有代码直接接改变了DOOM树结构，比比如使用doocumennt.wriite 或 appenndChi
3、lld,甚至是是直接使用的的locattion.hhref进行行跳转，浏览览器为了防止止出现JS修修改DOM树树，需要重新新构建DOMM树的情况，所所以就会阻塞塞其他的下载载和呈现.阻塞下载图：下下图是访问bblogjaava首页的的时间瀑布图图，可以看出出来开始的22个imagge都是并行行下载的，而而后面的2个个JS都是阻阻塞下载的(1个1个下下载)。嵌入JS的阻塞塞下载嵌入JS是指直直接写在HTTML文档中中的JS代码码。上面说了了引用外部的的JS会阻塞塞其后的资源源下载和其后后的内容呈现现，哪嵌入的的JS又会是是怎样阻塞的的了，看下面面的列2个代代码：代码1：1. div 2. ul
4、3. libllogjavvaspannstylle=coolor:#8000000;li 4. liCSSDNspaanstyyle=ccolor:#8000000;li 5. li博客客园spannstylle=coolor:#8000000;li 6. liABBCspannstylle=coolor:#8000000;li 7. liAAAAspannstylle=coolor:#8000000;li 8. ul 9. spaanstyyle=ccolor:#8000000;div 10. scrriptttype=text/javasscriptt 11. /循环5秒钟 12. va
5、rn=Nummber(nnewDaate(); 13. varrn2=Numbber(neewDatte(); 14. whille(n22-n)(6*1000) 15. n2=Numbeer(newwDatee(); 16. 17. spaanstyyle=ccolor:#8000000;scriipt 18. div 19. ul 20. liMSSNspannstylle=coolor:#8000000;li 21. liGOOOGLEsspansstyle=coloor:#88000000;lii 22. liYAAHOOsppansttyle=colorr:#8000000;li 2
6、3. ul 24. spaanstyyle=ccolor:#8000000;div 代码2(tesst.zipp里面的代码码与代码1的的JS代码一一模一样)：1. div 2. ul 3. libllogjavvaspannstylle=coolor:#8000000;li 4. liCSSDNspaanstyyle=ccolor:#8000000;li 5. li博客客园spannstylle=coolor:#8000000;li 6. liABBCspannstylle=coolor:#8000000;li 7. liAAAAspannstylle=coolor:#8000000;li 8
7、. ul 9. spaanstyyle=ccolor:#8000000;div 10. scrriptttype=text/javasscripttsrcc=htttp:/t/Filees/BeaarRui/test.zipspan11. style=colorr:#8000000;scrript 12. div 13. ul 14. liMSSNspannstylle=coolor:#8000000;li 15. liGOOOGLEsspansstyle=coloor:#88000000;lii 16. liYAAHOOsppansttyle=colorr:#8000000;li 17. u
8、l 18. spaanstyyle=ccolor:#8000000;div运行后，会发现现代码1中，在在前5秒中页页面上是一篇篇空白，5秒秒中后页面全全部显示。 代码2中，前前5秒中bllogjavva,csddn等先显示示出来，5秒秒后MSN才才显示出来。可以看出嵌入JJS会阻塞所所有内容的呈呈现，而外部部JS只会阻阻塞其后内容容的显示，22种方式都会会阻塞其后资资源的下载。嵌入JS导致CCSS阻塞加加载的问题CSS怎么会阻阻塞加载了?CSS本来来是可以并行行下载的，在在什么情况下下会出现阻塞塞加载了(在在测试观察中中，IE6下下CSS都是是阻塞加载，下下面的测试在在非IE6下下进行)：代码
9、1(为了效效果，这里选选择了1个国国外服务器的的CSS)：1. htmlxmmlns=http:/wwww.w3.oorg/19999/xhhtml 2. head 3. ttitlejsteestspaanstyyle=ccolor:#8000000;titlle 4. mmetahhttp-eequiv=Conttent-TTypeconteent=ttext/hhtml;charsset=UTTF-8/ 5. linnktyppe=teext/csssreel=sttyleshheethref=httpp:/699.64.992.2055/Css/Home33.css/ 6. spans
10、tylee=collor:#8000000;hhead 7. body 8. iimgsrrc=htttp:/www.bblogjaava.neet/imaages/llogo.ggif/bbr/ 9. iimgsrrc=htttp:/n/www/imagees/csddnindeex_picclogo.gif/ 10. spanstylee=collor:#8000000;bbody 11. spanstylee=collor:#8000000;hhtml时间瀑布图：代码2(只加了了1个空的嵌嵌入JS)：1. head 2. tittlejsstesttspanstylee=collor:#
11、8000000;ttitle 3. mettahtttp-equuiv=CContennt-Typpecoontentt=texxt/htmml;chharsett=UTF-8/ 4. linktype=textt/cssrel=styllesheeethrref=hhttp:/69.664.92.205/CCss/Hoome3.ccss/ 5. scrippttyppe=teext/jaavascrript 6. funcctiona() 7. spanstylee=collor:#8000000;sscriptt 8. spaanstyyle=ccolor:#8000000;headd 9
12、. boddy 10. imgsrc=http:/br/ 11. imgsrc=http:/ 12. spaanstyyle=ccolor:#8000000;bodyy时间瀑布图:从时间瀑布图中中可以看出，代代码2中，CCSS和图片片并没有并行行下载，而是是等待CSSS下载完毕后后才去并行下下载后面的22个图片，当当CSS后面面跟着嵌入的的JS的时候候，该CSSS就会出现阻阻塞后面资源源下载的情况况。有人可能会问，这这里为什么不不说说嵌入的的JS阻塞了了后面的资源源，而是说CCSS阻塞了了? 想想我我们现在用的的是1个空函函数，解析这这个空函数11ms就够，而而后面2个图图片是等CSSS下载完
13、11.3s后才才开始下载。大大家还可以试试试把嵌入JJS放到CSSS前面，就就不会出现阻阻塞的情况了了。根本原因：因为为浏览器会维维持htmll中css和和js的顺序序，样式表必必须在嵌入的的JS执行前前先加载、解解析完。而嵌嵌入的JS会会阻塞后面的的资源加载，所所以就会出现现上面CSSS阻塞下载的的情况。嵌入JS应该放放在什么位置置1、放在底部，虽虽然放在底部部照样会阻塞塞所有呈现，但但不会阻塞资资源下载。2、如果嵌入JJS放在heead中，请请把嵌入JSS放在CSSS头部。3、使用deffer4、不要在嵌入入的JS中调调用运行时间间较长的函数数，如果一定定要用，可以以用setTTimeouut来调用PS：很多网站站喜欢在heead中嵌入入JS，并且且习惯放在CCSS后面，比比如看到的，当当然也有很多多网站是把JJS放到CSSS前面的，比比如yahooo,gooogle
前端工程师-高级WEB网站前端开发加载JavaScript指南
