非技术类面试题

1.和前端开发相关的项目角色有哪些？

PM：产品经理，提需求，比如前端开发的页面以及流程是什么样的之类

UE：视觉设计师，会根据PM的原型图制作出美观、规范的视觉设计图

FE：前端开发工程师

CRD：移动端开发工程师

RD：后端开发工程师

QA：测试人员

---

2. 一个完整的项目需要分哪些阶段？

在进行联调时可以：

让UE确定视觉效果

让PM确定产品功能

---

3. 评审项目需求时需要注意哪些事项

了解背景：例如这个功能为什么要做，需要清楚明白

质疑需求是否合理：该需求月要不要做，是否符合我们的产品

需求是否闭环：需求是否考虑全面了，例如实现点赞功能点赞完成后我们是不是需要按照点赞量的多少进行排序等？点击分享按钮过后，分享完后是不是应该提供返回到APP的功能？

开发难度如何：例如在H5中实现一个很复杂的动画，这样做其实性能并不高，那么动画是不是可以加到原生的APP里做？等

是否需要其他支持：例如做一个类似于微信朋友圈的图片点击放大的功能，这是需要客户度支持的，需要CRD提供支持

不要急于给排期

---

4. 如何做好技术方案设计

求简，不过渡设计：也就是用最简单的方式去完成设计、满足功能即可、怎么简单怎么来

产出文档：利用文档去将自己要做的东西描述出来，其中要包括图片、代码等

 找准设计重点：例如我们的组件如何设计、数据结构如何设计以及和其他开发角色如何对接等

组内评审：例如自己写了一个设计文档觉得没有问题此时可以给组内一些资历深的工程师以及高级工程师帮忙评估一下，看自己的设计是否合理、是否有很好的扩展性、是否具有安全隐患与性能问题等

和RD、CRD沟通

发出会议结论：例如与RD、CRD沟通沟通时最后一直确定好的聊天截图等

---

5. 如何保证项目/开发质量

合理安排和计划自己的排期：看当前是否还有其他工作没有做完以及在开发中遇到问题了自己需要一些时间解决以及缓冲期等

开发过程中要符合开发规范：例如开发过程中一些必要注释的规范、模块命名的规范等

写出开发文档：例如自己做的一部分有一些公共的API、或者公共的UI组件，可能会被其他人用此时一定要通过文档写出该如何调用等

及时单元测试

Mock API：自己模拟一些数据

Code Review：代码审查

---

6. PM（产品经理）想在项目开发过程中增加需求，该怎么办？

不能拒绝，走需求变更流程即可

如果公司有相关规定，则按规定走

如果公司没有，一般情况下会发起项目组和leader的评审，重新评估和排期

---

7. 单页面应用

单页Web应用（SPA - Single Page web Application）：

也就是说只有一个HTML文件的Web应用, 我们就称之为单页Web应用, 就称之为SPA应用

我们通过Vue开发的项目其实就是典型的SPA应用

SPA的特点:

1)SPA应用只有一个HTML文件, 所有的内容其实都在这个页面中呈现的

2)SPA应用只会加载一次HTML文件, 不会因为用户的操作而进行页面的重新加载

当用户与应用程序交互时, 是通过动态更新页面内容的方式来呈现不同的内容

SPA优点:

1) 有良好的交互体验

不会重新加载整个网页, 只是局部更新

2) 前后端分离开发

前端负责页面呈现和交互, 后端负责数据

3) 减轻服务器压力

只用处理数据不用处理界面

4) 共用一套后端程序代码

SPA缺点：

1) SEO难度较高

只有一个界面, 无法针对不同的内容编写不同的SEO信息

2) 初次加载耗时多

为实现单页Web应用功能及显示效果，需要在加载页面的时候将所有JavaScript、CSS统一加载，

在Vue中可以使用按需加载解决

如何解决单页面应用的SEO困难问题?

解决这个问题之前首先我们需要了解常见的三种网页渲染方式：

1.1客户端渲染(CSR  - Client Side Render)

后端只提供数据，前端做视图和交互逻辑(SPA应用就是典型的客户端渲染)

1.2客户端渲染过程

1. 客户端请求html (请求)

2. 服务端返回html

3. 客户端渲染HTML,找到依赖的JS/CSS文件

3. 客户端请求对应的JS/CSS文件 (请求)

4. 服务端返回对应的JS/CSS文件

5. 客户端等待JS/CSS文件下载完成

6. 客户端加载并初始化下载好的JS文件

7. 客户端执行JS代码向后端请求数据 (请求)

8. 服务端返回数据

9. 客户端利用服务端返回的数据填充网页

最大优点: 交互体验好可以做局部更新

最大缺点: 首屏加载慢(因为要等到HTML下载完才会去下载JS/CSS, 要等到JS下载完初始化完才会去获取数据),

---

1.1服务端渲染(SSR - Server Side Render)

后端既提供数据又提供视图和交互逻辑

也就是服务器接到客户端请求之后，找到对应的数据并根据找到的数据生成对应的视图

然后将包含数据的视图一次性发给客户端，客户端直接将渲染即可

1.2服务端渲染过程

1.客户端请求html (请求)

2.服务端内部查找对应的html文件和数据

3.服务器内部根据数据html文件和数据生成完整网页

4.服务端返回完整网页

5.客户端渲染HTML,找到依赖的JS/CSS文件

5.客户端请求对应的JS/CSS文件 (请求)

6.客户端等待JS/CSS文件下载完成

7.客户直接展示网页

最大优点: 首屏加载快(因为服务器返回的网页已经包含数据, 所以之下载完JS/CSS就可以直接渲染)

          每次请求返回的都是一个独立完成的网页, 更利于SEO

最大缺点:网络传输数据量大

---

1.1预渲染

无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件

本质就是客户端渲染, 只不过和SPA不同的是预渲染有多个界面

最大优点: 由于有多个界面, 所以更利于SEO

最大缺点: 首屏加载慢, 预编译会非常的慢

如何选择

1.注重SEO的新闻、电商网站，建议采用服务器端渲染

2.强交互的页面，不注重SEO，采用客户端渲染

3.两者之间, 只需改善少数页面的SEO，采用预渲染

使用预渲染解决SPA应用SEO问题

https://www.npmjs.com/package/vue-cli-plugin-prerender-spa

注意点: Router必须使用history模式

2.使用vue-meta-info统一管理SEO三大标签

https://www.npmjs.com/package/vue-meta-info

---