前端ChatGPTVS文心一言辅助能力对比-六虎

本文正在参加「金石计划」

前言

等了N久之后，文心一言终于经过了我的体会申请。

这不就得赶紧和ChatGPT比照比照？经过之前的文章# 作为一名前端开发，咱们能够让chatGPT帮咱们做什么？我罗列出了，ChatGPT在前端开发时中能够给咱们以下几个协助：

前端有关的技能答复
资源引荐
规划主张
代码检查
功能优化主张
技能选型主张
问题排查

接下来咱们会经过这几个功用的比照，比照ChatGPT和文心一言在前端方面的辅助。

ChatGPT vs 文心一言

1. 前端有关的技能答复：

问同一个问题什么是微前端？

文心一言:

微前端是一种多个团队经过独立发布功用的办法来共同构建现代化 web 运用的技能手段及办法战略。微前端学习了微服务的架构理念，将一个巨大的前端运用拆分为多个独立灵敏的小型运用，每个运用都能够独立开发、独立运转、独立布置，再将这些小型运用联合为一个完好的运用。微前端既能够将多个项目融合为一，又能够削减项目之间的耦合，进步项目扩展性，相比一整块的前端库房，微前端架构下的前端库房倾向于更小更灵敏。

chatGPT：

微前端（Micro Frontends）是一种将前端运用划分为多个较小、独立的模块的架构形式。这种形式的中心思想是将单一的、巨大的前端运用拆分红一系列能够独立开发、测试和布置的微运用。每个微运用担任运用的一部分功用，而且能够运用不同的结构、技能栈和团队来开发。终究，这些微运用经过某种办法组合在一起，供给一致的用户体会。

微前端的主要优势如下：

独立开发和布置：每个微运用能够由不同的团队独立开发、测试和布置，下降了各团队之间的协调本钱，进步了开发效率。
技能栈自由：各个微运用能够依据本身需求挑选适宜的技能栈，不受其他微运用的约束。这使得团队能够更灵敏地测验新技能，下降了技能迁移的风险。
渐进式晋级：在微前端架构下，能够逐渐晋级或替换运用中的某个部分，而无需重写整个运用。
更好的可维护性：经过将前端运用划分为多个模块，下降了模块之间的耦合度，进步了运用的可维护性。

然而，微前端也带来了一些应战，如：

功能和资源办理：多个微运用或许意味着更多的资源恳求和加载。优化资源加载和办理是微前端实施过程中需求关注的问题。
一致的用户体会：在多个独立的微运用中维护一致的用户体会是一个应战。团队需求同享一些 UI 组件、规划规范和交互逻辑，以保证整个运用的一致性。
通讯和数据同享：微运用之间需求某种通讯机制来同享数据和状况。这或许需求引入全局状况办理、事件总线等技能。

实施微前端的办法有许多种，如经过 Web Components、运用间通讯、组合式 UI 等。挑选适宜的实施方案取决于项目的需求和团队的技能背景。

总结：

咱们能够看到，在关于什么是微前端这个问题上，ChatGPT和文心一言都把根本界说很好的答出来了，可是明显咱们能够看到，ChatGPT供给的答案会更完善，除了根本的界说，ChatGPT还告知咱们微前端的优势和应战，这一局，ChatGPT完胜

2. 资源引荐：

请引荐我一些前端学习网站

文心一言: 以下是一些前端学习网站：

人人都是产品经理：是一个专门共享前端开发经历和教程的社区。
网易云讲堂：供给前端开发课程和教程，包含HTML/CSS/JavaScript等基础课程。
慕课网：供给前端开发相关的在线课程和视频教程。
码农网：供给前端开发相关的教程和文章。
极客时刻：是一个专门共享前端技巧和经历的社区。

这些网站都供给了许多前端学习资源和教程，能够依据自己的需求挑选适宜的网站进行学习。

chatGPT：

MDN Web 文档（MDN Web Docs）：developer.mozilla.org/ MDN 是一个翔实的资源库，涵盖了 HTML、CSS 和 JavaScript 等前端技能的教程、参阅文档和示例代码。
W3Schools：www.w3schools.com/ W3Schools 供给了丰富的前端开发教程和实例，覆盖了 HTML、CSS、JavaScript、jQuery、Bootstrap 等技能，适宜初学者入门。
：/ 是一个专心于技能领域的社区，你能够在这里找到许多关于前端开发的文章、教程和项目共享。
CSS-Tricks：css-tricks.com/ CSS-Tricks 供给了许多 CSS 技巧和前端开发相关的文章，是一个学习和进步 CSS 技能的好去处。
freeCodeCamp：www.freecodecamp.org/ freeCodeCamp 是一个免费的编程学习渠道，供给了 HTML、CSS、JavaScript 等前端技能的课程和实践项目，以及一个活跃的社区论坛。
Codecademy：www.codecademy.com/ Codecademy 是一个在线学习渠道，供给了许多前端技能的互动式课程，如 HTML、CSS 和 JavaScript，适宜初学者入门。
前端大全：www.frontendfront.com/ 前端大满是一个前端开发资源的聚合站点，收集了许多来自互联网的优质文章、教程和东西，协助你更方便地学习前端技能。

总结：

在资源引荐上，其实我觉得两者的答复都能够，文心一言都是国内的网站，ChatGPT国内外网站都有，但我或许会觉得ChatGPT的答复会好于文心一言，因为我以为作为一名前端开发，MDN和W3Schools是一个从初学者开端就必用的学习网站，它们涵盖了前端大部分知识点，但文心一言引荐的也没任何问题，所以这局就算平局吧。

3. 规划主张：

请给我后台办理系统的颜色搭配？

此标题，文心一言直接甩了我一张图片，本题我用图片来展现ChatGPT和文心一言的答复吧！

文心一言:

它如同不太懂我的意思，那么文心一言或许不具备规划主张这个功用，咱们再试试其他问法能不能问出前端的规划主张。

chatGPT：

总结：

当我问到规划里边的配色参阅时，文心一言都是甩给我一张AI生成的图片，规划主张，它应该是无法给了，反观ChatGPT答复了我想要的答案，且答案明晰明了，还交心的多给了几种方案，这一局ChatGPT完胜。

4. 代码检查

我献祭一下我从前写的欠好的代码，把它丢给ChatGPT让它帮我优化一下这段代码。

async initData() {
  this.loading = true
  if (this.curNetId  ||  this.curLineId  ||  this.curSegmentId) {
    if (this.curSegmentId) {
      const resp = await getSafeOverviewHidden({
        workAreaId: this.curSegmentId,
      })
      const resp2 = await getSafeDangerTable({
        lineNetId: '',
        lineId: '',
        pageNum: this.page,
        areaId: this.curSegmentId,
        pageSize: 10,
      })
      this.dangerPage = resp2.data || {}
      this.dangerData = resp.data
    } else if (this.curLineId) {
      const resp = await getSafeDangerData({
        lineId: this.curLineId,
      })
      const resp2 = await getSafeDangerTable({
        lineId: this.curLineId,
        pageNum: this.page,
        pageSize: 10,
      })
      this.dangerPage = resp2.data || {}
      this.dangerData = resp.data
    } else {
      const resp = await getSafeDangerData({
        lineNetId: this.curNetId,
      })
      const resp2 = await getSafeDangerTable({
        lineNetId: this.curNetId,
        pageNum: this.page,
        pageSize: 10,
      })
      this.dangerPage = resp2.data || {}
      this.dangerData = resp.data
    }
  }
  this.loading = false
},

把代码丢给ChatGPT，让它帮我优化，以下是优化后的代码

async initData() {
  this.loading = true;
  if (this.curNetId || this.curLineId || this.curSegmentId) {
    const params = {
      workAreaId: this.curSegmentId,
      lineId: this.curLineId,
      lineNetId: this.curNetId,
      pageNum: this.page,
      pageSize: 10
    };
    const [resp, resp2] = await Promise.all([
      this.curSegmentId
        ? getSafeOverviewHidden({ workAreaId: this.curSegmentId })
        : getSafeDangerData({ lineId: this.curLineId, lineNetId: this.curNetId }),
      getSafeDangerTable(params)
    ]);
    this.dangerData = resp.data;
    this.dangerPage = resp2.data || {};
  }
  this.loading = false;
}

然后咱们丢给文心一言，看看它的优化作用怎么样？

文心一言有1024的字数约束，彻底不行一个写得欠好的函数进行优化，所以我只能挑选抛弃嘞，总不能我优化代码还要分红小于1024字数的每一小块吧？那我宁愿抛弃这功用，这一局依旧ChatGPT完胜。

5. 功能优化主张

ChatGPT能够为供给有关进步网站功能的主张，例如优化图片、削减HTTP恳求、运用CDN等。我之前从前开发过大屏项目，众所周知大屏项目最大的问题就是资源太多，且一次性要展现较多的内容，这时候大屏优化就极为重要，咱们能够向ChatGPT问询有什么优化主张吗？

问：我的大屏前端项目，资源较大，展现内容较多，引起了大屏页面卡顿，有什么优化主张吗？

chatGPT：

大屏前端项目卡顿问题一般与资源加载、烘托功能和内存办理等方面有关。以下是一些主张和优化办法，协助你进步大屏项目的功能：

懒加载和异步加载：关于不需求当即显现的内容，能够运用懒加载（Lazy Loading）或异步加载（Async Loading）技能，按需加载资源。这能够减轻浏览器的初始烘托担负。
图片优化：紧缩图片巨细、运用更高紧缩比的图片格式（如 WebP），以及运用 CSS Sprites 技能将多个小图标合并为一张图片等，能够有用削减资源巨细和恳求数。
运用 CDN（内容分发网络）：将静态资源布置到 CDN，能够加快资源加载速度，下降服务器担负。
削减重绘和回流：削减不必要的 DOM 操作，防止频繁更改样式，运用 CSS3 动画替代 JavaScript 动画等，有助于削减浏览器的重绘（Repaint）和回流（Reflow）。
利用 GPU 加快：将某些复杂烘托使命交给 GPU 处理，能够进步烘托功能。例如，在 CSS 中运用 transform、opacity 等特色，能够触发 GPU 加快。
优化 JavaScript 代码：防止运用许多的全局变量，削减不必要的核算，运用高效的数据结构和算法等，能够进步 JavaScript 代码的执行速度。
运用 Web Workers：将一些耗时的核算使命放到 Web Workers 中执行，能够防止阻塞主线程，进步页面响应速度。
剖析和优化功能瓶颈：运用 Chrome 开发者东西等功能剖析东西，剖析页面的烘托功能、内存运用情况等，找到并优化功能瓶颈。
运用虚拟翻滚（Virtual Scrolling）：当列表内容较多时，能够考虑运用虚拟翻滚技能，只烘托当前视口内的元素，从而下降浏览器的烘托担负。
运用分页或无限翻滚：关于许多内容，能够运用分页或无限翻滚技能，逐渐加载和显现内容，防止一次性烘托过多元素。

依据你的项目具体情况，能够测验上述优化办法，进步大屏项目的功能和响应速度。

文心一言:

关于大屏幕上展现内容较多的前端页面，或许会遇到一些功能问题，尤其是当页面中包含许多的图片、动画和交互元素时。以下是一些或许有用的优化主张：

运用紧缩：关于资源大的页面，紧缩图片和音视频文件能够明显削减文件巨细，进步页面加载速度。能够运用一些在线紧缩东西，如 UglifyJS 和 YUI Compressor。
运用缓存：在服务器端缓存图片和其他小文件，能够削减页面加载时刻，进步用户体会。能够运用一些缓存东西，如 Cachebuster 或 Guava Cache。
运用翻滚优化：关于大屏幕页面，翻滚操作或许会导致页面卡顿。能够运用一些翻滚优化技能，如 CSS3的transform特色和 JavaScript 的scroll-behavior特色。
运用Web Workers：在页面中创立一个独立的线程，能够在后台线程中处理页面烘托使命，从而进步页面功能。
优化图片资源：关于大屏幕页面，图片资源或许会导致页面加载变慢。能够测验运用 WebP 或其他更高效的紧缩格式来削减文件巨细。
运用适宜的烘托办法：关于大屏幕页面，运用依据帧的烘托办法或许比依据像素的烘托办法愈加高效，因为前者能够削减烘托时刻。
运用适宜的屏幕分辨率：不同的设备有不同的屏幕分辨率，因此在规划和开发大屏幕页面时，需求考虑不同设备的屏幕分辨率。能够依据设备的分辨率来调整页面布局和元素巨细。

希望这些主张能对您有所协助。假如您还有其他问题或需求更多的主张，请随时告知我。

总结

文心一言和ChatGPT的答案都能够，假如非要说谁更好的话，那肯定是ChatGPT，咱们优化一般会考虑的懒加载、CDN它都有说到，而文心一言就没有。不过文心一言给的主张也是能够协助咱们优化的。这局就算平局了。

6. 技能选型主张

当你还在苦恼决定运用哪种前端库、结构或东西时，你能够试试看问询ChatGPT的意见。

问：我接到一个新的前端项目，项目是一个大屏，里边需求许多的图表和图片，我比较熟悉的技能栈是vue，请为我供给一些技能选型主张。

ChatGPT：

在运用 Vue.js 开发大屏项目时，你能够结合以下一些技能和库来完成高效、高功能的展现作用：

图表库：ECharts 或许 D3.js
- ECharts：百度开发的一个功用丰富、功能优秀的图表库，支持多种常用图表类型，易于集成和定制。
- D3.js：一个强大的数据可视化库，答应你运用 Web 规范（HTML、SVG 和 CSS）自由地构建各种图表和可视化作用，但学习曲线较陡峭。
UI 组件库：Element UI 或许 Vuetify
- Element UI：一个依据 Vue 的高质量 UI 组件库，供给丰富的组件，协助你快速建立界面。
- Vuetify：一个依据 Vue 和 Material Design 的 UI 组件库，供给一套完好的 Material Design 风格的组件，方便快速开发。
状况办理：Vuex
- Vuex：Vue 的官方状况办理库，用于在 Vue 运用中集中办理运用的状况。在大屏项目中，你或许需求处理许多组件之间同享的状况，Vuex 能够协助你简化状况办理。
路由办理：Vue Router
- Vue Router：Vue 的官方路由库，用于构建单页面运用。假如你的大屏项目包含多个视图或页面，能够运用 Vue Router 办理路由。
图片优化：运用懒加载（如 vue-lazyload）或图片格式转换
- vue-lazyload：一个依据 Vue 的图片懒加载库，能够按需加载图片，进步页面加载速度。
- 图片格式转换：运用更高紧缩比的图片格式，如 WebP，以削减图片巨细。
功能优化：代码拆分和懒加载
- 运用 webpack 的代码拆分（code splitting）和 Vue 的异步组件功用，将运用拆分红多个较小的代码块，按需加载，进步首屏加载速度。
高功能动画：运用 CSS3 动画、requestAnimationFrame 或许 Vue 的过渡作用
- 运用 CSS3 动画和 requestAnimationFrame 函数，能够完成高功能的动画作用。
- Vue 供给了内置的过渡作用组件，能够方便地完成各种过渡和动画作用。

依据你的项目需求和个人喜爱，你能够挑选这些主张中的技能和库来构建你的大屏项目。必须注意功能优化，以保证在许多图表和图片的情况下，大屏项目仍然能够流通运转

文心一言:

依据您的项目需求，我引荐以下的技能栈：

1.Vue.js：Vue.js是一种盛行的JavaScript结构，用于构建用户界面。它具有易于学习和运用的特色，而且现已有许多老练的库和东西，能够协助您快速构建美丽的前端运用程序。
2. Webpack：Webpack是一个JavaScript模块打包东西，能够将多个JavaScript文件打包成一个或多个JavaScript文件。它能够进步您的代码打包效率，而且能够轻松处理大型代码库。

React：React是一种用于构建用户界面的JavaScript结构。它具有简略易用的特色，而且现已有许多老练的库和东西，能够协助您快速构建美丽的前端运用程序。
D3.js：D3.js是一种用于数据可视化的JavaScript库。它能够创立美丽的图表和图形，而且现已有许多老练的库和东西，能够协助您快速创立数据可视化。
Canvas：Canvas是一种在Web上创立图形的规范技能。它能够用于创立复杂的图表和图形，而且现已有许多老练的库和东西，能够协助您快速创立数据可视化。

以上是一些常见的前端技能栈，您能够依据您的项目需求和个人偏好挑选适宜的技能栈。同时，您还能够考虑运用一些新兴的前端技能，例如WebXR、VR、AR等。

总结

ChatGPT比文心一言答复好多了，尽管文心一言也答出来了，ChatGPT的答复更符合我作为一个面对技能选型的人所会去考虑的问题，这局勉强算平了吧

7. 问题排查

咱们随意丢个报错，看下文心一言和ChatGPT的表现是什么样的。

TypeError: Cannot read properties of undefined (reading ‘name’)

文心一言:

这个过错一般是因为在测验拜访一个未界说的目标的特色时发生的。这或许是因为在测验拜访该特色时，目标没有被创立或许没有被初始化。

以下是一些或许导致此过错的原因：

在测验拜访一个未界说的目标的特色时，或许会遇到类似于“Cannot read properties of undefined (reading ‘name’)”的过错。这一般发生在测验拜访一个没有界说的特色时。
在运用目标的特色时，或许会遇到类似于“Cannot read properties of undefined (reading ‘name’)”的过错。这一般发生在测验拜访一个没有界说的特色时。
在测验拜访一个没有界说的特色时，或许会遇到类似于“Cannot read properties of undefined (reading ‘name’)”的过错。这一般发生在测验拜访一个没有界说的特色时。

为了处理此问题，您能够测验运用以下办法之一：

保证在测验拜访目标的特色之前，目标现已被创立并初始化。
保证在测验拜访目标的特色之前，目标的特色现已被界说。
保证在测验拜访目标的特色之前，目标的特色现已被界说而且可用。 ChatGPT：

当你遇到 “TypeError: Cannot read properties of undefined (reading ‘name’)” 这样的过错时，这一般意味着你在测验拜访一个未界说（undefined）目标的 ‘name’ 特色。要处理此问题，你需求找到引发过错的代码，并保证在测验拜访 ‘name’ 特色之前目标现已被正确初始化。

ChatGPT的答复是咱们日常处理这个报错所会做的事情，尽管文心一言抽象的说了一大堆，可是没有直击要点即你需求找到引发过错的代码，并保证在测验拜访 'name' 特色之前目标现已被正确初始化 。

下面还有代码示例，这个示例尽管对处理报错没多大用处，可是看了示例代码，文心一言就纯属胡扯了。

总结

总的来说，文心一言用于前端开发的协助，能够说有用可是又不行精确，尽管它现已是国内最先进的人工智能聊天程序。跟ChatGPT之间的距离仍是相差有点远，不过作为一个刚开端出的人工智能聊天程序，它能协助前端做的内容也都还能够，文心一言仍是挺不错的！

前端ChatGPTVS文心一言辅助能力对比

前言

ChatGPT vs 文心一言

1. 前端有关的技能答复：

2. 资源引荐：

3. 规划主张：

4. 代码检查

5. 功能优化主张

6. 技能选型主张

7. 问题排查

总结

相关文章

阿里云短信服务使用步骤

28的前端深漂，焦虑、迷茫萦绕心头

人工智能 | ShowMeAI资讯日报 #2022.06.21

98年专科编程路：学习

作者信息