前端面试问题汇总

前端面试问题汇总

1.判断js中对象的字节数

第一种：
npm install object-sizeof
var sizeof = require(‘object-sizeof’) // 2B per character, 6 chars total => 12B console.log(sizeof({abc: ‘def’}))

第二种：
https://www.cnblogs.com/sefaultment/p/11518625.html

2.js中number分浮点和整数吗？

不分，全是64位浮点数，单精确度（32位 1 8 32 ）、双精确度（64位 1 11 52）

3.js怎么打印出对象中的循环引用串

一个 JSON 扩展包 做到了这一点， 使用 JSON.decycle

4.进程和线程的区别

线程在进程下行进（单纯的车厢无法运行）
一个进程可以包含多个线程（一辆火车可以有多个车厢）
不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）
同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易）
进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）
进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）

5.进程线程通信方式与问题

管道：速度慢，容量有限，只有父子进程能通讯

FIFO：任何进程间都能通讯，但速度慢

消息队列：容量受到系统限制，且要注意第一次读的时候，要考虑上一次没有读完数据的问题

信号量：不能传递复杂消息，只能用来同步

共享内存区：能够很容易控制容量，速度快，但要保持同步，比如一个进程在写的时候，另一个进程要注意读写的问题，相当于线程中的线程安全，当然，共享内存区同样可以用作线程间通讯，不过没这个必要，线程间本来就已经共享了同一进程内的一块内存

6.宏任务微任务

宏任务：定时器
微任务：promise
先执行全局同步任务，然后执行微任务然后宏任务（有不同层级）

7.盒模型

类型：block\inline\flex，属性：margin\border\padding\content
block:默认一个盒子一行，h,p等都是block盒子
inline：width、height不起作用，垂直边距不会把其他盒子推开，水平的会，a，em，span
flex：对外显示block，对内部盒子为flex类型

标准盒模型：设置的宽高为content的宽高（默认）
IE盒模型：设置的宽高为content+padding+border通过box-sizing: border-box;转换为IE模型

8.隐藏元素的几种方法

overflow:hidden; /* 占据空间，无法点击 */overflow的hidden用来隐藏元素溢出部分，占据空间，无法响应点击事件

opacity:0;/* 占据空间，可以点击 */透明度降为0

visibility:hidden; /* 占据空间，无法点击 */隐藏元素,这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件

position：relative; left:-99999px; top:-90999px;/* 占据空间，无法点击 */

z-index:-1000;/* 不占据空间，无法点击 */让其他元素遮挡住

9.rem布局

根据根元素（html）字体大小，如：html的font-size=10px，2rem为20px
加上媒体查询@media screen and (min-width: 375px)，设置不同的font-size
存在的问题：人们对于文字的舒适度，字体大小大概是绝对的

10.BFC-不会影响外部的盒子

产生条件：
body 根元素浮动元素
float 除 none 以外的值绝对定位元素
position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

产生的问题：
上下盒子边距会重叠，解决：变成两个BFC
BFC内部有浮动的盒子会高度塌陷，解决：父盒子添加overflow:hidden清除浮动

11.es6

let,const,map,set,promise,箭头函数，async,await,解构，class，import from，export

12.箭头函数普通函数区别

this指向，不加大括号默认return，一个参数可以不加小括号，无构造函数因为没有prototype，无arguments
普通函数想不发生this的改变需要bind

13.上下文与执行栈

全局上下文在栈底，每当调用一个函数就创建一个上下文入栈，函数执行完毕销毁出栈

14.webpack loader和plugin的区别，分别用过哪些

loader转换指定类型的模块功能，plugins能够被用于执行更广泛的任务比如打包优化、文件管理、环境注入

css-loader和style-loader模块是为了打包css的，less-loader

babel-loader和babel-core模块时为了把ES6的代码转成ES5

url-loader和file-loader是把图片进行打包的

15.模块化

es6，import，export，每个文件就是一个模块

16.代码规范：eslint

17.http与https

http2（80）：

二进制保存信息，为将来的高级应用打好基础，因为可以定义其他类型的帧

多工：客户端，服务器可以同时发送多个数据请求或回应

头部信息压缩，速度更快

服务器主动推送，发现网页中需要的资源，主动推送

明文传输，不加验证，无状态，超文本传输协议

http3：协议改成了udp，但是开发人员加入了自己做的层加强了传输的可靠性，速度更快，延迟更低

https（443）：

多了一层tsl、ssl加密（对称加密，非对称加密），ssl加密传输协议

18.网络安全

xss,csrf攻击？
中间人攻击？
如何防御？

19.状态管理的几种方法

redux，hooks，xstate，mobx等

20.水平垂直居中（宽高未知）

flex
transform