可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。 实际结果:如下图 css会阻塞DOM树解析？ 由上面的推论，我们可以得出，css加载不会阻塞DOM树解析，但是会阻塞DOM树渲染。那么，css加载会不会阻塞js执行呢? 同样，通过代码来验证. <! 详细结果看下图(css加载用了5600+ms): 结论 由上所述，我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行、 因此， 那么，正如我们上面讨论过的，css会阻塞Dom渲染和js执行，而js会阻塞Dom解析。
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。 可以得知，此时DOM树至少已经解析完成到了h1那里，而此时css还没加载完成，也就说明，css并不会阻塞DOM树的解析。 css加载会阻塞DOM树渲染？ 由上面的推论，我们可以得出，css加载不会阻塞DOM树解析，但是会阻塞DOM树渲染。那么，css加载会不会阻塞js执行呢? 同样，通过代码来验证. <! 结论 由上所述，我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行、 因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高 那么，正如我们上面讨论过的，css会阻塞Dom渲染和js执行，而js会阻塞Dom解析。
2核2G云服务器 每月9.33元起，个人开发者专属3年机 低至2.3折
默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞。 如果我们在 CSS 不阻塞渲染的情况下尝试渲染一个普通网页会怎样？ 默认情况下，CSS 被视为阻塞渲染的资源。 我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染。 浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞。 ? 上例展示了纽约时报网站使用和不使用 CSS 的显示效果，它证明了为何要在 CSS 准备就绪之前阻塞渲染，— 没有 CSS 的网页实际上无法使用。右侧的情况通常称为“内容样式短暂失效”(FOUC)。 根据网页加载时设备的方向，portrait.css 可能阻塞渲染，也可能不阻塞渲染。 最后一个声明只在打印网页时应用，因此网页首次在浏览器中加载时，它不会阻塞渲染。
原本只是想分享Network的一些内容，结果到DOMContentLoaded的时候给卡住了，网上很多强调css不会阻塞DOM解析，可以说对又可以说不对。 这种情况表示css阻塞了DOM的解析。 第二种，我把link放到script之前，script里面没有任何内容，DOMContentLoaded比Load的时间差很多： ? 并不是js有操作样式才会使得css阻塞。 大概得出的结论： 浏览器解析DOM的时候，如果没有任何script的脚本，这边指的是没有任何内容，可以有script标签，css是不会阻塞DOM的解析，也符合常见的说法。 当然，也是很想知道DOMContentLoaded和css阻塞的具体原因，希望有研究V8源码的大佬可以给解答解答。 （完）
终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？ css会阻塞DOM树解析？ 由上图我们可以看到，当css还没加载完成的时候，h1并没有显示，但是此时控制台输出如下 ? 可以得知，此时DOM树至少已经解析完成到了h1那里，而此时css还没加载完成，也就说明，css并不会阻塞DOM树的解析。 css加载会阻塞DOM树渲染？ 由上面的推论，我们可以得出，css加载不会阻塞DOM树解析，但是会阻塞DOM树渲染。那么，css加载会不会阻塞js执行呢? 同样，通过代码来验证. <! 结论 由上所述，我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行、 因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。 原理解析 那么为什么会出现上面的现象呢？ 从流程我们可以看出来 DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。 因此，CSS加载是会阻塞Dom的渲染的。 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。 那么，正如我们上面讨论过的，css会阻塞Dom渲染和js执行，而js会阻塞Dom解析。 总结 由上所述，我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高
现在有很多优化页面的办法，比如：静态资源的合并和压缩，code splitting，DNS预读取等等 本文介绍的是另一种优化方法：首屏阻塞css优化 原理： 首先我们了解一下页面的基本渲染流程 webkit 上面的流程图就是原因：首先解析html生成dom树，同时解析css生成css树，之后结合两者生成渲染树，然后渲染到屏幕上。 不但如此，如果css后面有其他javascript，并且css加载时间过长，也会阻塞后面的js执行，因为js可能会操作dom节点或者css样式，所以需要等待render树完成。 那么，如果我们能优化css，那么就能大大减少页面渲染出来的时间，从而提升pv，增加黏性 怎么做呢： 目前我知道的比较实用的办法是webpack集成critical，critical是一个提取关键css， 其关键在于，preload`不阻塞渲染，无论资源是否加载完成，浏览器都会接着绘制页面。并且，搭配as使用，可以指定将要预加载内容的类型，可以让浏览器： 更精确地优化资源加载优先级。
因此CSS不会阻塞页面DOM的解析，但是由于render tree的生成是依赖DOM Tree和CSSOM Tree的，因此CSS必然会阻塞DOM的渲染。 更为严谨一点的说，CSS会阻塞render tree的生成，进而会阻塞DOM的渲染。 在这里插入图片描述 此情况好像是CSS不仅阻塞了DOM的解析，而且也阻塞了DOM渲染。 所以只有一个可能就是CSS会阻塞JS的执行。 CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染 JS会阻塞DOM解析 CSS会阻塞JS的执行 浏览器遇到<script>标签且没有
什么是阻塞和非阻塞 阻塞和非阻塞是针对于进程在访问数据的时候，根据IO操作的就绪状态来采取的不同方式，阻塞方式下读取或者写入函数将一直等待，而非阻塞方式下，读取或者写入函数会立即返回一个状态值。 阻塞与非阻塞：针对函数（程序）运行的方式，在IO未就绪时，是等待就绪还是直接返回（执行别的操作）。 阻塞与非阻塞的区别： 阻塞是程序在调用系统函数IO时，在系统执行系统调用时由CPU通过轮询等方式来实现数据的IO。 非阻塞是在程序级别通过轮询/信号/事件的机制，去查看IO数据是否就绪。 可以是阻塞或非阻塞，阻塞则一直在等待内核/应用程序把IO数据准备好，非阻塞则是直接返回内核/应用程序是否已经准备好数据。 应用程序框架：同步或异步。 IO多路复用,同步，异步，阻塞和非阻塞 区别 关于异步，同步，阻塞与非阻塞 解读I/O多路复用技术
以调用函数为例, 同步指的是调用方主动查询返回结果,异步是等待被调用方通知查询结果 阻塞是等待返回结果的时间内挂起,非阻塞是等待返回结果的时间内可以干其他事情. 同步和阻塞完全不是一件事,是否同步指的是获取返回结果的方式,是否阻塞指的是等待获取结果的时间内是否可以干其他事情
阻塞与非阻塞 应用进程请求I/O操作时，如果数据未准备好，如果请求立即返回就是非阻塞，不立即返回就是阻塞。简单说就是做一件事如果不能立即获得返回，需要等待，就是阻塞，否则就可以理解为非阻塞。 阻塞 阻塞调用是指调用结果返回之前，当前线程会被挂起。函数只有在得到结果之后才会返回。有人也许会把阻塞调用和同步调用等同起来，实际上它们是不同的。 socket接收数据的另外一个函数recv则是一个阻塞调用的例子。当socket工作在阻塞模式的时候， 如果没有数据的情况下调用该函数，则当前线程就会被挂起，直到有数据为止。 非阻塞 非阻塞和阻塞的概念相对应，指在不能立刻得到结果之前，该函数不会阻塞当前线程，而会立刻返回。 同步/异步与阻塞/非阻塞的组合 同步阻塞形式: 等待执行结果是一直等待，执行时线程挂起（未对fd 设置O_NONBLOCK 标志位的read/write 操作） 同步非阻塞形式:等待执行结果是一直等待，
这里讲的都是基于IO的 阻塞、非阻塞、同步、异步 ---- 一个典型的IO操作包括了两个阶段，数据准备和数据读写。比如说现在要使用 recv 执行一个读操作，数据就绪就是远端是否有数据可读。 当IO工作在阻塞状态下的时候，如果数据没有就绪，recv就会阻塞当前线程；如果说IO工作在非阻塞状态下，会立即返回。 一个同步IO接口的示例： char buf[1024]; int sz = recv(sockfd,buf,1024,0); //阻塞：一直在这儿死等 //非阻塞：时不时的回来问一下 if(sz>0) 仅被 lio_listio() 函数使用 */ /* Various implementation-internal fields not shown */ }; 陈硕大神说：在处理IO的时候，阻塞和非阻塞都是同步 ---- 五种IO模型 阻塞： 非阻塞： 多路IO复用 信号驱动： 这里就完全放飞自我了 异步： ---- Reactor反应堆模型 One loop per thread
Java提供两种方式来实现阻塞式和非阻塞式，阻塞式使用锁实现，非阻塞式使用CAS方式实现。使用阻塞队列和非阻塞队列的场景还有很多，比较常用的就是我们常说的生产者\消费者模型。 非阻塞队列 ConcurrentLinkedQueue——无界非阻塞队列 ? ? 阻塞队列 Java提供了一个阻塞队列的接口——BlockingQueue，在队列的基础上增加可阻塞添加元素和可阻塞获取元素的方法。 ? ? ，当有入队时则会唤醒阻塞的出队操作线程；当队列满时，进行入队操作的线程将被阻塞，当有出队时则会唤醒阻塞的入队操作线程。 当队列为空（或队列为满）时，消费者（或生产者）线程会进入阻塞状态，使用线程的阻塞/通知模型，来通知阻塞的线程。
阻塞和非阻塞 阻塞：是指IO操作需要彻底完成后才能返回用户空间。 非阻塞：是指IO操作被调用后立即返回一个状态值，无需等待IO操作完成。 阻塞和非阻塞（线程内调用） 阻塞和非阻塞是对于一个线程来讲的，在任意时刻，线程要么是处于阻塞的，要么是出于非阻塞的。 阻塞和非阻塞关注的程序等待调用结果（消息，返回值）时的状态。 阻塞调用是指调用结果返回之前，当前线程会被挂起，调用线程只有在得到结果之后才会返回。 非阻塞调用是指不能立刻得到返回结果之前，该调用就不会阻塞当前线程。
:”发送操作被阻塞了!!! 阻塞 阻塞调用是指调用结果返回之前，当前线程会被挂起。函数只有在得到结果之后才会返回。有人也许会把阻塞调用和同步调用等同起来，实际上它们是不同的。 非阻塞 非阻塞和阻塞的概念相对应，指在不能立刻得到结果之前，该函数不会阻塞当前线程，而会立刻返回。 对象的阻塞模式和阻塞函数调用 对象是否处于阻塞模式和函数是不是阻塞调用有很强的相关性，但是并不是一一对应的。 阻塞对象上可以有非阻塞的调用方式，我们可以通过一定的API去轮询状态，在适当的时候调用阻塞函数，就可以避免阻塞。而对于非阻塞对象，调用特殊的函数也可以进入阻塞调用。
同步（synchronous） IO和异步（asynchronous） IO，阻塞（blocking） IO和非阻塞（non-blocking）IO分别是什么，到底有什么区别？ 而在用户进程这边，整个进程会被阻塞。当kernel一直等到数据准备好了，它就会将数据从kernel中拷贝到用户内存，然后kernel返回结果，用户进程才解除block的状态，重新运行起来。 does not cause the requesting process to be blocked; 两者的区别就在于synchronous IO做”IO operation”的时候会将process阻塞
我们可能都已经听过阻塞非阻塞的概念，本文以tcp中的connect系统调用为例子（基于1.12.13内核，新版的原理类似，但是过程就很复杂了，有时间再分析），分析阻塞和非阻塞是什么并且看他是如何实现的。 sock->state = SS_CONNECTED; // 返回成功 return(0); } 我们看到connect函数首先会调用tcp层的函数发送一个sync包，然后根据socket的属性（阻塞非阻塞 ，可以通过setsocketopt设置）做下一步处理，如果是非阻塞，那么就比较简单，直接返回给应用层。 这也是非阻塞+事件驱动架构中的做法。因为这种架构下通常是单进程的，要避免阻塞进程，那么返回后什么时候才能知道连接成功呢？ 以上就是进程阻塞和非阻塞的原理。
云直播（CSS）为您提供极速、稳定、专业的直播云端处理服务，根据业务的不同直播场景需求，云直播提供了标准直播、慢直播、快直播三种服务，分别针对大规模实时观看、高并发推流录制、超低延时直播场景，配合移动直播 SDK，为您提供一站式的音视频直播解决方案。
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
网站备案
对象存储
云直播
实时音视频
