前端项目中遇到的难点怎么解决的
粉丝5.1万获赞45.1万
相关视频
04:16查看AI文稿AI文稿我们今天呢一样给大家从三个问题来给大家展开啊。第一个呢是在你的过往的项目里面，有没有极端场景的一些具体的性能优化场景，呃，包括呢详细说明一下你的背景解决方案，还有最终的实现。 另外呢更进阶的问题就是比如说之前你做过类似于飞书文档，飞书表格啊，还有包括飞书编码平台这类的产品，这类的产品呢其实本身其实有一定的竞争力啊，那么在实现的过程中有遇到过一些什么比较严重的性能问题没有？具体怎么样去解决这个问题？ 然后呢专家级的问题，比如说让你从零到一去架构设计，飞出表格或者飞出 d 代码，你都已经知道了整个性能优化到了瓶颈了，或者到了这个最终的天花板了，那怎么样想到一些更好的方案来去做这个优化？ 所以呢，我们会从这样三个不同级别的问题来给大家去讲解。我们今天的内容 一共分为三个阶段，初中级、中高级跟专家级这三个问题，这三个问题呢分别对应的讲解的内容难度和深度也会不一样。那么大家听到最后啊，我们整个给大家去介绍呢？第一个是先告诉大家啊，在面试的时候， 对于一些极限场景的这个性能优化的问题去做一个盘点，比如说万亿级的，或者当然万亿级相对来说比较高，万级、千万级 或者上亿级的啊，这种节点的类似于长列表渲染这些场景，怎么样去做优化？然后呢还有超大数据量的一些图标，包括仪表盘在渲染的时候，他也有性能问题，怎么解决啊？再比如说在一些巨型应用里面，在入网环境下有一些资源加载问题等等。 那么其实我们在做整个应用层的重构的时候，其实就考虑两个点啊，第一个是什么地方慢怎么解决，是什么地方的整个渲染卡顿怎么解决啊？所以呢，我们在学习之前，要先理解整个性能的评估体系， 然后呢分别对于这些体系中间的指标啊，存在哪些问题，去分析问题，然后解决问题啊，比如说 fps 吊针了，那这个吊针的问题是怎么样出现的啊？怎么去解决这个问题？ 我们呢会详细的来从长任务分析，再到一些极限场景的优化来给大家去具体讲解啊。然后中高级的问题，比如说你之前做过类似于飞书文档或者飞书表格这类的产品啊，那他有哪些优化的点？特别是飞书表格这种 canvas table， 很 很多同学之前可能没有听说过的 啊，比如说表格，大部分同学都只能够想到用 table dom 的 方式来去渲染，但是其实现在很多这种在线表格类的场景啊， 早就已经完全基于 canvas 来实现了啊，这种我们怎么去做？大家其实知道，现在呃，因为 ai 的 出现，现在很多的应用呢，我们想做这种弱化的服务端，弱化服务端就可以通过类似于飞书表格啊，还有很多在线表格的一些产品来存储用户的数据， 从而呢，你不需要一个真正的什么服务端的平台管理，直接在飞书表格中间去管理你的数据就可以了，这是一个当下 非常有竞争力的一个方向啊，所以其实在我们后面的项目实战里面呢，也有一个内飞书表格的实现啊。前面给大家讲过内飞书文档的项目实战，在内飞书表格中间会给大家详细的去讲解，比如说千万行数据或者上亿行数据的 表格渲染方案啊，这个也是我们待会给大家去讲解的一个重点，内飞书文档的性能瓶颈怎么解决？内飞书表格的性能瓶颈怎么解决？并且呢，待会会具体带大家来去一步一步分析问题，解决问题啊。 再一个呢，就是更进阶专家级的问题啊，如果说让你从零到一来去架构设计类似于非书表格，非书低代码平台，或者说那非书文档的话，就是面试官给你出一个难题， 告诉你说你确实已经触及了前端性能优化的这个天花板了啊，在这个情况下，你还能够想到什么样的优化方案？那特别是在非书表格里面有很多关于表格字段公式相关的处理，这个里面呢，其实有很多优化的点啊，因为很多同学平常其实 不具备比较有竞争力的那些高难度的重难点内容的储备啊，所以呢，我们给大家去详细来梳理一下在字节系的啊，比如一些产品里面 有哪些是可以去借鉴，然后优化到自己的简历里面的，那讲解的所有这些内容呢，在我们的这个呃整个训练营的体系中间，其实有详细的项目实战与之对应啊，大家学习完之后，如果觉得这些内容大家听完之后，对于自己的这个整个后续的职业生涯发展啊有帮助的话，那同学们可以去了解一下我们对应的训练营的内容。
02:48查看AI文稿AI文稿面试的时候经常会问到你做的项目有什么难点和难点，因为常见的管理系统，简单的一个文件的导出， excel 的 导出，这玩意有什么可聊的呢？这种项目你觉得太简单了， 不是太简单了，只是你不会聊难点和难点，按照我们的了解就是点导出，直接调后端接口，返回下载的 u r 就 完事了呀。 但是在这里面我们怎么包装呢？我点导出，我导出个十百千万，十万行数据，我点开始导出，随着业务量的增加，我出现了十万条，二十万条数据的量的导出，那么这时候原来的方案肯定不行了，导致页面卡死， 浏览器内存暴涨，导出经常失败。那么在这里面我主导了整个对于大数据量的优化，导出，导出了十万条，二十万条，来解决我们页面卡顿的问题。十万条数据，我用了大概三秒，十秒钟的时间来做优化， 这就是难点和热点。那么你在这里面怎么写呢？你可以这么去写，也可以这么去写，那么在这么写的过程中，那么标准的回答话术导出， excel 大 文件的导出，复杂表头的处理，数据的校验，模板的优化，填充核心的难点， 亮点，你完全可以把这个作为难点和亮点小减里面像这样的功能，一开始确实就是普通的导出，但是随着你业务量的增加，数据量的增加，十条、二十条，十万条，二十万条，那么这时候前端的难点就来了， 异步的优化，导出失败的增加，怎么样提升用户体验？这时候我们把维度升级一下，这样就可以了，如果你没做过，没关系啊，你拿到代码你跑就跑， 简历里面你完全可以这么写，因为面试的过程本身我们就是来说服面试官的过程，这里面都有代码，除了这个里面还有好多啊，前端所有常见的场景， ai 相关的，前端 ai 方向落地，好的人说 ai， 这和前端有什么关系？错，你看看 你如果这么写， ai 赋能前端文化世界。我不是说用 ai 写代码，而是什么？我是系统化的使用 ai， 让 ai 参与到我整个各个业务开发流程当中，把这些时间掌握就可以了。包括组件库， 组件库，我们要开发 ai 组件库，同样的 excel 图片上传、文件上传、大数量处理、全线国际化， h 五跨端小程序， ufi 素材，这些东西都可以聊啊，包括大屏适配， 各种场景基本上都有了，包装就行了。你不要害怕，你面试过不了，这个你不用担心，你不要担心说我说的那么厉害，万一我工作干不了怎么办？放心吧，现在在公司里面 写代码都用 ai， 最重要的是你把面试这块过了就可以了，整个这里面的干货内容，希望对你面试有帮助。
03:32查看AI文稿AI文稿好，我们现在呢正式开始。呃，今天来给大家介绍的是巨石应用业务跟 single p a 乾坤等等这一类的微前端的原理揭秘啊。呃，主要呢是带大家去整体深入一下关于微前端的整个架构。刚才呢，有同学在评论区已经提到说，哎，我们可不可以简单先介绍一下整个微前端的整个体系和它一些基础内容？ 可以的，那我因为我们每次的课程大家其实都可以看到啊。呃，整个的安排呢，通过三个问题，这三个问题其实就对应于不同年龄级，呃，这个工作年限的同学有初中级的， 有中高级的，然后专家级的。大家可以看到像针对于微前端这样一个点，针对于不同的，呃，面试者他的问题都不一样，初中级、中高级、专家级啊。我们呢会从三个问题来给大家展开。第一个问题是， 比如说你在去面试的时候，面试官问到，你看你之前的项目是整个微前端架构的啊，那你能不能简单说一说微前端的整个架构和引进的过程啊？这个就是偏比较简单的，也是我们说基础概念层的。然后第二点，偏中高级的同学呢， 面试官问，你说一说微前端的整体架构方式啊和这个解决方案，在技术方案的实现上，你看这个点其实就很多，大家的一个痛点很就面试的时候很痛很痛，为什么呢？ 大部分同学他了解的方案业务内容比较少，在面试区的时候都非常干啊，就是面试官问一句，你答一句，问一句答一句啊，到最后其实你的整个效果你给不了别人那种眼前一亮的感觉，你怎么样能够比别人拿到更高的薪资呢？ 是吧？大家要把这个面试逻辑要理解好，然后你为什么选择用 single spa 乾坤啊？检述一下方案细节， 在第三个问题，这个呢偏进阶啊，专家级的问题，比如说让你来去当这个前端 leader， 让你负责，我们现在团队呢有二十多个子应用，那么这二十多个子应用你怎么样去整合，然后放到整体的微前端的体系里面去怎么实施 啊？我们就结合这样三个大的问题，不同层级的问题来给大家展开好。呃，然后呢，今天整个的这个介绍啊，我们主要就是围绕微前端 single s p a 乾坤和整体微前端的体系啊。我们前面其实给大家也说过很多次了，面试呢本身其实最重要的一个核心点就是造势，其实就是 装啊，看你装的怎么样，你就能够拿到怎么样的薪资，就算大家过往的这个经历再差，但是你通过知识点的积累和一些自己的这个过往经经历的一些优化之后，其实你最终的简历产出还是能够去创造一些的。 然后呢，我们今天主要的内容点呢？第一个微前端整体产生的背景，第二个 single sap 微前端的整体解决方案，第三个乾坤微前端接入和整体的应用。第四点呢，就是比如说我们以二十多个前端子这个子应用的这种呃 巨石项目来去做整体的拆解，如何将二十多个词应用呢？整体的融合，并且放到微前端体系里面去，整体的架构怎么做啊？这是我们今天完整的内容。好，我们呢这个不多说了啊，直接来开始今天正式的内容。 好，我先确认一下啊，大家之前有了解过关于微前端技术点，或者你简单听说过的啊，自己有简单学习过的同学来在评论区来扣个一，在评论区来扣个一啊， 这三个问题呢，大家一定要多回头来去看几遍啊，当然如果说你认，你觉得这个到时候看完之后，呃还是不过瘾，对吧？那你可以了解一下我们整体的这个架构师的训练营，大家可以点下这个链接到后续我们待会呢来给大家去整体介绍，有我们整个的这个呃全程陪跑服务，以及呃完整的 八大项目实战。目前已经有的啊，八大项目实战的这个企业级项目实战矩阵，还有后续。呃，这个下一期要给大家去接入的一个非常王炸的 a 项目，这个 a 项目不是大家现在看到的很多市面上的那些 ai 简单应用啊，搞个什么 ai 接入文档，然后 ai 做一个什么什么，不是我们是要做一个 ai 开发平台啊，类似于 cos 跟 diffi 这样的 ai 应用引擎啊。这个呢，我们待会儿来给大家介绍完整课间评论区，扣八八八，免费领取。
03:01查看AI文稿AI文稿那么其实在传统微前端体系里面呢，我们其实关注的是接下来啊 传统的微前端体系，它只是关注它关注于什么呢？关注于拆分 子应用，然后呢独立自制啊，并且呢并且可单独部署。 就比如说我，我给大家举个例子啊，假设我现在呢，这是一个本来很大很大的一个工程项目，这个里面包含登录注册用户中心，对吧？包含那个，呃整个网关平台，然后呢还包包括一些这个服务后台、后台管理， 还包含这个，呃，这个这个比如说权限系统啊，所有的这些点呢，都融合在这一个项目里面，你越来越开发的时候，会发现这些各各种门户网站、各种平台，其实在这一个项目里面，你现在想升级到 v 三 也很困难，这个时候我们就考虑一个点，就是这些独立出去，变成一个一个的子应用。那这些一旦变成了子应用呢？我们内部啊，就是本身原来的这个根项根项目呢，就变成了一个父子级项目，或者叫主应用，主应用项目， 主应用项目里边去加载，将这些项目这个子应用呢接入进来，把这个呢也接入进来，把这个呢也接入进来，这样你就没有 需要去把他所有的代码逻辑呢放到这一个工程里面，而是所有的子应用单都单独去部署，单独去开发，独立自制啊，就这个原因，这个 大家理解没有单独部署啊，这就是他的一个设计的理念，就传统微前端体系，他只关注如何去拆分子应用，如何让子应用独立在呢自制，并且可单独部署， 部署完之后就可以把这些子应用去接入到你的主应用里面去，那这是它的一个传统型架构的这个思路，这点大家理解，同学在评论区来扣个一， 这点大家理解，同学在评论区扣个一啊，好，当然了，那么我们其实前面说了，它叫传统型微前端架构啊，传统型微前端架构，它其实本身带来的价值呢，我们这里给大家介绍，第一个是框架无关，再还有呢就是独立开发，独立部署 叫技术战无关，然后呢，独立开发，独立部署啊，独立部署互不干扰。最后一点呢，就是独立的 运行时啊，因为它们并且呢并且可以将运行时分离啊，这就是它所带来的价值，这也就是大家平常在呃面试的时候，被问到关于微前端，关于什么乾坤这些概念的时候，都会问到你，什么 gs 沙箱或者叫 gs 隔离啊，它其实呢也就是 gs sandbox， 叫 gs 沙箱。 另外呢还有什么 css 隔离啊，或者叫样式沙箱， 那就是这个概念啊，这就是带来的价值。那大家把这个基础的价值理解之后，那么其实你对于传统型的微前端体系就了一个，就有了个基础的认识。完整课间评论区扣八八八，免费领取！
12:05查看AI文稿AI文稿最近啊，这一段时间也收到了很多同学的这个比较不错的战报，就是有很多同学呢，其实在八月份的时候准备，然后呢，刚好在这几天有很多 进了大厂的，比如说有呃这个饿了么的啊，还有字节的等等。这个呢，我们待会儿可以给大家来去分享一下啊，基本上年包呢都到了五十万以上的年包， 所以呢，我整体规划了一下给大家在接下来的这个差不多分三次课大家，其实从我们这的标题也可以看得出来，这是上我们一共呢会分为上中下三篇来给大家系统的去讲解一下，关于要冲击中大厂三十 k 以上的这个前端的岗位的话啊，在技术层面应该怎么样去储备。 然后呢，后面的两次课会分别聚焦在项目，项目或者是业务的重难点，然后呢，最后一节是聚焦到呃这个面试的技巧，简历的储备，简历的优化这个上面啊，所以呢，其实具体的按照我们现在的这个规划来看呢，三节课上中下篇，呃，三篇， 从全面的技术储备进阶，到全面的项目重难点以及业务亮点进阶，再到最终的简历优化，面试复盘，完整的环节应该怎么样去实践啊？我们会通过三次课程内容呢来给大家具体展开，然后每一次课程对应的内容呢，我们都有一个具这个具体的难图 来给大家绘制出来这个完整进阶的难图，从开篇到 javascript， 然后呢 type c， s s， 包括框架等等啊，每一次的话都会从技术到 业务重难点，再到简历优化和面试辅导啊，这就是我们接下来在九十月份这个时间，帮助大家去完成金九银十掌心目标，给大家去安排的中间穿插的三次比较重要的关于面试相关的这个内容啊，所以呢，大家可以最近关注一下啊，然后呢这几周的时间呢，大家也 呃尽量的，如果说下班了之后有时间的话，大家可以来听一听，可以把它作为一个理论理论依据啊，后面大家自己去进阶去成长的时候呢，当然你肯定还是要呃把自己的技术能力，还有呢项目业务重难点以及面试，呃，包括简历优化怎么去做，这个具体去落实， 我们给大家去做一个先导，来告诉大家这三大部分的准备应该怎么样去做。然后呢有同学提问啊，人力外包的话，投大长简历投不出去怎么办？ 大人，目前如果说人力外包，如果说外包的这个阶段的话，那首先要第一个目标就是先找一个自研的工作啊，外包的话，基本上外包如果说学历方面只是普通本科或者是以下的话，去投那个大厂的话，基本上简历出筛都通不过的啊。所以的话呢，先把自己 这个外包的这个身份先洗掉，这是第一步，洗掉之后，那其实真正在面大厂的时候，最重要的就是我接下来要去给大家介绍的三大方面，第一个是技术储备，第二个他是项目中难点，第三个就是简历优化，面试技巧啊，我们分为上中下三篇来给大家去展开， 所以的话呢，其实就是先过渡啊，先过渡到一个，呃，基本上是自研的，然后呢，如果说业务经验能够偏向于 ai， 偏向于那个比如说低代码、无代码平台这一类的团队的话会更好。 三天课程的话应该是分到不同这个九十月，这两个月中间的三天啊，就是呃基本上是周三周六的话，晚上有时间也会给他去直播啊，所以呢，到时候具体看咨询老师给大家去通知。 思研干了两年半，任务比较少，技术点忘的差不多了，怎么办？呃，这个其实是现在很多同学的一个痛点啊，就是 真正就是你上上不去。为什么上不去？因为现在大，因为大家都知道一句话，人是环境的产物，你在一个比较呃低级的技术能力不太好的这种团队里面，如果说你待久了，那其实你的不管是技术成长还是业务的事业其实都会受限啊。所以为什么我们在呃整个课程体系里面，大家其实可以看到最终啊， 呃整个项目取证的这部分，我们一共给大家去完成完善了十大项目实战，这十大项目实战就是你去冲击中大厂的一个业务方面的资本啊，就是这些呢，必须要掌握其中的至少三个才可以。然后在技术能力这方面，同学们以前都认为啊，我背背八个文就可以了，但是这个现在已经是过去时了 啊，这个给大家去打个预防针，现在已经过去时，因为最近很多同学面试其实都做了一个调研啊，大部分的同学呢，在 原理这部分其实问的比较多，这其实也就是我们今天给大家准备的这张蓝图里面要给他去介绍的啊，从开篇到加一直到最终，呃，这个大的篇章所有的内容呢，就是你的不同阶段的一个成长目标， 这是纯技术层的啊，纯技术层的把这部分学好之后呢，那么其实接下来你要考虑就是如何去把你实际 学到的这些技能点用到开发中，用到业务中。因为基本上在面大成的时候，其实他除了问你一些原理性的内容以外，再接下来问的就是很多关于项目中间的重难点，很多同学不知道怎么样去优化你的项目重难点，所以这是一个非常痛的点，如果你不找到一个解决方案的话，那其实你会一直 被困在这个，呃，低级的前端市场里面啊。所以你其实可以大家可以在已经到炕，同学可以想一想，就是现在如果说你到了三五年经验，薪资还没有突破二十 k 的 话，那其实相当于你的困，这个境境遇啊，其实就比较不利啊，因为对你以后的发展不利。 整体的规划的话，其实要尽早的把它做起来。那除了关于业务这部分，其实在面试的时候，呃，其实因为最近很多同学去给他做一 v 一 的咨询啊，就是也了解到这个情况。就比如说我举个例子，有一位同学最近刚拿到了四五家比较不错的 offer， 呃，有几有有关于那个 ai 的 啊，像比如说引刀啊等等这些公司自动化的啊，还有呢，像阿里系的啊，这个具体的公司名称我就不跟他说了。 然后呢？呃，刚开始的时候谈到了这个谈心的环节，最后一轮啊，因为当时他可能这个部门的话，当时要人比较急。呃，二轮面试的时候其实就有 hr 介入了，相当于是二轮面试的时候是技术加那个 hr 一 起来面，面完之后直接去走了谈心， 谈心字的时候呢，刚开始他自己期望的可能就是二十八 k 左右，呃，然后呢，他们是十六星的，呃。最后大概算了一下，其实我跟他的建议呢，是 因为自己面试的表现不错，每一轮我都给他复盘了啊，就每相当于每一轮面试我都给他复盘了。最后呢，我直接跟他说的就是，你如果说按照十四星的这个水平，因为 hr 虽然说是十六星，我说你就直接按照十四星的这个水平，按按自己目前的这个 base 来去成，要保证尽量能够到达呃，这个年包五十万这个水平啊。最后呢，其实这个 offer 经过了两天的 hr 的 谈判拉扯，最后是谈下来的， 所以大家就尽早做准备啊，根据我们今天给大家讲的第一个是技术储备，还有后面的三篇，呃，这个两篇，一个是中篇和下篇， 中篇的话给大家去讲业务重难点，包括项目中的亮点，下篇呢，给大家来去介绍。呃，这个简历优化，面试复盘还有呢面试技巧啊， 大家有什么问题呢，都可以把问题暂时先打到评论区啊，可以给大家去先做一个答疑。比如说最近因为到了这个九十月份，基本上其实在招聘来说啊，应是属于一个呃，相对 热门的一个两个月啊，所以呢，这个大家可以持续关注一下新的机会啊。如果说想跳槽想动的话啊，但是比如说像刚才有同学说到，呃目前已经是在外包的这样一个情况的话，那尽量的先就是把自己的这个外包的这个身份呢，先把它去掉啊，就是能 先找一个自研的工作，然后呢再把技术好好去突破一下，学习一下，把业务方面的这个事业和积累呢，自己做足，后面再去考虑。呃，最终去这个比如说冲击中大厂。按照这样一个步骤 课程的话不是连续三天啊，分散在九十月份这两个月其中的某三天，今天呢是上篇，然后在中篇和下篇。 自信心不足的话，那同学们可以多跟我聊聊天啊，就是因为我们其实给同学们在做咨询的时候呢，呃我其实有时候也会更像一个这种呃心理咨询这种感觉啊就是自信，大家要想自信的 来源是什么？自信来自于哪里？肯定是自信来自于技术啊，只要把自己的技术提升上去了，你多见识几个项目，多做几个项目之后积累了项目重难点，你的自信心自然而然的就上来了。 往期录播啊，这些的话大家可以找 咨询老师去了解一下啊。找咨询老师去了解一下学历低这些问题。其实一方面啊，呃学历低其实不需要太在意， 因为学历这个方面呢，确实他是作为一个出差的标准啊。但是如果说你能够想办法先把简历投出去之后，后面再根据面试的这个表现来去评判你的职级的话和薪资定位的话，其实会更好一点。所以呢，呃 说到底还是技术储备，包括呢还有业务重难点，再是你简历优化和面试的一些技巧，这是核心。好，那现在时间差不多了啊，我再确认一下，朋友们可以听到我声音，可以看到我屏幕，同学在评论区，再来扣个一，我们就正式开始了，蓝牙已断开， 大家如果有任何问题呢，也可以打到评论区啊。今天我看到有很多是新过来的同学，今天同学人数比较多，所以呢，大家有任何问题呢，打，打出来之后，川川的也会给大家来做一些答疑啊。 好，那么我们今天给大家去介绍的呢，是关于面试相关的，因为九十月份确实是招聘的旺季啊，因为从我们的这个 vip 学员的反馈和最近拿到 offer 的 这个数量来看，确实也比以往好了很多，甚至有人呢在说，前端的市场确实回暖了一些。 是的啊，因为什么呢？ ai， 它能够带动前端的发展。很多同学说 ai 会毁灭掉前端，并不是你要半谛正的去看。 你想，如果 ai 的 业务变多，那就意味着前不管是前端还是后端的岗位也自然而然会上来，因为你毕竟要写业务嘛，你干 ai 的， 你写了再多 ai 底层东西，但是你上层都需要有一个上层应用来去承载它，所以这就是前端和后端需要去做的一个事情啊。 那么为什么我们前面其实一直在给大家提倡说大家现在做前头的话，一定要把 ai 也学一学，原因就是拓展你的业务面啊，很多同学做来做去，其实都是一些管理后台，这个说说实话，如果说你去找这种比较高薪的岗位和中大厂的话很难，因为基本上考点就在于你业务到底有没有跟别人不一样的点 好，所以呢，这就是我们接下来给大家规划的上中下三篇，这三篇呢主要是围绕前端大家去冲刺三十 k 以上高薪的啊，不管是中场大场，他的秘籍，求职秘籍，我们今天呢会全面的从技术储备和进阶路线这方面给大家去做详细的梳理。 然后呢我们本系列专题啊，一共分为三篇，上中下，今天呢是技术储备，中篇是关于项目重难点，到时候呢我们会把整个的啊，就是因为大家其实可以看到我们有十大项目取证，到时候我会按照 这已经给大家去更新的十大项目矩阵，带同学们练习的这个实战，再结合后续的还有剪映，包括还有一级在线系统表以及飞格玛 ai 这些项目一共是十三个项目，十三个项目的所有的面试重难点以及业务亮点，到时候会在中篇给大家汇聚出来， 然后再到下篇会给大家重点去介绍面试的是之前你的简历应该怎么样去优化啊，然后呢面试的过程中怎么样去发挥自己的特长啊，能够去把自己比较 精进的这一部分给面试官展现出来，然后呢再就是一些面试技巧，还有谈心技巧，就是下篇一共上中下三篇啊，然后呢我们整个的这个内容呢，会 在开篇的时候就会大家以一个难图展示出来，比如说我们本次今天的这一节课的内容啊，关于技术储备进阶的，那么整个高级前端专家进阶技术储备蓝图会有一个最核心的贯穿始终的这样一个内容啊，就比如说从开篇再到 javascript， 还有呢？ javascript 里面具体的一些，这个， 呃，比较深度深入的啊，比如像面试题，呃，还有一些原理等等。再呢就是 type script， 还有样式体系方案，再就是现现代的一些框架，比如像 react 框架、 view 框架，那这些里面会考一些什么内容？原理会考一些什么内容？ 再到前端工程化体系，再到前端性能优化，再到拓展技术视野以及 ai 赋能前端，这样整个流水啊，给大家去展示出来，这是我们今天的整个内容梗概。
02:48查看AI文稿AI文稿好，那所以呢，我们会围绕三个点来给大家介绍啊，初中级，中高级，专家级三个问题，并且呢，呃，我们因为这个新的班级啊，就马上也会呃开班，然后呢又给大家去新增了两个非常有竞争力的 ai 的 项目实战啊，一个呢是 ai 智能剪辑，还有一个呢是 这个呃，斐格玛 ai， 两个啊， ai 剪辑的话是音频领域的 ai 应用，斐格玛 ai 呢，是这个 design to code， 也就是自然语言转代码的一个完整的实现啊，就这两个领域的问题，一个是基于 election， 然后呢结合 fmpag 打造的 ai 剪辑工具，然后呢还有一个是 design to code 的 ai 应用啊，基于 long graph 和飞马 ai 的 整套设计体系比较接近的啊，让你能够通过自然语言直接转应用完整的这样一个流程项目实战啊，所以呢，我们会有更多的内容来去结合 ai 给大家去介绍。 好，那么看到三个问题，第一个呢，初中级的一个问题，问你在之前的项目里面有了解过哪些模型或者工具啊？怎么样去解决 ai 在 生成代码时候的一个混乱问题？ 我估计现在很多同学都是简单提示词给到 ai， 然后让 ai 去帮你生成，对吧？但是其实真正在中场大场啊，包括呢还有一些比较大的团队，现在 webcody 呢，已经有了一套标准的范式， 不管是从 mcp 工具，还是从本身模型层，还是从这个 coi 工具层，都有了一套标准的成熟的一套工作流啊。这个呢，待会我会给大家去来介绍。 然后中高级的一个问题，如果啊让你来去基于 web coding， 我 的要求是什么呢？你自己一行代码不能写，用 web coding 来完成类似于非书协同表格的全站开发。对啊，全站从前端到服务端到数据库到健全所有的流程， 怎么去做？怎么表保证这个代码质量？怎么去保证性能方相关方那个方面的瓶颈？这个问题现在主要是给大家去解，这个什么问题呢？就是何同学觉得 ai 只能够简单开发页面， 已经不是了，你可以说在二十四年的时候， ai 只能够去做一些简单的 ui 开发，界面开发，但是现在啊， ai 能做的事情可能已经超乎了在座的同学很多的想象啊，已经很可怕了。就自己在用的时候，我就在想，如果说我现在才接触，或者说前几年我才开始接触前端的话， 那真的感觉自己也没有太多的机会，真的是这个样子啊，所以给大家去来介绍这个第二个问题，主要就是给大家说明通过 web coding 的 这一套，这个 sop 是 怎么样去保证你的代码工程的一个性能方面的问题能够解决，并且呢代码质量能够保证啊？就我们待会势利会来去开发一个类似于非输的协通表， 给大家来看一看最核心的功能，我用 ai 银行代码不写它的一个整个流程是什么样子的，并且是一个全站的啊。最后一个问题的话，偏那个专家级啊，就给大家一个，比如说让你一个小时从零到一，去利用 webcoding 的 这一套 工作流来去交付一个类似于非输易及系统表的全站应用，你有没有思路，具体怎么做啊？我们会从这样几个方面来给大家展开三个问题。
05:43查看AI文稿AI文稿大家好，今天呢，我用 open code 解决了一个困扰了我很久的一个问题， 就是这一个项目，这是一个浏览器插件的一个项目，然后目前的问题就是说，呃，你看我现在是点击这些按钮， 你看啊，我现在点击他没有反应，然后为什么没有反应呢？因为他发送气球失败了，他一直是喷嚏的一个状态。这里我们其实点开一看就知道这是一个跨域的一个错误， 现在呢我是打开了喷扣的，然后给他描述了一下我的问题， 然后经过了一段时间的等待呢，他给出了我一个这样的一个答案，然后他的意思就是说你要检查你的服务端是否开启。第二个呢就是说这个错误呢，就是一个跨域的一个问题， 然后我就把这个跨越的这个这牛奶切的这个提示，然后复制给他，他就开始给我生成了一个方案， 然后这个方案的大致意思就是，呃，第一步呢就是在 black box dns 里面建一个呃接收 u r l 参数的还有 u r l 参数的一个方法，然后它可以去呃发送请求。然后第二个呢就是在这个 呃 app 点 view 的 这里面呢，建一个封装一个发送请求的一个方法，然后这个方法的话也是接受 url 还有具体的参数，然后他会把这个参数呢发送一条消息发送到百科会上的简介 啊，大致就是这样的一个方法，然后下面呢就是他给我列出了要修改修改到的是哪些方法，然后一个具体的一个工作量的一个情况， 然后问我还有没有其他的想法，然后我就叫他直接去实施 好，然后这里已经处理完成了，现在呢我要去起重新启动一下项目。 好，现在这个项目已经重启了。好，我在里面点了一下翻译啊，这些功能看了一下，都是和改之前是一样的，没有问题。现在呢我们运行这个命令将项目进行翻译 好，现在翻译完成了，现在为了我们是要在浏览器里面去重新去加载这个插件，就是它编辑后的那个结果。 好，现在我们打开插件看了一下，没有问题， 再看看这个请求。好，现在我们点击下一个页也是没有问题的， ok， 都没有问题。然后经过了一段时间的测试呢，我觉得这个问题应该算是彻底解决了，然后我现在是把其他的也有可能有这样问题的这个页面，我也是先扔给他， 现在我把这个地址复制出来好，然后同时扔给那个 open code。 经过了一段时间呢，他把这些相关的这些文件全都给我找找出来了，然后问我是不是要去修改这四个文件， 我就告诉他确实要修改这些文件，然后他就开始帮我去修改了。 最后呢我们复盘一下整个过程就是，呃，我这个项目呢，就是在 测试的时候呢，他是正常的，但是你打包之后出现问题，然后而且他的这种问题的话，就是你在加载到浏览器中，他是偶发性的出现的，他会有一定的概率会出现，然后我是查了大量的资料没有解决， 然后我把这个问题提交给 open code 嘛，然后他就是给我了一些方案，大致就就是解决办法，就是这里面写的这些 也是成功的解决了问题啊，之后呢，测试中呢，再也没有出现啊，之前的请求获取不到数据的这样的跨越的一个问题。最后呢，我们做一下总结。 第一是在浏览器插件的开发中，页面不能直接发请求，需要先给 bug 光的点 gs 发消息，再由 bug 光的 gs 接收到消息后，再调用发送请求的方法，这样呢，可以避免浏览器的跨域限制。 要点呢，就是我们在开发过程中遇到浏览器搜索不到的问题，可以向 open code 简单描述，并让它去扫描项目，这样呢，我们就能够准确的定位到问题，并且彻底的解决问题。
