#HarmonyOS NEXT体验官#《鸿蒙社区适配实战一》 原创

也是在HDC的时候，和熊平总交流，于是有了要把51鸿蒙社区适配鸿蒙原生应用的想法，于是我就开始了如下的探索，

前言

51博客是一款创建于2005年的博客社区，是中国最大的博客社区之一。鸿蒙社区是一个面向鸿蒙开发者的在线社区，旨在提供丰富的开发资源、技术文档和交流平台，帮助开发者更好地学习和使用鸿蒙操作系统。

适配效果

接下来看一下是如何实现的？

代码结构

技术难点

这里面的技术难点就是针对部分模块和数据返回。我们需要做处理，以及接口多。

我们主要来看一下这里面对于web的优化吧。

ArkWeb

ArkWeb（方舟Web）是一个Web组件平台，旨在为应用程序提供展示Web页面内容的功能，并为开发者提供丰富的能力，包括页面加载、页面交互、页面调试等功能。在这个数字化时代，Web页面的显示速度对于用户体验至关重要，页面显示的速度直接体现了应用的流畅性，影响着用户对应用的印象和体验。快速加载并展示页面不仅可以吸引用户留在应用上，还能减少他们的等待时间和不耐烦情绪，从而提升用户的满意度。

Web页面的显示过程可以被分为多个阶段，包括DNS解析、建立连接、发送请求、接收响应、解析HTML、下载资源等步骤。在这个过程中，许多因素都会对页面显示速度产生影响，比如网络延迟、服务器响应时间、页面大小、资源压缩等。为了优化页面显示速度，开发者可以在Web页面加载、资源下载和页面渲染等方面进行优化，以提升性能和用户体验。本文将介绍以下常见的优化方式：

• Web页面加载优化：Web页面加载速度对于用户体验至关重要，提高页面加载的速度可以直接提升应用的流畅性。
• 同层渲染：通过将页面元素分层渲染，可以减少页面重绘和重排的次数，提高页面渲染效率。

ArkWeb（方舟Web）为开发者提供了优化页面显示速度的方法。通过采取这些优化方式，开发者可以改善应用程序的性能和用户体验，使用户能够更快速、更流畅地浏览Web页面，从而提升用户满意度和留存率。

Web页面加载流程

Web页面加载流程包括网络连接、资源下载（包括等待网络资源下载）、DOM解析、JavaScript代码编译执行、渲染等。页面加载中，比较关键的节点有网络连接、资源下载和完整的页面渲染，本文将主要对以下关键节点的耗时进行优化：

• 预解析：预解析指预先对DNS进行解析，可以节省DNS解析的时间，从而优化Web的加载耗时。

• 预连接：预连接包含预解析的步骤，可以在用户请求页面之前提前进行DNS解析和socket连接建立，这样当用户真正请求页面时，服务器和浏览器之间已经建立好了连接，可以直接传输数据，减少了网络延迟，提升了页面加载速度。

• 预下载：预下载指在页面加载之前提前下载所需的资源，以避免在页面加载过程中资源下载导致的阻塞和耗时。通过预下载，可以在浏览器加载页面时，提前获取到所需的资源如图片、CSS文件、JavaScript文件等。通过提前下载这些资源，可以避免在页面加载时因为资源未加载完成而导致页面渲染延迟的情况发生。通过合理地使用预下载技术，用户在访问页面时可以更快地看到页面内容，提高整体性能，提升用户体验。

• 预渲染：预渲染指在后台对需要加载的页面进行预先渲染，提前完成整个页面加载的流程。当用户需要访问该页面时，可以直接切换至前台展示，实现页面“秒开”的效果。预渲染要求在进行DOM解析、JavaScript执行和页面渲染之前，已经完成了所需资源的下载工作，否则可能会导致页面内容不完整或者渲染错误的情况。通过预渲染，可以显著减少用户等待页面加载的时间，特别是对于一些需要加载大量资源或者有复杂交互的页面。

Web页面加载流程

对域名解析、网络连接、资源下载和页面渲染进行优化，分别可以采用预解析、预连接、预下载和预渲染的方式。预解析可以消除域名解析的耗时，预连接能够消除域名解析和网络连接的耗时，预下载可以消除网络下载带来的耗时及阻塞DOM解析、JS执行的耗时，而预渲染能实现页面“秒开”效果，将页面加载时延降到最低。这三种优化方法均能优化页面加载的性能，提升用户的满意度。而由于所有的关键点都是建立在预处理的思路上，因此如果用户实际并未打开预处理的Web页面，将会造成额外的资源消耗。

优化一

如果要提前对应用的首页进行操作，可以通过initializeBrowserEngine()来提前初始化ArkWeb组件的内核，然后在初始化内核后调用prepareForPageLoad()对即将要加载的页面进行预连接。在prepareForPageLoad中，指定第二个参数为true，代表要进行预连接，如果为false，该接口只会对网址进行DNS预解析。具体代码如下所示。

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
        console.log("EntryAbility onCreate");
        webview.WebviewController.initializeWebEngine();
        // 预连接时，需要將'https://www.example.com'替换成真实要访问的网站地址。
        // 指定第二个参数为true，代表要进行预连接，如果为false该接口只会对网址进行DNS预解析
        webview.WebviewController.prepareForPageLoad("这里输入你的网址，我为了安全，就把网址隐藏，大家按需使用", true, 2);
        AppStorage.setOrCreate("abilityWant", want);
        console.log("EntryAbility onCreate done");
    }
}

优化二

如果要提前对当前页面的Web页面进行连接，可以在Web组件的onAppear方法中对要加载的页面进行预连接，具体代码如下所示。

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
          }
        })
      Web({ src: '这里输入你的网址，我为了安全，就把网址隐藏，大家按需使用', controller: this.webviewController})
        .onAppear(() => {
          // 指定第二个参数为true，代表要进行预连接，如果为false该接口只会对网址进行dns预解析
          // 第三个参数为要预连接socket的个数。最多允许6个。
          webview.WebviewController.prepareForPageLoad('这里输入你的网址，我为了安全，就把网址隐藏，大家按需使用', true, 2);
        })
    }
  }
}

优化三

当前页面完成显示后，要提前对下一个即将要显示的页进行连接，可以在onPageEnd ()中对即将要加载的页面进行预连接。

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Web({ src: '这里输入你的网址，我为了安全，就把网址隐藏，大家按需使用', controller: this.webviewController})
        .onPageEnd(() => {
          // 预连接这里输入你的网址，我为了安全，就把网址隐藏，大家按需使用。
          webview.WebviewController.prepareForPageLoad('这里输入你的网址，我为了安全，就把网址隐藏，大家按需使用', true, 120);
        })
    }
  }
}

最后我来说一下我为什么要适配吧。具体会说一下他的优势劣势，以及机会。

适配优势

用户基础：51博客拥有庞大的用户群体，这为其适配鸿蒙社区提供了潜在的用户基础。如果能够成功吸引这些用户迁移到鸿蒙社区，将为鸿蒙社区带来更多的活跃用户和内容创作者。

技术实力：51博客在博客领域拥有多年的技术积累和运营经验，这为其适配鸿蒙社区提供了技术支持比如我这次适配，就在得到社区里坚果派各位专家老师的支持，尤其是坚果老师提供的技术思路。

品牌影响力：51博客是中国知名的博客社区品牌，具有较高的品牌影响力和用户忠诚度。如果能够成功适配鸿蒙社区，将有助于提升鸿蒙社区的品牌知名度和影响力。

技术难度：适配鸿蒙社区需要对51博客的技术架构进行改造和优化，以适应鸿蒙社区的技术要求。虽然要投入大量的人力、物力和财力，并且存在一定的技术难度和风险。但是和坚果老师交流下来，难度可控，也就有了下面的探索。

适配劣势

用户体验：适配鸿蒙社区需要考虑用户体验的一致性和连贯性。如果在适配过程中出现用户体验不一致或不连贯的情况，将影响用户的使用体验和满意度。

生态建设：鸿蒙社区是一个新兴的社区，其生态建设还需要不断完善和发展。

适配机会

新兴市场：鸿蒙社区是一个新兴的社区，具有广阔的市场前景和发展空间。如果51博客社区能够成功适配鸿蒙社区，将有助于其开拓新兴市场，提升市场份额。

技术创新：鸿蒙社区是一个技术创新的社区，具有较高的技术含量和创新性。如果51博客社区能够与鸿蒙社区进行技术合作和创新，将有助于提升其技术实力和创新能力。

政策支持：鸿蒙社区是华为公司推出的社区，得到了政府的支持和鼓励。如果51博客社区能够与鸿蒙社区进行合作，将有助于其获得政策支持和资源保障。

适配挑战

竞争压力：鸿蒙社区是一个竞争激烈的社区，已经吸引了众多的开发者和社区参与。如果51博客社区想要在鸿蒙社区中获得成功，需要面对激烈的竞争压力，不断提升自身的竞争力和用户价值。

用户需求：用户需求是不断变化的，51博客社区需要不断关注用户需求的变化，及时调整自身的产品和服务，以满足用户的需求。

技术更新：技术更新是快速的，51博客社区需要不断关注技术的发展趋势，及时更新自身的技术架构和产品，以保持技术的领先性和竞争力。