JS延迟加载、资源预加载、dns预解析、图片预懒加载

JS延迟加载

1.defer属性

在浏览器解析html文档的同时下载脚本，但会在html文档解析完成后再执行。注意：只对外部脚本文件有效，脚本会按照在html中出现的顺序执行，不会阻塞页面的渲染。

<script src="example.js" defer></script>

2.async属性

在浏览器解析html文档的同时下载脚本，下载完成后会立即执行，可能不会按照在html中出现的顺序执行。这适用于与页面内容无关的脚本，不会阻塞页面的渲染。

<script src="example.js" async></script>

3.动态创建 <script> 标签

通过JS动态地创建 <script> 元素并添加到文档中，可以在特定事件发生时（如窗口加载完成、用户滚动到某个位置等）才加载脚本。

var script = document.createElement('script');
script.src = 'example.js';
document.body.appendChild(script);

4.使用setTimeout延迟加载

通过设置定时器，在指定的时间后执行相关代码或加载资源。

setTimeout(function() {  
    var script = document.createElement('script');  
    script.src = 'path/to/script.js';  
    document.body.appendChild(script);  
}, 2000); // 延迟2000毫秒后加载脚本

5.使用 import() 动态导入

允许在需要时异步加载模块，支持更细粒度的代码拆分和按需加载。

button.addEventListener('click', async () => {
  const { myFunction } = await import('./myModule.js');
  myFunction();
});

6.Intersection Observer API(交叉观察者API)

可以用来检测元素是否进入视口，并在需要时加载资源。提供更高效和精确的延迟加载方式。

优点：基于异步机制，不会阻塞主线程。通过减少不必要的DOM和样式查询降低性能消耗成本。

应用场景：图片懒加载、无限滚动加载、音视频自动播放、广告跟踪与统计、固定顶部菜单。

const observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // 元素进入视口，执行延迟加载的代码或加载资源
      observer.unobserve(entry.target); // 停止观察该元素
    }
  });
});
 
const targetElement = document.querySelector('.target');
observer.observe(targetElement);

7.把script引入放在最后(底部)加载

资源预加载

preload

在页面加载时 会预先加载资源并缓存起来，缩短页面的加载时间。（关键脚本、css、字体等）

<link rel="preload" href="style.css" as="style">

prefetch

在当前页加载完成后预加载下个页面的资源，可提前获取所需资源，缩短下个页面的加载时间。

<link rel="prefetch" href="next-page.js">

prerender

预渲染。用于在页面加载之前预先渲染页面内容，从而减少页面的加载时间。

dns预解析

dns-prefetch预解析

页面加载时会预先解析dns，当后面请求到该资源时就可以减少dns的解析时间。

<link rel="dns-prefetch" href="https://example.com">

preconnect预连接

页面加载时预先与指定的域名建立连接，从而减少后续请求域名资源的连接时间‌。包括DNS解析、TCP握手和TLS协商。

<link rel="preconnect" href="https://example.com">

图片预加载

在页面加载之前，提前将图片加载到浏览器的缓存中。当用户滚动到图片位置或触发显示图片操作时，可以立即从缓存中加载图片而无需再次请求服务器，从而加快图片显示的速度。也可以用PreloadJS插件来简化预加载过程。

原理：首先创建一个新的Image对象，并设置src属性为预加载图片的URL。浏览器会自动加载图片并缓存起来；再给Image对象添加load事件监听器。当图片加载完成时会触发load事件，从而执行相应的回调函数；一旦图片加载完成，就可创建一个新的<img>元素并将src属性设置为预加载图片的URL，然后将新元素添加到页面的某个容器中。

// 创建一个Image对象并设置其src属性为需要预加载的图片URL
var img = new Image();
img.src = 'https://example.com/image.jpg';

// 添加load事件监听器，当图片加载完成时执行相应操作
img.onload = function() {
    console.log('图片加载完成');

    // 创建一个新的img元素
    var newImg = document.createElement('img');
    newImg.src = img.src; // 使用预加载图片的URL

    // 将新创建的img元素添加到页面的某个容器中
    document.getElementById('container').appendChild(newImg);
};

img.onerror = function() {
    console.error('图片加载失败');// 处理加载失败的情况
};

图片懒加载

懒加载是一种网页性能优化的方式。只加载当前可视区域内的图片，延迟加载可视区域外的图片。通过监听滚动事件来判断图片是否进入可视区域，如果进入可视区域则动态加载图片。这样可以减少初始加载的图片数量，提高页面加载速度。

优点：

减少首次加载数量从而减少服务器压力；网速慢时先添加像素低的占位图从而减少加载空白时间。

原理：

先将img标签的src设为同一张图，再将真实图片地址存储在img标签的自定义属性data-src中。当js监听到该图片元素进入可视窗口时，就将data-src中的地址存储到src属性中，达到懒加载的效果。

方法：

1.设置img标签属性实现

<img src="" loading="lazy"/>

2.利用JS监听scroll滚动事件实现

<img src="default.jpg" data-src="http://www.xxx.com/image.jpg" />

window.addEventListener('scroll', function() {
  var imageContainer = document.getElementById('image-container');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > 200) {
    imageContainer.style.display = 'block';
  } else {
    imageContainer.style.display = 'none';
  }
});

3.使用vue-lazyload插件实现

//main.ts
import VueLazyload from 'vue-lazyload'
app.use(VueLazyload,
    {preLoad: 1.3, //预加载的宽高比loading: 
    loadimage:"./assets/vue.svg", //图片加载状态下显示的图片
    // error: "", //图片加载失败时显示的图片
    attempt: 1, // 加载错误后最大尝试次数
})

4.利用element-ui  <el-image>的lazy属性实现

<div class="demo-image__lazy">
  <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
</div>
 
<script>
  export default {
    data() {
      return {
        urls: [
          'https://www.xxx.com/image1.jpg',
          'https://www.xxx.com/image2.jpg',
          'https://www.xxx.com/image3.jpg',
        ]
      }
    }
  }
</script>