首页 › 后端开发综合论坛 › 2025年Web前端开发流程和学习路线（详尽版）

骆月仙 發表於 2022-6-13 15:19:00

2025年Web前端开发流程和学习路线（详尽版）

<blockquote>
<p>本文的最新内容，更新于 2024-02-01，会在GitHub上同步更新，欢迎 star。大家完全不用担心这篇文章会过时，因为随着前端领域的技术更新，本文也会随之更新。</p>
</blockquote>
<h2 id="前言">前言</h2>
<p>前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。</p>
<p>前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个要求：要折腾，爱折腾，反复折腾。</p>
<h2 id="一前端开发流程">一、前端开发流程</h2>
<h3 id="需求评审">需求评审</h3>
<blockquote>
<p>一般在做需求评审时，PRD里只有交互稿，尚未有视觉稿。需要在评审结束并达成一致后，再输出视觉稿。</p>
</blockquote>
<p>1、需求分析：需求点逐一讨论、需求合理性、交互评审、逻辑梳理，以及可能遗漏的部分。</p>
<p>提示：逻辑梳理的过程很花时间，贯穿开发始末。</p>
<p>2、涉及渠道/环境：</p>
<blockquote>
<p>渠道和环境，往往是需求盲点，也是影响技术选型和开发进度的关键因素。</p>
</blockquote>
<ul>
<li>App：App原生页面、<strong>App内嵌H5</strong>、App内嵌小程序。</li>
<li>小程序：技术栈视角：小程序原生页面、<strong>小程序内嵌H5</strong>、App内嵌小程序。</li>
<li>普通H5：微信H5、M站（即普通浏览器环境）</li>
<li>B端：运营管理平台等等</li>
</ul>
<p>3、可行性分析：是否有技术上的实现难点，是否有其他的依赖条件。</p>
<p>数据来源：哪些是调接口，哪些是做成<strong>可配置</strong>，哪些是前端写死；可配置的部分，是前端读取，还是接口读取然后返给前端。提示：可配置的灵活性与风险正相关。</p>
<p>异常流设计：容错、容灾、兜底、降级、回退机制、风险可控。prd一般只写了正常流的逻辑，异常流往往需要研发同学配合做全盘考虑。</p>
<p>6、需求变更：如有需求不明确、改需求、加需求、砍需求、加时间、改时间、加人力等等，需要提前预判风险。</p>
<h3 id="视觉评审">视觉评审</h3>
<p>1、进度跟进：<strong>视觉稿是分批交付，还是一次性给到</strong>？这是要首先考虑的。</p>
<p>按照历史经验，前端项目进度的延误，有一半的概率依赖于视觉稿的进度；因为一个新页面的开发，前端有30%~50%的工作在做页面构建。</p>
<p>2、视觉稿的文件格式：</p>
<ul>
<li>Sketch 原型设计软件：.sketch 格式。一般用来画<strong>视觉稿</strong>。</li>
<li>Figma 原型设计软件：.fig 格式。</li>
<li>Axure 原型设计软件：：.rp 格式。Axure 一般用来画<strong>交互稿</strong>。如果是输出高保真的视觉稿，推荐用 Sketch 或 Figma。</li>
<li>Photoshop 软件： .psd 格式。专门做<strong>图片处理</strong>。当然，有些CP外包人员的技能单一，喜欢用PS输出视觉稿。</li>
<li>Adobe Illustrator 软件（简称AI软件）：.ai格式。制作矢量图。</li>
<li>Adobe After Effects（AE） 软件：.aep 格式。制作动画。</li>
</ul>
<p>备注：Sketch 是Mac平台独有的原型设计软件，最为知名和常见。Figma 是最近比较火的全平台原型设计软件，有取代 Sketch 的趋势。</p>
<p>【划重点】交付视觉稿时，需要视觉同学输出“<strong>带尺寸标注</strong>”的视觉规范文件。</p>
<p>3、检查需求：是否覆盖需求和交互设计中的全部设计点。</p>
<p>4、检查视觉规范：</p>
<ul>
<li>样式和配色，是否符合页面和产品的整体风格。</li>
<li>尺寸规范：移动端的视觉稿宽度是750px。</li>
<li>排版、对齐、一致性。推荐阅读书籍《写个大家看的设计书》，了解基本的设计原则。</li>
<li>字体：字号大小（一般是12px以上，特别小的是10px以上）、字重（注意bold属性值为700），以及有哪些<strong>特殊字体</strong>。尤其要注意字体的版权问题。</li>
</ul>
<p>5、哪些图是前端构建，哪些图是写死图片资源，哪些是可配置；可配置的图中，需要把每个元素做拆解，这个元素是合并到背景图中，还是单独切图，还是读取数据。</p>
<p>6、切图格式：png（透明格式）、jpg</p>
<p>切图的图片大小，不要太大。移动端的大图（比如幕帘弹窗的背景图）建议不超过50kb，小图建议不超过20kb。图片在上传之前，可以先在 https://tinypng.com/上进行压缩。</p>
<p>7、复杂图形、动画的实现难度和实现方式，技术评估。详见接下来要讲的「技术选型」。</p>
<h3 id="排期评估">排期评估</h3>
<p>1、排期一般包含这几个要素：</p>
<ul>
<li>开发时间：视觉构建时长、接口文档（接口协议）交付时间、前后端联调时间、自测时间</li>
<li>转体验时间</li>
<li>转测时间</li>
<li>上线时间（以及，需确认业务投放时间）</li>
</ul>
<p>2、评估排期时，<strong>要根据视觉稿排期</strong>，不要根据交互稿排期。这是首先要强调的。一个新页面的开发，前端有30%~50%的工作在做页面构建。 只看交互稿的话，无法评估真实的开发工作量。</p>
<p>3、前端开发工作包括：概要设计、视觉构建、逻辑代码、前后端联调、自测、转体验。每一项都要单独拆解后评估时间，加在一起就是整体的排期。</p>
<p>4、排期时，要考虑其它的依赖因素：比如视觉稿延期、需求不明确、接口进度、测试进度，当然最重要的是上线进度。紧急项目，经常是根据上线时间倒推开发排期。</p>
<p>5、即将进入开发阶段后，与测试部门协调测试资源，确认转测时间；大型项目&amp;重点项目，需要在需求评审阶段，提前知会测试部门，让其预留时间。</p>
<p>6、如果自己有在并行开发其他项目，则排期时需要给自己预留 buffer。并行开发两个项目是家常便饭；但，这个项目在测试时，往往很难抽身去做别的项目，因为会一直被测试童鞋牵制。</p>
<p>7、开发排期：如果开发排期有变更，需要立即周知其他相关人员，尤其是要评估测试排期的风险。测试排期比开发排期 更难变更。</p>
<h3 id="技术选型">技术选型</h3>
<blockquote>
<p>技术选型千变万化，百家争鸣。这里需要列出你所在部门的常用技术选型，并非市面上的技术栈罗列。</p>
</blockquote>
<p>1、页面开发框架：</p>
<p>（1）多端页面：（小程序原生页面、H5）</p>
<ul>
<li>Taro 框架（基于 React技术栈）</li>
</ul>
<p>注2：有些业务，一开始只做H5，后来迭代时，要求做小程序原生页面。这一点也要纳入需求评估。</p>
<p>（2）H5页面：Vue.js 框架、React 框架</p>
<p>（3）App端：</p>
<ul>
<li>Android端开发语言：Kotlin（新）、Java（老）</li>
<li>iOS端开发语言：Swift（新）、Objective-C（老）</li>
</ul>
<p>（4）B端开发，UI框架：</p>
<ul>
<li>React 技术栈：Ant Design（简称Antd）</li>
<li>Vue 技术栈：Element、Ant Design Vue</li>
<li>较简单的CSS响应式框架：Bootstrap</li>
</ul>
<p>（5）Node.js后端开发框架：</p>
<ul>
<li>Koa：新一代 Node.js 框架。</li>
<li>Egg.js：Egg 是在Koa基础上进一步封装的企业级Web开发框架。</li>
<li>Express：比较老的Node.js 框架。</li>
</ul>
<p>2、CSS预处理器：SASS</p>
<p>3、复杂图形、动画的实现难度和实现方式，技术评估：</p>
<ul>
<li>
<p>gif 动图：尽量不用。因为文件太大，且效果模糊。</p>
</li>
<li>
<p>CSS3 动画：适合简单的、有规律的动画。举例：摆动的鱼、京喜工厂</p>
</li>
<li>
<p>Canvas：Canvas 动画、小程序分享图采用 Canvas 绘制</p>
</li>
<li>
<p>3D动画：WebGL（Three.js 是 WebGL 的综合库）常见案例：太阳系</p>
</li>
<li>
<p>游戏框架：Cocos 引擎</p>
</li>
</ul>
<h3 id="概要设计">概要设计</h3>
<ul>
<li>需求背景及资源</li>
<li>风险评估</li>
<li>技术选型</li>
<li>项目结构设计</li>
<li>主要功能点逻辑设计</li>
<li>可扩展可复用设计</li>
<li>依赖接口</li>
<li>工作量拆解和排期</li>
</ul>
<h3 id="开发环节">开发环节</h3>
<p>1、代码设计：</p>
<p>（1）目录结构设计、代码风格</p>
<p>（2）公共组件、工具类设计：确保<strong>可复用</strong>、高内聚低耦合的原则。哪些可以复用京喜平台的公共组件，哪些需要自己单独写 components、utils。</p>
<p>（3）弹窗设计：如果一个页面有多个弹窗，建议先设计一个抽象的弹窗基类。<strong>设计弹窗时，需要考虑的是</strong>：</p>
<ul>
<li>设计原则：易扩展、复用性强</li>
<li>避免重复代码</li>
<li>避免同一时间出现多个弹窗</li>
<li>弹窗的位置要严格居中（不能因为屏幕尺寸的大小变了，导致弹窗位置不居中）</li>
<li>处理滚动穿透这个顽疾。</li>
</ul>
<p>2、视觉构建：</p>
<p>（1）后端在开发接口时，前端做视觉构建；视觉构建完成后，前端根据接口文档的定义，通过 mock 数据的方式调接口，写前端逻辑；待接口开发完成后，可进入前后端联调阶段。</p>
<p>（2）建议前端童鞋学会自己切图，可控程度更高，也能减少沟通成本。学会基本的 PS、Sketch操作就行，做一名合格的前端切图仔。</p>
<p>（3）对于规则的样式和动画，建议用代码实现，而不是图片。图片会降低页面的打开性能，且大屏都显示效果比较模糊。</p>
<p>（4）切图的尺寸要求：100%宽度以 750px 为准。</p>
<p>（5）<strong>像素级还原视觉稿</strong>：推荐使用 Snipaste 截图软件，按F1截图，F2贴图，然后调整贴图的透明度为50%，将贴图与前端页面进行像素级比对。</p>
<p>3、业务逻辑实现：</p>
<p>（1）建议先用<strong>思维导图</strong>，梳理业务逻辑，再着手写代码。思维导图有利于理清逻辑、事后复盘、高效给他人讲解，一目了然。重要的是思想，而不是用哪一款工具更酷。</p>
<p>（2）在调用接口时，要明确前端自己的安全边界：假设接口字段异常时，前端需要有自己的降级措施，不能完全依赖和信任字段，导致让页面直接白屏、交互异常、甚至挂掉。</p>
<p>（3）除了完成产品要求的业务逻辑之外，还要时刻考虑异常流的设计和容灾。</p>
<p>（4）很多前端童鞋在做需求时，有个习惯是不喜欢细看prd，只对着交互稿和视觉稿进行开发。这样做虽然省事，但有三道手续不能少：</p>
<ul>
<li>开发前，一定要再和产品童鞋过一遍prd细节；</li>
<li>开发过程中，随时和产品童鞋反复沟通确认；</li>
<li>开发到80%时，自己对照prd，只字不差地阅读，看看是否有遗漏的地方。</li>
</ul>
<p>4、非功能性需求。业务代码写完后，还有很多细节需要打磨。比如：</p>
<ul>
<li>不同渠道的分享场景</li>
<li>文案配置检查：运营配置端要做校验；是给产品运营用的，配置要尽量人性化。</li>
<li>添加埋点：曝光上报、点击上报、呼吸上报</li>
<li>监控上报、测试上报、badjs上报</li>
<li>重复代码精简</li>
<li>去掉 console.log、debugger 等多余的代码</li>
<li>图片、字体等静态资源压缩</li>
<li>常见的性能优化：骨架屏（按需）、图片懒加载、图片预加载、防抖节流、长列表<em>滚动</em>到可视区域动态加载</li>
<li>用户体验完善：返回定位、滚动穿透</li>
<li>屏幕适配</li>
<li>小程序代码瘦身</li>
<li>容灾演习</li>
</ul>
<p>5、代码提交：</p>
<ul>
<li>先 git pull，再 git push，减少代码冲突。</li>
<li>commit粒度要尽量细</li>
<li>commit之前，一定要diff代码，确认每一行改动，以免提交不必要的改动。</li>
<li>Commit Message 常用格式：feat、fix、docs、merge</li>
<li>如合并代码时遇到冲突，一定要先解决完冲突后再提交代码。如冲突部分涉及到其他人的代码，一定要找到对应同学一起解决。</li>
</ul>
<p>6、自测：</p>
<ul>
<li>对照prd，查漏补缺。</li>
<li>在真机上体验页面，而不是在模拟器上。</li>
<li>写一部分测试用例，加快后续的测试进度。前面梳理的思维导图，其实就是测试的最佳素材。</li>
</ul>
<h3 id="产品体验">产品体验</h3>
<p>1、在真机体验，而不是在模拟器上。最好是 iOS和 Android 都要对比体验。</p>
<p>2、体验时，记录整理各种 todolist：</p>
<ul>
<li>需求待确认 list：一些小的、风险可控的需求点，可以在体检阶段，集中向产品童鞋提出。</li>
<li>开发未完成 list：有哪些尚未完成的部分，需要和产品童鞋交代清楚。</li>
<li>已知 bug list</li>
<li>体验问题 list：边体验，边记录产品反馈的问题，并在稍后同步给测试童鞋。</li>
<li>依赖项 list：接口、视觉切图、真实的测试环境等等。</li>
</ul>
<h3 id="代码评审代码review">代码评审/代码review</h3>
<blockquote>
<p>代码 review 可以在测试期间进行。</p>
</blockquote>
<p>review顺序：</p>
<ul>
<li>业务核心逻辑</li>
<li>编码规范</li>
<li>关键位置、容易踩坑的地方，需要注释详细</li>
<li>系统保障（监控、容灾降级）</li>
<li>系统安全和风险</li>
<li>用户体验</li>
</ul>
<h3 id="视觉走查">视觉走查</h3>
<blockquote>
<p>视觉走查 可以在测试期间进行。</p>
</blockquote>
<p>视觉童鞋都有像素眼，即便是一两个像素的区别，他们都能瞧出来。所以，建议前端童鞋加强自测，努力做到<strong>像素级还原视觉稿</strong>。</p>
<p>推荐前端童鞋使用 Snipaste 截图软件，按F1截图，F2贴图，然后调整贴图的透明度为50%，将贴图与前端页面进行像素级比对。</p>
<h3 id="测试环节">测试环节</h3>
<p>1、建议加强自测质量。进入测试阶段后，测试童鞋会进行一轮冒烟测试，如果质量不合格，将会被打回，这就很尴尬了。</p>
<p>2、整理自测、测试、发布时需要的主流程checkList，每次迭代时都能用上。</p>
<p>转测邮件的基本元素，包括但不仅限于：</p>
<ul>
<li>prd链接、视觉稿链接</li>
<li>页面链接</li>
<li>项目相关人员</li>
<li>数据配置系统</li>
<li>host 代理</li>
<li>接口文档</li>
<li>概要设计、前端开发整理（如果有的话）</li>
<li>测试用例（如果有的话）</li>
<li>核心业务逻辑梳理（如果有的话）</li>
<li>体验问题列举</li>
<li>测试重点建议</li>
<li>风险点评估</li>
</ul>
<p>3、测试童鞋提的bug单，开发同学需要在 XX 小时内处理完成，否则会被QA催。</p>
<p>4、需要控制bug单数量，否则会被追责复盘。同类问题，建议测试童鞋合并到同一个bug单中。</p>
<p>5、测试管理系统 是所有人处理bug 流程的平台，不是让测试童鞋随便记录个人问题的。所以要提醒测试童鞋，明确该问题是bug，再提单；不是bug，要么不提，要么在沟通后驳回。</p>
<h3 id="发布方案">发布方案</h3>
<ul>
<li>发布顺序：一般是先发后端，再发前端</li>
<li>依赖项是否准备就绪：配置的数据、配置项等</li>
<li>是否会对线上业务、线上数据造成影响</li>
<li>本地环境、dev环境、gamma环境，均要做好验证。</li>
<li>回退机制</li>
<li>发布 checkList</li>
</ul>
<h3 id="上线确认">上线确认</h3>
<ul>
<li>发布完成后，需要输出上线确认邮件</li>
<li>观察页面体验、页面性能表现</li>
<li>观察监控数据、业务调用量</li>
<li>总结复盘</li>
</ul>
<h2 id="二前端工程化">二、前端工程化</h2>
<h3 id="git-版本管理">Git 版本管理</h3>
<p>1、前端代码仓库 git 分支规范：</p>
<p><img src="https://img.smyhvae.com/image-20220510164257833.png" alt="" loading="lazy"></p>
<p><img src="https://img.smyhvae.com/image-20220510164323243.png" alt="" loading="lazy"></p>
<p>2、Commit Message 的格式，只允许使用以下10种标识，最常见的是 feat和 fix ：</p>
<ul>
<li><strong>feat:</strong> 新功能</li>
<li><strong>fix:</strong> 修补 Bug</li>
<li><strong>docs:</strong> 文档</li>
<li><strong>style:</strong> 格式变更，不影响代码的运行</li>
<li><strong>refactor:</strong> 重构（既不是新增功能，也不是修改 bug 的代码变动）</li>
<li><strong>test:</strong> 增加测试</li>
<li><strong>chore:</strong> 构建过程或辅助工具的变动</li>
<li><strong>up:</strong> 不属于上述分类时，可使用此类别</li>
<li><strong>merge:</strong> 用于 merge branch，需要手写 commit message 的情况</li>
<li><strong>revert:</strong> 用于撤销之前的 commit</li>
</ul>
<p>3、业务分支，命名规范：（建议一定加上日期）</p>
<ul>
<li>特性分支：feature_xxx_YYMMDD</li>
<li>紧急bug修复分支：hotfix_xxx_YYMMDD</li>
<li>小程序发布分支（自动生成）：release_YYMMDD</li>
</ul>
<h3 id="代码规范">代码规范</h3>
<ul>
<li>代码格式化：Prettier</li>
<li>代码格式检查：ESLint</li>
</ul>
<h3 id="css预处理器">CSS预处理器</h3>
<ul>
<li>SASS（用得较多）</li>
<li>Less</li>
<li>PostCSS</li>
</ul>
<h3 id="包管理">包管理</h3>
<ul>
<li>包管理工具：npm（最常见）、yarn</li>
<li>cnpm、nvm、nrm常用命令</li>
</ul>
<h3 id="编译构建">编译构建</h3>
<ul>
<li>webpack（最常见）</li>
<li>Vite</li>
<li>Gulp</li>
<li>Babel：ES6语法转为ES5语法</li>
</ul>
<h3 id="小程序工程化">小程序工程化</h3>
<p><img src="https://img.smyhvae.com/640.jpeg" alt="图片" loading="lazy"></p>
<ul>
<li>小程序工程化探索</li>
<li>京喜小程序最佳实践：我是如何写超大型小程序代码的</li>
</ul>
<h3 id="测试相关">测试相关</h3>
<ul>
<li>编写测试用例代码</li>
<li>单元测试</li>
<li>自动化测试</li>
</ul>
<h2 id="三前端核心知识">三、前端核心知识</h2>
<blockquote>
<p>前端入门核心知识点</p>
</blockquote>
<h3 id="浏览器">浏览器</h3>
<ul>
<li>Web标准：结构标准（HTML）、表现标准（CSS）、行为标准（JS）</li>
<li>浏览器分为两部分：渲染引擎（即：浏览器内核）、JS 引擎</li>
<li>浏览器的工作原理：重绘和重排、V8引擎</li>
<li>App的WebView容器，相当于浏览器，可以内嵌H5网页</li>
</ul>
<h3 id="html5">HTML5</h3>
<ul>
<li>语义化标签：<code>&lt;header&gt;</code>、<code>&lt;article&gt;</code> 、<code>&lt;footer&gt;</code>等。</li>
<li>多媒体标签：<code>&lt;audio&gt;</code>、<code>&lt;video&gt;</code></li>
<li>更强的本地存储能力和设备兼容性：indexDB、HTML5 APP cookie</li>
<li>三维、图形及特效：SVG、Canvas、WebGL</li>
<li>更有效的实时连接：WebSocket、Server-Sent Events</li>
<li>无障碍体验</li>
</ul>
<h3 id="csscss3">CSS、CSS3</h3>
<ul>
<li>CSS盒模型、BFC</li>
<li>浮动、定位（绝对定位和相对定位）</li>
<li>flex 布局</li>
<li>圣杯布局、双飞翼布局</li>
<li>选择器：后代选择器、交集选择器、并集选择器、伪类选择器</li>
<li>2D转换：移动translation、旋转rotate、缩放scale</li>
<li>3D转换：透视 perspective、3D移动 translate3d、3D旋转 rotate3d、3D呈现 transform-style</li>
<li>CSS3动画：animation</li>
<li>CSS hack</li>
<li>Retina 屏幕的 1px 像素，如何实现</li>
</ul>
<h3 id="js基础">JS基础</h3>
<ul>
<li>
<p>ES6语法：严格模式、箭头函数、Promise、Symbol数据类型、Set 和Map数据结构</p>
</li>
<li>
<p>ES6转ES5</p>
</li>
<li>
<p>JS数据类型转换、隐式类型转换</p>
</li>
<li>
<p>内置对象及其方法</p>
</li>
<li>
<p>数组的各种方法：map、filter、every、reduce等</p>
</li>
<li>
<p>事件机制、原型继承、立即执行函数</p>
</li>
<li>
<p>DOM操作、虚拟 DOM 的 diff 算法</p>
</li>
<li>
<p>BOM浏览器操作</p>
</li>
<li>
<p>事件冒泡机制：捕获阶段、目标阶段、冒泡阶段。</p>
</li>
<li>
<p>异步编程：Ajax、Promise、async await</p>
</li>
<li>
<p>SessionStorage和LocalStorage、Cookie</p>
</li>
<li>
<p>迭代器Iterator和生成器Generator</p>
</li>
<li>
<p>Web Socket</p>
</li>
<li>
<p>异步编程</p>
</li>
<li>
<p>单线程</p>
</li>
<li>
<p>Canvas图像绘制</p>
</li>
<li>
<p>svg 动画</p>
</li>
</ul>
<h3 id="js-高级">JS 高级</h3>
<ul>
<li>JS 三座大山：原型与原型链、作用域及闭包、异步和单线程</li>
<li>作用域链、类、继承、原型继承</li>
<li>this的指向和绑定规则</li>
<li>深拷贝和浅拷贝</li>
<li>防抖和节流</li>
<li>Promise的宏任务和微任务</li>
<li>浏览器的重排和重绘</li>
<li>手写 Promise的整个逻辑和API：resolve、reject、then、catch、finally、allSettled、race any</li>
<li>高阶函数</li>
<li>事件委托</li>
<li>call、apply、bind</li>
<li>arguments 伪数组</li>
<li>函数柯里化</li>
<li>模块化：CommonJS、AMD、CMD、ESModule</li>
<li>JS高阶语法：Iterator 迭代器、Decorator 生成器</li>
<li>JS 高阶语法：Decorator、Proxy/Reflect、MutationObserver、 对象属性描述符、Object.assign、Object.freeze、Object.seal</li>
<li>JS 内存泄漏、JS垃圾回收算法</li>
<li>TypeScript 类型检查</li>
<li>Vue.js、React.js源码解析</li>
<li>Vue.js、React.js的<strong>状态管理</strong>：Vuex、Redux、Redux Toolkit、React Hooks、zustand</li>
<li>V8引擎源码</li>
</ul>
<h3 id="nodejs">Node.js</h3>
<ul>
<li>回调函数</li>
<li>时间驱动机制</li>
<li>模块化</li>
<li>函数</li>
<li>路由</li>
<li>全局方法</li>
<li>文件系统</li>
</ul>
<h3 id="web-安全">Web 安全</h3>
<ul>
<li>跨域问题、同源策略、JSONP</li>
<li>CORS</li>
<li>XSS</li>
<li>CSRF</li>
</ul>
<h3 id="页面形式">页面形式</h3>
<ul>
<li>
<p>多端自适应布局</p>
</li>
<li>
<p>SPA单页应用</p>
</li>
<li>
<p>PWA（Progressive Web App）：小程序的鼻祖</p>
</li>
</ul>
<h2 id="四前端框架">四、前端框架</h2>
<blockquote>
<p>每个框架和工具，都有自己的约束、价值和最佳实践。</p>
</blockquote>
<h3 id="js框架">JS框架</h3>
<ul>
<li>Vue.js</li>
<li>React.js</li>
<li>Svelte（轻量级框架，最近比较火）。</li>
<li>angular（逐渐淘汰）</li>
</ul>
<p>对比：</p>
<ul>
<li>vue ：声明式编程，数据驱动的思想</li>
<li>React：函数式编程。如果你要改变数据，那么必须调用api去改。</li>
</ul>
<p>在vue 中，几乎给你想要的全部给你了；而react 追求的更多的是自力更生。</p>
<h3 id="css框架组件库b端常用">CSS框架、组件库（B端常用）</h3>
<ul>
<li>React 技术栈：Ant Design（简称Antd）</li>
<li>Vue 技术栈：Element、Ant Design Vue</li>
<li>简单的CSS响应式框架：Bootstrap</li>
<li>Tailwind CSS（最近比较火）</li>
<li>Vant Weapp：轻量级的移动端（含H5、小程序）组件库</li>
</ul>
<h3 id="知识库框架">知识库框架</h3>
<ul>
<li>Vuepress（基于 Vue.js，推荐）</li>
<li>Docusaurus（基于 React.js，推荐）</li>
<li>GitBook</li>
<li>docsify：可制作简易的 wiki 文档。案例：掘墓人的 Wiki</li>
</ul>
<p>补充：知识库框架，首先推荐 Vuepress 和 Docusaurus，功能强大，成熟稳定。</p>
<h3 id="api-文档框架">API 文档框架</h3>
<ul>
<li>TypeDoc：将TypeScript项目生成 html、markdown等文档。</li>
<li>storybook：用于搭建UI组件的知识库。可在线预览UI组件的样式和交互效果。</li>
</ul>
<h3 id="跨端框架">跨端框架</h3>
<ul>
<li>
<p>Flutter（最近比较火）：Flutter 的Dart开发语言，可以编译为 ARM 64、x86 和 JavaScript 代码</p>
</li>
<li>
<p>ReactNative（逐渐没落）：App、Web端</p>
</li>
<li>
<p>Taro：小程序、H5</p>
</li>
</ul>
<h3 id="桌面应用开发框架">桌面应用开发框架</h3>
<ul>
<li>Electron 框架。案例：VS Code软件就是用Electron 开发的。</li>
</ul>
<p>Electron 非常流行，也被大量公司使用，也有很多成功软件，比如 VS Code、Facebook Messager、Twitch、Microsoft Teams 等。Electron 虽然上手容易，但问题也很明显，就是<strong>慢、吃内存和大</strong>，Electron 吃内存是因为打包的 Chromium 吃内存，同时一个 Hello World 编译后就要 120M+ 。</p>
<p><strong>VS Code、chrome、小程序开发者工具</strong>，本质上都是运行的 chrome 内核。所以你会发现，这三个软件都很占内存，都很卡。我将其称之为“<strong>前端头痛三剑客</strong>”。</p>
<h3 id="前端可视化框架图表库">前端可视化框架、图表库</h3>
<ul>
<li>ECharts：百度的开源图表库。</li>
<li>D3.js：可视化 js 库。</li>
<li>Three.js：基于原生 WebGL 封装运行的三维引擎。太阳系案例 #</li>
<li>Cocos 引擎：游戏动画开发框架。</li>
<li>白鹭引擎：H5游戏引擎，一套完整的H5游戏解决方案。白鹭引擎的所在公司已在2022年初破产，不建议使用。</li>
</ul>
<h3 id="编辑器框架">编辑器框架</h3>
<ul>
<li>wangEditor：国内很流行</li>
<li>Tiptap：可定制性及极强；headerless，不提供任何 UI 样式，你完全可以自由地构建任何你想要的 UI。</li>
<li>TinyMCE：国外很火</li>
<li>ueditor：百度的开源框架。比较老，逐渐没落。</li>
<li>Monaco Editor：VS Code的在线版</li>
</ul>
<h3 id="nodejs-框架">Node.js 框架</h3>
<ul>
<li>Koa：新一代 Node.js 框架。</li>
<li>Egg.js：Egg是在Koa基础上进一步封装的企业级Web开发框架。</li>
<li>Express：比较老的Node.js 框架。</li>
</ul>
<h3 id="服务端渲染框架">服务端渲染框架</h3>
<ul>
<li>
<p>Next.js （基于React.js）</p>
</li>
<li>
<p>Nuxt.js （基于Vue.js）</p>
</li>
</ul>
<h3 id="前端测试框架">前端测试框架</h3>
<ul>
<li>Mocha：JS 测试框架。</li>
<li>Tiga：跨端（H5、小程序）项目的自动化测试 SDK。凹凸实验室出品。</li>
</ul>
<h2 id="五前端性能优化">五、前端性能优化</h2>
<h3 id="性能分析工具">性能分析工具</h3>
<ul>
<li>
<p>控制台的瀑布图 Waterfall</p>
</li>
<li>
<p>控制台的 performance工具：日常开发过程中观察分析运行时的性能表现</p>
</li>
<li>
<p>控制台的 LightHouse ：跑分、输出性能报告，分析性能</p>
</li>
<li>
<p>WebPageTest网站：评估网站性能</p>
</li>
<li>
<p>Performance 这个API：实时动态测量性能</p>
</li>
</ul>
<h3 id="性能参数">性能参数</h3>
<ul>
<li>首屏时间 = 白屏时间 + 渲染时间。预解析、预加载、预渲染、懒加载、懒执行。</li>
<li>FPS帧率</li>
<li>性能的测量标准：RAIL 模型</li>
<li>弱网环境，耗时对比</li>
</ul>
<h3 id="浏览器渲染优化">浏览器渲染优化</h3>
<ul>
<li>了解渲染过程、关键渲染路径</li>
<li>减少重排和重绘</li>
<li>用户从输入url到页面加载显示完成，经历了哪些过程</li>
</ul>
<h3 id="javascript-优化">JavaScript 优化</h3>
<ul>
<li>JS资源优化：按需加载、编译打包、解析执行、异步加载</li>
<li>V8引擎工作原理、性能优化原理</li>
<li>防抖和节流</li>
<li>无限滚动列表：做节点回收</li>
<li>骨架屏 skeleton：减少布局移动</li>
<li>时间分片：把一个运行时间比较长的任务分解成一块一块比较小的任务，分块去执行，减少用户的卡顿感</li>
<li>JS内存管理</li>
</ul>
<h3 id="资源优化">资源优化</h3>
<ul>
<li>资源的压缩与合并：减少http请求数量；减少请求资源的大小；使用 http缓存</li>
<li>HTML优化：减少iframe的使用；避免节点的深层次嵌套；避免使用table布局</li>
<li>CSS优化：降低CSS对页面渲染的阻塞，尽早加载CSS；利用GPU渲染CSS动画；使用 contain属性，减少布局和绘制的消耗时间</li>
<li>图片优化：使用CSS3、SVG、IconFont代替图像；图片懒加载 lazy loading；图片的预加载；渐进式图片；响应式图片；使用 base64 代替小于8kb的图。</li>
<li>字体优化：字体闪动问题；使用特殊字体时，建议动态加载网络字体</li>
<li>异步加载第三方资源：第三方资源不可控会影响页面的加载和显示</li>
</ul>
<h3 id="构建优化">构建优化</h3>
<ul>
<li>tree shaking、代码拆分（Code Splitting）</li>
<li>代码压缩混淆</li>
<li>打包时，避免对不变的库重复构建。</li>
</ul>
<h3 id="网络传输优化">网络传输优化</h3>
<ul>
<li>启用Gzip对资源进行压缩</li>
<li>CDN传输：静态资源全部放CDN上，使用户可就近获取所需内容，大幅减小光纤传输距离。</li>
<li>避免重定向：301、302 重定向会降低响应速度</li>
<li>dns预解析：使用dns-prefetch 提前解析域名，提高资源加载速度。在访问以图片为主的网站时，DNS预解析可以让加载时间减少5%左右。</li>
<li>PWA，Service worker</li>
<li>SSR 服务端渲染/Node直出</li>
</ul>
<h2 id="六前端工具和资源">六、前端工具和资源</h2>
<h3 id="前端文档">前端文档</h3>
<ul>
<li>MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web</li>
</ul>
<h3 id="前端社区">前端社区</h3>
<ul>
<li>GitHub</li>
<li>stackoverflow</li>
<li>掘金</li>
</ul>
<h3 id="js-学习资源">JS 学习资源</h3>
<ul>
<li>现代 JavaScript 教程：https://zh.javascript.info/</li>
<li>阮一峰 JS教程：https://wangdoc.com/javascript/</li>
<li>阮一峰 ES6教程：https://es6.ruanyifeng.com/</li>
<li>TypeScript 入门教程：https://github.com/xcatliu/typescript-tutorial</li>
<li>Node.js学习指南：https://blog.poetries.top/node-learning-notes/</li>
</ul>
<h3 id="js-代码规范">JS 代码规范</h3>
<p>1、Airbnb JavaScript Style Guide：</p>
<ul>
<li>
<p>英文原版：https://github.com/airbnb/javascript</p>
</li>
<li>
<p>中文版：https://github.com/lin-123/javascript</p>
</li>
</ul>
<p>2、clean code JavaScript：</p>
<ul>
<li>
<p>英文原版：https://github.com/ryanmcdermott/clean-code-javascript</p>
</li>
<li>
<p>中文版1：https://github.com/alivebao/clean-code-js</p>
</li>
<li>
<p>中文版2：https://github.com/beginor/clean-code-javascript</p>
</li>
</ul>
<h3 id="前端刷题">前端刷题</h3>
<ul>
<li>前端进阶之道：https://yuchengkai.cn/</li>
</ul>
<h3 id="css-学习资源">CSS 学习资源</h3>
<ul>
<li>CSS灵感：https://github.com/chokcoco/CSS-Inspiration</li>
<li>CSS的各种实现效果：https://lhammer.cn/You-need-to-know-css/#/</li>
<li>css_tricks：https://github.com/QiShaoXuan/css_tricks</li>
<li>按需定制 CSS 动画效果：https://github.com/QiShaoXuan/css_tricks</li>
</ul>
<h3 id="字体相关资源">字体相关资源</h3>
<ul>
<li>360字体版权查询：https://fonts.safe.360.cn/</li>
<li>最全的免费可商用字体-效果预览：https://wordshub.github.io/free-font/index.html</li>
<li>常见的免费字体：http://zenozeng.github.io/Free-Chinese-Fonts/</li>
</ul>
<h3 id="抓包工具">抓包工具</h3>
<ul>
<li>Whistle：https://wproxy.org/whistle/</li>
</ul>
<h3 id="兼容性查看工具">兼容性查看工具</h3>
<ul>
<li>Can I use（前端API兼容性查看）：https://caniuse.com/</li>
</ul>
<h3 id="图片相关工具">图片相关工具</h3>
<ul>
<li>图片压缩：https://tinypng.com/</li>
<li>图片压缩：https://docsmall.com/</li>
<li>生成代码截图：https://carbon.now.sh/</li>
</ul>
<h3 id="设计工具">设计工具</h3>
<ul>
<li>
<p><strong>墨刀</strong>：原型设计工具。网址：https://modao.cc/</p>
</li>
<li>
<p><strong>蓝湖</strong>：一款产品文档和设计图的在线协作平台。网址：https://lanhuapp.com</p>
</li>
<li>
<p><strong>PxCook（像素大厨）</strong>：高效易用的自动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook</p>
</li>
<li>
<p>即时设计、稿定、master go</p>
</li>
</ul>
<h3 id="流程图工具">流程图工具</h3>
<ul>
<li>ProcessOn：https://www.processon.com/</li>
</ul>
<h3 id="大纲笔记">大纲笔记</h3>
<ul>
<li>
<p><strong>幕布</strong>：https://mubu.com</p>
</li>
<li>
<p>飞书-思维笔记</p>
</li>
</ul>
<h3 id="markdown-编辑器">markdown 编辑器</h3>
<ul>
<li>typora</li>
<li>VS Code</li>
</ul>
<h3 id="代码编辑器">代码编辑器</h3>
<ul>
<li>VS Code</li>
<li>Sublime Text</li>
</ul>
<h2 id="七前端书籍推荐">七、前端书籍推荐</h2>
<h3 id="js经典书籍">JS经典书籍</h3>
<ul>
<li>红宝书：《JavaScript高级程序设计》</li>
<li>小黄书：《你不知道的JavaScript》上、下册</li>
<li>犀牛书：《JavaScript权威指南》</li>
<li>绿皮书：《javascript语言精粹与编程实践》</li>
</ul>
<h3 id="js进阶">JS进阶</h3>
<ul>
<li>《前端开发核心知识进阶》</li>
<li>《JavaScript 二十年》</li>
<li>《JavaScript 悟道》</li>
<li>《深入理解现代JavaScript》</li>
<li>《JavaScript忍者秘籍》</li>
<li>《编写可维护的JavaScript》</li>
<li>《了不起的JavaScript工程师：从前端到全端高级进阶》</li>
<li>《javascript设计模式与开发实践》</li>
<li>《WebKit技术内幕》</li>
<li>《JavaScript启示录》</li>
</ul>
<h3 id="css">CSS</h3>
<ul>
<li>《CSS世界》</li>
<li>《CSS新世界》</li>
<li>《CSS揭秘》</li>
<li>《精通 CSS》</li>
</ul>
<h3 id="vuejs">Vue.js</h3>
<ul>
<li>《Vue.js设计与实现》</li>
<li>《深入浅出Vue.js》</li>
</ul>
<h3 id="nodejs-1">Node.js</h3>
<ul>
<li>《深入浅出Node.js》</li>
<li>《Node.js：来一打 C++ 扩展》</li>
</ul>
<h3 id="数据结构和算法">数据结构和算法</h3>
<ul>
<li>《计算之魂》</li>
<li>《大话数据结构》</li>
<li>《学习JavaScript数据结构与算法》</li>
</ul>
<h3 id="后端">后端</h3>
<ul>
<li>《领域驱动设计》</li>
<li>《推荐系统实践》</li>
<li>《数据密集型应用系统设计》</li>
<li>《代码精进之路：从码农到工匠》</li>
</ul>
<h3 id="项目管理和认知">项目管理和认知</h3>
<ul>
<li>《人月神话》</li>
<li>《黑客与画家》</li>
<li>Joel Spolsky的书：《软件随想录》《Joel 说软件》《Joel 谈优秀软件开发方法》</li>
<li>《凤凰项目》</li>
<li>《持续交付2.0》</li>
<li>《Google软件工程》</li>
<li>《软技能：代码之外的生存指南》</li>
<li>《重来3：跳出疯狂的忙碌》</li>
<li>《程序员的思维修炼》</li>
<li>《管理的常识》</li>
</ul>
<h3 id="产品">产品</h3>
<ul>
<li>《启示录》</li>
<li>《结网》</li>
<li>《人人都是产品经理》</li>
<li>《用户体验要素》</li>
<li>《有效需求分析》</li>
<li>《产品逻辑之美：打造复杂的产品系统》</li>
<li>《微信背后的产品观》</li>
<li>《俞军产品方法论》</li>
<li>《决胜B端——产品经理升级之路》</li>
<li>《给产品经理讲技术》</li>
<li>《精益数据分析》</li>
<li>《产品经理面试宝典》</li>
<li>《体验引擎：游戏设计全景探秘》</li>
</ul>
<h3 id="设计">设计</h3>
<ul>
<li>《设计心理学》四册</li>
<li>《用户体验要素》</li>
<li>《点石成金》</li>
<li>《写给大家看的设计书》</li>
<li>《About Face 4: 交互设计精髓》</li>
<li>《设计中的设计》</li>
<li>《破茧成蝶》</li>
<li>《简约至上：交互式设计四策略》</li>
<li>《Web表单设计：点石成金的艺术》</li>
<li>《触动人心：设计优秀的iPhone应用》</li>
<li>《瞬间之美：Web界面设计如何让用户心动》</li>
<li>《用户体验度量：收集、分析与呈现》</li>
</ul>
<h3 id="运营">运营</h3>
<ul>
<li>《运营之光》两册</li>
<li>《我在一线做用户增长》</li>
<li>《增长黑客：创业公司的用户与收入增长秘籍》</li>
<li>《流量池》</li>
<li>《超级运营术》</li>
</ul>
<h3 id="商业">商业</h3>
<ul>
<li>《史蒂夫·乔布斯传》</li>
<li>《浪潮之巅》</li>
<li>《赢》</li>
<li>《你凭什么做好互联网：从技术思维到商业逻辑》</li>
<li>《计算广告》</li>
<li>《详谈：左晖》</li>
<li>《在线：数据改变商业本质，计算重塑经济未来》</li>
<li>《零售的哲学》</li>
<li>《我看电商》</li>
<li>《冲浪板上的公司》</li>
<li>《一本书读懂财报》</li>
</ul>
<h3 id="思维和认知">思维和认知</h3>
<ul>
<li>《学会提问》</li>
<li>《思考，快与慢》</li>
<li>《清醒思考的艺术》</li>
<li>《把时间当作朋友》</li>
<li>《智识分子》</li>
<li>《少有人走的路》</li>
<li>《沟通的方法》</li>
<li>《我们为什么要睡觉》</li>
</ul>
<h2 id="八前端总结和认知">八、前端总结和认知</h2>
<h3 id="研发视角如何理解需求">研发视角，如何理解需求</h3>
<blockquote>
<p>点击查看大图。</p>
</blockquote>
<p><img src="https://img.smyhvae.com/20220613_1330-2.jpg" alt="" loading="lazy"></p>
<p>从上面的流程图中可以看出，产品经理的交付物是什么？是prd吗？显然不是。</p>
<p>产品经理的工作跟设计师、工程师非常不同。人们对工程师的期望是交付有效的代码，对设计师的期望是交付视觉稿。而对于产品经理来说，只交付一份prd是不够的。</p>
<p>产品经理要负责跟进整个产品周期，包括上线后的页面效果和数据表现。编写需求规范是一种<strong>沟通和推动项目</strong>的手段，但<strong>规范本身并没有内在的价值</strong>。很多产品经理并不借助prd来交流他们的想法，他们可以用谈话，还可以把想法画在白板上。也有一些产品经理虽然写了规范，但却没有参照执行。</p>
<h3 id="前端工程师应该具备怎样的能力和素质">前端工程师应该具备怎样的能力和素质</h3>
<ul>
<li>技术功底、技术视野、技术追求</li>
<li>除了开发业务功能外，还需要对开发规范、工程化、组件化、模块化、测试、设计模式有一定的认知和实践</li>
<li>沟通表达能力、书面表达能力、总结复盘习惯</li>
<li>全局思维、抽象思维、持续交付意识</li>
<li>项目一号位担当，团队协作意识</li>
<li>综合权衡：成本、效率、质量、风险、体验</li>
<li>关注产品、设计、商业等各个领域。交叉学科会带来更多创新。</li>
</ul>
<h3 id="前端认知">前端认知</h3>
<p>1、虽然我们绝大多数时间耗在业务开发上，但仍需要积累其他方面的沉淀，做多一些有趣的、可持续的事情，比如分享总结、基础能力建设、研发效能提升、技术运营建设、技术沉淀等。</p>
<p>2、学会提问。我们日常在提出问题和解决问题时，经常容易陷入X-Y问题，导致目标不明确、思路不清晰、沟通效率低下，甚至在一个完全错误的方向上浪费大量的资源、时间和精力。无论是在寻求帮助的人身上，还是在提供帮助的人身上，都有所体现。</p>
<p>在面对一个问题时，要理解这句话的意图、事实、情绪、期待。学会提问，学会答疑，都是一种智慧。参考提问的智慧 。</p>
<p>3、全流程跟进，持续交付，创造业务价值。</p>
<p>4、前端的本质是链接商业、设计、计算能力，为用户提供专业的人机交互体验。</p>
<p>5、产品能力和技术能力是：判断信息，抓住要点，整合有限的资源，把自己的价值打包成一个产品进行交付，并获得回报。</p>
<p>6、部门体系的角色有很多：运营、产品、视觉、开发、测试、架构师、leader、行销、数据分析、运维等。有些工作不是“做或者不做”的问题，而是程度的问题。在注意边界的前提下，主动承担、全盘思考、多一份同理心，这是能力和责任逐渐增强的体现。</p>
<p>7、谦逊、尊重和信任，是协同作战和良性合作的基础。</p>
<p>8、组织内，人与人的关系应该是怎样的？有人认为是管理与被管理的关系，有人认为是合作关系。而我认为，<strong>组织内的关系是奉献关系</strong>。没有奉献作为基础，组织关系是不成立的。组织内的人与人之间是相互付出的关系，部门与部门是相互付出的关系，上级与下级之间是相互付出的关系，在这样的相互奉献关系中，组织才会真正地存在并发挥作用。</p>
<p>奉献关系所产生的基本现象是：每个处于流程上的人更关心他能够为下一个工序做什么样的贡献；每个部门都关心自己如何调整才能够与其他部门有和谐的接口；下级会关注自己怎样配合才能够为上级提供支持，而上级会要求自己为下级解决问题并提供帮助。</p>
<p>能力很重要，而付出更重要。</p>
<p>9、优秀的人有几个特性：敏感、不能忍、有动手优化的能力。</p>
<p>10、前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的<strong>承载和连接</strong>作用。</p>
<p>11、前端技术的更新日新月异；前端框架的技术选型层出不穷；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个要求：要折腾，爱折腾，反复折腾。</p><br><br>
来源：https://www.cnblogs.com/qianguyihao/p/16370961.html

查看完整版本: 2025年Web前端开发流程和学习路线（详尽版）