【青训营】跨端技术概述

熊伟鑫
384 阅读6分钟

这是我参与「第五届青训营 」笔记创作活动的第9天

前景补充：什么是跨端？

"跨端" 指的是跨越多个终端设备，如桌面计算机，笔记本电脑，平板电脑和手机，在同一个应用程序或服务上的一致体验。也就是说，用户可以在不同的设备上完成相同的任务，而不需要重新学习或重新适应每个设备上的界面。

可以实现跨端一致性的技术方法

  1. 响应式设计：您可以使用 CSS 媒体查询和弹性布局技术来实现响应式设计。
  2. 适配多个平台：您可以使用平台特定的语言和框架，如 iOS 的 Swift 和 Objective-C，以及 Android 的 Java，来开发适配多个平台的应用程序。
  3. 使用跨平台技术：您可以使用 React Native，Flutter 等跨平台技术来开发跨平台的应用程序。
  4. 数据同步：您可以使用云存储服务，如 Amazon S3，Google Cloud Storage 等来同步数据。
  5. 测试和优化：您可以使用各种测试工具，如 JUnit，Espresso，以及性能分析工具，如 Android Studio 的性能分析工具，来进行测试和优化。 以下是一个简单的 CSS 媒体查询响应式设计的代码示例：
css
body {
  font-size: 16px;
}

@media only screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

这段代码定义了一个字体大小为 16 像素的样式，并在屏幕宽度不超过 768 像素时使用媒体查询技术修改字体大小为 14 像素。这样，当访问者在使用移动设备（如智能手机）访问网站时，字体大小会自动调整以适应屏幕尺寸。

课程介绍的4种方案

Hybrid方案： 运行结构： Hybrid 技术是将原生代码和 Web 代码结合在一起的方案，主要是通过使用 WebView 组件在原生容器中嵌入 Web 页面。 在 Hybrid 方案中，可以在一个原生容器中运行一个 WebView 组件，该组件可以加载并显示 Web 页面，然后通过通信协议（例如：JSBridge）与原生代码进行通信，以便在需要时可以在 Web 页面中访问原生功能。

优点：

  1. 开发效率高：通过使用WebView可以使用Web前端技术快速实现跨平台，开发人员不需要学习原生语言
  2. 跨平台：可以在不同的移动平台上运行，并且可以在不同的环境中使用

缺点：

  1. 性能不足：使用WebView时，由于JavaScript和原生代码之间的通信开销，因此性能较差
  2. 兼容性差：不同平台的WebView对HTML、CSS、JavaScript的支持不一致，可能需要处理多份代码以适应不同的环境

原生渲染 React方案： 运行结构： 原生渲染 React 方案利用 React Native 组件，将 React 组件的视图渲染到原生容器中，实现与原生应用相似的用户体验。 React Native 组件在应用程序启动时被渲染，以及在需要时进行更新，以响应用户交互。

优点：

  1. 性能优异：使用React Native渲染原生控件，可以获得良好的性能
  2. 代码复用：React Native允许开发人员在不同平台间共享代码，从而减少重复开发工作

缺点：

  1. 学习成本高：React Native是一个新的技术，对于那些不熟悉React的开发人员来说，需要花费更多的时间学习
  2. 开发效率较低：React Native有一定的技术门槛，因此开发效率较低，需要更多的时间来实现相同的功能

自渲染方案： 运行结构： 自渲染方案是一种将自然语言理解与程序执行结合起来的方案。 这种方案通过语言理解引擎将用户的自然语言请求转换为机器可以理解的程序语言，并执行相应的操作，从而实现语音交互等功能。

优点：

  1. 灵活性高，可以随意设计和控制界面，并且自渲染方案可以利用现代的 JavaScript 框架，如 React，Vue 和 Angular 等来实现复杂的前端业务逻辑。
  2. 可以在不同的平台上实现相似的用户体验，这对于构建沉浸式的应用程序很重要。
  3. 维护和升级代码变得更加容易，因为所有的业务逻辑都在同一个代码库中。

缺点：

  1. 性能问题：因为自渲染方案在每个终端上都需要加载整个 JavaScript 应用程序，因此当加载大型应用程序时可能会导致性能问题。
  2. 用户体验问题：当用户在网络环境不佳时，他们可能需要等待整个 JavaScript 应用程序加载完成才能看到内容。
  3. 浏览器兼容性问题：由于某些浏览器不支持一些现代 JavaScript 框架的特性，因此在这些浏览器上运行自渲染应用程序可能会有兼容性问题。

小程序方案： 小程序是一种基于微信内置浏览器的应用，可以在手机和电脑端运行。它支持开发者使用微信官方提供的API，用来访问微信平台上的设备资源，并可以结合微信内置浏览器，实现原生级别的界面效果和交互体验。 在小程序中，开发者可以使用小程序框架的语法，也可以使用基于HTML、CSS、JavaScript的前端语言，结合微信的API，快速开发出高性能的小程序。

优点：

  1. 开发成本低，没有额外的代码重复，比其他跨端技术方案开发成本更低。
  2. 发布方便，可以通过微信平台进行发布，没有复杂的审核过程。
  3. 用户体验好，微信拥有大量的用户，小程序在微信内置浏览器中运行，可以获得原生级别的性能和体验。

缺点：

  1. 技术限制多，需要遵守微信的开发规范和限制，开发者的创意有可能受到限制。
  2. 受平台限制，仅能在微信平台运行，不能在其他平台使用。

小程序优化方式&工具： 小程序性能优化的手段包括：

  1. 代码优化：通过代码优化提高运行效率，例如使用尽可能简单的逻辑，避免频繁的DOM操作等。
  2. 数据优化：使用最小数据量，避免大数据量对页面渲染带来的影响。
  3. 图片优化：使用最小图片大小，避免图片过大对页面带来的影响。
  4. 页面重构：重新设计页面布局，以提高页面性能。

小程序性能优化的工具包括：

  1. 小程序管理工具：通过微信官方提供的工具管理小程序，包括代码检查、资源管理、数据统计等。
  2. 小程序编译工具：通过工具将小程序代码编译成更高效的代码，例如Terser等。
  3. 小程序性能分析工具：通过工具对小程序进行性能分析，例如Lighthouse等。
avatar
文章
阅读
粉丝