35、前端问答
- 阿里前端岗位P6技术一面：
- 1. 简单自我介绍, 介绍一下你的项目和技术栈?
- 2. 说一说react和vue的比较
- 3. 详细说下React Diff 算法
- 4. 详细说下观察者模式实现
- 5. http报文头部有哪些字段? 有什么意义 ?
- 6. 移动端高清方案如何解决 ?
- 7. webpack的原理, loader 和 plugin 是干什么的?有自己手写过么 ?
- 8. 简述从网页输入url到网页展示的过程发生了哪些事情 ?
- 9. SSR 和 客户端渲染有什么区别 ,vue是如何实现绑定事件的 ?
- 10. 简述公司node架构中容灾的实现 ?
- 11. 浏览器事件有哪些过程? 为什么一般在冒泡阶段,而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ?
- 12. 面向对象如何实现? 需要复用的变量 怎么处理 ?
- 13. 移动端300ms延时的原因? 如何处理?
- 14. 主流框架的数据单向/双向绑定实现原理 ?
- 15. 简述如何学习 ?
- 16. 你觉得自己在前端工作的最大的优点是什么拿实际工作的内容举例?
- 字节某部门前端开发一面面试题：
- 阿里妈妈一面：
- 1. 先自我介绍一下。
- 2. 有这样一个场景：在做后台管理系统的时候，一般路由是动态生成的，前端的文件与路由是一一对应的，假如不小心删了一个文件，这个时候就会跳404页面，会有不好的用户体验，怎么做才能比较好的防止跳去404页面？
- 3. 有一个页面，一个绝对够长的背景图，我们知道不给盒子设定高度的情况下默认是100%的高度，盒子高度会被内容所撑开。那么怎么做到第一屏完全显示背景图，第二屏也能继续显示呢？
- 4. 谷歌浏览器里面字体的最低像素是多少？ 。在项目开发中设置font-size: 8px;也会变成 12px ，我现在有一个需求需要 8px 的字体，怎么才能突破 12px 的限制？
- 5. 讲一下你对ES6 的了解，以及 ESn的认识
- 6. 数组操作的时候你一般会用到哪些方法
- 7. 怎么进行站点内的图片性能优化？
- 8. 讲一下你对原型以及原型链的理解
- 9. 开发的过程中你用到过哪些设计模式？
- 10. 你们的用户登陆一般是怎么处理的 ？权鉴前端怎么做？
- 11. 怎么中断ajax请求，你有遇到过这样的业务场景么？
- 12. 谈一下vue的双向绑定原理
- 13. 移动端的重复点击你是怎么处理的
- 14. 怎么触发BFC，BFC有什么应用场景？
- 15. 项目中有一个需求，让你来主R，架构已经搭建好了，UI图也已经给出，你第一步会做什么？
- 16. 实现 Promise.all
- 17. 数字1-100的累加，不用for循环 ，有哪些方式实现？
- 阿里妈妈三面：
- 1. 先自我介绍， 再介绍下项目。
- 2. 介绍下你现在做的PWA的优缺点，和普通的网页有什么区别？具体怎么实现离线功能？如果现在有个请求，作用为删除一个list里面的一项内容，在没有网络连接时候这个请求被缓存，我关闭PWA再打开，之前的那个list会怎么样？怎么样优化离线功能？
- 3. 在ES6中有一个Map数据类型，我们可以用get, set来对它进行操作。怎么用ES5的语句构建一个可以实现类似ES6中Map数据类型功能的方法，封装一下。提示：可以用数组，链表，对象，class或者其他，分析下每种方法的优缺点，要求时间复杂度小于O(n)。
- 4. 你之前做过伪代码转代码的项目，说说这个项目是怎么做的？里面用的关键技术是什么？AST语法解析的原理是什么？
- 5. 你都学过或者使用过哪些语言，你知道什么是面向对象语言吗，你更喜欢那种语言，为什么？
- 6. 还有什么问题吗？
- 兴业数金前端一面面试题：
- 旷视科技前端（提前批）一面面试题，校招的同学可以看过来：
- 达达集团23年秋招一面
- 厦门4399前端岗位一面
- 常见的css基础面试题都有哪些？
- 1、请你讲一讲 CSS 的权重和优先级
- 2、介绍 Flex 布局，flex 是什么属性的缩写：
- 3、CSS 怎么画一个大小为父元素宽度一半的正方形？
- 4、CSS实现自适应正方形、等宽高比矩形
- 5、实现两栏布局的方式
- 6、实现三列布局的方式
- 7、CSS 动画有哪些？
- 8、用css2和css3分别写一下垂直居中和水平居中
- 9、visibility 和 display 的差别（还有opacity)
- 10、opacity 可以有过渡效果吗？
- 11、BFC 与 IFC 区别
- 12、BFC会与float元素相互覆盖吗？为什么？举例说明
- 13、了解box-sizing吗？
- 14、什么是 BFC
- 15、了解盒模型吗？
- 16、说一下你知道的position属性，都有啥特点？
- 17、两个div上下排列，都设margin，有什么现象？
- 18、清除浮动有哪些方法？
- 前端岗位面试题：如何处理Node.js中未捕获的异常？
阿里前端岗位P6技术一面：
1. 简单自我介绍, 介绍一下你的项目和技术栈?
2. 说一说react和vue的比较
3. 详细说下React Diff 算法
4. 详细说下观察者模式实现
5. http报文头部有哪些字段? 有什么意义 ?
request
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Connection:keep-alive
// 发送端
Content-Language: zh-CN, zh, en
Content-Length:1540
Content-Type:application/json; charset=UTF-8
Cookie: JSESSIONID=2cd9900c-c266-4590-a49b-3b1236f6cf21
Host:mcs.snssdk.com
Origin:https://juejin.cn
Referer:https://juejin.cn/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
response
// 接收端
Accept-Language: zh-CN, zh, en
Content-Encoding:gzip
Content-Type:application/json;charset=UTF-8
Date:Fri, 21 Jul 2023 01:17:25 GMT
Transfer-Encoding:chunked
Vary:accept-encoding
X-Frame-Options:SAMEORIGIN
6. 移动端高清方案如何解决 ?
7. webpack的原理, loader 和 plugin 是干什么的?有自己手写过么 ?
8. 简述从网页输入url到网页展示的过程发生了哪些事情 ?
9. SSR 和 客户端渲染有什么区别 ,vue是如何实现绑定事件的 ?
10. 简述公司node架构中容灾的实现 ?
随着互联网的普及，越来越多的企业和机构开始使用Node.js来构建他们的Web应用程序。但是，在Node.js应用程序中实现容灾机制并不是一件容易的事情。容灾机制可以帮助我们在面对各种故障和障碍时，保持应用程序的正常运行。在本文中，我们将介绍如何实现Node.js的容灾机制。
第一步：理解容灾
容灾是一种预防措施，它通过在应用程序中添加备用设备和替代机制，来确保在系统出现故障时系统仍然可以正常工作。如果没有容灾机制，一旦应用程序出现故障，那么这将会导致系统瘫痪。
第二步：减少单点故障
在Node.js应用程序中，最常见的单点故障就是网络连接。为了避免这种情况，我们可以使用负载均衡器来分散请求和流量。这样即使一个节点出现故障，客户端仍可以访问其他节点。
第三步：备份数据
如果应用程序中的数据无法访问，那么应用程序将无法正常工作。为了避免这种情况，我们必须相应地备份我们的数据。我们可以将数据备份到本地磁盘或云存储中。
第四步：使用微服务
将应用程序分解成小而独立的服务，这是实现容灾机制的另一种方式。每个服务都可以运行在一个独立的进程中，并且可以相互通信来实现应用程序的功能。如果其中一个服务出现故障，其他服务仍然可以正常工作，其余服务也可以自动重启或部署到其他服务器。
第五步：监控系统
最后，监控系统是必不可少的。在系统出现故障时，我们需要一个有效的警报系统，以便能够快速响应。监控系统可以通过检测应用程序的运行状况，并且预测故障。如果出现任何问题，系统将发送警报，以便我们可以立即采取措施。
总结：
Node.js在应用程序的快速开发方面已经得到了广泛的欣赏，但实现容灾机制是必要的。本文中，我们介绍了如何在Node.js应用程序中实现容灾机制。减少单点故障，备份数据，使用微服务以及监控系统都是实现容灾机制的有效方法。我们希望本文可以帮助您更好地了解如何确保应用程序的连续性。
11. 浏览器事件有哪些过程? 为什么一般在冒泡阶段,而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ?
事件捕获的顺序是从最外层的元素开始，逐级向内部元素传播，直到达到目标元素。
例如：window -> document -> html -> body -> div。
事件冒泡的顺序是从目标元素开始，逐级向外层元素传播，直到达到最外层的元素。
例如：div -> body -> html -> document -> window。
element.addEventListener(event, handler, useCapture);
其中，event表示要绑定的事件类型，function表示事件触发时要执行的函数，useCapture是一个可选的参数，用于指定事件是使用捕获还是冒泡阶段进行处理。
当useCapture为false或未提供时，事件将在冒泡阶段进行处理；当useCapture为true时，事件将在捕获阶段进行处理。
12. 面向对象如何实现? 需要复用的变量 怎么处理 ?
13. 移动端300ms延时的原因? 如何处理?
14. 主流框架的数据单向/双向绑定实现原理 ?
15. 简述如何学习 ?
16. 你觉得自己在前端工作的最大的优点是什么拿实际工作的内容举例?
字节某部门前端开发一面面试题：
1. 常用的http状态码
2. 301和302的区别(永久/临时)
（1）302 Found
临时重定向。 该状态码表示请求的资源被分配到了新的 URI，希望用户（本次）能使用新的 URI 访问资源。和 301 Moved Permanently 状态码相似，但是 302 代表的资源不是被永久重定向，只是临时性质的。也就是说已移动的资源对应的 URI 将来还有可能发生改变。若用户把 URI 保存成书签，但不会像 301 状态码出现时那样去更新书签，而是仍旧保留返回 302 状态码的页面对应的 URI。同时，搜索引擎会抓取新的内容而保留旧的网址。因为服务器返回302代码，搜索引擎认为新的网址只是暂时的。
使用场景：
当我们在做活动时，登录到首页自动重定向，进入活动页面。
未登陆的用户访问用户中心重定向到登录页面。
访问404页面重新定向到首页。
（2）303 See Other
该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
303 状态码和 302 Found 状态码有着相似的功能，但是 303 状态码明确表示客户端应当采用 GET 方法获取资源。
303 状态码通常作为 PUT 或 POST 操作的返回结果，它表示重定向链接指向的不是新上传的资源，而是另外一个页面，比如消息确认页面或上传进度页面。而请求重定向页面的方法要总是使用 GET。
3. 前端路由怎样实现
4. 前端路由直接刷新404怎样处理
5. 从前端到后端全链路如何设计实现一个登陆的流程？
6. 什么是跨域，怎样处理
7. 简单请求和复杂请求的区别
8. 浏览器的缓存策略说下
9. domain属性解决跨域。几种domain设置对跨域是否生效
10. ts 泛型做什么的，infer关键字的作用？
阿里妈妈一面：
1. 先自我介绍一下。
2. 有这样一个场景：在做后台管理系统的时候，一般路由是动态生成的，前端的文件与路由是一一对应的，假如不小心删了一个文件，这个时候就会跳404页面，会有不好的用户体验，怎么做才能比较好的防止跳去404页面？
可以采取以下措施来防止跳到404页面：
- 进行路由的前置检查：在每次跳转前，先检查相关的文件是否存在。可以使用文件路径或者统一的命名规则来进行校验。
- 统一错误处理：使用统一的错误处理机制，当检测到文件不存在时，可以自动重定向到一个自定义的错误页面，而不是跳转到404页面。
- 引入路由导航守卫：使用前端框架提供的路由导航守卫，在路由发生变化之前进行检查和处理。可以在导航守卫中检查文件是否存在，如果不存在则进行重定向。
- 前端代码备份：定期备份前端代码，并保留历史版本。如果不小心删除了某个文件，可以从备份代码中恢复。
- 错误日志记录：当用户访问了不存在的页面时，可以在后台记录下来，以便及时发现并处理这个问题。可以通过监控工具、日志分析工具等来实现。
综合使用以上措施，可以大大减少用户跳转到404页面的情况，提升用户体验。
3. 有一个页面，一个绝对够长的背景图，我们知道不给盒子设定高度的情况下默认是100%的高度，盒子高度会被内容所撑开。那么怎么做到第一屏完全显示背景图，第二屏也能继续显示呢？
background-size:100%
这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，所以会变成这样。
4. 谷歌浏览器里面字体的最低像素是多少？ 。在项目开发中设置font-size: 8px;也会变成 12px ，我现在有一个需求需要 8px 的字体，怎么才能突破 12px 的限制？
“12px”
-webkit-transform: scale(8/12)
CSS - font-size 设置小字体不生效解决方案（小于12px）
5. 讲一下你对ES6 的了解，以及 ESn的认识
6. 数组操作的时候你一般会用到哪些方法
7. 怎么进行站点内的图片性能优化？
8. 讲一下你对原型以及原型链的理解
9. 开发的过程中你用到过哪些设计模式？
10. 你们的用户登陆一般是怎么处理的 ？权鉴前端怎么做？
用户登录一般的处理流程如下：
- 前端显示登录表单：在前端页面上展示登录表单，包括用户名和密码输入框以及登录按钮。
- 用户输入用户名和密码：用户在登录表单中输入用户名和密码，并点击登录按钮提交表单。
- 前端验证表单数据：前端可以对用户输入的用户名和密码进行基本的格式验证，例如检查是否为空，长度是否符合要求等。
- 向后端发送登录请求：前端将用户输入的用户名和密码通过HTTP请求发送给后端服务器。
- 后端验证用户信息：后端服务器接收到登录请求后，会验证用户输入的用户名和密码是否正确。通常后端会查询数据库或其他存储系统来验证用户的身份。
- 验证成功返回令牌：如果用户的用户名和密码验证成功，后端会生成一个令牌（token），并将其返回给前端。
- 前端保存令牌：前端收到后端返回的令牌后，一般会将其保存在浏览器的本地存储（LocalStorage或Cookie）中，以便后续的请求中带上该令牌。
- 后续请求带上令牌：用户登录后，每次请求需要进行权限验证的接口时，前端会将令牌作为请求头或请求参数的一部分，发送给后端服务器。
- 后端验证令牌：后端服务器接收到请求时，会验证令牌的有效性、合法性和权限，以确认用户身份。
- 返回数据或拒绝请求：如果令牌验证通过，后端服务器会返回请求的数据；如果令牌验证失败或权限不足，后端服务器会返回相应的错误信息。
对于权鉴前端的处理，可以在登录成功后，将令牌保存在本地存储中，之后的请求中都需要在请求头或请求参数中携带该令牌。同时需要对非登录用户限制相关功能的访问，比如需要在需要权限验证的路由上添加验证逻辑，对没有登录或令牌验证失败的用户进行拦截或重定向到登录页面。可以使用前端框架提供的路由守卫中间件来实现这些功能。
11. 怎么中断ajax请求，你有遇到过这样的业务场景么？
12. 谈一下vue的双向绑定原理
13. 移动端的重复点击你是怎么处理的
14. 怎么触发BFC，BFC有什么应用场景？
15. 项目中有一个需求，让你来主R，架构已经搭建好了，UI图也已经给出，你第一步会做什么？
16. 实现 Promise.all
手写实现Promise.all、Promise.race、Promise.finally
17. 数字1-100的累加，不用for循环 ，有哪些方式实现？
递归、
阿里妈妈三面：
1. 先自我介绍， 再介绍下项目。
2. 介绍下你现在做的PWA的优缺点，和普通的网页有什么区别？具体怎么实现离线功能？如果现在有个请求，作用为删除一个list里面的一项内容，在没有网络连接时候这个请求被缓存，我关闭PWA再打开，之前的那个list会怎么样？怎么样优化离线功能？
3. 在ES6中有一个Map数据类型，我们可以用get, set来对它进行操作。怎么用ES5的语句构建一个可以实现类似ES6中Map数据类型功能的方法，封装一下。提示：可以用数组，链表，对象，class或者其他，分析下每种方法的优缺点，要求时间复杂度小于O(n)。
【每日一拳】打在从浅谈散列表到对 Map 的原理解析+手写实现上
4. 你之前做过伪代码转代码的项目，说说这个项目是怎么做的？里面用的关键技术是什么？AST语法解析的原理是什么？
将伪代码转换为代码的项目可以通过以下步骤来完成：
- 理解伪代码：仔细阅读伪代码，确保准确理解其意义和逻辑。
- 确定编程语言：选择要使用的编程语言，以便将伪代码转换为具体的代码。
- 翻译算法结构：将伪代码中的算法结构转换为所选编程语言的相应结构，如循环、条件语句和函数。
- 翻译变量和数据类型：将伪代码中的变量和数据类型转换为编程语言中相应的变量和数据类型。
- 翻译操作和函数调用：将伪代码中的操作和调用转换为编程语言中相应的操作和函数调用。
关键技术包括：编程语言的语法和规则，算法理解和翻译的能力，以及对变量和数据类型的熟悉。
5. 你都学过或者使用过哪些语言，你知道什么是面向对象语言吗，你更喜欢那种语言，为什么？
6. 还有什么问题吗？
兴业数金前端一面面试题：
1.自我介绍+项目
2.输入url到显示整个页面的过程
3.CSS会阻塞DOM吗
4.介绍一下盒子模型
5.弹性布局
6.介绍一下事件循环，有哪些异步方法
7.promise和await、async的区别
8.webpack打包的流程
9.vue生命周期
10.vue的nextTick
Vue3学习(五)-生命周期&ref获取元素&nextTick用法&自定义hook函数
11.vue的diff算法了解过吗
12.学过哪些设计模式以及自己对设计模式的理解，vue源码中用到了哪些设计模式
13.如何理解组合大于继承
14.了解过代码风格吗，看过哪些代码风格的书，什么样的代码是好的代码
15.平时如何学前端
旷视科技前端（提前批）一面面试题，校招的同学可以看过来：
1. 自我介绍
2. 判断数据类型的方法都有哪些？
3. instanceof 可以判断基本类型吗？
4. typeof 函数 会返回什么？
5. new操作符都做了什么事？
6. 手写new
7. css中的定位方式都有哪些？
8. 绝对定位设置top：50%是相当于谁来计算的？
9. 水平垂直居中的方式
10. git 回退版本的命令
11. 你还有什么要问我的吗？
达达集团23年秋招一面
你为什么选择前端？
你对前端发展现状个的看法；
1～5年的职业发展规划；
你的优缺点是什么？
大前端了解吗？
平时都如何控制代码规范的？
抗压能力怎么样？
本科和研究生阶段你觉得自己最大的收获是什么？
你会怎样学习一门新的技术。
厦门4399前端岗位一面
1. 小球从高处掉下来上下反弹的动画实现
2. 如何判断数组
3. webpack如何压缩文件
4. url输入发生了什么
5. 图片格式 png和jpg区别
6. 原生如何绑定无序列表以及加序号
7. 性能优化
8. sbootstrap原理
9. 三列布局 中间自适应首次加载
10. 怎么培养自己的产品思维
11. 密码加密方式
12. 前后分离缺陷
13. ssr原理
14. rcors原理
15 vue组件传值 onemit原理
常见的css基础面试题都有哪些？
1、请你讲一讲 CSS 的权重和优先级
2、介绍 Flex 布局，flex 是什么属性的缩写：
3、CSS 怎么画一个大小为父元素宽度一半的正方形？
4、CSS实现自适应正方形、等宽高比矩形
5、实现两栏布局的方式
6、实现三列布局的方式
7、CSS 动画有哪些？
8、用css2和css3分别写一下垂直居中和水平居中
9、visibility 和 display 的差别（还有opacity)
10、opacity 可以有过渡效果吗？
11、BFC 与 IFC 区别
12、BFC会与float元素相互覆盖吗？为什么？举例说明
13、了解box-sizing吗？
14、什么是 BFC
15、了解盒模型吗？
16、说一下你知道的position属性，都有啥特点？
17、两个div上下排列，都设margin，有什么现象？
18、清除浮动有哪些方法？
前端岗位面试题：如何处理Node.js中未捕获的异常？
我们可以在进程级别捕获应用程序中未捕获的异常。为此将侦听器附加到 process 全局对象：
process.on("uncaughtException", (err) => {
console.log("exception caught: ", err);
});
