一线面试题汇总
面试是学生一线收集的问题。面试官问法也比较常见。有些问题并不明确，但是可以靠自己分析出来。
回答核心思想：
- 理解面试官的问题。制定大概的回答思路。
- 梳理正确的答案，理清楚逻辑
项目中封装过什么组件，希望能给一下类型建议？
分析问题（不作为回答答案）：
面试官问组件封装，大概率是要考核你真实项目开发。一般在公司里面开发多了，都会考虑到组件封装复用。
一般封装分为两种，第一种是独立封装组件，比如封装一个canvas绘图的模块。目前现有的资源无法满足我们要求，那就自己封装，供项目组使用。
第二种是二次封装，比如现有的antd或者elementui的组件提供了基础功能，但是没有提供我们需要的功能，或者基础功能我觉得封装还不够好，还需要再次封装一下。
回答问题(标准答案)
在之前项目开发过程中我们有涉及到组件的封装。
主要两方面进行考虑的：
- 第一方面：我们项目开发过程中，用了开源的第三方 UI组件库，但是项目实战中有些组件封装并不能满足业务要求，所以就会针对这种情况进行二次封装。比如表格，提供的功能还是比较丰富的，但是我们业务中主要用到表格渲染、排序、筛选等功能，就进行了二次封装，根据设计的参数来控制对应的表格功能。并将请求也一起封装到表格中去了，无需单独维护表格。使用表格的时候，默认就能发送请求获取数据。
- 第二方面：有些业务无法用现成的组件库来实现，比如我们之前项目中涉及到流程图的绘制，二维码的生成并转化base64编码等等。就需要我们自己封装组件，并作为公司公共组件库来进行维护的。
网站如何维护？
分析问题（不作为回答答案）：
网站如何进行维护，这个问题太大了，无法直接定位到面试官想要的。
此刻就应该先分析，给面试官一些选项，让面试官来选择你要回答什么。
回答问题（标准答案）
面试官您好，你问的网站如何维护，大概是要那种情况呢？
是不是下面的一些情况呢？
-
网站上线后，如果更新迭代版本？
回答：网站上线后，我们可能会涉及到新的需求、新的迭代。公司的项目开发采用了迭代开发，每个月我们都会发布一个版本。如果遇到新的需求，我们会收纳需求放入下个迭代计划中。每次版本开发完成后，就会归档这个版本的所有资料（包括、需求、开发文档、测试文档、bug情况等等）
-
网站的数据如何进行更新？
回答：网站的数据都是默认从数据库来的。所以需要更新数据我们可以直接通过后台管理系统操作数据库。当然遇到涉及到数据库的数据需要更新，那需要专门针对数据库进行数据迁移、备份、恢复等等。
-
网站遇到性能问题如何进行分析？
回答：如果是网站性能问题，线上遇到问题了，我们一般都会在线下进行问题复现，环境问题、数据量、服务器吞吐量等等分析。
如果是前端的问题，我一般会根据浏览器性能模块来分析每个模块的请求情况。会针对前端进行性能优化方案。（接下来就回答一下前端我们常见的性能优化方案）
浏览器兼容问题
分析问题（不作为回答答案）：
浏览器兼容问题在目前公司项目中很少存在了。当然如果公司项目还是比较老的业务，政府、医疗、企事业单位，确实还需要考虑浏览器兼容问题。
问题回答（标准答案）
你好面试官，我们之前公司的项目基本上是互联网项目，公司业务基本是都在最新的浏览器里面运行。基本不考虑老版本浏览器了。当然以前我确认接触过需要兼容的一些问题。
-
首先针对主流的框架，现在基本是不支持ie浏览器以及老版本的chrome和firefox等等，比如vue3，已经不支持ie11了。也就意味着如果技术比较新，几乎不可能考虑老版本浏览器。
-
以前的老项目会涉及到兼容，比如政府项目、事业单位，部分医疗系统等等。
-
兼容问题主要从两个方面思考，css样式的兼容我问题，还有就是js脚本的兼容问题。
css样式兼容问题包含：几乎所有css3的特性都有兼容问题。我以前针对这些样式兼容问题有过处理经验，比如css的pie插件可以解决发部分的兼容。
js脚本兼容问题，针对不容版本浏览器有不同代码兼容，比如dom2级事件
addEventListener("click",function(){}) //标准浏览器都没问题，但是ie浏览器有问题 attachEvent("click",function(){}) //专门针对ie浏览器绑定时间
项目如何部署到服务器？
分析问题（不作为回答答案）：
前端项目开发完成后，我们需要部署到服务器进行测试。
首先需要前端项目基于webpack或者vite来进行打包。打包为静态资源文件。接下来就需要部署到静态资源服务器上面。启动服务器你就能访问静态页面。
问题回答（标准答案）
前端开发完成后，会通过webpack或者vite来进行项目的打包。实际上这个过程就是将我们组件、插件打包为html+css+js的静态资源文件。打包过程中会涉及到压缩混淆以及合并文件，这些都是打包工具来配置就行了。
打包完成后，我们拿到的是静态资源文件，就需要部署到服务器，一般前端会选择部署到nginx服务器。
服务器环境一般在公司里面都是后端或者运维来搭建。我只需要将打包后静态资源文件放在nginx服务器的html文件夹中。启动项目，浏览器就可以访问静态资源，
但是前端访问接口请求会出现404的报错，因为打包后前端配置的代理服务器就没有用了。这个时候我们需要在nginx的conf文件中配置反向代理服务器。
所有请求都访问nginx，然后当nginx发现你访问的不是静态资源的时候，会代理到后端服务器获取数据资源。在响应式给前端浏览器。
所以一般打包之前都会配置baseurl,来决定哪些请求直接从nginx获取资源，哪些请求需要通过nginx转发给后端服务器。
app如何多平台登录（QQ、微信登录、手机号一键登录等）？
分析问题（不作为回答答案）：
多平台登陆换个名字也叫第三方登录。在app中经常都会遇到。当然pc端网页也会遇到。
实际的原理就是，调用第三方平台接口，利用第三方平台已经授权认证过的身份来实现当前系统的登录。
比如：你想要用qq来进行登录，一般app中选择qq过后，就会跳转到qq那边，有一个授权按钮，点击允许授权登录后，又会跳回到你的app中。这样就实现了登录。
回答问题：
- 选择一个第三方登录服务提供商，如Google、微信或QQ等等。
- 去第三方应用程序中注册一个开发者帐户，并创建一个新的应用程序。类似于百度地图
- 获取第三方登录服务提供商的API密钥或客户端ID和密钥。
- 在你的应用程序中添加第三方登录的按钮或链接（一般文档有提供），以便用户可以选择使用第三方登录。
- 当用户选择第三方登录时，将用户重定向到（跳转的意思）第三方登录服务提供商的登录页面。
- 用户在第三方登录服务提供商的登录页面上进行身份验证，并授权你的应用程序访问其用户数据。
- 第三方登录服务提供商将用户重定向回你的应用程序，并提供一个授权码或访问令牌（相当于告诉你第三方也登录成功还是失败）。
- 在你的应用程序中，使用授权码或访问令牌与第三方登录服务提供商进行通信，以验证用户身份并获取用户数据。
- 将第三方登录服务提供商返回的用户数据与你的应用程序中的用户数据进行关联或创建新用户账户（虽然用的第三方登录，但是你自己app服务器还是要记录这个用户信息）。
- 完成登录流程，将用户重定向到你的应用程序的主页或其他适当的页面。
