资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JS以及CSS对页面的阻塞

一、JS阻塞

专注于为中小企业提供网站设计制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业中原免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

   所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载、解析、执行完,才会进行后面的 操作。在现代的浏览器中CSS资源和图片p_w_picpath资源是并行下载的,在IE6中默认的并行的加载数目是2个,在IE6以后以及其他的浏览器中的默认的并行加载数目是6个。

在浏览器从服务器接收到HTML文档后,并把HTML在内存中转换为DOM树,在转换节点的过程中如果引入了CSS文件以及添加了p_w_picpaths,则会在文档加载的同时并行的加载CSS文件以及图片。但是JS不一样,因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现.在没有使用异步加载(async)或者是延迟加载(defer)的情况下,只有在一个JS文件加载解析完后才能加载后面的JS文件。利用延迟脚本和异步脚本可以实现脚本的并行加载。以下讨论都是在没有这两个属性的情况下。

  (1)内嵌脚本的阻塞

     直接写在HTML文档中的js代码就是内嵌JS,内嵌脚本无需加载,可以直接执行,所以当页面有内嵌的脚本时,可以直接执行,导致会阻塞所有资源的加载和页面的呈现。

JS以及CSS对页面的阻塞


    
    内嵌JS会阻塞页面上的所有内容的呈现
        
  • blogjavaspan 
  •     
  • CSDNSpan 
  •     
  • 博客园span 
  •     
  • ABCspan 
  •     
  • AAAspan 
// 循环5秒钟var n = Number(new Date());var n2 = Number(new Date());while((n2 - n) < (6*1000)){ n2 = Number(new Date()); }
        
  • MSNspan 
  •     
  • GOOGLEspan 
  •     
  • YAHOOspan 

JS以及CSS对页面的阻塞

上面的内嵌脚不仅会阻塞第二个ul的展示,也会阻塞第一个ul的展示,页面在5秒前是一片空白,当延迟结束后才展现所有的内容

(2)外联脚本阻塞

  外联脚本不一样,外联脚本只有当页面加载到该

        
  • MSNspan 
  •     
  • GOOGLEspan 
  •     
  • YAHOOspan 

JS以及CSS对页面的阻塞

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

JS以及CSS对页面的阻塞

    
    Title

JS以及CSS对页面的阻塞

fireBug中的时间栈:

JS以及CSS对页面的阻塞

谷歌中的事件栈:

JS以及CSS对页面的阻塞

在上图中CSS和图片是并行下载的,通过时间线可以看出,后面的图片并没有等到CSS文件完全加载完后在加载。

(2)内嵌脚本导致CSS阻塞页面

JS以及CSS对页面的阻塞


    
    Title
    
    
        function a(){};    

JS以及CSS对页面的阻塞

fireBug中的时间栈:

JS以及CSS对页面的阻塞

 谷歌中的时间栈:

JS以及CSS对页面的阻塞

通过上图在狐火中由于内嵌脚本的作用使得图片要等到css完全加载完后在加载,即CSS阻塞了图片的加载。其实质是因为浏览器会维持HTML中CSS和JS的顺序,即在JS前面出现的CSS文件需要加载、解析完后才会执行后面的内嵌JS,而内嵌JS又会阻塞后面的内容

(2)外联脚本

JS以及CSS对页面的阻塞


    
    Title
    
    

JS以及CSS对页面的阻塞

JS以及CSS对页面的阻塞

JS以及CSS对页面的阻塞

外联脚本会阻塞后面资源的加载,但是在谷歌浏览器中不管是内联还是外联的脚本均不会阻塞

三、为了不阻塞页面脚本的放置位置

(1)尽量合并脚本减少