前端面试总结，持续更新中...

HTML 篇

页面导入样式时，link 与 @Import 有什么区别

• link 属于 XHMTL 标签，除了加载 css 外，还能用于定义 RSS，定义 ref 连接属性等作用；而 @import 是 css 提供的，只能用于加载 css
• 页面加载时，link 会同时加载，而 @import 引用的 css 会等页面加载完之后再加载
• @import 是 css 2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题

常见的浏览器内核

• Trident 内核：IE，MaxThon，360，搜狗浏览器等
• Gecko 内核：Netscape6 及以上版本
• Presto 内核：Opera 7 及以上，【Opera 内核原为：Presto，现为：Blink】
• Webkit 内核：Safari，chrome 等【Chrome的：Blink（Webkit的分支）】

重绘 与 回流

• 回流（Reflow）：当 render tree 中部分或全部元素的尺寸、结构或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。（页面首次渲染，浏览器窗口大小改变，元素尺寸、位置发生改变，添加或删除可见 DOM 元素、激活 css 伪类等会导致回流）
• 重绘（Repaint）：当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予元素并重新绘制它，这个过程称为重绘。

css 篇

实现水平垂直居中

• 方法一：使用 flex 布局

.parent { display: flex }
.child { margin: auto }

• 方法二：使用 flex 布局

.parent { 
  // parent css
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.child {
 // child css
}

• 方法三：使用 position + margin （已知子 div 宽高）

.parent {
  position: relative;
}
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -100px;  // 宽度的一半
  margin-top: -100px;  // 高度的一半
}

• 方法四：使用 position + transform：translate() （未知子 div 宽高）

.parent {
  // parent css
  position: relative;
}
.child {
  // child css
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%)
}

js（包括 es6） 篇

Promise 的理解

Promise 是一种为了避免回调地狱的异步解决方案。Promise 是一种状态机制：pending（进行中）、fulfilled（已成功）和 rejected（已失败），只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

回调地狱

回调函数中嵌套回调函数的情况就叫做回调地狱。
回调地狱就是为了实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护

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

• 箭头函数没有 this，通常需要通过查找作用域链来确定this 的值。
• 箭头函数没有自己的 arguments 对象，但是可以访问外部函数的 arguments 对象
• 不能通过 new 关键字调用，同样也没有 new.target 值和原型

ES6 特性

• let 【定义变量，变量声明不提升，块级作用域，不能重复声明】
• const 【定义常量，变量声明不提升，块级作用域，不能重复声明，初始化必须有值】
• 箭头函数： () => {}
• 解构赋值：let [a, b, c] = [1, 2, 3]
• 【…】展开/收集运算符：let a = […obj, 4, 5, 6]

实现继承的几种方式

• 原型链继承

function Person(name) {
  this.name = name
}

function Woman() {}
Woman.prototype = new Person()
Woman.prototype.name = 'haixia'
let womanObj = new Woman()

• 借用构造函数继承

function People() { 
  this.name = 'Marry'
}
function Wonman() {
  People.call(this)
  this.name = name || 'renbo'
}
let womanObj = new Woman() // womanObj.name == 'rando'

• 实例继承

function People() {
  this.name = 'Marry'
  this.age = 23
  this.sayName = name => {
    console.log(name || this.name)
  }
}

function Woman(name) {
  let instance = new People()
  instance.name = name || 'xiaoxiao'
  return instance
}

let womanObj = new Woman()  // womanObj.sayName() 'xiaoxiao'

null 和 undefined 的区别

• undefined 表示一个变量没有被声明，或者被声明了但没有被赋值（未初始化），一个没有传入实参的形参变量为 undefined，如果一个函数什么都没返回，则该函数默认返回 undefined。null 则表示“什么都没有”，即“空值”。
• javascript 将未赋值的变量默认设为 undefined；javascript 从来不会将变量设成 null。

call apply bind 的区别

• apply 方法：
  apply 接受两个参数，第一个是 this，第二个是函数接受的参数，以数组的形式传入，且当第一个参数为 null、undefined 的时候，默认指向 window（浏览器中），使用 apply 方法改变 this 指向后原函数会立即执行，且此方法只是临时改变 this 指向一次。
• call 方法：
  call 接受两个参数，第一个是 this，第二个是参数列表。当一个参数为 null 或 undefined 的时候，表示指向 window（浏览器中），与 apply 一样， call 方法也只是临时改变一次 this 指向，并立即执行。
• bind 方法：
  bind 方法和 call 方法类似，第一个参数为 this，后面的参数为参数列表（bind 的第二个参数列表可以分多次传入，call 方法则必须一次性传入所有参数），但是它改变 this 指向后不会立即执行，而是返回一个永久改变 this 指向的函数。

vue 篇

react 篇

webpack 篇

前端页面优化

防抖 与 节流

• 防抖：
  防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

// 防抖
// 使用场景：1.搜索框，2.表单提交，3.手机号，邮箱验证
function debounce(fn, delay = 200) {
  let timer;
  return function() {
  	const th= this, args = arguments;
  	if(timer) clearTimeout(timer);
  	timer = setIimeout(() => {
	  timer = null;
	  fn.apply(th, args)
	], delay );
  }
}

// 调用
debounce(async function() {
  // do sth
  await fn()
}, 200)

• 节流：
  节流是指连续触发事件但在 n 秒中只执行一次函数（节流会稀释函数的执行频率）

// 节流
// 1.滚动加载，2.搜索框
function throttle(fn, delay = 200) {
  let timer, last
  return function() {
	const th = this, args = arguments, now = new Date()
	if(last && now - last < delay) {
	  clearTimeout(timer)
	  timer = setTimeout(() => {
	    last = now
	    fn.apply(this, args)
	  }, delay)
	}else {
	  last = now 
	  fn.apply(this, args)
	}
  }
}

// 调用
throttle(async function() {
  // do sth
  await fn()
}, 200)

HTTP 与 TCP/IP