`
Fangrn
  • 浏览: 818394 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高性能web开发 - 如何加载JS,JS应该放在什么位置?

    博客分类:
  • j2ee
阅读更多

外部JS的阻塞下载

    所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈 现内容。

    有人会问:为什么JS不能像CSS、image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理,
当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回 后,只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

    阻塞下载图:下图是访问blogjava首页的时间瀑布图,可以看出来开始的2个image都是并行下载的,而后面的2个JS都是阻塞下载的(1个1个下 载)。

嵌入JS的阻塞下载

    嵌入JS是指直接写在HTML文档中的JS代码。上面说了引用外部的JS会阻塞其后的资源下载和其后的内容呈现,哪嵌入的JS又会是怎样阻塞的了,看下面 的列2个代码:
    代码1:
<</span>div >

         ul >
            
li > blogjava span style="color: #800000;">li >
            
li > CSDN span style="color: #800000;">li >
            
li > 博客园 span style="color: #800000;">li >
            
li > ABC span style="color: #800000;">li >
            
li > AAA span style="color: #800000;">li >
        
ul >     
    
span style="color: #800000;">div >
    
script  type ="text/javascript" >
        // 循环5秒钟
        
var  n  =  Number( new  Date());
    
var  n2  =  Number( new  Date());
   
while ((n2  -  n)   ( 6 * 1000 )){
       n2 
=  Number( new  Date());
     }
    
span style="color: #800000;">script >
  
div >
        
ul >
            
li > MSN span style="color: #800000;">li >
            
li > GOOGLE span style="color: #800000;">li >
            
li > YAHOO span style="color: #800000;">li >
        
ul >     
    
span style="color: #800000;">div >

    代码2(test.zip里面的代码与代码1的JS代码一模一样):
 
<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->div >
        
ul >
            
li > blogjava span style="color: #800000;">li >
            
li > CSDN span style="color: #800000;">li >
            
li > 博客园 span style="color: #800000;">li >
            
li > ABC span style="color: #800000;">li >
            
li > AAA span style="color: #800000;">li >
        
ul >     
    
span style="color: #800000;">div >
    
script  type ="text/javascript"  src ="http://www.blogjava.net/Files/BearRui/test.zip" >span style="color: #800000;">script >
  
div >
        
ul >
            
li > MSN span style="color: #800000;">li >
            
li > GOOGLE span style="color: #800000;">li >
            
li > YAHOO span style="color: #800000;">li >
        
ul >     
    
span style="color: #800000;">div >

    运行后,会发现代码1中,在前5秒中页面上是一篇空白,5秒中后页面全部显示。 代码2中,前5秒中blogjava,csdn等先显示出来,5秒后MSN才显示出来。
    可以看出嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。

嵌入JS 导致CSS阻塞加载的问题


    CSS怎么会阻塞加载了?CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6下CSS都是阻塞加载,下面的测试在非IE6 下进行):
   代码1(为了效果,这里选择了1个国外服务器的CSS):
  
<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->html  xmlns ="http://www.w3.org/1999/xhtml" >
            
head >
                
title > js test span style="color: #800000;">title >
                
meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />  
              
link  type ="text/css"  rel ="stylesheet"  href ="http://69.64.92.205/Css/Home3.css"   />
            
span style="color: #800000;">head >
            
body >
                
img  src ="http://www.blogjava.net/images/logo.gif"   /><</span>br  />
                
img  src ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"   />
            
span style="color: #800000;">body >
            
span style="color: #800000;">html >
  时间瀑布图:
   

   代码2(只加了1个空的嵌入JS):
<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->  head >
    
title > js test span style="color: #800000;">title >
    
meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />  
  
link  type ="text/css"  rel ="stylesheet"  href ="http://69.64.92.205/Css/Home3.css"   />
  
script  type ="text/javascript" >
        
function  a(){}
  
span style="color: #800000;">script >
    
span style="color: #800000;">head >
    
body >
        
img  src ="http://www.blogjava.net/images/logo.gif"   /><</span>br  />
        
img  src ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"   />
    
span style="color: #800000;">body >
   时间瀑布图:


    从时间瀑布图中可以看出,代码2中,CSS和图片并没有并行下载,而是等待CSS下载完毕后才去并行下载后面的2个图片,当CSS后面跟着嵌入的JS的时 候,该CSS就会出现阻塞后面资源下载的情况。
    有人可能会问,这里为什么不说说嵌入的JS阻塞了后面的资源,而是说CSS阻塞了? 想想我们现在用的是1个空函数,解析这个空函数1ms就够,而后面2个图片是等CSS下载完1.3s后才开始下载。大家还可以试试把嵌入JS放到CSS前 面,就不会出现阻塞的情况了。
 
    根本原因:因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出 现上面CSS阻塞下载的情况。
 

嵌入JS应该放在什么位置


   1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
   
   2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
   
   3、使用defer
   
   4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用
   

PS:很多网站喜欢在head中嵌入JS,并且习惯放在CSS后面,比如看到的www.qq.com,当然也有很多网站是把JS放到CSS前面的,比如 yahoo,google

分享到:
评论

相关推荐

    高性能web开发 如何加载JS,JS应该放在什么位置?

    在进行高性能Web开发时,加载JavaScript(JS)文件是构建快速响应网站的关键环节。JavaScript作为一种广泛使用的脚本语言,能够为网页添加交互性和动态效果,但其加载方式直接影响着页面的性能。下面详细介绍在Web...

    高性能Javascript编程--英文版

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    Cocos2d-JS开发之旅完整版pdf

    Cocos2d-JS是Cocos2d-x项目的一部分,是一个跨平台的游戏开发框架,它将JavaScript和C++的优势结合在一起,使得开发者可以用JavaScript编写代码,同时享受到高性能的原生应用体验。该框架支持创建2D游戏、教育应用、...

    web-ifc-three

    在JavaScript环境下,Web-IFC-Three库为开发人员提供了能力,可以在浏览器或Node.js服务器端解析IFC模型,并将其转换为可供Three.js渲染的几何图形。Three.js是一个广泛使用的JavaScript库,用于创建和展示3D计算机...

    Cocos2d-JS---demo

    1. **跨平台**:Cocos2d-JS 允许开发者使用 JavaScript 语言编写一次代码,可以部署在 iOS、Android、Web 浏览器等多个平台上,极大地提高了开发效率和代码的复用性。 2. **渲染引擎**:Cocos2d-JS 基于 ...

    JS加载等待效果

    - 使用`async`或`defer`属性加载JavaScript文件,或者将加载等待特效的代码放在`window.onload`或`DOMContentLoaded`事件中,可以避免阻塞页面的初始渲染。 5. **响应式设计**: - 加载等待效果应适应各种屏幕...

    前端开源库-asset-pipe-js-writer

    `asset-pipe-js-writer`能帮助开发者实现智能的JavaScript馈送策略,比如按需加载(lazy loading)、异步加载(async loading)等,从而提高页面性能。 ### 功能特性 1. **代码预处理**:支持ES6+语法转换,让...

    基于MVC的JavaScript Web富应用开发.pdf

    5. **高性能Web应用的构建** - 性能优化技术,包括资源加载管理、缓存策略等。 - 网络通信优化策略,如WebSocket、Server-Sent Events等。 6. **JavaScript框架与库的选择与使用** - 常见的JavaScript框架(如...

    页面延迟加载JS包 lazyload.js scrollloading.js

    页面延迟加载技术是一种优化网页性能的方法,它允许我们推迟非关键资源的加载,直到它们真正需要时才进行加载。在给定的标题和描述中提到的"lazyload.js"和"scrollloading.js"就是实现这一功能的JavaScript库。 1. ...

    延迟加载JS/CSS

    延迟加载(Lazy Load)是一种...7. **总结**:延迟加载JS和CSS是现代Web开发中的重要优化手段,它通过按需加载策略,平衡了用户体验、性能和资源消耗。理解并掌握这种技术,对于创建高性能、响应迅速的网站至关重要。

    webgl-heatmap, 高性能的web/js显示库.zip

    webgl-heatmap, 高性能的web/js显示库 Heatmapwebgl-heatmap.js 是一个用于高性能热图显示的JavaScript库。演示在 codeflow.org 现场演示。如何使用它实例化新的热图,错误可以是以下之一:不支持 Webgl无浮点纹理...

    JavaScript开发技术大全源码

    JavaScript,作为全球最广泛使用的编程语言之一,是Web开发的核心组成部分。它赋予了网页动态交互的能力,使得用户可以在浏览器端与网页进行实时互动。本资源库包含了JavaScript开发的全面知识,从基础语法到高级...

    高性能JavaScript编程(中英文)

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    Node.js-Web-Development-Fourth-Edition:Packt的Node.js Web开发第四版

    Node.js Web开发-第四版 ... Node.js的主要重点是开发高性能,高可伸缩性的Web应用程序,并且在其他领域也得到了广泛的应用。 Electron是基于Chrome引擎的基于Node.js的包装器,是流行的桌面应用程序(例如Atom和Visua

    前端开源库-rosid-handler-js

    Rosid Handler JS 提供了智能加载机制,能够根据需求动态加载JavaScript文件。这种按需加载的方式有助于减少首屏加载时间,改善用户体验。通过延迟加载非关键路径的脚本,开发者可以确保主要功能先被加载,从而提高...

    Node.js+MongoDB+AngularJS Web开发

    , 读者将学会使用Node.js 和MongoDB来建立更具可扩展性的高性能网站,并利用AngularJS 创新的MVC 方法构建更有效的网页和应用程序,以及把这三者结合在一起使用,从而提供卓越的下一代Web解决方案。, 《Node.js+...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    1. **高性能**:JSTree通过延迟加载和分页策略,确保在处理大数据集时保持流畅的用户体验。它仅在需要时加载节点,降低了内存占用和计算需求。 2. **交互性**:提供了丰富的API和事件系统,允许开发者自定义各种...

    JS-Native交互电子书

    - **WKWebView**:Apple推出的高性能WebView组件,支持更现代的Web标准。 - **使用方式**:通过加载本地HTML文件或远程URL来展示Web内容。 #### 四、高级技术点 **4.1 HybridWebView架构设计** - **核心思路**:...

Global site tag (gtag.js) - Google Analytics