高级前端面试题总结3>:after伪元素在浮动的元素容器加一个clearfix的class，然后给clearfix加一

一、排序篇

快速排序（nlogn）

选择排序（n^2）

插入排序（n^2）

希尔排序（n^1.5）

归并排序（nlogn）

冒泡排序（n^2）

详情参考链接如下：

二、前端基础（html）

三、前端基础（css）

1、flex容器布局

参考阮老师：www.ruanyifeng.com/blog/2015/0…

2、清除浮动的几种方式

1>.clear{clear:both}

2>给浮动的元素容器加 overflow：hidden；或者 overflow:auto;

3>:after伪元素在浮动的元素容器加一个clearfix的class，然后给clearfix加一个:after伪元素末尾实现添加一个看不见的块元素来实现清除浮动clear:both，若相对ie6-7进行兼容可以给clearfix加一个zoom：1。

3.BFC:块级格式化上下文

1.内部的盒子会在垂直方向，一个个地放置

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠

3.BFC的区域不会与float重叠

4.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此

6.计算BFC的高度时，浮动元素也参与计算。

具体代码参考：www.cnblogs.com/yuer2018072…

4.IFC：叫做“行级格式化上下”

（1）内部的盒子会在水平方向，一个个地放置；

（2）IFC的高度，由里面最高盒子的高度决定；

（3）当一行不够放置的时候会自动切换到下一行；

5.盒子模型

1.content-box（标准盒模型）:

属性width,height只包含内容content，不包含border和padding

2.IE 盒模型：

属性width,height包含border和padding，指的是content+padding+border

6.css的5种定位

1.static：

这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

2.relative：

相对定位元素的定位是相对其正常位置

3.absolute：

绝对定位方式，脱离文档流，不会占用页面空间。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html:

4.fixed：

固定定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。当父元素使用了transform的时候，会以父元素定位

5.sticky：粘性定位基于用户的滚动位置来定位。

7.CSS权重计算

第一等级：代表内联样式，如style=""，权值为 1000

第二等级：代表id选择器，如#content，权值为100

第三等级：代表类，伪类和属性选择器，如.content，权值为10

第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

8.px/em/rem/vh/vw

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前父元素的字体尺寸。如未设置，则相对于浏览器的默认字体尺寸

rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

四、javascript

1>闭包以及作用域

(1).作用域: 作用域是可以访问变量的集合，分为局部作用域和全局作用域；

(2).闭包： 闭包就是将函数内部和函数外部连接起来的一座桥梁.

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

闭包就是函数f2，即能够读取其他函数内部变量的函数。
由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，
因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，
就是它可以“记住”诞生的环境，比如f2记住了它诞生的环境f1，所以从f2可以得到f1的内部变量

(3).this

是在函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用

2>事件循环机制

宏任务与微任务的区别

同步任务和异步任务

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。

异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。

Node中的事件循环机制

JavaScript 引擎怎么知道异步任务有没有结果，能不能进入主线程呢？答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。这种循环检查的机制，就叫做事件循环（Event Loop

详情参考blog.alanwu.site/2020/03/06/…

3>.JS垃圾回收与V8垃圾回收 JS：标记清楚法/引用计数法

V8：标记清除发/标记压缩法/增量标记法/压缩算法

4>.原型与原型链

所有原型链的终点都是 Object 函数的 prototype 属性

每一个构造函数都拥有一个 prototype 属性，此属性指向一个对象，也就是原型对象

原型对象默认拥有一个 constructor 属性，指向指向它的那个构造函数

每个对象都拥有一个隐藏的属性 __ proto __，指向它的原型对象

5>JavaScript基本类型及其判断 (1).boolean

(2).string

(3).number

(4).null

(5).undefined

(6).symbol

(7).object

(8).Infinity

注意：

1.空数组（[]）和空对象（{}）对应的布尔值，都是true。

2.undefined、null、false、0、NaN、""或''（空字符串）

6>JavaScript设计模式

工厂模式：我们只要传递参数进去，里面具体的过程我们不用去关心，最后返回一个对象

单例模式：是保证一个类仅有一个实例，并提供一个访问它的全局访问点。其实这有一点像我们vuex当中的实现，也是一个全局的状态管理，并且提供一个接口访问

适配器模式

代理模式

发布-订阅模式

策略模式

迭代器模式

详情参考：blog.alanwu.site/2020/03/17/…

7>操作节点API总结

查找节点

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个

document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。

document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。

document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。

document.querySelector ：返回单个Node，如果匹配到多个结果，只返回第一个。

document.querySelectorAll ：返回一个 NodeList。

document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

创建节点

createElement创建元素

createTextNode创建文本节点

cloneNode 克隆一个节点

createDocumentFragment 创建文档碎片，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能

修改节点 appendChild

insertBefore

removeChild

replaceChild

8>防抖和节流

1.防抖：要连续操作结束后再执行。以网页滚动为例，要等到用户停止滚动后才执行

2.节流：确保一段时间内只执行一次，则是如果用户一直在滚动网页，那么在滚动过程中还是会执行

详情参考：juejin.cn/post/690674…

9.深拷贝与浅拷贝

1>浅拷贝：

let obj={a:1,b:{i:2,j:3}};
let obj1={};
// es5实现方式
for（let key in obj）{
	if（！obj.hasOwnProperty(key)）break;
    obj1[key]=obj[key];
}
// es6实现方式
obj1={
	...obj
};

2.深拷贝

let obj1=JSON.parse(JSON.stringify(obj)); // 弊端？

1.函数 2.日期格式 3.正则 都在json.stringify 出现问题

采用递归？

function deepClone(obj){
	// =>过滤特殊情况
     if（obj===null） return null;
     if（typeof obj!=="object"）return obj;
     if（obj instanceof RegExp）{
     	return new RegExp(obj);
     }
      if（obj instanceof Date）{
     	return new Date(obj);
     }

	// =>不直接创建空对象目的，克隆的结果和之前保持相同的所属类
    let newObj = new obj.constructor;
    for（let key in obj）{
	if（obj.hasOwnProperty(key)）{
       newObj[key]=deepClone(obj[key]);
    }
  
}
return newObj;

}

五、前端框架react

1.虚拟dom和真实dom

2.生命周期


2>、componentDidMount**()** – 仅在第一次渲染后在客户端执行。

3>、componentWillReceiveProps**()** – 当从父类接收到 props 并且在调用另一个渲染器之前调用。

4>、shouldComponentUpdate**()** – 根据特定条件返回 true
或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。

5>、componentWillUpdate**()** – 在 DOM 中进行渲染之前调用。

6>、componentDidUpdate**()** – 在渲染发生后立即调用。

7>、componentWillUnmount**()** – 从 DOM 卸载组件后调用。用于清理内存空间。

3.高阶组件：HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件

六、前端框架vue

1.数据双向绑定

vue 2.0 用Object.defineProperty实现

vue 3.0 用proxy

2.MVC和MVVM区别

MVVM:双向数据改变 MVC:单向数据改变(默认只实现了数据更改控制视图更改，少了视图更改影响数据更改【onchange可以】)

3.父子组件传值

vue: 1、属性传递 2、发布订阅 $on/$ emit 3、provide/inject(祖先和后代组件间传值) 4、slot 5、 $parent/$ children 6、vuex

react: 1.属性 2.发布订阅 3.React.createContent(祖先和后代组件间传值) 4.redux/react-redux/mobix/dva

4.v-if和v-for哪个优先级更高？

1、显然v-for高于v-if被解析，可以在源码compiler/codegen/index.js中找到答案

2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。

3、要避免这种情况，要在外层嵌套一个template，在这一层进行v-if的判断，然后在内部进行v-for的循环。

七、微信小程序

八、钉钉小程序

九、计算机网络

1>跨域问题的解决方案及实现原理：

(1).jsonp方式：缺点：1.get请求 2.不安全 3.有缓存 4.大小有限制 5.服务器准备数据

(2).基于iframe实现跨域解决方案： window.name document.domin location.hash post message

(3).CORS跨域资源共享 1.axios

(4).基于proxy实现跨域服务器做nginx反向代理

2>前端如何部署：linux+nignx+doc

高级前端面试题总结