前言

记录一下在面试过程中遇到的以及搜罗到的web前端开发岗位的面试题，以八股为目录，部分题目会记录公司出处，先记录题目，答案之后补充，欢迎各位小伙伴评论区补充。

以下是本篇文章正文内容

一、javascript相关

1.js的八个基本数据类型（高频）（京东）

• 7个基本数据类型：数字number，字符串string，boolean，null，undefined，es6新增的symbol，es10新增的bigint
• 1个引用数据类型：object
• typeof返回的数据类型有：number，string，boolean，undefined（null也会按照undefined处理），symbol，object，function

2.this的五种指向方式

3.Function的call，apply和bind方法的区别？

4.Promise，手写promise

5.闭包

关于闭包的原理与用法

6.原型链，作用域链与原型链的区别？

7.继承与继承的五种实现方式

8.深拷贝与浅拷贝的区别？（高频）

• 什么是深拷贝和浅拷贝？
  基本数据类型的拷贝操作：基本数类型的名字和value值都存在栈内存中，当进行复制的时候，就开辟新的内存进行存储。
  引用数据类型的拷贝操作：引用数据类型名字存在栈中，value值存在堆中，但是栈中会提供一个地址指向堆中的value值。
  深浅拷贝就是针对引用数据类型而言的。
  浅拷贝：浅拷贝指的是只复制栈内存中的地址，当你对数据进行改变的时候改变的是堆内存中的变量，所以改变其中的一个值，另一个值会跟着改变，例如b=a，当你改变b的值时，a的值也会变化。
  深拷贝：深拷贝指的是复制之后会开辟新的堆内存进行value值的存储，所以复制之后的值的改变不会影响到被复制的变量的值。

• 为什么要讨论深浅拷贝？
  在一个团队中，多人开发一个项目时，当无法得知某个数据的用处时，随意使用浅拷贝操作数据会带来无法估量的影响。

• 浅拷贝和深拷贝操作举例。
  浅拷贝：“传址操作”

var a = [1,2,3,4]
var b = a
b.splice(1,1)
console.log(a)//[1,3,4]
console.log(b)//[1,3,4]

深拷贝的几种方法：“传值操作”

//方法1：只是深拷贝第一层，如果该数组存在下一层，则仍然是浅拷贝
var s = [1,2,3,4,5]
var s1 = s.slice(1,3)
s1[1] = 34
console.log(s)//[1,2,3,4,5]
console.log(s1)//[2,34]
//方法2：
var s = [1,2,3,4,5]
var s1 = [7,8,9]
console.log(s.concat(s1))//[1,2,3,4,5,7,8,9]
console.log(s)//[1,2,3,4,5]
//方法3：遍历数组的操作
var copy = function(obj){
   let objclone = Array.isArray(obj)?[]:{};
   for(key in obj){
       if(typeof obj[key]==="object"){
           objclone[key] = copy(obj[key])
       }else{
           objclone[key] = cobj[key]
       }
   }
   return objclone;
}
var c = [1,2,3,[4,5,6]]
var d = c
d[0] = 11
d[3][0] = 50
console.log(c)//[1,2,3,[4,5,6]]
console.log(d)//[11,2,3,[50,5,6]]

9.事件委托

10.var，const和let对比（高频）

11.宏任务与微任务

12.bind的实现方式

13.eventloop，事件循环（超高频）

14.new的过程，手动实现一个new方法

15.0.1+0.2！=0.3的原因

精度为什么丢失以及解决方法？

16.什么是防抖和节流？有什么区别？怎么实现

• 什么是防抖和节流？
  浏览器的keypress、mousemove等事件在触发的时候，会不断地调用绑定在事件上面的回调函数，极大地浪费了资源，降低了前端性能。为了优化体验，需要对这类的事件进行调用次数的限制，对此我们就可以采用防抖和节流的方式降低调用频率。
• 防抖（debounce）：若是在n秒的等待的时间内再次重复触发，则重新开始计时。多次执行变成最后一次执行有效果
• 节流（throttle）：在n秒之内只能执行一次，重复触发只有一次生效
• 实现如下：
  防抖：

function debounce(fn,delay) {
            let timeout = null; // 创建一个标记用来存放定时器的返回值
            return function() {
                clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
                timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
                    fn();
                }, delay);
            };
        }
        function sayHi() {
            console.log('防抖成功');
        }
        let box = document.getElementById('box')
     
        box.addEventListener('click', debounce(sayHi,2000))

节流：

  function throttle(fn,delay) {
           let canRun = true; // 通过闭包保存一个标记,这个标记使得第一次是可以进入的
           return function () {
               if (!canRun) return; //若判断为false，则返回，不能继续执行
               canRun = false; // 立即设置为false，防止在此期间再次触发函数，canrun为true就可以再次进入，阻断程序的再次执行，直到执行完毕canrun被再次赋值true
               setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
                    fn();
                    canRun = true;//此时可以再次被执行
                }, delay);
            };
        }
        function sayHi(e) {
               console.log('节流');
        }
        window.addEventListener('resize', throttle(sayHi,1000));  

• 应用场景：
  防抖：1、在微博、qq空间、朋友圈、抖音等这些地方有点赞的功能，如果真的出现用户频繁点赞、取消、点赞、取消，这就需要用到防抖，不是每一次的用户操作都要返回给服务器，只有用户最后一次的操作才需要返回个服务器。2、用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求。
  节流：1、每一个按钮控件，如果用户频繁触发，可以使用节流策略使得一段时间内只能触发一次，2、懒加载的时候要监听计算滚动条的位置，不必每一次都触发，可以使用节流策略降低计算频率，不必浪费cpu的资源。

17.“==”和“= = =”的区别？

简单来说，“===”比“= =”更加严格。

• “= = =”的两端需要数值的类型的大小第一样才能返回true
• “= =”类型不一样会先进行类型转换，之后再比较大小，注意symbol值代表唯一，不可转换。
• 一些举例如下:

console.log("1"==1)//true
console.log(null==undefined)//true
console.log(true==1)//true
console.log(Symbol(1)==1)//false

18.null和undefined的区别？

typeof(undefined)//undefined
typeof(null)//object
null == undefined //true
null === undefined // false
var a;
console.log(a)//undefined

• null和undefined都是js的基本数据类型，存在栈中；
• null是一个空指针变量，表示的是一个对象释放内存之后变为null
• undefined是一个未初始化的变量

19.内存泄露和内存溢出

20.垃圾回收机制

21.怎么判断数组array和对象（京东）

var arr = [1,2,3,4,5]
var obj = {
   name:"张三"
   age:24
}

判断方法如下

//方法一
console.log(arr.constructor)//[function:Array]
console.log(obj.constructor)//[function:Object]
//方法二
console.log(Array.isArray(arr))//true
console.log(Array.isArray(obj))//false
//方法三
console.log(arr instanceof Array)//true
console.log(obj instanceof Array)//false
//方法四
console.log(Object.prototype.toString.call(arr))//[object Array]
console.log(Object.prototype.toString.call(obj))//[object Object]
//方法五
console.log(arr.__proto__)//[]
console.log(obj.__proto__)//{}

22.js的三个面向对象的属性

23.堆和栈的区别？

• 栈（stack）
  自动分配内存空间，自动释放，存放的是“值类型”和“执行代码的环境”，占据固定大小的空间。在方法中定义的变量放在栈内存中，随着方法的执行结束，这个方法的内存栈也自然销毁。
  优点：存取速度比堆块，仅次于直接位于cpu中的寄存器，数据可以共享。
  缺点：存在栈中的数据大小与生存周期必须是确定的，缺乏灵活性。
• 堆（heap）
  动态分配内存，不会自动释放，存放的是“引用值类型”，占据的空间大小不固定，实际上对象是在栈中保存指向给该对象的指针，而在堆中存放的是对象本身。
  堆内存中的对象不会随着方法的结束而销毁，即便方法结束之后，这个对象还可能被另一个引用变量所引用（参数传递）。创建对象是为了反复利用，这个对象将被保存到运行时数据区。

二、浏览器

1.回流和重绘

• 重绘：节点的集合属性发生改变或者样式发生改变而不影响布局的，称为重绘。例如：color，visibility等的改变。重绘的代价是高昂的，因为浏览器必须验证DOM树上的其他元素的可见性。
• 回流：标签的属性发生改变之后导致布局的改变就是回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面甚至是整个页面的更新，单个元素的回流有可能导致其后的全部元素回流。
• 关系：回流必然发生重绘，重绘不一定发生回流
• 减少回流与重绘：1、使用visibility代替display：none前者只重绘，后者会回流。2、尽量避免table的使用，可能很小的一个改变就会引起回流。3、尽量在DOM树的最末端改变class，使得回流影响的范围尽可能小。

2.http缓存，协商缓存

3.cookies，sessionStorage和localStorage

4.跨域问题（超高频）

5.在浏览器输入网址到页面渲染的整个过程（超高频）

• step1>>查找域名对应的IP地址。
  浏览器向DNS服务器发起DNS请求，DNS服务器解析域名后返回域名对应的网站服务器IP地址。

• step2>>浏览器向IP对应的Web服务器发送HTTP请求（在这里三次握手）

• step3>>服务器响应，发回网页内容
  服务器解析浏览器的请求之后从数据库获取资源，将生成的html文件封装至HTTP响应包中，返回值浏览器解析。

• step4>>浏览器解析网页内容（之后四次挥手）
  浏览器解析HTTP响应之后，下载html文件，继而根据文件内部包含的外部引用文件、图片或者多媒体文件等逐步下载，最终将获取到的全部文件渲染成完整的网站页面。

• 浏览器渲染页面：把html代码通过html解析器形成

三、css相关

1.盒子模型（标准盒模型和怪异盒模型）

2.垂直居中的方法（字节）

• 方法1：定位法

father{
    position: relative;   
}
/* 定位法：必须知道宽高 */
#son{
    height:100px;
    width:100px;
    background-color: blanchedalmond;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
   
}

• 方法2：

father{
    position: relative;   
}
/* 无需知道宽高但是必须知道宽高 */
#son{
    height:100px;
    width:100px;
    background-color: blanchedalmond;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto; 
}

• 方法3：transform

father{
    position: relative;   
}
/* 无需知道宽高，用内容撑起来即可，但是兼容性不是很好 */
#son{
    background-color: blanchedalmond;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%); 在x轴上和y轴上移动
}

• 方法4：

father{
    display: table-cell;/* 只作用于文本，所以子元素设置为 inline-block;*/
    vertical-align: middle;/* 垂直居中*/
    text-align: center;/* 水平居中*/
    background-color: aqua;
    height:500px;
    width:500px;
}
.son{
      display: inline-block;
      background-color: azure;
}

• 方法5：

let box = document.getElementById('box')
boxw = box.offsetWidth;    
boxh=box.offsetHeight;
let inner = document.getElementById('inner')
innerw=inner.offsetWidth    
innerh=inner.offsetHeight
inner.style.position="absolute"
inner.style.left=(boxw-innerw)/2+'px'
inner.style.top=(boxh-innerh)/2+'px'

3.css样式优先级

• 优先级比较
  ！Important > 内联样式（标签内部style1000）> id选择器（0100）>class 选择器【包括类，伪类，属性选择器】（0010）>标签（包括标签和伪元素）（0001）>通配符>继承>默认

• 权重计算方法（相加计算权重，后定义覆盖先定义）
  不同等级的选择器权重定义如下
  第一等：代表内联样式，如: style=””，权值为1000。
  第二等：代表ID选择器，如：#content，权值为0100。
  第三等：代表类，伪类和属性选择器，如.content，权值为0010。
  第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
  第五等：通用选择器（），子选择器（>），相邻同胞选择器（+），权值为0000
  定义css的时候，把权重进行相加，示例：
  #content#in_block.user_infoa{/权重：1002+101+11=211/

• 注意
  1、但是可能出现同一个元素定义了两个css，且权重相同，此时，后定义的样式会覆盖先定义的样式（覆盖指的是只覆盖被定义过的属性，不是全部替换）
  2、权重相同，一个定义在html文件里面的style标签里面，一个定义在外联的css文件中，也是哪一个在html中后引入用哪个

4.行元素和块级元素有哪些？

5.几大经典布局方案（圣杯布局和双飞翼布局）

6.css3新增属性

6.1选择器

• 子级选择器
  .box > p { background-color: pink; }
  box是父元素的class名，p是子元素的标签
  注意：不是直接子元素而是嵌套子元素，则无法设置成功
• 兄弟选择器
  相邻兄弟选择器：
  .box1 h2 + p
  设置box1下面的紧跟在h2后面的p标签
  其他兄弟选择器：
  .box2 h2 ~ p
  设置box2下面的h2后面的所有的同级的p标签的样式
• 结构伪类选择器

p:first-child    p标签或者类的父元素的第一个子元素（且第一个子元素必须是p或者该类）
p:last-child    
p:nth-child(n)  匹配第n个p标签  n可以是数字、公式、或者关键字（even 偶数 odd 奇数）
p:first-of-type  各个父元素（包括body）下的第一个p标签
p:last-of-type
p:nth-of-type（n）

• 伪元素选择器

<div class="wei">abcde</div>

.wei::after{
    content:'我在伪元素的后面';
    display: block;
}
.wei::before{
    content: "我在伪元素的前面";
    display: block;
}
.wei::first-letter{  容器（包括新增的内容）内的第一个字母
    color:hotpink
}
.wei::first-line{    容器（包括新增的内容）内的第一行
    color:indianred;
}

在这里

• 属性选择器

<input type="radio" name="sex1" class="icon-dan"> 男性
<input type="radio" name="sex2" class="icon-dan"> 女性

属性选择器

/*匹配name的值为sex1的标签*/
input[name="sex1"]{
    width:100px;
    height:100px;
}

通配符选择器

input[name^="sex"]匹配name的值以sex开头的
input[name$="sex"]匹配name的值以sex结尾的
input[name*="sex"]匹配name的值中含有sex的

7.如何使一个div消失在视野中？

//消失在视野中，并且依然占用空间
visibility:hidden;//隐藏
background-color:transparent;//设置透明度为0
transform:scale(0);//缩放为0
//消失在视野中，并且不占空间
display:none;

8.说明z-index的工作原理，适用范围？position的属性?

• 工作原理：控制元素的堆叠顺序，值越大证明距离屏幕越近。只有脱离文档流的时候，z-index才会起作用
• 不能脱离文档流：
  position:static;
• 脱离文档流
  position:absolute;相对于父元素定位，margin，随着滚动条的定位而定位，在原文档的位置将不再保留，其余元素视其为“无物”
  position:fixed;相对于浏览器窗口来定位，不随着滚动条的滑动而滑动 直接top、left等 完全脱离文档流
  position:relative;半脱离文档流，相对于当前在文档流里面的位置进行相对定位，原位置置空保留
  float：完全脱离文档流

9.css命名规范

四、HTML相关

1.谈谈你对html5的理解以及新增的属性？

2.标签语义化的理解

3.dom是什么？关于dom的api有哪些

4.w3c标准

5.前端优化的一些方式

五、ES6相关

1.es6新增特性

2.forEach，for in和for of三者的区别？

3.bable是什么？有什么作用？

4.es6对数组做出的优化有哪些？

5.es6对object对象做出的优化有哪些？

6.es6对函数做出的优化有哪些？

7.symbol是什么，有什么作用？

8.literator是什么？有什么作用？

9.set和map

10.遍历的几种方法对比

for/while/for…in/for…of/forEach/map/filter等遍历方法的区别

11.es6新增的函数列举

六、vue相关

1.你对vue的理解

2.响应式原理

3.8个生命周期

4.组件通信的方法

5.双向绑定的原理（京东）

6.computed和watch的区别

7.对虚拟节点的理解

8.diff原理

9.eslint

10.vue常用的修饰符

11.v-text、{{}}和v-html的区别

12.vue的单页面的优缺点

13.vuex是什么？怎么使用？在哪种场景使用？

14.vue路由

15.vue数据绑定的几种方式？

16.注册全局组件和局部组件

17.viewui的常用组件

18.vue首屏加载慢的原因是什么？怎么解决？白屏时间怎么检测？

19.vue-router懒加载和非懒加载方式的区别？

20.手动搭建一个vue项目，和使用vue-cli的区别？vue-cli给我们做了什么？

七、react相关

八、计算机网络

1.http和https区别？https的工作原理和优缺点？http2.0和http1.0

2.tcp和udp概念区别？三次握手，四次挥手？为什么握手需要三次？（阿里）

3.常见的状态码？

4.ur的组成以及同源策略

5.强缓存以及协商缓存

6.get和post的区别？

7.常见的http方法

8.web安全问题

9.域名解析的过程和原理

九、操作系统

1.什么是死锁？死锁产生的条件

2.什么是虚拟内存

3.进程和线程的区别？

4.并发和并行的区别？

十、手撕代码

1.事件委托

2.常见的排序算法，度量的标准

3.数组去重

4.深度/广度优先遍历

十一、其他问题

1. 近期访问的比较好的博客有哪些，列举一下（阿里）
2. deadline怎么解决（阿里）
3. 列举曾经遇到的困难（学习或者生活上）以及解决方式（字节）（京东）
4. 怎么学习的前端
5. 与别人相比的优势
6. 项目相关。项目里面你的角色，你做了什么？开发过程中遇到的困难，怎么解决的？
7. 准备怎么学习一个新的技术
8. 你的爱好
9. 你的职业规划
10. 怎么理解大前端
11. 为什么选择前端，说说你对前端的理解
12. 压力大怎么解决（京东）
13. 工作枯燥怎么解决（京东）
14. 个人优缺点（京东）
15. 找工作看重哪些因素（京东）
16. 实习经历（京东）

总结

这里对文章进行总结：
失败不可怕，胆怯最可怕，失败之后无所进益最可怕