前端JS基础知识

1. 原型 / 构造函数 / 实例

• 原型(prototype): 一个简单的对象，用于实现对象的 属性继承。能够简单的理解成对象的爹。在 Firefox 和 Chrome 中，每一个JavaScript对象中都包含一个__proto__ (非标准)的属性指向它爹(该对象的原型)，可obj.__proto__进行访问。

• 构造函数: 能够经过new来 新建一个对象 的函数。

• 实例: 经过构造函数和new建立出来的对象，即是实例。 实例经过__proto__指向原型，经过constructor指向构造函数。

说了一大堆，你们可能有点懵逼，这里来举个栗子，以Object为例，咱们经常使用的Object即是一个构造函数，所以咱们能够经过它构建实例。

// 实例
const instance = new Object()

则此时， 实例为instance, 构造函数为Object，咱们知道，构造函数拥有一个prototype的属性指向原型，所以原型为:

// 原型
const prototype = Object.prototype

这里咱们能够来看出三者的关系:

实例.__proto__ === 原型

原型.constructor === 构造函数

构造函数.prototype === 原型

// 这条线实际上是是基于原型进行获取的，能够理解成一条基于原型的映射线
// 例如: 
// const o = new Object()
// o.constructor === Object   --> true
// o.__proto__ = null;
// o.constructor === Object   --> false
实例.constructor === 构造函数

放大来看，我画了张图供你们完全理解:

 

function Hero(name){this.name=name};
var h1 = new Hero('dingdang');
Hero.prototype.__proto__ === Object.prototype;//由于Hero的原型是一个对象，因此它的__proto__ 指向对象的构造函数（Object）的原型
Hero.__proto__ === Function.prototype //构造函数的原型

//每一个JavaScript对象中都包含一个__proto__ (非标准)的属性指向它爹(该对象的原型)

2.原型链：

原型链是由原型对象组成，每一个对象都有 __proto__ 属性，指向了建立该对象的构造函数的原型，__proto__ 将对象链接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

• 属性查找机制: 当查找对象的属性时，若是实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象Object.prototype，如仍是没找到，则输出undefined；

• 属性修改机制: 只会修改实例对象自己的属性，若是不存在，则进行添加该属性，若是须要修改原型的属性时，则能够用: b.prototype.x = 2；可是这样会形成全部继承于该对象的实例的属性发生改变。

3. 执行上下文(EC)

执行上下文能够简单理解为一个对象:

• 它包含三个部分:

  • 变量对象(VO)
  • 做用域链(词法做用域)
  • this指向

• 它的类型:

  • 全局执行上下文
  • 函数执行上下文
  • eval执行上下文

• 代码执行过程:

  • 建立 全局上下文 (global EC)
  • 全局执行上下文 (caller) 逐行 自上而下 执行。遇到函数时，函数执行上下文 (callee) 被push到执行栈顶层
  • 函数执行上下文被激活，成为 active EC, 开始执行函数中的代码，caller 被挂起
  • 函数执行完后，callee 被pop移除出执行栈，控制权交还全局上下文 (caller)，继续执行

2.变量对象

变量对象，是执行上下文中的一部分，能够抽象为一种 数据做用域，其实也能够理解为就是一个简单的对象，它存储着该执行上下文中的全部 变量和函数声明(不包含函数表达式)。

活动对象 (AO): 当变量对象所处的上下文为 active EC 时，称为活动对象。

3. 做用域

执行上下文中还包含做用域链。理解做用域以前，先介绍下做用域。做用域其实可理解为该上下文中声明的 变量和声明的做用范围。可分为 块级做用域 和 函数做用域

特性:

• 声明提早: 一个声明在函数体内都是可见的, 函数优先于变量
• 非匿名自执行函数，函数变量为 只读 状态，没法修改

let foo = function() { console.log(1) }
(function foo() {
    foo = 10  // 因为foo在函数中只为可读，所以赋值无效
    console.log(foo)
}()) 

// 结果打印：  ƒ foo() { foo = 10 ; console.log(foo) }

 

4.做用域链

咱们知道，咱们能够在执行上下文中访问到父级甚至全局的变量，这即是做用域链的功劳。做用域链能够理解为一组对象列表，包含 父级和自身的变量对象，所以咱们便能经过做用域链访问到父级里声明的变量或者函数。

• 由两部分组成:
  • [[scope]]属性: 指向父级变量对象和做用域链，也就是包含了父级的[[scope]]和AO
  • AO: 自身活动对象

如此 [[scopr]]包含[[scope]]，便自上而下造成一条 链式做用域。

5. 闭包

闭包属于一种特殊的做用域，称为 静态做用域。它的定义能够理解为: 父函数被销毁 的状况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和做用域链，所以能够继续访问到父级的变量对象，这样的函数称为闭包。

• 闭包会产生一个很经典的问题:

  • 多个子函数的[[scope]]都是同时指向父级，是彻底共享的。所以当父级的变量对象被修改时，全部子函数都受到影响。

• 解决:

  • 变量能够经过 函数参数的形式 传入，避免使用默认的[[scope]]向上查找
  • 使用setTimeout包裹，经过第三个参数传入
  • 使用 块级做用域，让变量成为本身上下文的属性，避免共享

6. script 引入方式：

• html 静态<script>引入
• js 动态插入<script>
• <script defer>: 异步加载，元素解析完成后执行
• <script async>: 异步加载，但执行时会阻塞元素渲染

7. 对象的拷贝

• 浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响

  • Object.assign
  • 展开运算符(...)

• 深拷贝: 彻底拷贝一个新对象，修改时原对象再也不受到任何影响

  • JSON.parse(JSON.stringify(obj)): 性能最快
    • 具备循环引用的对象时，报错
    • 当值为函数、undefined、或symbol时，没法拷贝
  • 递归进行逐一赋值

8. new运算符的执行过程

• 新生成一个对象
• 连接到原型: obj.__proto__ = Con.prototype
• 绑定this: apply
• 返回新对象(若是构造函数有本身 retrun 时，则返回该值)

9. instanceof原理

能在实例的 原型对象链 中找到该构造函数的prototype属性所指向的 原型对象，就返回true。即:

// __proto__: 表明原型对象链
instance.[__proto__...] === instance.constructor.prototype

// return true

10. 代码的复用

当你发现任何代码开始写第二遍时，就要开始考虑如何复用。通常有如下的方式:

• 函数封装
• 继承
• 复制extend
• 混入mixin
• 借用apply/call

11. 继承

在 JS 中，继承一般指的即是 原型链继承，也就是经过指定原型，并能够经过原型链继承原型上的属性或者方法。

• 最优化: 圣杯模式

var inherit = (function(c,p){
    var F = function(){};
    return function(c,p){
        F.prototype = p.prototype;
        c.prototype = new F();
        c.uber = p.prototype;
        c.prototype.constructor = c;
    }
})();

• 使用 ES6 的语法糖 class / extends

12. 类型转换

你们都知道 JS 中在使用运算符号或者对比符时，会自带隐式转换，规则以下:

• -、*、/、% ：一概转换成数值后计算
• +：
  • 数字 + 字符串 = 字符串， 运算顺序是从左到右
  • 数字 + 对象， 优先调用对象的valueOf -> toString
  • 数字 + boolean/null -> 数字
  • 数字 + undefined -> NaN
• [1].toString() === '1'
• {}.toString() === '[object object]'
• NaN !== NaN 、+undefined 为 NaN

13. 类型判断

判断 Target 的类型，单单用 typeof 并没有法彻底知足，这其实并非 bug，本质缘由是 JS 的万物皆对象的理论。所以要真正完美判断时，咱们须要区分对待:

• 基本类型(null): 使用 String(null)
• 基本类型(string / number / boolean / undefined) + function: 直接使用 typeof便可
• 其他引用类型(Array / Date / RegExp Error): 调用toString后根据[object XXX]进行判断

很稳的判断封装:

let class2type = {}
'Array Date RegExp Object Error'.split(' ').forEach(e => class2type[ '[object ' + e + ']' ] = e.toLowerCase()) 

function type(obj) {
    if (obj == null) return String(obj)
    return typeof obj === 'object' ? class2type[ Object.prototype.toString.call(obj) ] || 'object' : typeof obj
}

14. 模块化

模块化开发在现代开发中已经是必不可少的一部分，它大大提升了项目的可维护、可拓展和可协做性。一般，咱们 在浏览器中使用 ES6 的模块化支持，在 Node 中使用 commonjs 的模块化支持。

• 分类:

  • es6: import / export
  • commonjs: require / module.exports / exports
  • amd: require / defined

• require与import的区别

  • require支持 动态导入，import不支持，正在提案 (babel 下可支持)
  • require是 同步 导入，import属于 异步 导入
  • require是 值拷贝，导出值变化不会影响导入值；import指向 内存地址，导入值会随导出值而变化

15. 防抖与节流

防抖与节流函数是一种最经常使用的 高频触发优化方式，能对性能有较大的帮助。

• 防抖 (debounce): 将屡次高频操做优化为只在最后一次执行，一般使用的场景是：用户输入，只需再输入完成后作一次输入校验便可。

function debounce(fn, wait, immediate) {
    let timer = null

    return function() {
        let args = arguments
        let context = this

        if (immediate && !timer) {
            fn.apply(context, args)
        }

        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

• 节流(throttle): 每隔一段时间后执行一次，也就是下降频率，将高频操做优化成低频操做，一般使用场景: 滚动条事件 或者 resize 事件，一般每隔 100~500 ms执行一次便可。

function throttle(fn, wait, immediate) {
    let timer = null
    let callNow = immediate
    
    return function() {
        let context = this,
            args = arguments

        if (callNow) {
            fn.apply(context, args)
            callNow = false
        }

        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}

16. 函数执行改变this

因为 JS 的设计原理: 在函数中，能够引用运行环境中的变量。所以就须要一个机制来让咱们能够在函数体内部获取当前的运行环境，这即是this。

所以要明白 this 指向，其实就是要搞清楚 函数的运行环境，说人话就是，谁调用了函数。例如:

• obj.fn()，即是 obj 调用了函数，既函数中的 this === obj
• fn()，这里能够当作 window.fn()，所以 this === window

但这种机制并不彻底能知足咱们的业务需求，所以提供了三种方式能够手动修改 this 的指向:

• call: fn.call(target, 1, 2)
• apply: fn.apply(target, [1, 2])
• bind: fn.bind(target)(1,2)

17. ES6/ES7

因为 Babel 的强大和普及，如今 ES6/ES7 基本上已是现代化开发的必备了。经过新的语法糖，能让代码总体更为简洁和易读。

• 声明

  • let / const: 块级做用域、不存在变量提高、暂时性死区、不容许重复声明
  • const: 声明常量，没法修改

• 解构赋值

• class / extend: 类声明与继承

• Set / Map: 新的数据结构

• 异步解决方案:

  • Promise的使用与实现

  • generator:

    • yield: 暂停代码
    • next(): 继续执行代码

  function* helloWorld() {
    yield 'hello';
    yield 'world';
    return 'ending';
  }
  
  const generator = helloWorld();
  
  generator.next()  // { value: 'hello', done: false }
  
  generator.next()  // { value: 'world', done: false }
  
  generator.next()  // { value: 'ending', done: true }
  
  generator.next()  // { value: undefined, done: true }

  • await / async: 是generator的语法糖， babel中是基于promise实现。

  async function getUserByAsync(){
     let user = await fetchUser();
     return user;
  }
  
  const user = await getUserByAsync()
  console.log(user)

18. AST

抽象语法树 (Abstract Syntax Tree)，是将代码逐字母解析成 树状对象 的形式。这是语言之间的转换、代码语法检查，代码风格检查，代码格式化，代码高亮，代码错误提示，代码自动补全等等的基础。例如:

function square(n){
    return n * n
}

经过解析转化成的AST以下图:AST

 

 

19. babel编译原理

• babylon 将 ES6/ES7 代码解析成 AST
• babel-traverse 对 AST 进行遍历转译，获得新的 AST
• 新 AST 经过 babel-generator 转换成 ES5

20. 函数柯里化

在一个函数中，首先填充几个参数，而后再返回一个新的函数的技术，称为函数的柯里化。一般可用于在不侵入函数的前提下，为函数 预置通用参数，供屡次重复调用。

const add = function add(x) {
    return function (y) {
        return x + y
    }
}

const add1 = add(1)

add1(2) === 3
add1(20) === 21

21. 数组(array)

• map: 遍历数组，返回回调返回值组成的新数组

• forEach: 没法break，能够用try/catch中throw new Error来中止

• filter: 过滤

• some: 有一项返回true，则总体为true

• every: 有一项返回false，则总体为false

• join: 经过指定链接符生成字符串

• push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项

• unshift / shift: 头部推入和弹出，改变原数组，返回操做项

• sort(fn) / reverse: 排序与反转，改变原数组

• concat: 链接数组，不影响原数组， 浅拷贝

• slice(start, end): 返回截断后的新数组，不改变原数组

• splice(start, number, value...): 返回删除元素组成的数组，value 为插入项，改变原数组

• indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标

• reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev 为上次化简函数的return值，cur 为当前值(从第二项开始)

• 数组乱序：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort(function () {
    return Math.random() - 0.5;
});

• 数组拆解: flat: [1,[2,3]] --> [1, 2, 3]

Array.prototype.flat = function() {
    this.toString().split(',').map(item => +item )
}

浏览器

1. 跨标签页通信

不一样标签页间的通信，本质原理就是去运用一些能够 共享的中间介质，所以比较经常使用的有如下方法:

• 经过父页面window.open()和子页面postMessage

  • 异步下，经过 window.open('about: blank') 和 tab.location.href = '*'

• 设置同域下共享的localStorage与监听window.onstorage

  • 重复写入相同的值没法触发
  • 会受到浏览器隐身模式等的限制

• 设置共享cookie与不断轮询脏检查(setInterval)

• 借助服务端或者中间层实现

2. 浏览器架构

• 用户界面
• 主进程
• 内核
  • 渲染引擎
  • JS 引擎
    • 执行栈
  • 事件触发线程
    • 消息队列
      • 微任务
      • 宏任务
  • 网络异步线程
  • 定时器线程

3. 浏览器下事件循环(Event Loop)

事件循环是指: 执行一个宏任务，而后执行清空微任务列表，循环再执行宏任务，再清微任务列表

• 微任务 microtask(jobs): promise / ajax / Object.observe(该方法已废弃)
• 宏任务 macrotask(task): setTimout / script / IO / UI Rendering

4. 从输入 url 到展现的过程

• DNS 解析
• TCP 三次握手
• 发送请求，分析 url，设置请求报文(头，主体)
• 服务器返回请求的文件 (html)
• 浏览器渲染
  • HTML parser --> DOM Tree
    • 标记化算法，进行元素状态的标记
    • dom 树构建
  • CSS parser --> Style Tree
    • 解析 css 代码，生成样式树
  • attachment --> Render Tree
    • 结合 dom树 与 style树，生成渲染树
  • layout: 布局
  • GPU painting: 像素绘制页面

5. 重绘与回流

当元素的样式发生变化时，浏览器须要触发更新，从新绘制元素。这个过程当中，有两种类型的操做，即重绘与回流。

• 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时因为只须要UI层面的从新像素绘制，所以 损耗较少

• 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会从新渲染页面，称为回流。此时，浏览器须要从新通过计算，计算后还须要从新页面布局，所以是较重的操做。会触发回流的操做:

  • 页面初次渲染
  • 浏览器窗口大小改变
  • 元素尺寸、位置、内容发生改变
  • 元素字体大小变化
  • 添加或者删除可见的 dom 元素
  • 激活 CSS 伪类（例如：:hover）
  • 查询某些属性或调用某些方法
    • clientWidth、clientHeight、clientTop、clientLeft
    • offsetWidth、offsetHeight、offsetTop、offsetLeft
    • scrollWidth、scrollHeight、scrollTop、scrollLeft
    • getComputedStyle()
    • getBoundingClientRect()
    • scrollTo()

回流一定触发重绘，重绘不必定触发回流。重绘的开销较小，回流的代价较高。

最佳实践:

• css

  • 避免使用table布局
  • 将动画效果应用到position属性为absolute或fixed的元素上

• javascript

  • 避免频繁操做样式，可汇总后统一 一次修改
  • 尽可能使用class进行样式修改
  • 减小dom的增删次数，可以使用 字符串 或者 documentFragment 一次性插入
  • 极限优化时，修改样式可将其display: none后修改
  • 避免屡次触发上面提到的那些会触发回流的方法，能够的话尽可能用 变量存住

6. 存储

咱们常常须要对业务中的一些数据进行存储，一般能够分为 短暂性存储 和 持久性储存。

• 短暂性的时候，咱们只须要将数据存在内存中，只在运行时可用

• 持久性存储，能够分为 浏览器端 与 服务器端

  • 浏览器:
    • cookie: 一般用于存储用户身份，登陆状态等
      • http 中自动携带， 体积上限为 4K， 可自行设置过时时间
    • localStorage / sessionStorage: 长久储存/窗口关闭删除， 体积限制为 4~5M
    • indexDB
  • 服务器:
    • 分布式缓存 redis
    • 数据库

7. Web Worker

现代浏览器为JavaScript创造的 多线程环境。能够新建并将部分任务分配到worker线程并行运行，两个线程可 独立运行，互不干扰，可经过自带的 消息机制 相互通讯。

基本用法:

// 建立 worker
const worker = new Worker('work.js');

// 向主进程推送消息
worker.postMessage('Hello World');

// 监听主进程来的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
}

限制:

• 同源限制
• 没法使用 document / window / alert / confirm
• 没法加载本地资源

8. V8垃圾回收机制

垃圾回收: 将内存中再也不使用的数据进行清理，释放出内存空间。V8 将内存分红 新生代空间 和 老生代空间。

• 新生代空间: 用于存活较短的对象
  • 又分红两个空间: from 空间 与 to 空间
  • Scavenge GC算法: 当 from 空间被占满时，启动 GC 算法
    • 存活的对象从 from space 转移到 to space
    • 清空 from space
    • from space 与 to space 互换
    • 完成一次新生代GC
• 老生代空间: 用于存活时间较长的对象
  • 从 新生代空间 转移到 老生代空间 的条件
    • 经历过一次以上 Scavenge GC 的对象
    • 当 to space 体积超过25%
  • 标记清除算法: 标记存活的对象，未被标记的则被释放
    • 增量标记: 小模块标记，在代码执行间隙执，GC 会影响性能
    • 并发标记(最新技术): 不阻塞 js 执行
  • 压缩算法: 将内存中清除后致使的碎片化对象往内存堆的一端移动，解决 内存的碎片化

9. 内存泄露

• 意外的全局变量: 没法被回收
• 定时器: 未被正确关闭，致使所引用的外部变量没法被释放
• 事件监听: 没有正确销毁 (低版本浏览器可能出现)
• 闭包: 会致使父级中的变量没法被释放
• dom 引用: dom 元素被删除时，内存中的引用未被正确清空

可用 chrome 中的 timeline 进行内存标记，可视化查看内存的变化状况，找出异常点。

服务端与网络

1. http/https 协议

• 1.0 协议缺陷:

  • 没法复用连接，完成即断开，从新慢启动和 TCP 3次握手
  • head of line blocking: 线头阻塞，致使请求之间互相影响

• 1.1 改进:

  • 长链接(默认 keep-alive)，复用
  • host 字段指定对应的虚拟站点
  • 新增功能:
    • 断点续传
    • 身份认证
    • 状态管理
    • cache 缓存
      • Cache-Control
      • Expires
      • Last-Modified
      • Etag

• 2.0:

  • 多路复用
  • 二进制分帧层: 应用层和传输层之间
  • 首部压缩
  • 服务端推送

• https: 较为安全的网络传输协议

  • 证书(公钥)
  • SSL 加密
  • 端口 443

• TCP:

  • 三次握手
  • 四次挥手
  • 滑动窗口: 流量控制
  • 拥塞处理
    • 慢开始
    • 拥塞避免
    • 快速重传
    • 快速恢复

• 缓存策略: 可分为 强缓存 和 协商缓存

  • Cache-Control/Expires: 浏览器判断缓存是否过时，未过时时，直接使用强缓存，Cache-Control的 max-age 优先级高于 Expires

  • 当缓存已通过期时，使用协商缓存

    • 惟一标识方案: Etag(response 携带) & If-None-Match(request携带，上一次返回的 Etag): 服务器判断资源是否被修改，
    • 最后一次修改时间: Last-Modified(response) & If-Modified-Since (request，上一次返回的Last-Modified)
      • 若是一致，则直接返回 304 通知浏览器使用缓存
      • 如不一致，则服务端返回新的资源

  • Last-Modified 缺点：

    • 周期性修改，但内容未变时，会致使缓存失效
    • 最小粒度只到 s， s 之内的改动没法检测到

  • Etag 的优先级高于 Last-Modified

2. 常见状态码

• 1xx: 接受，继续处理
• 200: 成功，并返回数据
• 201: 已建立
• 202: 已接受
• 203: 成为，但未受权
• 204: 成功，无内容
• 205: 成功，重置内容
• 206: 成功，部份内容
• 301: 永久移动，重定向
• 302: 临时移动，可以使用原有URI
• 304: 资源未修改，可以使用缓存
• 305: 需代理访问
• 400: 请求语法错误
• 401: 要求身份认证
• 403: 拒绝请求
• 404: 资源不存在
• 500: 服务器错误

3. get / post

• get: 缓存、请求长度受限、会被历史保存记录
  • 无反作用(不修改资源)，幂等(请求次数与资源无关)的场景
• post: 安全、大数据、更多编码类型

二者详细对好比下图:

 

 

4. Websocket

Websocket 是一个 持久化的协议， 基于 http ， 服务端能够 主动 push

• 兼容：

  • FLASH Socket
  • 长轮询： 定时发送 ajax
  • long poll： 发送 --> 有消息时再 response

• new WebSocket(url)

• ws.onerror = fn

• ws.onclose = fn

• ws.onopen = fn

• ws.onmessage = fn

• ws.send()

5. TCP三次握手

创建链接前，客户端和服务端须要经过握手来确认对方:

• 客户端发送 syn(同步序列编号) 请求，进入 syn_send 状态，等待确认
• 服务端接收并确认 syn 包后发送 syn+ack 包，进入 syn_recv 状态
• 客户端接收 syn+ack 包后，发送 ack 包，双方进入 established 状态

6. TCP四次挥手

• 客户端 -- FIN --> 服务端， FIN—WAIT
• 服务端 -- ACK --> 客户端， CLOSE-WAIT
• 服务端 -- ACK,FIN --> 客户端， LAST-ACK
• 客户端 -- ACK --> 服务端，CLOSED

7. Node 的 Event Loop: 6个阶段

• timer 阶段: 执行到期的setTimeout / setInterval队列回调
• I/O 阶段: 执行上轮循环残流的callback
• idle, prepare
• poll: 等待回调
  • 1. 执行回调
  • 2. 执行定时器
    • 若有到期的setTimeout / setInterval， 则返回 timer 阶段
    • 若有setImmediate，则前往 check 阶段
• check
  • 执行setImmediate
• close callbacks

跨域

• JSONP: 利用<script>标签不受跨域限制的特色，缺点是只能支持 get 请求

function jsonp(url, jsonpCallback, success) {
  const script = document.createElement('script')
  script.src = url
  script.async = true
  script.type = 'text/javascript'
  window[jsonpCallback] = function(data) {
    success && success(data)
  }
  document.body.appendChild(script)
}

• 设置 CORS: Access-Control-Allow-Origin：*
• postMessage

安全

• XSS攻击: 注入恶意代码
  • cookie 设置 httpOnly
  • 转义页面上的输入内容和输出内容
• CSRF: 跨站请求伪造，防御:
  • get 不修改数据
  • 不被第三方网站访问到用户的 cookie
  • 设置白名单，不被第三方网站请求
  • 请求校验

框架：Vue

1. nextTick

在下次dom更新循环结束以后执行延迟回调，可用于获取更新后的dom状态

• 新版本中默认是mincrotasks, v-on中会使用macrotasks

• macrotasks任务的实现:

  • setImmediate / MessageChannel / setTimeout

2. 生命周期

• _init_

  • initLifecycle/Event，往vm上挂载各类属性
  • callHook: beforeCreated: 实例刚建立
  • initInjection/initState: 初始化注入和 data 响应性
  • created: 建立完成，属性已经绑定， 但还未生成真实dom
  • 进行元素的挂载： $el / vm.$mount()
  • 是否有template: 解析成render function
    • *.vue文件: vue-loader会将<template>编译成render function
  • beforeMount: 模板编译/挂载以前
  • 执行render function，生成真实的dom，并替换到dom tree中
  • mounted: 组件已挂载

• update:

  • 执行diff算法，比对改变是否须要触发UI更新
  • flushScheduleQueue
    • watcher.before: 触发beforeUpdate钩子 - watcher.run(): 执行watcher中的 notify，通知全部依赖项更新UI
  • 触发updated钩子: 组件已更新

• actived / deactivated(keep-alive): 不销毁，缓存，组件激活与失活

• destroy:

  • beforeDestroy: 销毁开始
  • 销毁自身且递归销毁子组件以及事件监听
    • remove(): 删除节点
    • watcher.teardown(): 清空依赖
    • vm.$off(): 解绑监听
  • destroyed: 完成后触发钩子

上面是vue的声明周期的简单梳理，接下来咱们直接以代码的形式来完成vue的初始化

new Vue({})

// 初始化Vue实例
function _init() {
     // 挂载属性
    initLifeCycle(vm) 
    // 初始化事件系统，钩子函数等
    initEvent(vm) 
    // 编译slot、vnode
    initRender(vm) 
    // 触发钩子
    callHook(vm, 'beforeCreate')
    // 添加inject功能
    initInjection(vm)
    // 完成数据响应性 props/data/watch/computed/methods
    initState(vm)
    // 添加 provide 功能
    initProvide(vm)
    // 触发钩子
    callHook(vm, 'created')
        
     // 挂载节点
    if (vm.$options.el) {
        vm.$mount(vm.$options.el)
    }
}

// 挂载节点实现
function mountComponent(vm) {
     // 获取 render function
    if (!this.options.render) {
        // template to render
        // Vue.compile = compileToFunctions
        let { render } = compileToFunctions() 
        this.options.render = render
    }
    // 触发钩子
    callHook('beforeMounte')
    // 初始化观察者
    // render 渲染 vdom， 
    vdom = vm.render()
    // update: 根据 diff 出的 patchs 挂载成真实的 dom 
    vm._update(vdom)
    // 触发钩子  
    callHook(vm, 'mounted')
}

// 更新节点实现
funtion queueWatcher(watcher) {
    nextTick(flushScheduleQueue)
}

// 清空队列
function flushScheduleQueue() {
     // 遍历队列中全部修改
    for(){
        // beforeUpdate
        watcher.before()
         
        // 依赖局部更新节点
        watcher.update() 
        callHook('updated')
    }
}

// 销毁实例实现
Vue.prototype.$destory = function() {
     // 触发钩子
    callHook(vm, 'beforeDestory')
    // 自身及子节点
    remove() 
    // 删除依赖
    watcher.teardown() 
    // 删除监听
    vm.$off() 
    // 触发钩子
    callHook(vm, 'destoryed')
}

3. 数据响应(数据劫持)

看完生命周期后，里面的watcher等内容实际上是数据响应中的一部分。数据响应的实现由两部分构成: 观察者( watcher ) 和 依赖收集器( Dep )，其核心是 defineProperty这个方法，它能够 重写属性的 get 与 set 方法，从而完成监听数据的改变。

• Observe (观察者)观察 props 与 state
  • 遍历 props 与 state，对每一个属性建立独立的监听器( watcher )
• 使用 defineProperty 重写每一个属性的 get/set(defineReactive）
  • get: 收集依赖
    • Dep.depend()
      • watcher.addDep()
  • set: 派发更新
    • Dep.notify()
    • watcher.update()
    • queenWatcher()
    • nextTick
    • flushScheduleQueue
    • watcher.run()
    • updateComponent()

你们能够先看下面的数据相应的代码实现后，理解后就比较容易看懂上面的简单脉络了。

let data = {a: 1}
// 数据响应性
observe(data)

// 初始化观察者
new Watcher(data, 'name', updateComponent)
data.a = 2

// 简单表示用于数据更新后的操做
function updateComponent() {
    vm._update() // patchs
}

// 监视对象
function observe(obj) {
     // 遍历对象，使用 get/set 从新定义对象的每一个属性值
    Object.keys(obj).map(key => {
        defineReactive(obj, key, obj[key])
    })
}

function defineReactive(obj, k, v) {
    // 递归子属性
    if (type(v) == 'object') observe(v)
    
    // 新建依赖收集器
    let dep = new Dep()
    // 定义get/set
    Object.defineProperty(obj, k, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
              // 当有获取该属性时，证实依赖于该对象，所以被添加进收集器中
            if (Dep.target) {
                dep.addSub(Dep.target)
            }
            return v
        },
        // 从新设置值时，触发收集器的通知机制
        set: function reactiveSetter(nV) {
            v = nV
            dep.nofify()
        },
    })
}

// 依赖收集器
class Dep {
    constructor() {
        this.subs = []
    }
    addSub(sub) {
        this.subs.push(sub)
    }
    notify() {
        this.subs.map(sub => {
            sub.update()
        })
    }
}

Dep.target = null

// 观察者
class Watcher {
    constructor(obj, key, cb) {
        Dep.target = this
        this.cb = cb
        this.obj = obj
        this.key = key
        this.value = obj[key]
        Dep.target = null
    }
    addDep(Dep) {
        Dep.addSub(this)
    }
    update() {
        this.value = this.obj[this.key]
        this.cb(this.value)
    }
    before() {
        callHook('beforeUpdate')
    }
}

4. virtual dom 原理实现

• 建立 dom 树

• 树的diff，同层对比，输出patchs(listDiff/diffChildren/diffProps)

  • 没有新的节点，返回
  • 新的节点tagName与key不变， 对比props，继续递归遍历子树
    • 对比属性(对比新旧属性列表):
      • 旧属性是否存在与新属性列表中
      • 都存在的是否有变化
      • 是否出现旧列表中没有的新属性
  • tagName和key值变化了，则直接替换成新节点

• 渲染差别

  • 遍历patchs， 把须要更改的节点取出来
  • 局部更新dom

// diff算法的实现
function diff(oldTree, newTree) {
     // 差别收集
    let pathchs = {}
    dfs(oldTree, newTree, 0, pathchs)
    return pathchs
}

function dfs(oldNode, newNode, index, pathchs) {
    let curPathchs = []
    if (newNode) {
        // 当新旧节点的 tagName 和 key 值彻底一致时
        if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
              // 继续比对属性差别
            let props = diffProps(oldNode.props, newNode.props)
            curPathchs.push({ type: 'changeProps', props })
            // 递归进入下一层级的比较
            diffChildrens(oldNode.children, newNode.children, index, pathchs)
        } else {
              // 当 tagName 或者 key 修改了后，表示已是全新节点，无需再比
            curPathchs.push({ type: 'replaceNode', node: newNode })
        }
    }

     // 构建出整颗差别树
    if (curPathchs.length) {
            if(pathchs[index]){
                pathchs[index] = pathchs[index].concat(curPathchs)
            } else {
                pathchs[index] = curPathchs
            }
    }
}

// 属性对比实现
function diffProps(oldProps, newProps) {
    let propsPathchs = []
    // 遍历新旧属性列表
    // 查找删除项
    // 查找修改项
    // 查找新增项
    forin(olaProps, (k, v) => {
        if (!newProps.hasOwnProperty(k)) {
            propsPathchs.push({ type: 'remove', prop: k })
        } else {
            if (v !== newProps[k]) {
                propsPathchs.push({ type: 'change', prop: k , value: newProps[k] })
            }
        }
    })
    forin(newProps, (k, v) => {
        if (!oldProps.hasOwnProperty(k)) {
            propsPathchs.push({ type: 'add', prop: k, value: v })
        }
    })
    return propsPathchs
}

// 对比子级差别
function diffChildrens(oldChild, newChild, index, pathchs) {
        // 标记子级的删除/新增/移动
    let { change, list } = diffList(oldChild, newChild, index, pathchs)
    if (change.length) {
        if (pathchs[index]) {
            pathchs[index] = pathchs[index].concat(change)
        } else {
            pathchs[index] = change
        }
    }

     // 根据 key 获取本来匹配的节点，进一步递归从头开始对比
    oldChild.map((item, i) => {
        let keyIndex = list.indexOf(item.key)
        if (keyIndex) {
            let node = newChild[keyIndex]
            // 进一步递归对比
            dfs(item, node, index, pathchs)
        }
    })
}

// 列表对比，主要也是根据 key 值查找匹配项
// 对比出新旧列表的新增/删除/移动
function diffList(oldList, newList, index, pathchs) {
    let change = []
    let list = []
    const newKeys = getKey(newList)
    oldList.map(v => {
        if (newKeys.indexOf(v.key) > -1) {
            list.push(v.key)
        } else {
            list.push(null)
        }
    })

    // 标记删除
    for (let i = list.length - 1; i>= 0; i--) {
        if (!list[i]) {
            list.splice(i, 1)
            change.push({ type: 'remove', index: i })
        }
    }

    // 标记新增和移动
    newList.map((item, i) => {
        const key = item.key
        const index = list.indexOf(key)
        if (index === -1 || key == null) {
            // 新增
            change.push({ type: 'add', node: item, index: i })
            list.splice(i, 0, key)
        } else {
            // 移动
            if (index !== i) {
                change.push({
                    type: 'move',
                    form: index,
                    to: i,
                })
                move(list, index, i)
            }
        }
    })

    return { change, list }
}

5. Proxy 相比于 defineProperty 的优点

• 数组变化也能监听到
• 不须要深度遍历监听

let data = { a: 1 }
let reactiveData = new Proxy(data, {
    get: function(target, name){
        // ...
    },
    // ...
})

6. vue-router

• mode
  • hash
  • history
• 跳转
  • this.$router.push()
  • <router-link to=""></router-link>
• 占位
  • <router-view></router-view>

7. vuex

• state: 状态中心
• mutations: 更改状态
• actions: 异步更改状态
• getters: 获取状态
• modules: 将state分红多个modules，便于管理

算法

其实算法方面在前端的实际项目中涉及得并很少，但仍是须要精通一些基础性的算法，一些公司仍是会有这方面的需求和考核，建议你们仍是须要稍微准备下，这属于加分题。

1. 五大算法

• 贪心算法: 局部最优解法
• 分治算法: 分红多个小模块，与原问题性质相同
• 动态规划: 每一个状态都是过去历史的一个总结
• 回溯法: 发现原先选择不优时，退回从新选择
• 分支限界法

2. 基础排序算法

• 冒泡排序: 两两比较

function bubleSort(arr) {
        var len = arr.length;
        for (let outer = len ; outer >= 2; outer--) {
            for(let inner = 0; inner <=outer - 1; inner++) {
                if(arr[inner] > arr[inner + 1]) {
                    [arr[inner],arr[inner+1]] = [arr[inner+1],arr[inner]]
                }
            }
        }
        return arr;
    }

• 选择排序: 遍历自身之后的元素，最小的元素跟本身调换位置

function selectSort(arr) {
    var len = arr.length;
    for(let i = 0 ;i < len - 1; i++) {
        for(let j = i ; j<len; j++) {
            if(arr[j] < arr[i]) {
                [arr[i],arr[j]] = [arr[j],arr[i]];
            }
        }
    }
    return arr
}

• 插入排序: 即将元素插入到已排序好的数组中

function insertSort(arr) {
    for(let i = 1; i < arr.length; i++) {  //外循环从1开始，默认arr[0]是有序段
        for(let j = i; j > 0; j--) {  //j = i,将arr[j]依次插入有序段中
            if(arr[j] < arr[j-1]) {
                [arr[j],arr[j-1]] = [arr[j-1],arr[j]];
            } else {
                break;
            }
        }
    }
    return arr;
}

3. 高级排序算法

• 快速排序
  • 选择基准值(base)，原数组长度减一(基准值)，使用 splice
  • 循环原数组，小的放左边(left数组)，大的放右边(right数组);
  • concat(left, base, right)
  • 递归继续排序 left 与 right

function quickSort(arr) {
    if(arr.length <= 1) {
        return arr;  //递归出口
    }
    var left = [],
        right = [],
        current = arr.splice(0,1); 
    for(let i = 0; i < arr.length; i++) {
        if(arr[i] < current) {
            left.push(arr[i])  //放在左边
        } else {
            right.push(arr[i]) //放在右边
        }
    }
    return quickSort(left).concat(current,quickSort(right));
}

• 希尔排序：不定步数的插入排序，插入排序

• 口诀: 插冒归基稳定，快选堆希不稳定

 

 

稳定性： 同大小状况下是否可能会被交换位置, 虚拟dom的diff，不稳定性会致使从新渲染；

4. 递归运用(斐波那契数列)： 爬楼梯问题

初始在第一级，到第一级有1种方法(s(1) = 1)，到第二级也只有一种方法(s(2) = 1)， 第三级(s(3) = s(1) + s(2))

function cStairs(n) {
    if(n === 1 || n === 2) {
        return 1;
    } else {
        return cStairs(n-1) + cStairs(n-2)
    }
}

5. 数据树

• 二叉树: 最多只有两个子节点
  • 彻底二叉树
  • 满二叉树
    • 深度为 h, 有 n 个节点，且知足 n = 2^h - 1
• 二叉查找树: 是一种特殊的二叉树，能有效地提升查找效率
  • 小值在左，大值在右
  • 节点 n 的全部左子树值小于 n，全部右子树值大于 n

 

 

• 遍历节点
  • 前序遍历
    • 1. 根节点
    • 2. 访问左子节点，回到 1
    • 3. 访问右子节点，回到 1
  • 中序遍历
    • 1. 先访问到最左的子节点
    • 2. 访问该节点的父节点
    • 3. 访问该父节点的右子节点， 回到 1
  • 后序遍历
    • 1. 先访问到最左的子节点
    • 2. 访问相邻的右节点
    • 3. 访问父节点， 回到 1
• 插入与删除节点

6. 天平找次品

有n个硬币，其中1个为假币，假币重量较轻，你有一把天平，请问，至少须要称多少次能保证必定找到假币?

• 三等分算法:
  • 1. 将硬币分红3组，随便取其中两组天平称量
    • 平衡，假币在未上称的一组，取其回到 1 继续循环
    • 不平衡，假币在天平上较轻的一组， 取其回到 1 继续循环

结语

因为精力时间及篇幅有限，这篇就先写到这。你们慢慢来不急。。🤪。下篇打算准备如下内容，我也得补补课先:

• Webpack相关
  • 原理
  • Loader
  • Plugin
• 项目性能优化
  • 首屏渲染优化
  • 用户体验优化
  • webpack 性能优化
• Hybrid 与 Webview
  • webview 加载过程
  • bridge 原理
  • hybrid app 经验
• 框架: React

在面试中，不少领域并无真正的答案，能回答到什么样的深度，仍是得靠本身真正的去使用和研究。知识面的广度与深度应该并行，尽可能的拓张本身的领域，至少都有些基础性的了解，在被问到的时候能够同面试官唠嗑两句，而后在本身喜欢的领域，又有着足够深刻的研究，让面试官以为你是这方面的专家。

转载出处： https://juejin.im/post/5c64d15d6fb9a049d37f9c20