流式渲染精进列表首屏用户交互体验的艺术

前端

2022-11-15 22:59:21

理解流式渲染及其优势

流式渲染是一种前端技术，旨在提升网站的首次内容绘制（FCP）、最大内容绘制（LCP）和时间至交互（TTI）等性能指标。它通过逐步加载页面组件的方式改善用户体验，特别适用于包含大量列表信息的网页。

分析问题：首屏响应迟缓

在处理大量数据展示时，传统渲染方式可能导致首屏响应迟缓，影响用户感知。这主要是因为所有内容都需要完整下载和解析后才能显示给用户，导致了不必要的延迟。

解决方案1: 使用Server-Sent Events (SSE)进行流式推送

通过Server-Sent Events（SSE），服务器可以实时向浏览器发送数据更新，而无需客户端频繁发起请求。此方法特别适用于动态信息展示的列表页。

代码示例：

<script>
  if ('EventSource' in window) {
    var source = new EventSource('/stream');
    
    source.addEventListener('message', function(e) {
      // 处理接收到的数据，例如添加到DOM中
      document.querySelector('#list').innerHTML += '<li>' + e.data + '</li>';
    });
  }
</script>

操作步骤：

确保后端支持SSE接口。
在前端使用EventSource对象订阅数据流。
按照接收到的数据动态更新页面。

解决方案2: 预渲染关键内容

预渲染是另一种优化首屏加载时间的方法，通过提前将重要信息呈现在用户面前。此方法适用于已知的列表项结构。

代码示例：

<div id="pre-rendered-content">
  <!-- 假设这些数据是从服务器预获取到的 -->
  <div class="list-item">Item 1</div>
  <div class="list-item">Item 2</div>
</div>

<script>
  // 动态加载更多内容
  fetch('/more-items')
    .then(response => response.json())
    .then(data => {
      const container = document.querySelector('#pre-rendered-content');
      data.forEach(item => {
        const newItem = document.createElement('div');
        newItem.classList.add('list-item');
        newItem.textContent = item;
        container.appendChild(newItem);
      });
    });
</script>