一、css阻塞：

也称为 "CSS 加载阻塞"，是指在加载 CSS 样式表时，浏览器会阻塞页面的渲染，直到 CSS 文件下载完毕并被解析后才继续渲染页面。也就是说，如果页面上的 CSS 文件加载速度比较慢，用户在等待页面呈现的过程中会感到卡顿。

• style标签中的样式：
  • 由html解析器进行解析；
  • 不阻塞浏览器渲染（可能会产生“闪屏现象”）；
    • 原因：浏览器在解析 HTML 文件时，还需要等待图片、视频和字体等资源下载完成，才能继续渲染页面。如果这些资源下载速度慢，页面仍然可能在等待的过程中出现白屏或闪屏。
  • 不阻塞DOM解析；
    
    
• link引入的外部css样式（推荐使用的方式）:
  • 由CSS解析器进行解析。
  • 阻塞浏览器渲染(可以利用这种阻塞避免“闪屏现象”)。
  • 阻塞其后面的js语句的执行：
  • 不阻塞DOM的解析： 注： 只有link引入的外部css才能够产生css阻塞。
    
    
    
    

二、css阻塞优化：

优化核心理念：尽可能快的提高外部css加载速度

• 使用CDN节点进行外部资源加速。
• 对css进行压缩(利用打包工具，比如webpack,gulp等)。
• 减少http请求数，将多个css文件合并。
• 优化样式表的代码
  
  

另外还可以：

• 使用内联样式：将小量的 CSS 代码内联到 HTML 中，可以避免阻塞渲染。
• 把样式表放在顶部：在页面头部引入样式表，可以尽早告诉浏览器要等待的样式表的大小，从而提高渲染效率。
• 异步加载样式表：使用 JavaScript 异步加载样式表，可以不阻塞渲染，提高用户体验。

  // 异步加载样式表：
  
  //1、使用JavaScript在页面中动态创建一个 <link> 标签
  var link = document.createElement("link");
  link.href = "style.css";
  link.type = "text/css";
  link.rel = "stylesheet";
  document.head.appendChild(link);
  
  //2、使用 JavaScript 的 Fetch API
  fetch("style.css")
    .then(response => response.text())
    .then(text => {
      var style = document.createElement("style");
      style.innerHTML = text;
      document.head.appendChild(style);
  });
  

三、js阻塞：

JavaScript 是单线程语言，它在执行代码时会阻塞其他任务。如果 JavaScript 代码中包含大量的计算或等待 I/O 操作的代码，它就会阻塞浏览器的其他任务，如用户交互、渲染页面等。

• 阻塞DOM解析:浏览器不知道后续脚本的内容，如果先去解析了下面的DOM，而随后的js删除了后面所有的DOM， 那么浏览器就做了无用功，浏览器无法预估脚本里面具体做了什么操作，例如像document.write 这种操作，索性全部停住，等脚本执行完了，浏览器再继续向下解析DOM。

• 阻塞页面渲染:js中也可以给DOM设置样式，浏览器同样等该脚本执行完毕，再继续干活，避免做无用功。

• 阻塞后续js的执行:维护依赖关系，例如：必须先引入jQuery再引入bootstrap

  
  
  
  
  

四、js阻塞优化：

• 使用异步代码：通过使用异步代码，可以避免长时间的阻塞，因为异步代码可以在后台执行，不会影响主线程的工作。

• 使用 Web Workers：如果你有复杂的计算或需要进行大量的循环，可以使用 Web Workers 来执行代码，以避免阻塞主线程。

• 使用 requestIdleCallback：这是一个新的 API，可以在浏览器的空闲时间内执行代码，从而避免阻塞主线程。

• 使用节流和防抖：通过使用节流和防抖技术，可以减少不必要的计算，从而避免阻塞主线程。(减少当前的的重复请求)

  
  
  
  
  

注：

• css的解析和js的执行是互斥的（互相排斥），css解析的时候js停止执行，js执行的时候css停止解析。

• 无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）.浏览器始终处于一种：“先把请求发出去”的工作模式，只要是涉及到网络请求的内容，无论是：图片、样式、脚本，都会先发送请求去获取资源，至于资源到本地之后什么时候用， 由浏览器自己协调。这种做法效率很高。

• WebKit 和 Firefox 都进行了【预解析】这项优化。在执行js脚本时，浏览器的其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载， 从而提高总体速度。注意，预解析器不会修改 DOM 树
  
  

扩展

Web Workers：

Web Workers是JavaScript中的一种并行计算技术，可以在后台独立运行JavaScript脚本，不会阻塞主线程的UI渲染和JavaScript脚本的执行。

使用Web Workers：

• 1、创建一个JavaScript文件，其中包含你想要在后台执行的代码
• 2、在主JavaScript文件中，使用 new Worker(workerScriptURL) 创建一个新的Worker对象，其中 workerScriptURL 参数是刚才创建的JavaScript文件的URL。
• 3、使用Worker对象的 postMessage() 方法向后台Worker发送数据，使用 onmessage 事件处理Worker发送回来的数据。
• 4、使用Worker对象的 terminate() 方法终止后台Worker。

  // worker.js
  self.addEventListener("message", function (e) {
    console.log("Worker received message: " + e.data);
    self.postMessage("Worker says: Hi!");
  });

  或者

  onmessage = function(e) {
    console.log('Message received from main script',e);
    let workerResult = 'worker返回的记过'+e.data
    console.log('Posting message back to main script');
    postMessage(workerResult);
  }
  
  
  // main.js
  var worker = new Worker("worker.js");
  worker.postMessage("Main says: Hi!");
  worker.onmessage = function (e) {
    console.log("Main received message: " + e.data);
  };

requestIdleCallback

window.requestIdleCallback() 方法插入一个函数，这个函数将在浏览器空闲时期被调用。 这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。 你可以在空闲回调函数中调用 requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调。

  var handle = window.requestIdleCallback(callback[, options])
  //结束回调
  Window.cancelIdleCallback(handle)