2022-06-12 22:43:23 +08:00
## 前言
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。
前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个要求：要折腾，爱折腾，反复折腾。
## 一、前端开发流程
### 需求评审
> 一般在做需求评审时， ， ，
1、需求分析： ，
提示：逻辑梳理的过程很花时间，贯穿开发始末。
2、涉及渠道/环境：
> 渠道和环境，往往是需求盲点，也是影响技术选型和开发进度的关键因素。
- App：
- 小程序：技术栈视角：小程序原生页面、**小程序内嵌H5**、App内嵌小程序。
- 普通H5： （ ）
- B端：
3、可行性分析： ，
数据来源：哪些是调接口，哪些是做成**可配置**，哪些是前端写死；可配置的部分，是前端读取，还是接口读取然后返给前端。提示：可配置的灵活性与风险正相关。
异常流设计： ，
6、需求变更： ，
### 视觉评审
1、进度跟进：
按照历史经验， ， ； ，
2、视觉稿的文件格式：
- Sketch 原型设计软件：.sketch 格式。一般用来画**视觉稿**。
- Figma 原型设计软件：.fig 格式。
- Axure 原型设计软件：：.rp 格式。Axure 一般用来画**交互稿**。如果是输出高保真的视觉稿，推荐用 Sketch 或 Figma。
- Photoshop 软件： .psd 格式。专门做**图片处理**。当然， ，
- Adobe Illustrator 软件（ ） ：
- Adobe After Effects（ ）
备注： ，
【划重点】交付视觉稿时，需要视觉同学输出“**带尺寸标注**”的视觉规范文件。
3、检查需求：
4、检查视觉规范：
- 样式和配色，是否符合页面和产品的整体风格。
- 尺寸规范：
- 排版、对齐、一致性。推荐阅读书籍《写个大家看的设计书》，了解基本的设计原则。
- 字体： （ ， ） （ ） ，
5、哪些图是前端构建， ， ； ， ， ， ，
6、切图格式： （ ）
切图的图片大小， （ ） ， ，
7、复杂图形、动画的实现难度和实现方式，
### 排期评估
1、排期一般包含这几个要素：
- 开发时间：视觉构建时长、接口文档（接口协议）交付时间、前后端联调时间、自测时间
- 转体验时间
- 转测时间
- 上线时间（以及，需确认业务投放时间）
2、评估排期时， ， ，
3、前端开发工作包括： ，
4、排期时， ： ， ，
5、即将进入开发阶段后， ， ； & 重点项目，需要在需求评审阶段，提前知会测试部门，让其预留时间。
6、如果自己有在并行开发其他项目， ； ， ， ，
7、开发排期： ， ，
### 技术选型
> 技术选型千变万化，百家争鸣。这里需要列出你所在部门的常用技术选型，并非市面上的技术栈罗列。
1、页面开发框架：
（ ） ： （ ）
- [Taro 框架 ](https://taro-docs.jd.com/ )（基于 React技术栈）
注2： ， ， ，
（ ） ：
（ ） ：
- Android端开发语言： （ ） （ ）
- iOS端开发语言： （ ） （ ）
（ ） ， ：
- React 技术栈：[Ant Design](https://ant.design/index-cn)（ ）
- Vue 技术栈：[Element](https://element.eleme.cn/#/zh-CN)、[Ant Design Vue](https://antdv.com/components/overview-cn)
- 较简单的CSS响应式框架：
（ ） ：
- Koa：
- [Egg.js ](https://eggjs.github.io/zh/ )：
- Express：
2、CSS预处理器：
3、复杂图形、动画的实现难度和实现方式， ：
- gif 动图：尽量不用。因为文件太大，且效果模糊。
- CSS3 动画：适合简单的、有规律的动画。举例：[摆动的鱼](https://www.cnblogs.com/qianguyihao/p/8435182.html)、[京喜工厂](https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g)
- [Canvas ](https://www.liaoxuefeng.com/wiki/1022910821149312/1023022423592576 )：
- 3D动画： （
- 游戏框架：
### 概要设计
- 需求背景及资源
- 风险评估
- 技术选型
- 项目结构设计
- 主要功能点逻辑设计
- 可扩展可复用设计
- 依赖接口
- 工作量拆解和排期
### 开发环节
1、代码设计：
（ ）
（ ） ：
（ ） ： ， ：
- 设计原则：易扩展、复用性强
- 避免重复代码
- 避免同一时间出现多个弹窗
- 弹窗的位置要严格居中（不能因为屏幕尺寸的大小变了，导致弹窗位置不居中）
- 处理滚动穿透这个顽疾。
2、视觉构建：
（ ） ， ； ， ，
（ ） ， ， ，
（ ） ， ， ，
（ ） ：
（ ） Snipaste ](https://zh.snipaste.com/ ) 截图软件， ， ，
3、业务逻辑实现：
（ ）
（ ） ， ： ， ， ，
（ ） ，
（ ） ， ， ， ：
- 开发前， ；
- 开发过程中，随时和产品童鞋反复沟通确认；
- 开发到80%时， ， ，
4、非功能性需求。业务代码写完后， ：
- 不同渠道的分享场景
2022-06-27 11:07:46 +08:00
- 文案配置检查：运营配置端要做校验；是给产品运营用的，配置要尽量人性化。
2022-06-12 22:43:23 +08:00
- 添加埋点：曝光上报、点击上报、呼吸上报
- 监控上报、测试上报、badjs上报
- 重复代码精简
- 去掉 console.log、debugger 等多余的代码
- 图片、字体等静态资源压缩
- 常见的性能优化：骨架屏（按需）、图片懒加载、图片预加载、防抖节流、长列表*滚动*到可视区域动态加载
- 用户体验完善：返回定位、滚动穿透
- 屏幕适配
- 小程序代码瘦身
- 容灾演习
5、代码提交：
- 先 git pull， ，
- commit粒度要尽量细
- commit之前， ， ，
- Commit Message 常用格式：
- 如合并代码时遇到冲突，一定要先解决完冲突后再提交代码。如冲突部分涉及到其他人的代码，一定要找到对应同学一起解决。
6、自测：
- 对照prd，
- 在真机上体验页面，而不是在模拟器上。
- 写一部分测试用例，加快后续的测试进度。前面梳理的思维导图，其实就是测试的最佳素材。
### 产品体验
1、在真机体验，
2、体验时， ：
- 需求待确认 list： ， ，
- 开发未完成 list： ，
- 已知 bug list
- 体验问题 list： ， ，
- 依赖项 list：
### 代码评审/代码review
> 代码 review 可以在测试期间进行。
review顺序：
- 业务核心逻辑
- 编码规范
- 关键位置、容易踩坑的地方，需要注释详细
- 系统保障（监控、容灾降级）
- 系统安全和风险
- 用户体验
### 视觉走查
> 视觉走查 可以在测试期间进行。
视觉童鞋都有像素眼，即便是一两个像素的区别，他们都能瞧出来。所以，建议前端童鞋加强自测，努力做到**像素级还原视觉稿**。
推荐前端童鞋使用 [Snipaste ](https://zh.snipaste.com/ ) 截图软件， ， ，
### 测试环节
1、建议加强自测质量。进入测试阶段后， ， ， ，
2、整理自测、测试、发布时需要的主流程checkList，
转测邮件的基本元素，包括但不仅限于：
- prd链接、视觉稿链接
- 页面链接
- 项目相关人员
- 数据配置系统
- host 代理
- 接口文档
- 概要设计、前端开发整理（如果有的话）
- 测试用例（如果有的话）
- 核心业务逻辑梳理（如果有的话）
- 体验问题列举
- 测试重点建议
- 风险点评估
3、测试童鞋提的bug单， ，
4、需要控制bug单数量， ，
5、测试管理系统 是所有人处理bug 流程的平台， ， ， ； ， ，
### 发布方案
- 发布顺序：一般是先发后端，再发前端
- 依赖项是否准备就绪：配置的数据、配置项等
- 是否会对线上业务、线上数据造成影响
- 本地环境、dev环境、gamma环境，
- 回退机制
- 发布 checkList
### 上线确认
- 发布完成后，需要输出上线确认邮件
- 观察页面体验、页面性能表现
- 观察监控数据、业务调用量
- 总结复盘
## 二、前端工程化
### Git 版本管理
1、前端代码仓库 git 分支规范：
2022-06-12 22:48:13 +08:00
2022-06-12 22:43:23 +08:00
2022-06-12 22:48:13 +08:00
2022-06-12 22:43:23 +08:00
2、Commit Message 的格式， ， ：
- **feat:** 新功能
- **fix:** 修补 Bug
- **docs:** 文档
- **style:** 格式变更，不影响代码的运行
- **refactor:** 重构（既不是新增功能，也不是修改 bug 的代码变动）
- **test:** 增加测试
- **chore:** 构建过程或辅助工具的变动
- **up:** 不属于上述分类时，可使用此类别
- **merge:** 用于 merge branch，
- **revert:** 用于撤销之前的 commit
3、业务分支， ： （ ）
- 特性分支：
- 紧急bug修复分支：
- 小程序发布分支（ ） ：
### 代码规范
- 代码格式化：
- 代码格式检查：
### CSS预处理器
- SASS（ ）
- Less
- PostCSS
### 包管理
- 包管理工具： （ ）
- cnpm、nvm、nrm常用命令
### 编译构建
- webpack（ ）
- Vite
- Gulp
- Babel：
### 小程序工程化
- [小程序工程化探索 ](https://mp.weixin.qq.com/s/_NSJTQ-4-8gTnwTVK-tn0A )
- [京喜小程序最佳实践：我是如何写超大型小程序代码的 ](https://mp.weixin.qq.com/s/tJN3Yz6usSt9LG37_pN7dw )
### 测试相关
- 编写测试用例代码
- 单元测试
- 自动化测试
## 三、前端核心知识
> 前端入门核心知识点
### 浏览器
- Web标准： （ ） （ ） （ ）
- 浏览器分为两部分： （ ： ）
- 浏览器的工作原理：
- App的WebView容器， ，
### HTML5
- 语义化标签：`< header > `、`< article > ` 、`< footer > `等。
- 多媒体标签：`< audio > `、`< video > `
- 更强的本地存储能力和设备兼容性：
- 三维、图形及特效：
- 更有效的实时连接：
- 无障碍体验
### CSS、CSS3
- CSS盒模型、BFC
- 浮动、定位（绝对定位和相对定位）
- flex 布局
- 圣杯布局、双飞翼布局
- 选择器：后代选择器、交集选择器、并集选择器、伪类选择器
- 2D转换：
- 3D转换：
- CSS3动画：
- CSS hack
- Retina 屏幕的 1px 像素，如何实现
### JS基础
- ES6语法：
- ES6转ES5
- JS数据类型转换、隐式类型转换
- 内置对象及其方法
- 数组的各种方法：
- 事件机制、原型继承、立即执行函数
- DOM操作、虚拟 DOM 的 diff 算法
- BOM浏览器操作
- 事件冒泡机制：捕获阶段、目标阶段、冒泡阶段。
- 异步编程：
- SessionStorage和LocalStorage、Cookie
- 迭代器Iterator和生成器Generator
- Web Socket
- 异步编程
- 单线程
- Canvas图像绘制
- svg 动画
### JS 高级
- JS 三座大山：原型与原型链、作用域及闭包、异步和单线程
- 作用域链、类、继承、原型继承
- this的指向和绑定规则
- 深拷贝和浅拷贝
- 防抖和节流
- Promise的宏任务和微任务
- 浏览器的重排和重绘
- 手写 Promise的整个逻辑和API：
- 高阶函数
- 事件委托
- call、apply、bind
- arguments 伪数组
- 函数柯里化
- 模块化：
- JS高阶语法：
- JS 高阶语法：
- JS 内存泄漏、JS垃圾回收算法
- TypeScript 类型检查
- Vue.js、React.js源码解析
- Vue.js、React.js的**状态管理**：
- V8引擎源码
### Node.js
- 回调函数
- 时间驱动机制
- 模块化
- 函数
- 路由
- 全局方法
- 文件系统
### Web 安全
- 跨域问题、同源策略、JSONP
- CORS
- XSS
- CSRF
### 页面形式
- 多端自适应布局
- SPA单页应用
- PWA（ ） ：
## 四、前端框架
> 每个框架和工具，都有自己的约束、价值和最佳实践。
### JS框架
- Vue.js
- React.js
- Svelte（ ， ）
- angular（ ）
对比：
- vue ：声明式编程，数据驱动的思想
- React： ，
在vue 中， ；
### CSS框架、组件库（ ）
- React 技术栈：[Ant Design](https://ant.design/index-cn)（ ）
- Vue 技术栈：[Element](https://element.eleme.cn/#/zh-CN)、[Ant Design Vue](https://antdv.com/components/overview-cn)
- 简单的CSS响应式框架：
- [Tailwind CSS ](https://github.com/tailwindlabs/tailwindcss )（最近比较火）
- [Vant Weapp ](https://github.com/youzan/vant-weapp )： （ ）
### 知识库框架
- Vuepress（ ， ）
- Docusaurus（ ， ）
- GitBook
- docsify：
补充：知识库框架，首先推荐 Vuepress 和 Docusaurus， ，
### API 文档框架
2022-06-12 22:48:13 +08:00
- TypeDoc：
- [storybook ](https://github.com/storybookjs/storybook/ )：
2022-06-12 22:43:23 +08:00
### 跨端框架
- Flutter（ ） ： ，
- ReactNative（ ） ：
- Taro：
### 桌面应用开发框架
- Electron 框架。案例：
Electron 非常流行，也被大量公司使用，也有很多成功软件，比如 VS Code、Facebook Messager、Twitch、Microsoft Teams 等。Electron 虽然上手容易，但问题也很明显，就是**慢、吃内存和大**，
**VS Code、chrome、小程序开发者工具**，本质上都是运行的 chrome 内核。所以你会发现，这三个软件都很占内存，都很卡。我将其称之为“**前端头痛三剑客**”。
### 前端可视化框架、图表库
- ECharts：
- D3.js：
- [Three.js ](http://www.webgl3d.cn/Three.js/ )：基于原生 [WebGL ](https://www.zoo.team/article/webglabout ) 封装运行的三维引擎。[太阳系案例](http://www.yanhuangxueyuan.com/3D/solarSystem/index.html) [# ](https://www.teqng.com/2021/08/16/%E6%95%99%E4%BD%A0%E5%A6%82%E4%BD%95%E7%94%A8three-js%E5%88%9B%E9%80%A0%E4%B8%80%E4%B8%AA%E4%B8%89%E7%BB%B4%E5%A4%AA%E9%98%B3%E7%B3%BB/ )
- [Cocos 引擎 ](https://www.cocos.com/products#Cocos2d-x )：游戏动画开发框架。
- [白鹭引擎 ](https://www.egret.com/ )： ， ，
### 编辑器框架
- wangEditor：
2022-06-27 11:07:46 +08:00
- Tiptap： ； ，
2022-06-12 22:43:23 +08:00
- TinyMCE：
- ueditor： ，
- Monaco Editor：
### Node.js 框架
- Koa：
- [Egg.js ](https://eggjs.github.io/zh/ )：
- Express：
### 服务端渲染框架
- Next.js （ ）
- Nuxt.js （ ）
### 前端测试框架
- [Mocha ](https://github.com/mochajs/mocha )：
- [Tiga ](https://tiga.jd.com/docs/ )： （ ）
## 五、前端性能优化
### 性能分析工具
- 控制台的瀑布图 Waterfall
- 控制台的 performance工具：
- 控制台的 LightHouse ：跑分、输出性能报告，分析性能
- [WebPageTest ](https://www.webpagetest.org )网站：评估网站性能
- Performance 这个API：
### 性能参数
- 首屏时间 = 白屏时间 + 渲染时间。预解析、预加载、预渲染、懒加载、懒执行。
- FPS帧率
- 性能的测量标准：
- 弱网环境，耗时对比
### 浏览器渲染优化
- 了解渲染过程、关键渲染路径
- 减少重排和重绘
- 用户从输入url到页面加载显示完成，
### JavaScript 优化
- JS资源优化：
- V8引擎工作原理、性能优化原理
- 防抖和节流
- 无限滚动列表：做节点回收
- 骨架屏 skeleton：
- 时间分片：把一个运行时间比较长的任务分解成一块一块比较小的任务，分块去执行，减少用户的卡顿感
- JS内存管理
### 资源优化
- 资源的压缩与合并： ； ；
- HTML优化： ； ；
- CSS优化： ， ； ； ，
- 图片优化： ； ； ； ； ；
- 字体优化：字体闪动问题；使用特殊字体时，建议动态加载网络字体
- 异步加载第三方资源：第三方资源不可控会影响页面的加载和显示
### 构建优化
- tree shaking、代码拆分（ ）
- 代码压缩混淆
- 打包时，避免对不变的库重复构建。
### 网络传输优化
- 启用Gzip对资源进行压缩
- CDN传输： ， ，
- 避免重定向：
- dns预解析： ， ，
- PWA，
- SSR 服务端渲染/Node直出
## 六、前端工具和资源
### 前端文档
- MDN 官方文档：< https: // developer . mozilla . org / zh-CN / docs / Web >
### 前端社区
- GitHub
- stackoverflow
- 掘金
### JS 学习资源
- 现代 JavaScript 教程：
- 阮一峰 JS教程：
- 阮一峰 ES6教程：
- TypeScript 入门教程：
- Node.js学习指南：
### JS 代码规范
1、Airbnb JavaScript Style Guide：
- 英文原版：
- 中文版：
2、clean code JavaScript：
- 英文原版：
- 中文版1：
- 中文版2：
### 前端刷题
- 前端进阶之道：
### CSS 学习资源
- CSS灵感：
- CSS的各种实现效果：
- css_tricks：
- 按需定制 CSS 动画效果：
### 字体相关资源
- 360字体版权查询：
- 最全的免费可商用字体-效果预览：
- 常见的免费字体：
### 抓包工具
- Whistle：
### 兼容性查看工具
- Can I use（ ） ：
### 图片相关工具
- 图片压缩：
- 图片压缩：
- 生成代码截图：
### 设计工具
- **墨刀**：原型设计工具。网址：< https: // modao . cc />
- **蓝湖**：一款产品文档和设计图的在线协作平台。网址：< https: // lanhuapp . com >
- **PxCook（ ） < https: // www . fancynode . com . cn / pxcook >
- 即时设计、稿定、master go
### 流程图工具
- ProcessOn： < https: // www . processon . com />
### 大纲笔记
- **幕布**： < https: // mubu . com >
- 飞书-思维笔记
### markdown 编辑器
- typora
- VS Code
### 代码编辑器
- VS Code
- Sublime Text
## 七、前端书籍推荐
### JS经典书籍
- 红宝书：
- 小黄书：
- 犀牛书：
- 绿皮书：
### JS进阶
- 《前端开发核心知识进阶》
- 《JavaScript 二十年》
- 《JavaScript 悟道》
- 《深入理解现代JavaScript》
- 《JavaScript忍者秘籍》
- 《编写可维护的JavaScript》
- 《了不起的JavaScript工程师：
- 《javascript设计模式与开发实践》
- 《WebKit技术内幕》
- 《JavaScript启示录》
### CSS
- 《CSS世界》
- 《CSS新世界》
- 《CSS揭秘》
- 《精通 CSS》
### Vue.js
- 《Vue.js设计与实现》
- 《深入浅出Vue.js》
### Node.js
- 《深入浅出Node.js》
- 《Node.js：
### 数据结构和算法
- 《计算之魂》
- 《大话数据结构》
- 《学习JavaScript数据结构与算法》
### 后端
- 《领域驱动设计》
- 《推荐系统实践》
- 《数据密集型应用系统设计》
- 《代码精进之路：从码农到工匠》
2022-06-13 15:14:17 +08:00
### 项目管理和认知
2022-06-12 22:43:23 +08:00
- 《人月神话》
- 《黑客与画家》
2022-06-13 15:14:17 +08:00
- Joel Spolsky的书：
2022-06-12 22:43:23 +08:00
- 《凤凰项目》
- 《持续交付2.0》
- 《Google软件工程》
- 《软技能：代码之外的生存指南》
- 《重来3：
- 《程序员的思维修炼》
- 《管理的常识》
### 产品
- 《启示录》
- 《结网》
- 《人人都是产品经理》
- 《用户体验要素》
- 《有效需求分析》
- 《产品逻辑之美：打造复杂的产品系统》
- 《微信背后的产品观》
- 《俞军产品方法论》
- 《决胜B端——产品经理升级之路》
- 《给产品经理讲技术》
- 《精益数据分析》
- 《产品经理面试宝典》
- 《体验引擎：游戏设计全景探秘》
### 设计
- 《设计心理学》四册
- 《用户体验要素》
- 《点石成金》
- 《写给大家看的设计书》
- 《About Face 4: 交互设计精髓》
- 《设计中的设计》
- 《破茧成蝶》
- 《简约至上：交互式设计四策略》
- 《Web表单设计：
- 《触动人心：
- 《瞬间之美：
- 《用户体验度量：收集、分析与呈现》
### 运营
- 《运营之光》两册
- 《我在一线做用户增长》
- 《增长黑客：创业公司的用户与收入增长秘籍》
- 《流量池》
- 《超级运营术》
### 商业
- 《史蒂夫·乔布斯传》
- 《浪潮之巅》
- 《赢》
- 《你凭什么做好互联网：从技术思维到商业逻辑》
- 《计算广告》
- 《详谈：左晖》
- 《在线：数据改变商业本质，计算重塑经济未来》
- 《零售的哲学》
- 《我看电商》
- 《冲浪板上的公司》
- 《一本书读懂财报》
### 思维和认知
- 《学会提问》
- 《思考，快与慢》
- 《清醒思考的艺术》
- 《把时间当作朋友》
- 《智识分子》
- 《少有人走的路》
- 《沟通的方法》
- 《我们为什么要睡觉》
2022-06-13 14:14:08 +08:00
## 八、前端总结和认知
2022-06-12 22:43:23 +08:00
### 研发视角，如何理解需求
2022-06-13 15:14:17 +08:00
> [点击查看大图](https://img.smyhvae.com/20220613_1330-2.jpg)。
2022-06-13 14:14:08 +08:00
2022-06-12 22:43:23 +08:00
从上面的流程图中可以看出， ？ ？
产品经理的工作跟设计师、工程师非常不同。人们对工程师的期望是交付有效的代码， ，
产品经理要负责跟进整个产品周期，包括上线后的页面效果和数据表现。编写需求规范是一种**沟通和推动项目**的手段，但**规范本身并没有内在的价值**。很多产品经理并不借助prd来交流他们的想法， ， ，
### 前端工程师应该具备怎样的能力和素质
- 技术功底、技术视野、技术追求
- 除了开发业务功能外，还需要对开发规范、工程化、组件化、模块化、测试、设计模式有一定的认知和实践
- 沟通表达能力、书面表达能力、总结复盘习惯
- 全局思维、抽象思维、持续交付意识
- 项目一号位担当，团队协作意识
- 综合权衡：成本、效率、质量、风险、体验
- 关注产品、设计、商业等各个领域。交叉学科会带来更多创新。
### 前端认知
1、虽然我们绝大多数时间耗在业务开发上， ， ，
2、学会提问。我们日常在提出问题和解决问题时，
在面对一个问题时，要理解这句话的意图、事实、情绪、期待。学会提问，学会答疑，都是一种智慧。参考[提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md) 。
3、全流程跟进， ，
4、前端的本质是链接商业、设计、计算能力，
5、产品能力和技术能力是： ， ， ， ，
6、部门体系的角色有很多： ， ， ，
7、谦逊、尊重和信任，
8、组织内， ？ ， ，
奉献关系所产生的基本现象是：每个处于流程上的人更关心他能够为下一个工序做什么样的贡献；每个部门都关心自己如何调整才能够与其他部门有和谐的接口；下级会关注自己怎样配合才能够为上级提供支持，而上级会要求自己为下级解决问题并提供帮助。
能力很重要，而付出更重要。
9、优秀的人有几个特性：
10、前端侧重于人机交互和用户体验， ， ， （ ） ， ， （ ） ，
11、前端技术的更新日新月异； ； ； ； ； ； ， ： ， ，
