顶尖页面性能优化跃升之道：uniapp首屏加载性能极致优化策略权威指南（白屏现象终结攻略）

JINGWHALE1

已于 2024-05-04 07:59:05 修改

阅读量915

点赞数 16

分类专栏： JINGWHALE 前端进阶文章标签：性能优化 uni-app 前端后端 ios 小程序职场发展

于 2024-05-01 23:00:19 首次发布

JINGWHALE

本文链接：https://blog.csdn.net/u012347650/article/details/138371121

版权

JINGWHALE 前端进阶专栏收录该内容

66 篇文章 1 订阅

订阅专栏

在这里插入图片描述

页面加载性能优化至关重要，直接影响用户体验满意度及网站流量转化。优化加载性能可以减少用户等待时间，提升交互响应，有效减少出现白屏的情况，增加用户留存，同时有利于搜索引擎排名，对网站流量、品牌形象及业务收益具有关键作用。

页面加载性能优化旨在减少用户等待时间，提升浏览体验。页面加载性能优化的策略原理主要围绕提高加载速度、优化用户体验两个核心目标展开。关键策略包括：压缩代码和资源，实现资源懒加载与异步加载，利用缓存策略，优化图片和媒体资源，采用CDN加速，以及合理安排页面结构与资源加载顺序，确保首屏、页面快速渲染。

本文页面加载性能优化主要以uniapp为例，请注重页面加载性能优化的要点策略，要依据具体情况做页面加载性能优化。

一、资源优化

1、资源优化

1.1. 代码层面优化

去除无用代码：定期审查代码库，移除不再使用的第三方库、组件和自定义代码。
压缩代码：利用构建工具（如Webpack、Uniapp的编译器）对JS、CSS进行压缩和混淆处理。
Tree Shaking：确保你的构建流程支持Tree Shaking，自动移除未引用的代码模块。

1.2. 资源优化

图片压缩：使用工具（如TinyPNG、ImageOptim）对图片进行无损或有损压缩，减小图片文件大小，使用WebP格式、合理设置图片尺寸避免不必要的加载延迟。还可以考虑使用SVG格式。
雪碧图：合并小图标为一张大图（雪碧图），减少HTTP请求次数。

2、资源优先级与按需加载

确保关键渲染路径上的资源（如首屏必需的HTML、CSS、JavaScript）优先加载。非关键渲染路径内容，如页面、组件、图片和第三方脚本，应延迟加载或异步加载。

uniapp分包原理：支持分包加载，即将小程序代码分割成不同的子包。初始加载时仅下载主包，首页所在的分包优先加载，其他非首屏功能的分包按需加载，降低首页初次加载负担。

将应用拆分为多个包，首页及其必需资源打包在主包中，其他页面和资源按需加载，减少首页初次加载时间。

uniapp分包示例（在uni-app项目的uni-app.config.js中）:

config = {
  pages: [
    // 主包页面
    'pages/index/index',
    // 分包页面
    'subPackages': [
      {
        'root': 'subpackageA',
        'pages': [
          'pages/detail/detail'
        ]
      }
    ]
  ],
  subpackages: [
    {
      root: 'subpackageA',
      pages: ['pages/detail/detail'],
      // 分包的独立配置
      independent: true
    }
  ]
}

3、代码拆分与异步加载

在uniapp中实现代码拆分与异步加载，主要依赖于Vue的异步组件功能和uniapp的分包加载机制。这两种策略分别针对组件级别的按需加载和整个页面级别的按需加载，有助于减小首屏加载时间，提升用户体验。

Vue异步组件原理：页面中的某些复杂或不常用的组件可以通过异步方式加载，仅在实际需要时才加载它们的定义。

Vue异步组件示例:

import Vue from 'vue'

export default {
  components: {
    AsyncComponent: () => import(/* webpackChunkName: "async-component" */ '@/components/AsyncComponent.vue')
  },
  // ...
}

在这个例子中，AsyncComponent只有在被实际使用到的时候才会开始加载，通过webpack的代码分割功能，它会被单独打包成一个chunk文件。

二、预加载和预读取

对即将访问的页面资源进行预加载或预读取，减少用户点击后的等待时间。

1、数据预加载

在始化或首页页面加载时，提前发送网络请求获取数据，同时利用本地缓存策略减少重复请求。

在小程序启动时即开始异步请求首页所需数据。同时设置合适的超时时间和错误处理，保证用户体验。

// app.js 的 onLaunch 或首页的 onLoad 中预拉取数据
wx.request({
  url: 'your_api_url',
  method: 'GET',
  success: (res) => {
    this.setData({ dataList: res.data });
  },
  fail: (err) => {
    console.error('数据拉取失败', err);
  }
});

2、页面预加载

在uniapp中，可以通过配置app.json文件中的preloadRule来实现页面的预加载。

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

"preloadRule": {
	"pages/blog/blog": {
		"network": "all",
		"packages": ["__APP__"]
	},
	"pages/index/index": {
		"network": "all",
		"packages": ["__APP__"]
	}
}

packages：进入页面后预下载分包的 root 或 name。APP 表示主包。
network：在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

2、uni.preloadPage

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

uni.preloadPage({url: "/pages/index/index"});

url：预加载页面url
success：预加载成功完成回调
fail：预加载失败回调
complete：接口调用结束的回调函数（调用成功、失败都会执行）

3、图片预加载

在 UniApp 中实现图片预加载，可以通过几种不同的方式来完成，具体取决于你的需求和偏好。以下是一些常用的方法：

3.1. image 隐藏标签预渲染

对于服务器端图片的显示需要远程加载到本地和渲染出来，可以直接在页面使用隐藏的image，这个过程会导致图片被缓存，减少了正式使用时加载和渲染时间，间接实现了预加载的效果。

<view v-show="false">
	<image webp="true" :src="previeImageUrl" mode="aspectFit"></image>
</view>

另外，可以利用 uni.getImageInfo 等方法预先获取图片到本地，这会在后台开始加载图片，但实际上并不直接用于预加载展示，更多是获取尺寸等信息以便做进一步处理。不过，这个过程可能会导致图片被缓存，减少了正式使用时加载时间，减少了预加载的效果。

uni.getImageInfo({
  src: '图片URL',
  success: (res) => {
    console.log('图片加载成功', res);
    // 可能在这里做一些逻辑处理，比如记录图片已加载等
  },
  fail: (err) => {
    console.error('图片加载失败', err);
  },
});

3.2. 自定义预加载函数（H5）

可以编写一个自定义的图片预加载函数，利用 Promise 或者其他异步处理机制，批量加载图片并管理加载状态。

function preloadImages(urls) {
  const promises = urls.map(url => {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = url;
      image.onload = () => resolve(url);
      image.onerror = reject;
    });
  });

  return Promise.all(promises);
}

// 使用示例
preloadImages(['img1.jpg', 'img2.jpg']).then(() => {
  console.log('所有图片预加载完成');
}).catch(err => {
  console.error('图片预加载出错', err);
});

3.3. 使用第三方插件或uni-app的懒加载功能

虽然懒加载主要用于在图片进入可视区域时加载，但部分插件或自定义实现可以扩展为预加载功能。例如，通过修改懒加载插件的逻辑，让它在页面初始化时就开始加载某些图片。

确保在实际应用中选择最合适的方法，考虑到性能和用户体验的平衡。例如，过度预加载可能会占用过多的网络和内存资源，影响应用的整体性能。

三、缓存策略

利用浏览器缓存机制，缓存静态资源，减少重复请求，提高加载速度。

1、接口数据本地缓存机制

原理：在页面加载前或初始化时预加载必要数据，利用缓存减少网络请求，加快页面展示速度。

示例：

// app.vue 或首页的onLoad生命周期
onLoad() {
  this.loadData();
},
methods: {
  loadData() {
    // 尝试从本地缓存读取数据
    const cachedData = uni.getStorageSync('homeData');
    if (cachedData) {
      this.dataList = cachedData;
      this.isLoading = false; // 停止加载动画
    } else {
      // 如果没有缓存，则发起网络请求
      uni.request({
        url: 'your_api_url',
        success: (res) => {
          if (res.statusCode === 200) {
            this.dataList = res.data;
            // 缓存数据
            uni.setStorageSync('homeData', res.data);
            this.isLoading = false;
          }
        },
        fail: () => {
          this.showError(); // 显示错误提示
        }
      });
    }
  }
}

2、图片本地缓存

如果你想通过 uni.getImageInfo 获取到图片的 Base64 编码并进行缓存处理，需要注意的是，uni.getImageInfo 并不会直接返回图片的 Base64 编码，它主要用于获取图片的元数据。但是，你可以结合其他方法实现从图片URL到Base64编码的转换，并进行缓存。以下是一个示例流程：

在Web环境中，可以使用HTML的canvas和toDataURL方法将图片URL转换为Base64编码。但在uni-app中，由于运行环境的多样性（包括H5、微信小程序、App等），直接使用canvas可能不通用。一个较为通用的方式是通过异步请求下载图片，然后转为Base64。

示例代码

async function imageUrlToBase64(url) {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      responseType: 'arraybuffer', // 设置响应类型为arraybuffer
      success: (res) => {
        if (res.statusCode === 200) {
          let arrayBufferView = new Uint8Array(res.data);
          let base64String = window.btoa(
            Array.from(arrayBufferView).map(function (byte) {
              return String.fromCharCode(byte);
            }).join('')
          );
          resolve(`data:image/jpeg;base64,${base64String}`);
        } else {
          reject(new Error(`Failed to load image, status code: ${res.statusCode}`));
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

async function cacheImageAsBase64(url, key) {
  try {
    const base64Data = await imageUrlToBase64(url);
    uni.setStorageSync(key, base64Data);
    console.log('Image cached as Base64:', key);
  } catch (error) {
    console.error('Failed to cache image as Base64:', error);
  }
}

可以在成功的uni.getImageInfo的成功的回调中使用image-tools插件的pathToBase64(res.path).then()，通过实现imageUrlToBase64功能，res.path就是返回的图片的本地路径。


pathToBase64(res.path).then(base64 => {
			console.log(base64)
}).catch(error => {
	console.error(error)
})

使用示例

cacheImageAsBase64('https://example.com/path/to/image.jpg', 'myCachedImage');

注意事项

由于Base64编码的图片相比原图占用更多的字节（约增加1/3），大量缓存Base64编码的图片可能会迅速消耗客户端存储空间，因此需谨慎使用。
在不同平台（如微信小程序、H5、App）上，处理Base64编码的兼容性也需要关注。
本示例中使用了responseType: 'arraybuffer'来处理图片数据，确保能够跨平台兼容。

请根据你的具体需求和目标平台，适当调整和测试上述代码。

3、`networkTimeout`和`optimization`字段

在uniapp中，manifest.json文件中的networkTimeout和optimization字段是用来配置网络请求超时时间和优化项目性能的设置，它们分别控制着不同方面的应用表现。

networkTimeout

networkTimeout用于设置各种网络请求的超时时间（单位为毫秒）。这可以帮助你控制网络请求的响应等待时间，避免应用因长时间等待网络响应而无响应或卡顿。uniapp支持配置以下几种网络请求的超时时间：

request: HTTP请求的超时时间。
uploadFile: 文件上传的超时时间。
downloadFile: 文件下载的超时时间。
connectSocket: WebSocket连接超时时间。
sendSocketMessage: 发送WebSocket消息的超时时间。
onSocketOpen: WebSocket打开连接的超时时间。
onSocketClose: WebSocket关闭连接的超时时间。

示例配置:

{
  "networkTimeout": {
    "request": 60000,
    "connectSocket": 30000,
    "uploadFile": 60000,
    "downloadFile": 60000
  }
}

optimization

optimization字段主要用于配置项目构建时的优化选项，虽然它不直接涉及缓存时间设置，但通过优化构建产物，可以间接提高应用的加载速度和运行效率。具体配置可能因uniapp的版本更新而有所变化，但一般包括如下选项：

splitChunks: 控制代码分割的行为，类似于webpack的SplitChunksPlugin，帮助拆分公共代码，减少最终包的大小。
subPackages: 分包加载的配置，虽然不是直接优化项，但通过合理分包可以提升应用启动速度。
webpackChain: （如果支持）允许直接修改Webpack配置链，进一步定制优化策略，如开启压缩、 Tree Shaking等。

请注意，直接在optimization字段中配置缓存策略（如静态资源缓存时间）通常不是标准做法，缓存策略更多依赖于服务器端配置或前端资源请求时的缓存头控制。

总结

通过调整networkTimeout，你可以控制uniapp中网络请求的超时时间，保证应用的响应性。而利用optimization，可以优化项目构建，提高应用的整体性能。但要注意，静态资源的缓存策略通常需要通过服务器端设置或前端资源加载策略来实现，而不是直接在manifest.json中配置。

4、uniCloud 静态资源

在使用uniCloud时，控制静态资源的缓存时间主要依赖于uniCloud提供的存储服务以及前端的资源请求处理方式。虽然uniCloud自身可能没有直接提供配置静态资源缓存时间的选项，但你可以通过以下几种方式来实现对静态资源缓存的控制：

4.1. 利用HTTP响应头

如果你的静态资源是通过uniCloud的静态网站托管服务或者CDN服务提供的，可以在上传资源时或通过服务器端逻辑设置HTTP响应头，特别是Cache-Control和Expires头部，来控制浏览器或CDN如何缓存资源。例如，你可以在返回静态资源的HTTP响应中加入以下头部：

Cache-Control: max-age=31536000
Expires: Wed, 01 Jan 2025 00:00:00 GMT

这里max-age指定了资源的最大缓存时间（以秒为单位），Expires指定了资源过期的具体日期和时间。

4.2. 资源版本化

即使不直接控制缓存时间，也可以通过为静态资源添加版本号或哈希值的方式来控制缓存。每次资源更新时，更改其URL中的版本号，可以强制浏览器重新请求资源，避免因缓存导致的资源更新问题。

4.3. 前端资源请求处理

在uniapp的前端代码中，可以对特定资源的请求增加缓存控制逻辑。例如，利用uni.request时，可以设置cache参数来控制缓存行为，虽然这更多地是客户端的缓存策略而非服务器端的缓存控制。

4.4. 利用CDN服务

如果静态资源托管在支持自定义缓存策略的CDN服务上，可以直接在CDN服务提供商的控制台上设置静态资源的缓存规则。

4.5. 动态生成资源链接

如果你的应用逻辑支持，可以通过动态生成带有特定查询参数的资源URL来实现一定程度上的缓存控制。例如，每次请求资源时附带时间戳或随机字符串作为查询参数，但这通常不推荐用于常规缓存控制，因为它会阻止资源的有效复用。

四、静态资源加载

1、懒加载图片和视频

原理：首页可能包含大量图片或复杂的组件，通过懒加载只在组件或图片进入可视区域时加载，减少初始加载负担。

示例（图片懒加载）:

<image src="" mode="widthFix" :data-src="item.image" @load="imageLoaded" class="lazy-image" v-if="item.isImageLoaded"></image>

methods: {
  imageLoaded() {
    // 标记图片已加载，用于控制v-if显示
    this.item.isImageLoaded = true;
  }
}

2、使用CDN加速

实践详解：通过内容分发网络(CDN)分发静态资源，减少因地理距离导致的加载延迟。

配置示例（非直接代码，指配置过程）:

选择合适的CDN服务提供商。
将静态资源（图片、JS、CSS文件等）上传至CDN，并替换网站中对应的资源链接为CDN提供的URL。

五、优化首页首屏渲染

原理：通过服务器端渲染(SSR)、骨架屏或关键CSS内联等技术，确保用户能立即看到内容框架，提升用户体验。

虽然uniapp原生不直接支持SSR，但可以通过第三方服务或自建服务实现。

1. 骨架屏/占位符

原理：在内容真正加载前，先展示一个与最终界面结构相似的骨架屏或占位符，给用户即时反馈，提升体验。

<!-- index.wxml -->
<view class="skeleton">
  <view class="skeleton-item" wx:for="{{ skeletonList }}" wx:key="*this"></view>
</view>

<!-- 使用CSS模拟骨架屏动画 -->
/* index.wxss */
.skeleton-item {
  width: 100%;
  height: 100rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

2. 关键CSS内联示例:

<!-- 在<view>中内联首页关键CSS -->
<template>
  <view :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    动态颜色和字体大小文本
  </view>
</template>

<!-- 在<head>中内联首页关键CSS -->
<style>
  /* 首页关键样式 */
  .home-container { ... }
</style>

六、异步加载广告代码

确保广告脚本异步加载，避免阻塞首页主要内容的渲染。这可以通过将广告请求放入setTimeout或使用async实现。

在需要展示广告的页面或组件中，可以使用动态导入（Vue的异步组件或直接使用import()）来按需加载广告SDK，减少初始加载时的资源消耗。

动态导入广告SDK示例:

async mounted() {
  try {
    const adSdk = await import('@广告平台/sdk'); // 替换为实际广告SDK的路径
    this.loadAd(adSdk);
  } catch (error) {
    console.error('广告SDK加载失败', error);
  }
},
methods: {
  async loadAd(adSdk) {
    // 初始化广告SDK，具体方法参考各广告平台文档
    adSdk.init({
      appId: 'your_ad_app_id', // 替换为你的广告应用ID
      slotId: 'your_slot_id', // 替换为广告位ID
    });

    // 请求广告数据
    const adData = await adSdk.loadAd('banner'); // 示例为加载横幅广告，具体方法和参数根据平台而定

    if (adData) {
      // 展示广告，具体方法根据返回的adData和广告类型而定
      this.showAd(adData);
    } else {
      console.log('广告加载失败');
    }
  },
  showAd(adData) {
    // 实现展示广告的逻辑，如设置DOM元素的src等
  }
}

七、性能监控与优化

通过微信开发者工具或第三方工具监控首页加载时间、白屏时间等性能指标，根据数据反馈进行优化。

在微信开发者工具中开启性能监控，分析首页加载过程中的耗时操作，针对性地优化代码逻辑、资源加载策略等。

通过实施这些最佳策略的组合运用，可以显著加快页面的的加载速度和整体性能，创造流畅的用户体验，提升用户满意度和留存率。

在这里插入图片描述

JINGWHALE1

关注

16
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
0
评论
顶尖页面性能优化跃升之道：uniapp首屏加载性能极致优化策略权威指南（白屏现象终结攻略）

页面加载性能优化旨在减少用户等待时间，提升浏览体验。页面加载性能优化的策略原理主要围绕提高加载速度、优化用户体验两个核心目标展开。关键策略包括：压缩代码和资源，实现资源懒加载与异步加载，利用缓存策略，优化图片和媒体资源，采用CDN加速，以及合理安排页面结构与资源加载顺序，确保首屏、页面快速渲染。
复制链接

扫一扫