前言

本次主要搬运牛客网上关于海能达前端面试的常问问题

问题总结

---

对VUE的了解程度

闭包

原型链

CSS实现垂直水平居中

绝对定位、相对定位

body中一个div，绝对定位，top: 100, left: 100，那么这个div会放在哪个位置

body中一个div，相对定位，width: 100, height: 100，里面再嵌套一个div，绝对定位，top:100,left: 100，那么这两个div的位置，题中两个div的父元素？

如何用CSS实现三角形

http状态码

简短描述浏览器输入url到在页面显示出来经历的过程

http缓存，协商缓存请求头

如何不使用缓存，如何通过请求头来设置？

CSS媒体查询

重排重绘，怎么样只触发重排，只触发重绘

超出宽度，显示省略？

CSS预处理器，使用的好用的功能

webpack

微信小程序页面栈有多少

promise有几种状态

如何判断一个变量是否是一个数组

事件委托机制，事件流

阻止事件冒泡

跨域有哪些处理方式，jsonp的具体过程

new操作符具体做了哪些事情

ES6新特性

var、let和const的区别

var定义的变量会挂载在window上吗

有什么方法可以让引用类型的变量的值（如对象的属性）无法修改？

知道Object.defineProperty()方法吗？里面有哪些属性？比如writable属性就可以配置这个属性不可更改的

箭头函数和普通函数的区别

箭头函数为什么不能使用new？new实例化类的时候，实际上会进行哪个过程？

如何判断一个属性或方法在它的原型链上？

说一下你知道的请求头

cookie是每次发请求都会携带的吗？

cookie有哪些字段？

cookie怎样设置？有哪几种方式？

响应式页面怎么适配？

介绍一下vw，怎么达到适配的效果的？

长度单位

图片懒加载怎么实现的？判断元素是否进入可视化区域还有其他方法吗？

介绍一下Vuex

Vuex的Module、

你平时遇到的bug是如何定位和调试的？

用过devtools吗？（可以看见组件的层级结构，还有Vuex的状态之间的流转和全局的store）

项目最大的困难，怎么解决？

小米商城怎么实现支付宝支付和微信支付的？

最近在关注或者在学什么技术？

让你实现一个可以控制异步任务最大并发数量这个功能的函数，同一时间只能执行限定的n个最大数量的异步任务，你讲一下思路（浏览器会限制那个并发的请求数量，比如同时只能处理10个请求，10个之后的请求后它也不执行，该方法第一个参数是异步任务，第二个参数是限制它的同时并发的数量，你怎么实现）

项目相关

学过ts吗，用过ts吗

学过Vue3吗

讲讲Vue2和Vue3的区别

了解哪些设计模式

观察者模式和发布订阅模式的区别是什么

html渲染的过程

dom树中的所有结构都会在渲染树中显示吗

实习过程中遇到的协作上的问题有哪些

为什么选择前端

如何评判一个前端项目的好坏

前端性能的衡量指标

布局方式有哪些：

flex的相关属性有哪些：

双向绑定的原理，视图如何改变模型中的数据：

模型如何改变视图：

Vue2与Vue3的区别：

Vue2的mounted钩子在Vue3中怎么实现的：

HTTP与HTTPS的区别；

HTTPS的加密过程：

对称加密和非对称加密过程，有哪些非对称加密法，哪些对称加密算法， MD5加密算法;

HTTP请求头有哪些内容，HTTP请求头的格式：

(HTTP协议是通过文本定义的，不同字段之间通过空格区分)

HTTP请求体的字段；

HTTP请求如何区分请求头和请请求体；

前端攻击的常见方式：i.XSS ii.CSRF

TCP和UDP的区别；

TCP三次握手/四挥手；

怎么构建可靠传输的UDP；

前端工程化；

数组的常用方法

some 和 every 的区别；

map 和 forEach 的区别；

哪些数组方法可以改变数组，哪些是浅拷贝；

讲一下 reduce 方法；

事件循环机制；

箭头函数；

深拷贝与浅拷贝；

如何用 map 实现深浅拷贝；

this 指向；

作用域有哪些；

原生 JS 有哪些方法获取页面上的节点；

项目是如何构建的

除了Vue还用过哪些框架

Vue的生命周期

Vue3.0有了解过吗，有看过文档吗(我说设有，然后说了一个ue3.0响应式数据的改变)

Vue2.0的响应式数据是怎么实现的

Vue2.0中对数组的监听是怎么实现的

JS的基础数据类型

如何获取浏览器上的URL

CSS中有哪些长度单位

Position有哪些属性

水平垂直居中布局怎么实现

了解node.js吗，node.js是什么

node.js有什么优缺点

node.js.与原生JS在开发上有什么不同

JS基础数据类型

Bigint有了解过吗

闭包有什么危害吗，怎么解决

JS的原型

有了解s6相关内容，了解多少说多少

你讲到的promise中的all(0和race(0方法，有一个场景，通过动画缓冲页面获取数据的时间，你怎样实现？

了解过常用的数据结构吗，二叉树和图了解过吗

讲一下dfs和bfs

dfs和bfs两个算法的核心

简述一下http

前端发送请求没有携带cookies，服务端是否可以认出是否是当前用户；前端和后端请求过程中会创建一个回话：session,在会话中可以识别是否是同一个机器发出的

get和post的区别？

有了解过get请求的缓存机制吗？

防抖和节流？

输入框，在输入过程中不断有信息显示，是用防抖还是节流

服务器返回二进制数据流的过程？

网络中传输二进制数据流以什么方式传输，字节顺序是什么，自己拿到的数据是没有经过处理的吗？

有了解过一些服务端开发的相关内容吗

数据库的相关操作，比如分组？

常用的hook都有哪些？

用hook都遇到过哪些坑？

组件外侧let a1组件内侧点击事件更改a，渲染的a会发生改变吗？如果Iet a放在组件内部，有什么变化吗？和useState有什么区别？

Node是怎么部署的？pm2守护进程的原理？

Node开启子进程的方法有哪些？

进程间如何通信？

css三列等宽布局如何实现？flex1是代表什么意思？分别有哪些属性？

前端安全都了解哪些？XSS CSRF?

csp是为了解决什么问题的？

https是如何安全通信的？

前端性能优化做了哪些工作？

介绍一下JavaScript的执行上下文

了解过js的防抖和节流么

了解过JavaScript的深浅拷贝么？

面向对象有哪些优势和特点

讲讲多态

HTTPS和HTTP有什么区别？

你提到了对称加密和非对称加密，能详细解释一下么？HTTPS为什么要使用一个对称加密和非对称加密相结合的一个方式。

有了解过HTTP的各个发展历程么，例如HTTP1.1,HTTP2等。

计算机网络的五层协议

讲一讲TCP传输的三次握手和四次挥手吧。为什么建立连接的时候是三次，但是断开连接的时候是四次。

了解过TCP和UDP么。他们之间有什么特点？有哪些区别，大概适用于什么样的场合。

Cookie和session有那些区别？

对低代码的理解

对路由守卫的理解，有哪些，怎么设置，作用是什么

权限的操作；动态路由

你觉得公司开发一个项目和大学课程上有什么区别

组件之间通信

父子传值和vuex的区别和应用场景

100张图片需要加载，怎么优化？（图片懒加载）

怎么获取图片是不是在可视区域内？有哪些方法？

创建一个对象的原理？如果返回的不是对象而是一个数字呢？

xss攻击？

事件代理和proxy，为什么要有事件代理？

金山一面

项目：
1.作为项目负责人怎么做的？
2.项目难点
3.虚拟列表的使用
4.项目优化
5.项目路由导航
Vue:
1.Vue生命周期钩子、用过哪些？
2.< keep-alive>的钩子中实例有没有被删除？
3.computed和watch的区别？如果在mounted中不断修改data,computed会不会被触发？进一
问了实例在各种步骤时有没有产生。
4.Vue组件通信的常用方法？
5.怎么在原生JS中写Vuex?
6.路由传参
JS:
1.解释一下闭包
2.闭包的变量能不能销毁
3.DOM的事件模型
4.事件捕获是否能多个？顺序？
5.事件监听和事件触发的区别
6.ES6用过什么
7.多标签通信用过什么

金山二面

项目：
1.轮播图怎么做的
2.虚拟列表怎么做的
3.用户权限怎么做的
4.大文件上传
CSS:
1、loading怎么做

• 首先用dⅳ盒子构建一个圆，这个圆有边框，并目上和左的边框颜色是不一样的。
• 然后定义动画效果，他是循环的、线性变化的：

animation:rotate 600ms infinite linear;

最后触发动画效果，每次都旋转一圈。

@keyframes rotate{
to {transform:rotate(1turn)}
}

2、rem布局是干什么的
rem是指相对于根元素的字体大小的单位，是一个相对单位，根元素的font-size默认是16px,所以
1rem=16px;优点是兼容性好，缺点是和根元素的font-size强耦合，系统字体大小缩放会导致布局错
乱。

Vue：
1.keep-alive
2.为什么要用key

• 在v-if中使用ky,如果不使用时，如果切换前后有相同类型的元素，那么这个元素就会被复用，
  如果是相同的iput元素，那么用户的输入是不会被清除掉的，这样是不符合需求的，因此可以使
  用key来唯一标识一个元素，这时key的元素不会被复用。
• 在v-for中使用key,当不使用key时，如果数据项的顺序发生变化，Vue不会移动DOM元素来
  匹配数据项的顺序，而是简单复用此处的每个元素，因此提供一个ky值，来标记每个DOM的身
  份，从而高效的实现复用。
  3.首屏优化
  4.Vue3新特性中Composition API是什么

部署相关：
1、跨域
2、Nginx

1. 首先Nginx是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服
   务。它是一种轻量级wb服务器、反向代理服务器、电子邮件服务器，它的主要特点就是反向代
   理、负载均衡、动静分离。
2. 反向代理是Ngⅸ使用最多的一种场景，假如开发的服务请求量较大，一台服务器已经无法承载
   了，需要扩容使用多台服务器，那么这个时候就需要加一层中间件来分配用户的请求，把用户的请
   求下发到不同的服务器，这个时候我们就可以使用Nginx来完成，这里的代理是Nginx中间件把
   用户的请求代理到了我们的服务器上，对客户端隐瞒真实服务器。
3. 负载均衡的意思就是会合理的把客户端的情求分配给服务器，默认就是等比例分配，可以理解为
   1:1:1,但是实际场景中，服务器的配置可能不同，可能有好有坏，所以这里有一个权重的概
   率，可以有我们自己配置哪台服务器多分配请求，哪一台少一点请求，这样的配置可以让服务器的
   性能得到最大化，合理分配情求将会使系统更为健壮稳固。
4. 动静分离就是在开发中，有的请求是需要动态计算的，比如需要连接ysql数据库去增删改查，这
   些属于动，对于前端的文件html、css、js等这些文件实际并不需要后台处理，就可以通过动静分
   离的模式将其区分开。

3.Docker
Docker是一种容器虚拟化技术，开源的应用容器引擎，可以打包一个应用或者依赖包到一个轻量级的
容器中。对软件和依赖进行整体打包，应用或服务之间相互隔离，共享一个宿主OS内核。通过镜像生
成的实例，不同同期之间的相互隔离，独立运行，一个容器对应一个应用和一个服务，也就是常说的微
服务。
4.项目是否部署
5.webpack做过哪些性能优化？
6.怎么查看性能优化的效果？