css阻塞，js阻塞

最新推荐文章于 2024-02-01 14:13:05 发布

苍狼笑月

最新推荐文章于 2024-02-01 14:13:05 发布

阅读量580

点赞数

分类专栏： js jq css

本文链接：https://blog.csdn.net/qq_23329541/article/details/64122503

版权

js 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

虽然感觉，这东西完全没啥用！写了这么久我也没遇到过！但是万一那天遇到了，回来看看相比也是极好的！

css阻塞：css默认为阻塞渲染资源（阻塞渲染资源与非阻塞渲染资源的不同之处在于下载的优先级别问题，阻塞资源高，优先下载），无论是否为css阻塞资源都是会下载的，时间先后而已；媒介类型和媒体查询，可以让我们标记一些css为非阻塞资源。

js阻塞：js下载的时候浏览器会终止其他文件的下载，但是新式浏览器都开始做 js 的并行下载也就是说js阻塞可以在未来的某个时间忽略了，js阻塞会阻塞css下载，所以这也是为什么一般强调初学者将css放在头部，js放在尾部，渲染js长时间执行的函数的时候建议使用 settimeout 将这个手动延迟不然你的用户可能会对着白色屏幕发呆！

以上为本人原创，下面是资料！

网上找了点资料描绘的极为详细：

【导读】：在默认情况下，CSS会被当做渲染中的阻塞性资源，也就是说浏览器即使已经处理好了某些页面内容，只要CSSOM没有构建好，便不会进行渲染。所以要给你的CSS瘦身，提高传输速度，并使用媒介类型和媒介查询来解除阻塞。

在前部分中我们看到了关键的渲染途径需要同时具备DOM（Document Object Mode，文档对象模型）和CSSOM（CSS Object Model，CSS对象模型）来构造渲染树，这在渲染性能上有一个很重要的含义：HTML和CSS都是渲染过程中的阻塞性资源。HTML很明显，因为没有DOM的话，我们也没有任何东西来渲染，但是对CSS的要求也许并不明显。如果我们尝试渲染一个普通的页面，而不让CSS阻塞渲染过程，那会发生什么呢？

学习重点

默认情况下CSS被视为一种阻塞性渲染资源
媒介类型和媒介查询让我们能把一些CSS资源标记为非阻塞性渲染资源
不管是阻塞性的还是非阻塞性的行为，所有的CSS资源都是通过浏览器下载的

有 CSS 的纽约时报网站无 CSS 的纽约时报网站

NYTimes with CSS NYTimes without CSS

上面的例子展示了NYTimes在使用和不使用CSS时的样子，这表明了为什么直到CSS可用时才渲染 — 缺少CSS的页面实际上是无法使用的。事实上，右边的用户体验通常叫做“Flash of Unstyled Content” (FOUC)。所以结果是，浏览器会在同时具备了DOM和CSSOM时才渲染界面。

CSS是一种阻塞性渲染资源，需要让它尽可能快地下载到客户端，并在第一次渲染的时候进行优化。

然而，假如一些CSS样式只能用于某些特定的条件下怎么办呢？例如，当页面被打印时，或者被投影到大屏幕时。如果这些资源能够不阻塞渲染的话，那就太棒了！

CSS “媒介类型”和“媒介查询”使我们能够处理下列情况：

 
XHTML
 
         1 
       
         2 
       
         3 
       
        <link  
        href 
        = 
        "style.css" 
          
        rel 
        = 
        "stylesheet" 
        > 
       
        <link  
        href 
        = 
        "print.css" 
          
        rel 
        = 
        "stylesheet" 
          
        media 
        = 
        "print" 
        > 
       
        <link  
        href 
        = 
        "other.css" 
          
        rel 
        = 
        "stylesheet" 
          
        media 
        =" 
        (min 
        -width 
        : 
         40em 
        )” 
        >

一个媒介查询由一个媒介类型和0个或多个检查特殊媒介特征的条件的表达式构成。例如，我们的第一个样式声明没有使用提供任何媒介类型和查询，因此它适用于各种情况 — 也就是说，它总是会阻塞渲染。另一方面，第二种样式只被用于当内容被打印时 — 也许你想要重新设置布局或改变字体等等 — 因此当这个样式第一次被加载时，它不会阻塞页面的渲染。最后一个样式声明提供了一个由浏览器来执行的媒介查询：如果条件符合的话，浏览器会在该样式下载完并处理完后才渲染。

使用媒介查询，我们的外观可以定制成特定的使用案例，例如显示和打印，还有一些动态的条件，例如在屏幕方向上的改变，调整大小等等。当声明你的样式资源时，一定要仔细注意媒介类型和媒介查询，因为它们会对关键渲染路径有很大的性能影响！

让我们来考虑一些实际的例子：

XHTML
 
   
 
 
  
         1 
       

         2 
       

         3 
       

         4 
       
 
        <link 
        href 
        = 
        "style.css" 
             
        rel 
        = 
        "stylesheet" 
        > 
       
 
        <link 
        href 
        = 
        "style.css" 
             
        rel 
        = 
        "stylesheet" 
         
        media 
        = 
        "screen" 
        > 
       
 
        <link 
        href 
        = 
        "portrait.css" 
         
        rel 
        = 
        "stylesheet" 
         
        media 
        = 
        "orientation:portrait" 
        > 
       
 
        <link 
        href 
        = 
        "print.css" 
             
        rel 
        = 
        "stylesheet" 
        media 
        =“print" 
        > 
       
 
 

第一条声明是阻塞渲染的，并且匹配所有情况。
第二条声明也是阻塞渲染的：“screen”是默认的类型，如果你没有指定任何类型，默认会给设置成“screen”。因此，第一条和第二条实际上是一样的。
第三条声明有一个动态的媒介查询，当页面正在加载时会对其进行判断。当页面加载时跟据设备的方向来决定portrait.css是否会阻塞渲染。
最后一条声明只用于页面正在打印时，因此当页面第一次加载到浏览器中时，它不会阻塞渲染。

最后，要记住“阻塞渲染”只与资源是否会阻塞页面在浏览器的初次渲染有关。无论是否阻塞，CSS资源仍然会通过浏览器来下载，只是作为一项非阻塞性的低优先级资源。

浏览器渲染阻塞与优化

什么是阻塞？在页面中我们通常会引用外部文件，而浏览器在解析HTML页面是从上到下依次解析、渲染，如果<head>中引用了一个a.js文件，而这个文件很大或者有问题，需要2秒加载，那么浏览器会停止渲染页面（此时是白屏显示，就是页面啥都没有），2秒后加载完成才会继续渲染，这个就是阻塞。

为什么会阻塞？

因为浏览器不知道a.js中执行了哪些脚本，会对页面造成什么影响，所以浏览器会等js文件下载并执行完成后才继续渲染，如果这个时间过长，会白屏。

CSS文件也一样，因为CSS文件会对DOM的样式，布局，色彩，效果产生影响，所以浏览器会等CSS文件下载并执行完成后继续。

为了页面的性能，要避免阻塞。

阻塞优化-推迟加载、异步加载。

推迟加载(延迟加载)

如果页面初始的渲染并不依赖于js或者CSS可以用推迟加载，就是最后在加载js和css，把引用外部文件的代码写在最后。比如一些按钮的点击事件，比如轮播图动画的脚本也可以放在最后。

　　　　　　原理：因为浏览器默认是同步加载（这是为了避免重复触发“回流”和“重绘”），此时浏览器会从上到下逐条代码的加载、解析、渲染、执行。

 1 <html>
 2      <head>
 3     </head>
 4     <body>
 5         xxxxxxxxxxxxxxx
 6          <h1>推迟加载</h1>
 7          <script type="text/javascript" src="a.js"></script>
 8          <link href="a.css" rel="stylesheet" />
 9      </body>
10 </html>

defer延迟加载：

　　　　在文档解析完成开始执行，并且在DOMContentLoaded事件之前执行完成，会按照他们在文档出现的顺序去下载解析。效果和把script放在文档最后</body>之前是一样的。

注：defer最好用在引用外部文件中使用，用了defer不要使用document.write()方法;使用defer时最好不要请求样式信息，因为样式表可能尚未加载，浏览器会禁止该脚本等待样式表加载完成，相当于样式表阻塞脚本执行。

异步加载(非阻塞加载)

注：a.js文件中的代码如下，这样就会造成阻塞，因为如果我不点击确定，就无法继续渲染。

1 alert("已暂停加载")
2 alert("开始加载")

1）async异步加载：就是告诉浏览器不必等到加载完外部文件，可以边渲染边下载，什么时候下载完成什么时候执行。用法就是“async“

1  <script type="text/javascript" src="a.js" async></script>

注：实际测试中IE10+才支持，火狐，谷歌，Microsoft支持；用了async不要使用document.write()方法;使用async时最好不要请求样式信息，原因和defer一样。

　　　　　　注2：async 在w3school中介绍是IE9就能支持，而IE9也是号称能支持，但是实际是不能完全支持的。

2）script dom element法：这个方法是用js动态创建一个script元素添加在document中。

注: 支持全部浏览器(因为IE低版本IE10- 是单线程，所以要修改a.js才能显示正确的效果)

1 setTimeout("alert('异步加载成功')",2000)     //测试IE时候a.js文件要修改

 1 <script type="text/javascript">
 2     (function() {
 3      var s = document.createElement('script');
 4      s.type = 'text/javascript';
 5      s.async = true;                                        //这句可以删除，但是效果不变。
 6      s.src = 'js/a.js';
 7      var x = document.getElementsByTagName('script')[0];
 8      x.parentNode.insertBefore(s, x);
 9  })();
10 </script>

注意：这种方法会阻止onload事件，比如下面的代码，会等到a.js中的弹出框弹出后再执行。

1 <script type="text/javascript">
2     window.οnlοad=function(){
3         document.getElementById('div').innerHTML="onload完成"
4     }
5 </script>
6 //写在html中

3）onload时异步加载：这个和script dom element法差不多但是他不是同时执行js和html，他是等html的文件，图片之类的、页面所有的资源全部加载完成后再下载执行js，这样的方法可以避免阻塞onload事件的触发。（兼容所有浏览器）

 1 (function() {
 2      function async_load(){
 3          var s = document.createElement('script');
 4          s.type = 'text/javascript';
 5          s.async = true;
 6          s.src = 'js/yibujiaz.js';
 7          var x = document.getElementsByTagName('script')[0];
 8          x.parentNode.insertBefore(s, x);
 9      }
10      if (window.attachEvent)
11          window.attachEvent('onload', async_load);
12      else
13          window.addEventListener('load', async_load, false);
14  })();

注：DOMContentLoaded与onload事件不同，DOMContentLoaded是页面解析完成，页面的dom元素可以使用，但是页面的图片、视频等资源可能还没加载完成

　　我上面介绍的优化方式是常用的，除此之外还有其他的，比如异步加载还有AJAX异步加载，body onload异步加载等，这些用的比较少，有兴趣的工程师可以去查查相关资料。（如果你在博客园查基本上只要看一篇文章就好了，其他的基本上都说一样的，改都不会改；其实全网都差不多，都说互相转载复制的）。

a.js全部代码

1 // setTimeout("alert('异步加载成功')",2000)
2 // alert("已暂停加载")
3 // alert("开始加载")

HTML全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载</title>
    <!-- <script type="text/javascript" src="js/yibujiaz.js" async></script> -->
<script type="text/javascript">
    (function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.src = 'js/yibujiaz.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();
</script>
<!-- <script type="text/javascript">
(function() {
     function async_load(){
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'js/yibujiaz.js';
         var x = document.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent('onload', async_load);
     else
         window.addEventListener('load', async_load, false);
 })();
</script>
<script type="text/javascript">
    window.οnlοad=function(){
        document.getElementById('div').innerHTML="onload完成"
    }
</script> -->
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background-color: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div id="div">
    </div>
</body>
</html>

苍狼笑月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css阻塞，js阻塞

虽然感觉，这东西完全没啥用！写了这么久我也没遇到过！但是万一那天遇到了，回来看看相比也是极好的！网上找了点资料描绘的极为详细：css阻塞：css默认为阻塞渲染资源（阻塞渲染资源与非阻塞渲染资源的不同之处在于下载的优先级别问题，阻塞资源高，优先下载），无论是否为css阻塞资源都是会下载的，时间先后而已；媒介类型和媒体查询，可以让我们标记一些css为非阻塞资源。js阻塞：js下载的时候浏览器会终止其他文件的下载，但是新式浏览器都开始做 js 的并行下载也就是说js阻塞可以在未来的某个时间忽略了，
复制链接

扫一扫