前端知识笔记

设备像素比dpr
设备上物理像素和设备独立像素的比例

盒子模型

1. IE 盒子模型、W3C 盒子模型；
2. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
3. 区 别： IE的content部分把 border 和 padding计算了进去（height = content + padding + border）;

flex

清除浮动的几种方法（overflow:hidden为什么可以清除浮动）

垂直居中的几种方法

margin-top百分比，margin-top: 50% 的百分比是width的50%

JS数据类型

1. 基本类型（null, undefined, string, number, boolean） 引用类型(object)
2. ES6中的 Symbol，Set，Map等

声明变量的方法
var, function, let, const, import, class
var 是es5中声明变量的方式，缺点是会变量提升，可以在声明前使用，值为undefined，作用域是函数级作用域
let, const 是es6里面声明变量的新的方式，不存在变量提升的情况，不可在声明前使用（typeof不再安全），作用域是块级作用域，不允许重复声明
全局变量的声明： let, function的声明挂载在顶层对象的属性上，let, const, class声明的全局变量不再与顶层对象相关

JS面向对象三大特征（封装继承多态）

数组去重

function distinct(arr) {
  return arr.sort().filter((v, i, array) => (array[i - 1] ? (v !== array[i - 1]) : true));
}

扁平化多维数组

const a = [1, [2, [3, [4]]]];
const flatten1 = (arr) => {
  return arr.reduce((item1, item2) => ([].concat(item1, Array.isArray(item2) ? flatten1(item2) : item2)));
};
const flatten2 = (arr) => {
  return [].concat(...arr.map(v => (Array.isArray(v) ? flatten2(v) : v)));
};
flatten1(a); // [1, 2, 3, 4]
flatten2(a); // [1, 2, 3, 4]

深拷贝，浅拷贝

BOM, DOM
文档对象模型（DOM）是W3C的标准，浏览器对象模型（BOM）是各个浏览器厂商根据 DOM在各自浏览器上的实现

怎么预防并检测内存泄漏

• JS垃圾回收机制（标记清除，引用计数）
• 内存泄漏（闭包，循环引用）

闭包
一般情况下内部函数调用外部函数的变量，调用完毕之后这个变量会被回收掉， 但是当这个内部函数在外部被调用的时候这个局部变量就被暴露在全局环境里面了， 这个时候这个局部变量就不会被销毁。

事件委托

类数组对象转化为数组

1. Array.prototype.slice.call(arguments)
2. Array.prototype.splice.call(arguments,0)
3. Array.prototype.concat.apply([],arguments)
4. Array.from(arguments)
5. [...arguments]

bind, apply, call

• 相同：都是改变函数的this指向
• 不同：
  • bind只改变了指向不会执行，apply 和 call 改变指向的同时会把函数执行一次
  • 参数不同func.apply(this, [arg1, arg2, ...]); func.call(this, arg1, arg2, ...)；

map、forEach、for

• 相同：循环遍历数组
• 不同：map可重新返回一个新的数组，forEach只是循环
• 与 for 循环不同的是 map 和 forEach 是 Array 的方法，调用对象必须是 Array，this指向可能会发生变化，Generate 函数的书写也可能会受到影响。

ajax请求过程

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求.
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
  if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
  }
}

跨域

• 同源策略（协议，域名，端口号）
• jsonp, cors, 反向代理（niginx），postMessage, window.domain / name

http协议
超文本传输协议，是互联网上最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准，运行在应用层上面。

websocket 可以与后端建立持续性的联系的协议

web worker 启用多线程

异步相关

ajax, promise, async await, Generator, fetch

前端缓存方案

cookie、http缓存、浏览器本地数据库、localstorage、sessionstorage

箭头函数和普通的匿名函数的区别？
1，箭头函数中this的指向是在定义时就固定的，普通的匿名函数的this跟调用他的环境有关；
2，其他，不可以new，没有arguments，不可以使用yield等；

nodejs

一个基于 Chrome V8 引擎的 JavaScript 运行环境。基于commonjs这个规范的实现

React

一套JavaScript MVC 框架，一个构建用户界面的JS库

特点、 React 生命周期、diff 算法、组件通信、优化、高阶组件 、react router、React Portals、redux

vue

渐进式JavaScript 框架

Webpack

• 一个现代 JavaScript 应用程序的静态模块打包器
• 优化：Tree-shaking、Scope hoisting、Code-splitting

react与vue的异同

• 相同：数据驱动视图，服务端渲染，virtual dom, 都有native解决方案, 社区优秀，轻量级
• 不同：
  1. 设计模式： React严格上只针对MVC的view层,Vue则是MVVM模式
  2. 社区：react大于vue
  3. virtual dom：vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树，react需要用shouldComponentUpdate()控制渲染
  4. 数据绑定：vue可单可双，react单向绑定
  5. 写法： vue: 基于模板， react: jsx
  6. 使用场景： vue小而快，react偏向于大型应用，可测试性高

函数式编程 & 面向对象编程

• 函数式编程：函数是一等公民，没有副作用（纯函数），数据（变量）不可更改，同样的输入一定会有同样的输出
• 面向对象编程：以对象为基本处理单元，灵活性高，继承封装多态。

前后端分离， 模块化，工程化，组件化

web性能优化、web性能优化2

规范

git相关