减少阻塞渲染资源

减少阻塞渲染资源的方法有很多，以下是一些常见的解决方法，包含代码示例：

1. 延迟加载资源：将不关键的资源延迟加载，等待页面加载完成后再请求加载这些资源，从而减少对页面渲染的阻塞。可以使用setTimeout()函数实现延迟加载，示例如下：

setTimeout(function() {
  // 延迟加载资源的代码
}, 2000); // 延迟2秒加载资源

2. 异步加载资源：将不关键的资源使用异步加载方式，不会阻塞页面的渲染。可以使用<script>标签的async属性或者动态创建<script>标签实现异步加载，示例如下：

var script = document.createElement('script');
script.src = 'resource.js';
document.head.appendChild(script);

3. 压缩资源：将资源进行压缩，减小资源文件的大小，从而减少下载时间和阻塞渲染的时间。

4. 使用浏览器缓存：将资源进行缓存，当下次访问时直接从缓存中读取，减少资源的下载时间。

5. 使用CDN（内容分发网络）：将资源部署到全球各地的服务器上，用户从离自己最近的服务器上获取资源，减少资源的下载时间。

6. 懒加载图片：将页面中的图片替换为占位符，当用户滚动到图片位置时再加载真实的图片，从而减少阻塞渲染的时间。可以使用Intersection Observer来实现图片的懒加载，示例如下：

var images = document.querySelectorAll('img[data-src]');

var options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      var image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
}, options);

images.forEach(function(image) {
  observer.observe(image);
});

通过使用上述方法，可以有效减少阻塞渲染资源，提升页面加载速度和用户体验。