第13章 WebView适配

课程目录第13章 WebView适配

13、WebView适配：TV端WebView的焦点处理与性能优化

说实话，WebView 在 TV 端的适配，一直是个让人又爱又恨的东西。

爱的是，它能让你的应用快速承载大量 H5 页面，省去很多原生开发的成本。恨的是，TV 端的遥控器操作和手机触摸完全是两码事，焦点乱跳、性能卡顿，分分钟让用户摔遥控器。

我最早做 TV 端 WebView 时，就踩过一个坑——页面加载出来了，但遥控器按下去，焦点完全不听使唤。用户想点“播放”按钮，光标却跑到了“返回”上。嗯，那场面，别提多尴尬了。

今天我们就来聊聊，TV 端 WebView 的焦点处理和性能优化，到底该怎么搞。

13.1 TV端WebView的焦点问题

先说说焦点。手机端你用手指点哪就是哪，但 TV 端不一样，用户只能通过方向键移动焦点。WebView 默认的焦点行为，说白了就是“谁先被渲染出来，焦点就落在谁身上”，这在 TV 上完全行不通。

核心问题有两个：

焦点丢失：WebView 加载完成后，焦点可能不在任何可交互元素上，遥控器按了没反应。
焦点跳跃：按方向键时，焦点从一个元素跳到另一个不相关的元素上，完全不符合用户预期。

我个人的习惯是，在 WebView 加载完成后，主动注入一段 JavaScript 来接管焦点行为。说白了，就是让 H5 页面“听”遥控器的话。

核心思路：通过 JavaScript 监听方向键事件，手动控制焦点的移动逻辑。

// 注入到 WebView 的 JavaScript
(function() {
  // 获取所有可聚焦元素
  const focusableElements = document.querySelectorAll(
    'a, button, input, [tabindex], [data-focusable]'
  );

  // 当前焦点索引
  let currentIndex = 0;

  // 设置初始焦点
  if (focusableElements.length > 0) {
    focusableElements[0].focus();
    currentIndex = 0;
  }

  // 监听键盘事件
  document.addEventListener('keydown', function(e) {
    const key = e.key;
    let nextIndex = currentIndex;

    switch (key) {
      case 'ArrowRight':
        // 向右移动：找同一行右边的元素
        nextIndex = findNextInRow(currentIndex, 1);
        break;
      case 'ArrowLeft':
        // 向左移动：找同一行左边的元素
        nextIndex = findNextInRow(currentIndex, -1);
        break;
      case 'ArrowDown':
        // 向下移动：找下一行最近的元素
        nextIndex = findNextInColumn(currentIndex, 1);
        break;
      case 'ArrowUp':
        // 向上移动：找上一行最近的元素
        nextIndex = findNextInColumn(currentIndex, -1);
        break;
      default:
        return;
    }

    if (nextIndex !== currentIndex && focusableElements[nextIndex]) {
      focusableElements[nextIndex].focus();
      currentIndex = nextIndex;
      e.preventDefault();
    }
  });

  // 辅助函数：查找同一行中的下一个元素
  function findNextInRow(index, direction) {
    // 这里可以根据元素的 offsetTop 和 offsetLeft 来判断
    // 简单实现：直接按顺序移动
    let next = index + direction;
    if (next < 0) next = focusableElements.length - 1;
    if (next >= focusableElements.length) next = 0;
    return next;
  }

  // 辅助函数：查找下一行最近的元素
  function findNextInColumn(index, direction) {
    // 根据元素的垂直位置来查找
    const current = focusableElements[index];
    const currentRect = current.getBoundingClientRect();
    let bestMatch = index;
    let minDistance = Infinity;

    for (let i = 0; i < focusableElements.length; i++) {
      if (i === index) continue;
      const el = focusableElements[i];
      const rect = el.getBoundingClientRect();

      // 判断是否在目标方向
      if (direction > 0 && rect.top <= currentRect.bottom) continue;
      if (direction < 0 && rect.bottom >= currentRect.top) continue;

      // 计算水平距离
      const distance = Math.abs(rect.left - currentRect.left);
      if (distance < minDistance) {
        minDistance = distance;
        bestMatch = i;
      }
    }
    return bestMatch;
  }
})();

这段代码看起来有点长，但核心逻辑其实很简单：把页面上的可聚焦元素排个序，然后根据方向键找到下一个该聚焦的元素。我在项目中用过这个方案，效果还不错，至少用户不会再抱怨“按不动”了。

小技巧：如果 H5 页面是你们自己开发的，建议在 HTML 元素上加上 data-focusable 属性，这样 JavaScript 可以精确控制哪些元素可以聚焦，避免把焦点跑到一些无关的 div 上。

13.2 WebView的性能优化

焦点问题解决了，接下来就是性能。TV 端的硬件配置通常比手机低，尤其是那些老款电视，CPU 和内存都有限。WebView 加载一个复杂的 H5 页面，动不动就卡成幻灯片。

我记得有一次，客户反馈说“页面加载后，按遥控器要等两秒才有反应”。我排查了一下，发现是 WebView 在加载时做了太多无用功——加载了高清图片、执行了大量不必要的 JavaScript。

性能优化的几个方向：

减少资源加载：TV 端不需要高清图片，把图片压缩到 720p 甚至更低。
延迟加载：首屏只加载关键内容，其他等用户滚动到附近再加载。
硬件加速：开启 WebView 的硬件加速，让 GPU 分担渲染压力。
缓存策略：合理使用缓存，避免重复加载相同的资源。

下面是我常用的 WebView 配置代码，直接贴在 Android 的 Activity 或 Fragment 里：

// 开启硬件加速
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

// 启用 JavaScript
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

// 缓存策略：优先使用缓存
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

// 图片加载优化：等页面加载完再加载图片
webSettings.setLoadsImagesAutomatically(false);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 页面加载完成后，再允许加载图片
        view.getSettings().setLoadsImagesAutomatically(true);
    }
});

// 关闭缩放（TV端不需要）
webSettings.setSupportZoom(false);
webSettings.setBuiltInZoomControls(false);

// 减少内存占用
webSettings.setDomStorageEnabled(true);
webSettings.setDatabaseEnabled(true);
webSettings.setAppCacheEnabled(true);

注意：硬件加速虽然能提升性能，但有些老款电视的 GPU 可能不支持，反而会导致渲染异常。建议在测试机上多跑几遍，如果发现花屏或闪烁，就改成 LAYER_TYPE_SOFTWARE。

13.3 知识体系与核心逻辑

说了这么多，我们来梳理一下 TV 端 WebView 适配的核心逻辑。下面这张图，是我自己总结的，希望能帮你快速理清思路。

你看，整个适配工作其实就三个大方向：焦点处理、性能优化、兼容性处理。三者缺一不可。焦点处理解决的是“能不能用”的问题，性能优化解决的是“好不好用”的问题，兼容性处理解决的是“稳不稳定”的问题。

13.4 避坑指南

最后，分享几个我踩过的坑，希望能帮你少走弯路。

我曾经... 在 WebView 里加载了一个带视频播放的 H5 页面，结果遥控器按下去，焦点在视频控件和页面按钮之间乱跳。后来发现，是视频控件的 tabindex 没有设置，导致它被默认排到了焦点序列的最前面。解决方案：给所有非视频元素设置 tabindex="0"，视频控件设置 tabindex="-1"，让它不可聚焦。

另一个坑：WebView 的滚动问题。TV 端没有触摸滑动，用户只能通过方向键滚动页面。但默认的 WebView 滚动行为很生硬，一滚就是一大段。我建议在 JavaScript 里监听方向键，然后调用 window.scrollBy(0, step)，每次滚动一个固定步长（比如 50px），这样用户体验会好很多。

再提醒一点：不要在 WebView 里加载广告或第三方 SDK。TV 端的网络环境通常不稳定，广告加载慢不说，还可能阻塞主线程，导致整个页面卡死。如果非要加载，建议用 iframe 隔离，或者干脆在原生层处理。

好了，关于 TV 端 WebView 的焦点处理和性能优化，就聊到这里。说白了，就是让 H5 页面“听”遥控器的话，同时别让电视的硬件太吃力。你想想看，用户坐在沙发上，拿着遥控器，按一下就能流畅地浏览页面，这才是 TV 端该有的体验。

公众号:蓝海资料掘金营，微信deep3321

📚 课程目录

13、WebView适配：TV端WebView的焦点处理与性能优化

13.1 TV端WebView的焦点问题

13.2 WebView的性能优化

13.3 知识体系与核心逻辑

13.4 避坑指南