uni-app 自定义模板 引入阿里云aliplayer 刷新后页面卡死

uni-app 自定义模板 引入阿里云aliplayer 刷新后页面卡死

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title> <%= htmlWebpackPlugin.options.title %> </title> <script> // document.addEventListener('DOMContentLoaded', function() { // document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px' // }) </script> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> <script src="https://g.alicdn.com/de/prismplayer/2.9.3/hls/aliplayer-vod-anti-min.js"></script> <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js?v=999"></script> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" /> </head> <body> <noscript> Please enable JavaScript to continue. </noscript>
<script> /*BAIDU_STAT*/ </script> </body> </html> ```

操作步骤：

  • 打开项目地址，刷新页面

### 预期结果：


- 正常刷新

实际结果：

  • 浏览器卡死

### bug描述：


项目引入阿里云cdn地址，页面刷新后浏览器卡死，官方hello-uniapp也有此问题

更多关于uni-app 自定义模板 引入阿里云aliplayer 刷新后页面卡死的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 自定义模板 引入阿里云aliplayer 刷新后页面卡死的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 H5 自定义模板中直接引入阿里云播放器（Aliplayer）的 CDN 脚本，确实可能导致页面刷新时卡死。这个问题通常与脚本的加载顺序、执行时机以及 uni-app 的渲染机制冲突有关。

核心原因分析：

  1. 脚本执行阻塞：aliplayer-min.js 等外部脚本在 <head> 中同步加载，可能会阻塞页面渲染。当脚本体积较大或网络延迟时，会显著拖慢 DOMContentLoaded 事件的触发。
  2. 与 Vue/uni-app 生命周期冲突：Aliplayer 脚本可能在 DOM 初始化阶段就尝试操作 DOM 元素（例如查找播放器容器）。然而，此时 uni-app（基于 Vue）的根实例尚未挂载，#app 节点内的内容是由 Vue 动态渲染的。脚本可能因找不到预期元素而执行异常或陷入等待，从而阻塞进程。
  3. H5 模板的特殊性：自定义模板 (index.html) 是 uni-app H5 平台的入口模板，Vue 应用会挂载到 #app 节点并管理其内部内容。在模板中直接引入的第三方库，若其初始化逻辑与 Vue 的异步渲染流程不兼容，极易引发问题。

解决方案建议：

方案一：改为异步动态引入（推荐） 移除模板中 <head> 部分的 Aliplayer 脚本和样式链接。改为在页面组件（Vue 文件）中按需异步加载。

// 在需要播放器的页面组件中
export default {
  mounted() {
    // 动态创建link标签引入样式
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css';
    document.head.appendChild(link);

    // 动态加载Aliplayer主脚本
    const script = document.createElement('script');
    script.src = 'https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js';
    script.onload = () => {
      // 脚本加载完成后，再初始化播放器
      this.initAliplayer();
    };
    document.head.appendChild(script);
  },
  methods: {
    initAliplayer() {
      // 确保在$nextTick或确保DOM渲染完成后执行
      this.$nextTick(() => {
        // 假设播放器容器id为"player-container"
        new Aliplayer({
          id: 'player-container',
          // ... 其他配置
        }, function(player) {
          console.log('播放器创建成功');
        });
      });
    }
  }
}

方案二：使用 npm 包（如果可用） 如果 Aliplayer 提供了 npm 包（例如 aliplayer-js-sdk），优先通过 npm 安装并在组件中导入，这样构建工具（webpack）可以更好地管理依赖。

npm install aliplayer-js-sdk --save

然后在组件中：

import Aliplayer from 'aliplayer-js-sdk';

export default {
  mounted() {
    this.$nextTick(() => {
      new Aliplayer({ ... });
    });
  }
}

方案三：调整模板中脚本的加载方式 如果必须在模板中引入，尝试将脚本移至 <body> 末尾，并添加 async 或 defer 属性，使其不阻塞渲染。

<body>
  <div id="app"></div>
  <!-- 将脚本放在最后 -->
  <script defer src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
</body>
回到顶部