微信小程序中为什么不使用骨架屏，来提升用户体验？

为什么微信小程序不使用骨架屏？

骨架屏是指在页面资源未加载完成前，以页面结构为模板，绘制简单的灰色占位图，模拟出已加载完成的页面效果。这种技术被广泛应用于Web页面优化中，但在微信小程序中，却不常使用骨架屏来提升用户体验。下面我们来具体分析一下原因。

1. 小程序页面渲染速度较快

相对于Web页面，小程序受到的限制更多，但是由于小程序不需要加载JavaScript文件，因此渲染速度更快。在小程序中，为页面加入骨架屏会增加请求次数并造成一定的性能损耗。而且，小程序端的网络请求是基于微信开发者工具提供的模拟请求，真实请求往往更快，所以当页面内容数据量不大时，使用骨架屏并不能真正提升用户体验。

例如，在一个常见的小程序列表页中，条目数量较少、图片已经被缓存到本地，列表页加载速度即使不使用骨架屏也很快，此时使用骨架屏的效果不会有太大的优势。代码实现如下：

// 不使用骨架屏的小程序列表页模板

<view class="list-wrap">
  <block wx:for="{{list}}" wx:key="id">
    <view class="list-item">
        <image src="{{item.img}}" class="list-avatar" mode="aspectFit"></image>
        <view class="list-content">
            <view class="list-title">{{item.title}}
            <view class="list-desc">{{item.desc}}
        </view>
    </view>
  </block>
</view>

2. 骨架屏影响用户体验

虽然骨架屏可呈现页面结构、故障排查等作用，但其存在也会影响用户的视觉体验。骨架屏出现时，用户会有一种页面“空白”的感觉，会比正常加载时间更加显得漫长。当用户看到骨架屏后，可能会产生误解，认为页面在加载或出现故障，影响用户体验。

如果为了避免有用户看到空白页面而使用骨架屏，也并不是一种很好的解决方案。当页面加载慢时，骨架屏常常不能完全覆盖页面内容，这样反而会让用户看到更多空白，影响视觉效果。

3. 用户体验定制化难度大

在小程序中，每个页面都有自己独特的业务场景，骨架屏的模板也需要根据具体的页面内容来定制。而小程序中一个应用可能包含多个页面，使用骨架屏对整个应用进行二次开发，需要花费大量的时间和精力。

例如，在下面的代码中，显示的是一个旅游应用中的酒店详情页。在这个页面中，显示房间信息的列表每一个条目都涉及到相应的预订按钮，而预订按钮需要根据当前用户是否已经登陆，以及该用户是否存在对应的订单等信息进行展示或隐藏处理。这样的业务逻辑处理就会导致骨架屏的使用变得困难。

// 小程序酒店详情页模板

<view class="hotel-detail">
  <image src="{{imageUrl}}"/>
  // 骨架屏所代替的内容
  <view class="title"></view>
  <view class="price"></view>
  <view class="bus-info"></view>
  
  <view class="reservation">
    <view class="check-in"></view>
    <view class="check-out"></view>
    <view class="roomNum"></view>
    <button class="submit">预订</button>
  </view>
</view>

总结

尽管骨架屏在Web页面的优化中常被使用，但在小程序中，由于加载速度较快，影响用户体验，以及使用定制化难度高的原因，使用骨架屏并不能有效地提升用户体验。在小程序中，我们应该采取针对性更强、同时也更加符合用户体验需求的优化方式。