划重点

资料四处收集来的，如果侵害的原作者的利益，如果造成了侵权等问题，请赶快联系！马上删除！！祝各位早日求职上岸！！冲鸭！！如果有错误，

小菜鸡的面试の初体验https://juejin.cn/post/6844904078271594504

key相同，组件有变化，则只会更新变化的属性，如果key不同，则会销毁之前的组件，整个组件重新渲染

简而言之，改变 key 值来重渲染组件是一种——相较于复杂componentWillReceiveProps生命周期——十分低成本的方式。

 

31. React系列

组件的render函数在何时被调用

每一次state的更改都会使得render函数被调用，但页面的dom不一定会发生修改

组件的生命周期

1. 初始化阶段（Mounting）
2. 更新阶段（Updating）
3. 析构阶段（Unmounting）

初始化阶段：

• constructor(): 用于绑定事件，初始化state
• componentWillMount(): 组件将要挂载，在render之前调用，每一个组件render之前就调用，一般在这操作state。可以在服务端调用
• render(): 用作渲染dom
• componentDidMount(): 在render之后，而且是所有子组件都render之后才调用，通常用于异步请求数据，因为在这里组件都初始化完成了

更新阶段：

• componentWillReceiveProps(nextProps): 在这里可以拿到即将改变的状态，可以在这里通过setState方法设置state
• shouldComponentUpdate(nextProps, nextState): 他的返回值决定了接下来的声明周期是否会被调用，默认返回true
• componentWillUpdate(): 不能在这里改变state，否则会陷入死循环
• componentDidUpdate(): 和componentDidMount()类似，在这里执行Dom操作以及发起网络请求

析构阶段

• componentWillUnmount(): 主要执行清除工作，比如取消网络请求，清除事件监听

Virtual Dom

难点在于如何判断旧的对象和新的对象之间的差异 react的办法是只对比同层的节点，而不是跨层对比
步骤分为两步：

• 首先从上至下，从左往右遍历对象，也就是树的深度遍历，这一步会将每一个节点添加索引，便于最后渲染差异
• 一旦节点有子元素，就去判断子元素是否有不同

Virtual Dom的算法实现主要是三步

1. 通过js来模拟创建dom对象
2. 把虚拟dom转换成真实dom插入页面中
3. 发生变化时候，比较两颗树的差异，生成差异对象
4. 根据差异对象渲染差异到真实dom

setState同步？异步？

1. setState只在合成事件（JSX中的onClick、onChange等）和钩子函数中是异步的，在原生事件和setTimeout中都是同步的
2. setState的“异步”并不是说内部是由异步代码实现的，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，当然也可以用setState第二个参数来获得
3. setState的批量更新优化是建立在“异步”（合成事件，钩子函数）上的。在原生时间和setTimeout中不会批量更新，在“异步”中如果对一个值多次进行setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新

class App extends React.Component {
  state = { val: 0 }

  componentDidMount() {
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)

    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)

    setTimeout(_ => {
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val);

      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
    }, 0)
  }

  render() {
    return <div>{this.state.val}</div>
  }
}

因为在钩子函数里面setState是异步的，所以前两次无法获得val的值，所以都输出0，然后到setTimeout的时候，setState已经更新了，而且因为是批量更新所以只执行最后一次，所以到setTimeout的时候，val是1。因为setTimeout中是同步的，所以第一次是2，第二次是3

32. React常见面试题

调用setState之后发生了什么

在代码调用setState函数之后，React会将传入的参数对象与组件当前的状态合并，然后触发调和过程（Reconciliation），经过调和过程，React会以相对高效的方式根据新的状态构建React元素树，并且重新渲染整个UI界面。React得到元素树之后，会计算出新树与老树的节点差异，然后根据差异对界面进行最小化的重渲染。在差异算法中，React能够相对精确的知道那些地方发生了改变，这就保证了按需更新，而不是全部重新渲染

React中Element和Component的区别

React Element是描述屏幕上可见内容的数据结构，是对于UI的对象表述。而React Component这是可以接受参数输入并且返回某个React Element的函数或者类

什么情况下你会优先选择使用Class Component而不是Functional Component

当组件需要内部状态以及生命周期函数的时候就选择Class Component，否则就是用Functional Component

React中refs的作用是什么

Refs是React提供的可以安全访问dom元素或者某个组件实例的句柄，可以为元素添加ref属性然后再回调函数中接受该元素在dom树中的句柄

React中keys的作用

keys是React用于追踪列表中哪些元素被修改、添加或者删除的辅助标识，需要保证key的唯一性。React diff算法中，会借助key值来判断元素是新建的还是移动而来的，从而减少不必要的元素重渲染。此外React还需要借助Key值来判断元素与状态的关联关系

受控组件与非受控组件的区别

• 受控组件指那些将表单数据给React统一管理的组件，需要使用setState来更新表单的值

this.state = {
    value: ‘‘
}

...

handleChange = (e) => {
    this.setState({
        value: e.target.value
    })
}

...

<input onChange={() => this.handleChange} />

• 非受控组件就是由dom来存放表单数据，我们可以使用refs来操控dom元素

handleChange = () => {
    console.log(this.input.value)
}

...

<input refs={(input) => this.input = input}
    onChange={() => this.handleChange} />

尽管非受控组件比较容易实现，但是我们有时候会需要对数据进行处理，使用受控组件会更加容易

在声明周期中哪一步应该发起Ajax请求

应该放在componentDidMount()

• Fiber调和算法会影响到compnentWillMount的触发次数，如果放在里面，可能会发起多次Ajax请求
• 如果放在其他生命周期中，假设我们获取了Ajax请求的结果，并且添加到组件的状态中，未挂载的组件就会报错。而在componentDidMount中就不会有这些问题了

shouldComponentUpdate的作用是什么，为何他如此重要

shouldComponentUpdate允许我们手动的判断组件是否更新，就可以避免不必要的更新渲染

React中的事件处理逻辑

为了解决跨浏览器兼容性的问题，React会将浏览器原生事件封装为合成事件传入设置的事件处理器中。合成事件与原生时间采用相同的接口，不过他们屏蔽了底层浏览器的细节差异，保证了行为的一致性。React没有将事件依附在子元素上，而是将所有事件发送到顶层 document 进行处理

JSX上面的事件全部绑定在 document 上，不仅减少了内存消耗，而且组件销毁的时候可以统一移除事件

如果我们不想事件冒泡的话，应该是调用event.preventDefault，而不是传统的event.stopPropagation

createElement和cloneElement的区别是什么

createElement函数是JSX编译之后使用的创建Element的函数，而cloneElement这是复制某个元素并传入新的Props

setState函数的第二个参数的作用是什么

是一个回调函数，这个函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以通过这个函数来判断更新渲染是否完成

为什么虚拟dom会提高性能

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能 具体步骤如下：

1. 使用js来模拟创建一个dom
2. 将这个虚拟dom构建真实dom，插入到页面中
3. 状态变更时，比较两颗对象树的差异，生成差异对象
4. 根据差异对象进行更新

diff算法

• 把树形结构按照层次分解，只比较同级元素
• 为列表结构的每一个元素都添加唯一的key属性，方便比较
• 如果是同一类型的组件，则按照tree diff一样遍历
• 如果不是同一类，则该组件判断为dirty component，从而替换整个组件下的所有子节点，就不用花时间来比较差异了
• 合并操作，调用setState的时候会将组件标记为dirty，到一个事件循环结束，React检查所有标记dirty的component重新绘制。这样dom只会被更新一次，节约性能
• 选择性子树渲染，利用shouldComponentUpdate来提高diff性能

diff算法的三种优化策略

1. 树的优化策略

• 层级控制，diff树同层只比较同一层次的节点
• 如果某个节点不存在，则这个节点直接删除
• 跨层级比较会进行相应的创建或者删除

2. 组件的优化策略

• 是否为同一类型，有则使用tree diff
• 不是同一类型，则判断为dirty component。从而替换掉整个组件下的子节点
• 对于同一类型的组件，可以使用shouldComponentUpdate来手动终止diff算法，加快渲染速度

3. 元素的优化策略

• 插入，全新的节点需要执行插入操作
• 移动，节点本身存在，需要进行移动
• 删除，结构相同内容不同，无需直接复用，需要删除重建
• 基于唯一标记key来进行计算，快速定位

react性能优化

• 利用shouldComponentUpdate来避免不必要的dom操作
• 使用key来帮助React识别列表子组件的最小变化
• React.memo
• SSR
• render里面不要使用箭头函数或者bind，应该再constructor中bind

react的坑点

• componentWillUnmounted
• this.setState不同步
• pureComponent如果prop是多层对象，则不更新

简述Flux思想

Flux最大的特点就是，数据单向流动

1. 用户访问View
2. View发出用户的Action
3. Dispatcher收到Action，要求Store进行相应的更新
4. Store更新后，发出一个“change”事件
5. View收到“change”事件后，更新页面
6. 使用防抖需要保持事件引用event.persist()

展示组件（Presentational component）和容器组件（Container component）之间有何不同

• 展示组件关心组件看起来是什么，专门通过props来接收数据和回调，一般不会有自己的状态
• 容器组件关心组件如何运作，容器组件会为展示组件或者其他容器组件提供数据和行为，一般拥有自己的状态，因为他是其他组件的数据源

组件的状态（state）和属性（props）有何区别

• state是一种数据结构，用于组件挂载时所需的数据默认值。一般由用户事件行为改变state
• props是组件的配置，由父组件传给子组件，props不可改变。

什么是高阶组件

高阶组件是一个以组件为参数并返回一个新组建的函数。HOC运行重用代码、逻辑和引导抽象。最常见是Redux的connect函数。HOC最好的方式是分享组件之间的行为。如果发现一个地方大量代码用来做一件事情，可以考虑重构为HOC

为什么建议setState的参数是一个callback而不是对象

因为state和props的更新可能是异步的，不能依赖他们去计算下一个state

除了在构造函数绑定this，还有其他办法吗

在回调中可以使用箭头函数，但是问题就是每次渲染都会创建一个新的回调

构造函数中为什么要调用super

因为super()被调用之前，子类是不可以使用this的

React的三种构建组件的方式

React.createClass、ES6 class、无状态函数

useEffect和useLayoutEffect的区别

调用时间不同

• useEffect是在组件渲染完之后执行
• useLayoutEffect是在组件渲染前就执行

useLayoutEffect比useEffect先执行

实现 useState 和 useEffect

React是使用类似单链表的形式来代替数组，通过next按顺序串联所有hook

useEffect特点：

1. 两个参数：一个回调函数，一个依赖数组
2. 如果依赖数组不存在，则callback每次render都触发
3. 如果依赖数组存在，只有他发生改变的时候才执行callback

 

let arr = [] // 一个数组，存储每一个hook
let index = 0 // 下标，存取每个hook对应的位置

function useState(init){
    arr[index] = arr[index] || init // 如果存在则用之前的值
    const cur = index // 设置一个变量存储当前下标
    
    function setState(newState){
        arr[cur] = newState
        render() // 渲染，页面触发更新
    }
    
    return [arr[index++], setState]
}

function useEffect(callback, deps){
    const hasNoDeps = !deps // 如果没有依赖，则直接每次更新
    const lastDeps = arr[index] // 获取上一次的依赖数组
    const hasChangeDeps = lastDeps
      ? !deps.every((e, i) => e === lastDeps[i]) // 如果每一项都相同
      : true
    if(hasNoDeps || hasChangeDeps){
        callback()
        arr[index] = deps
    }
    index++
}

React新特性

1. Lazy 和 Supense

import React, {Component, lazy, Suspense} from ‘react‘

const About = lazy(() => import(/*webpackChunkName: "about" */‘./About.jsx‘))

class App extends Component {
  render() {
    return (
      <div>
        // 我们需要用suspense来进行过渡，显示一个loading
        <Suspense fallback={<div>Loading...</div>}>
          <About></About>
        </Suspense>
        
        // 这样子是不行的，因为还没有加载完成不知道显示什么
        <!--<About></About>-->
      </div>
    );
  }
}

export default App;

2. 错误边界（Error boundaries）

class App extends Component {
  state = {
    hasError: false,
  }
  static getDerivedStateFromError(e) {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return <div>error</div>
    }
    return (
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <About></About>
        </Suspense>
      </div>
    );
  }
}

3. React.memo React.memo适用于函数组件，不适用于class组件

与pureComponent类似，但是pureComponent提供的shouldComponentUpdate只是对比传入的props本身有没有变化，如果内部的值变了，他也不会更新。例如

class Foo extends PureComponent {
  render () {
    console.log(‘Foo render‘);
    return <div>{this.props.person.age}</div>;
  }
}

person: {
  count: 0,
  age: 1
}

// person.age++, 本来应该触发更新，但是不会因为props的第一级没有发生变化

这时候我们可以用memo来优化一下

const Foo = memo(function Foo (props) {
  console.log(‘Foo render‘);
  return <div>{props.person.age}</div>;
})

memo的第一个参数是函数组件，第二个是与shouldComponentUpdate类似是一个函数

(nextProps, nextState)=>{
    
}

4. hook的优势

• 函数组件没有this的问题
• 自定义hook方便复用状态逻辑
• 副作用关注点分离
• 写起来更加简单、易懂

5. hook的缺点

• hook的运行次数可能会比你预期的还要多
• 有点难以维护useEffect的依赖项

React 状态提升

常见于子组件的数据存在父组件中

// 父组件
class AllInput extends React.Component {
    constructor(props) {
        super(props)
        this.state = { content: ‘‘ }
        this.handleContentChange = this.handleContentChange.bind(this)
    }
    handleContentChange(newContent) {
        this.setState({ content: newContent })
    }
    
    render() {
        return (
            <div>
                <Input content={ this.state.content } onContentChange={ this.handleContentChange }/>
                <br /><br />
                <Input content={ this.state.content } onContentChange={ this.handleContentChange }/>
            </div>
        )
    }
}


// 子组件
class Input extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) { 
        setState（修改数据的方法）
        this.props.onContentChange(e.target.value)
    }

    render() {
        return (
            <input type=‘text‘ value={ this.props.content } onChange={ this.handleChange } />
        )
    }
}

高阶函数

高阶函数就是接受一个或者多个函数然后返回一个函数的东西

主要功能有两个

属性代理

属性代理有三个常用的作用

• 操作props

function HigherOrderComponent(WrappedComponent) {
    return class extends React.Component {
        render() {
            const newProps = {
                name: ‘大板栗‘,
                age: 18,
            };
            return <WrappedComponent {...this.props} {...newProps} />;
        }
    };
}

这样子，就可以将自定义的props传给子组件了

• 抽离state

// 普通组件Login
import React, { Component } from ‘react‘;
import formCreate from ‘./form-create‘;

@formCreate
export default class Login extends Component {
  render() {
    return (
      <div>
        <div>
          <label id="username">
            账户
          </label>
          <input name="username" {...this.props.getField(‘username‘)}/>
        </div>
        <div>
          <label id="password">
            密码
          </label>
          <input name="password" {...this.props.getField(‘password‘)}/>
        </div>
        <div onClick={this.props.handleSubmit}>提交</div>
        <div>other content</div>
      </div>
    )
  }
}

//HOC
import React, { Component } from ‘react‘;

const formCreate = WrappedComponent => class extends Component {

  constructor() {
    super();
    this.state = {
      fields: {},
    }
  }
  onChange = key => e => {
    const { fields } = this.state;
    fields[key] = e.target.value;
    this.setState({
      fields,
    })
  }
  handleSubmit = () => {
    console.log(this.state.fields);
  }
  getField = fieldName => {
    return {
      onChange: this.onChange(fieldName),
    }
  }
  render() {
    const props = {
      ...this.props,
      handleSubmit: this.handleSubmit,
      getField: this.getField,
    }
    return (<WrappedComponent
      {...props}
    />);
  }
};
export default formCreate;

例如这样，就可以将输入框的state抽离出来

• 操作refs

import React, { Component } from ‘react‘;

const refHoc = WrappedComponent => class extends Component {

  componentDidMount() {
    console.log(this.instanceComponent, ‘instanceComponent‘);
  }

  render() {
    return (<WrappedComponent
      {...this.props}
      ref={instanceComponent => this.instanceComponent = instanceComponent}
    />);
  }
};

export default refHoc;

这样就可以获取组件的示例了
不可以再无状态组件（函数类型组件）上使用refs，因为无状态组件没有实例

反向继承

function HigherOrderComponent(WrappedComponent) {
    return class extends WrappedComponent {
        render() {
            return super.render();
        }
    };
}

反向继承就是一个函数接收一个组件作为参数传入，然后返回一个继承该组件的类，在该类的render里面调用super.render()

• 可以操作state，但是会难以维护
• 渲染劫持

渲染劫持我们可以控制组件的render，有条件的展示组件 例如

1. 条件渲染

function withLoading(WrappedComponent) {
    return class extends WrappedComponent {
        render() {
            if(this.props.isLoading) {
                return <Loading />;
            } else {
                return super.render();
            }
        }
    };
}

这样就可以按条件来控制组件渲染了

2. 修改render输出

  //hijack-hoc
  import React from ‘react‘;

  const hijackRenderHoc = config => WrappedComponent => class extends WrappedComponent {
    render() {
      const { style = {} } = config;
      const elementsTree = super.render();
      console.log(elementsTree, ‘elementsTree‘);
      if (config.type === ‘add-style‘) {
        return <div style={{...style}}>
          {elementsTree}
        </div>;
      }
      return elementsTree;
    }
  };

  export default hijackRenderHoc;
  
  //usual
  @hijackRenderHoc({type: ‘add-style‘, style: { color: ‘red‘}})
  class Usual extends Component {
    ...
  }

HOC存在的问题

• 静态方法丢失
• refs属性不能透传
• 反向继承不能保证子组件完整被解析

HOC约定

• props保持一致
• 不能再函数式（无状态）组件中使用refs，因为他没有
• 不要改变子组件
• 可以添加包装名便于调试
• render里不要使用HOC

应用场景

1. 权限控制
2. 页面复用

React组件通信

• 父组件传子组件props
• 子组件调用父组件的回调函数
• 使用context
• 使用EventEmitter

为什么选择React而不是Vue

• React是函数式思想，状态逻辑什么的都是通过参数传入
• 通过js来操作一切，css什么的也可以使用js的方式
• 社区十分强大，很多功能由社区一起努力做出
• UI库很棒
• JSX让组件变得可读性更好，组件之间的结构看的比较清楚
• 支持服务端渲染，更好的SEO和渲染性能

React 与 MVVM 的关系

• M(odal): 对应组件中生命周期啊，state这些数据
• v(iew): 对应虚拟dom生成的真是dom，还有样式等
• V(iew)-M(odal): 对应组件中的JSX会通过diff算法将虚拟dom转换为真实dom

React的单向绑定与双向绑定的区别

一般只有UI表单控件需要双向绑定。

• 单向绑定值UI表单变化的时候需要我们手动更新状态，也就是设置监听事件onChange等
• 双向绑定则自动更新

在表单交互很多的时候，单向绑定数据更容易追踪管理和维护，但是需要写较多的代码

33. CSRF 和 XSS

区别

• CSRF需要登录之后操作，XSS不需要
• CSRF是请求页面api来实现非法操作，XSS是向当前页面植入js脚本来修改页面内容

CSRF

跨站点伪造请求
用户在一个网站登录之后，产生一个cookie，此时若打开了一个新的网址，此网址返回了一些恶意的请求，就属于CSRF攻击

• 预防

1. 验证http reference
2. 请求地址中添加token验证
3. 请求头中添加token验证

XSS

跨站脚本攻击，一般是通过web页面插入恶意js代码来攻击。 主要分为三类：

1. 反射性: xss代码在请求url中攻击
2. 存储型: 将攻击脚本存入服务端，从而传播
3. dom型: 通过dom修改页面内容

• 预防

1. 输入过滤: 例如过滤<script>等
2. 输出转义: 例如将<,>,/等字符利用转义符号转换一下
3. 使用httponly: 让js脚本无法访问cookie
4. 尽量使用post方法，使用get的时候限制一下长度

总结

• 加入token是为了防止CSRF的而不是XSS
• CSRF的攻击是因为浏览器自动带上cookie，而不会自带token

34. localStorage 和 sessionStorage 和 cookie

localStorage

生命周期是永久，只能存字符串类型

• 跨域 使用iframe与postMessage实现

sessionStorage

生命周期为，当前窗口或标签页未被关闭，一旦关闭则存储的数据全部清空

cookie

cookie生命周期在过期时间之前都有效，同浏览器下，所有同源窗口之间共享

cookie的属性

• name: 必须，定义cookie的名称
• value: 必须，指定cookie的值
• expires: 指定过期时间，采用UTC或GMT格式，如果不设置cookie只会在当前会话（session）有效，浏览器窗口关闭cookie就会删除
• domain: 指定cookie所在域名，默认为设定cookie时候的域名，所指定的域名必须是当前发送cookie的一部分，只有访问的域名匹配domain属性，cookie才会发送
• path: 指定路径，必须是绝对路径，默认为请求该cookie的网页路径，只有path属性匹配向服务器发送的路径，cookie才会发送，只要path属性匹配发送路径的一部分就可以了，例如path=/blog，发送的路径是/blogroll也可以。path属性生效的前提是domain属性匹配
• secure: 指定cookie只能在加密协议https下发送到服务器，如果通信是https协议，自动打开
• max-age: 用来指定cookie有效期，max-age优先级高于expires
• httponly: httponly属性用于设置该cookie不能被JavaScript访问，主要是为了防止xss工具盗取cookie

总结

• 不同浏览器无法共享localStorage和sessionStorage
• 相同浏览器不同页面之间可以共享相同的localStorage（页面属于相同域名和端口）
• 相同浏览器不同标签页中无法共享sessionStorage的信息

35. BFC 及其作用

BFC就是格式化上下文，相当于一个容器，里面的元素和外部相互不影响，创建的方式有：

1. html根元素
2. float浮动
3. 绝对定位元素position: fixed || absolute
4. overflow不为visiable
5. display为table、inline-block、flex

BFC主要的作用是

1. 清除浮动
2. 防止同一个BFC中相邻元素间的外边距重合
3. BFC元素和浮动元素不会重叠
4. BFC在计算高度时会把浮动元素也计算进去

36. 实现 (5).add(3).minus(2) 功能

Number.prototype.add = function(n) {
  return this + n;
};
Number.prototype.minus = function(n) {
  return this - n;
};

37. 连续赋值

例1：

var a = 3;
var b = a = 5;

=

var a = 3
var a = 5
var b = a

所以最后a和b都是5

例2：

var a = { n: 1 }
var b = a

a.x = a = { n: 2 }

一开始a和b都引用对象{n:1}，然后到赋值语句
如果赋值语句中出现.则他会比=先一步执行，也就是说，我们先给a.x开辟一个空间
也就是说现在的a和b都是变成了

{
  n: 1,
  x: {
      n: 2
  }
}

接下来到a的赋值了，a现在就变成了

{
    n: 2
}

38. display: none, visibility: hidden 和 opacity: 0

• display: none: 不占空间，不能点击，一般用于隐藏元素，会引发回流，性能开销大，非继承属性，子孙节点改变也无法显示（父元素为none）
• visibility: hidden: 占据空间，不能点击，显示不会导致页面结构变化，不会撑开，属于重绘操作，是继承属性，子孙节点可以通过修改显示出来
• opacity: 0: 占据空间，可以点击，一般与transition一起用

39. for 和 forEach 的性能

for 比 forEact 快 因为

• for没有额外的函数调用栈，和上下文

40. react-router的<Link> 和 <a> 有何区别

是禁用了标签的默认事件，他只会更新匹配的页面的内容，而不会刷新整个页面。他使用的是`history`来进行跳转，会改变url，但是不会刷新页面

41. 执行上下文

• 全局执行上下文：默认的上下文，任何不在函数内部的代码都在全局上下文里面。他会执行两件事情： 创建一个全局的window对象，并且设置this为这个全局对象。一个程序只有一个全局对象
• 函数执行上下文：每当一个函数被调用，就会为该函数创建一个新的上下文，每个函数都有自己的上下文，不过是在函数被调用的时候创建的。函数上下文可以有任意多个，每当一个新的执行上下文被创建，他会按照定义的顺序执行一系列的步骤
• Eval函数执行上下文：执行在eval函数内部的代码有他自己的执行上下文

42. 执行栈

执行栈就是一个调用栈，是一个后进先出数据结构的栈，用来存储代码运行时创建的执行上下文

let a = ‘Hello World!‘;

function first() {
  console.log(‘Inside first function‘);
  second();
  console.log(‘Again inside first function‘);
}

function second() {
  console.log(‘Inside second function‘);
}

first();
console.log(‘Inside Global Execution Context‘);

 

43. 创建执行上下文

分为两个阶段

• 创建阶段
• 执行阶段

创建阶段

代码执行前会创建执行上下文，会发生三件事

1. this绑定
2. 创建词法环境组件
3. 创建变量环境组件

this绑定

全局执行上下文中，this指向全局对象

函数执行上下文中，this取决于函数是如何被调用的。如果他被一个引用对象调动，那么this会设置成那个对象。否则是全局对象

let foo = {
  baz: function() {
  console.log(this);
  }
}

foo.baz();   // ‘this‘ 引用 ‘foo‘, 因为 ‘baz‘ 被
             // 对象 ‘foo‘ 调用

let bar = foo.baz;

bar();       // ‘this‘ 指向全局 window 对象，因为
             // 没有指定引用对象

词法环境

是一个用代码的词法嵌套结构定义标识符和具体变量和函数关联的东西。用来存储函数声明和let, const声明的变量绑定

变量环境

同样是一个词法环境，用来存储var变量绑定

let a = 20;
const b = 30;
var c;

function multiply(e, f) {
 var g = 20;
 return e * f * g;
}

c = multiply(20, 30);

只有在调用函数multipy的时候才会创建函数执行上下文，let和const一开始不会关联任何值，但是var已经会设置为undefined了，这就是常说的变量声明提升

44. 事件循环

任务分为两类

• 同步任务
• 异步任务

 

 

宏任务

• 主体代码
• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame

微任务

• process.nextTick
• mutation.observer
• Promise.then cath finally

45. link 与 @import

• link属于html标签，@import属于css提供的
• 页面加载的时候link就加载，而@import是等页面加载完成之后再加载css
• link不存在兼容性问题
• link权重更大

46. 外边距重叠

• 两个相邻的外边距都是正数时，折叠效果是两者之间较大的
• 两个相邻的外边距都是负数时，折叠效果是绝对值最大的
• 两个外边距一正一负时候，效果是相加起来

47. 渐进增强 和 优雅改进

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进
• 优雅改进：一开始就构建好完整的功能，然后再对低版本浏览器进行兼容

区别：渐进增强是向上兼容，优雅改进是向下兼容

48. 立即执行函数

作用

• 不破坏全局的命名空间
• 如需使用，要将变量传入

(function(x){
  console.log(x);
}(12345))

49. HTTP2.0 与 HTTP1.1

HTTP2.0

1. HTTP2.0基本单位为二进制，以往是采用文本形式，健壮性不是很好，现在采用二进制格式，更方便更健壮
2. HTTP2.0的多路复用，把多个请求当做多个流，请求响应数据分成多个帧，不同流中的帧交错发送，解决了TCP连接数量多，TCP连接慢，所以对于同一个域名只用创建一个连接就可以了
3. HTTP2.0压缩消息头，避免了重复请求头的传输，又减少了传输的大小
4. HTTP2.0服务端推送，浏览器发送请求后，服务端会主动发送与这个请求相关的资源，之后浏览器就不用再次发送后续的请求了。
5. HTTP2.0可以设置请求优先级，可以按照优先级来解决阻塞的问题

HTTP1.1

• 缓存处理新增etag、if-none-match之类的缓存头来控制缓存
• 长连接，可以在TCP连接上发送多个请求和响应

50. css动画与js动画的区别

• css性能好
• css代码逻辑相对简单
• js动画控制好
• js动画兼容性好
• js可以实现动画多
• js可以添加事件

51. offset、client和scroll的属性

• client：padding + content - 滚动条
• offset：padding + content + boder
• scroll：padding + 实际的content

52. 手撕代码题

1. 输入根节点，打印标签路径，以及路径上data-v最大值

const root = document.getElementById("root");

function walk(node, path, max) {
  if (!node) {
    return;
  }
  path = [...path, node.tagName];
  max = Math.max(max, node.dataset.v);
  console.log(path, max);
  for (let child of node.children) {
    walk(child, path, max);
  }
}
walk(root, [], -1)

...

<div id="root" data-v="3">
  <p data-v="1">p1</p>
  <span data-v="2">
    span1
    <span data-v="4">span2</span>
    <span data-v="5">
      <p>1</p>
    </span>
  </span>
  <p data-v="99">p2</p>
</div>

2. 实现compose函数

var arr = [func1, func2, func3];
function func1(ctx, next) {
  ctx.index++
  next();
}
function func2(ctx, next) {
  setTimeout(function () {
    ctx.index++
    next();
  });
}
function func3(ctx, next) {
  console.log(ctx.index);
}

compose(arr)({ index: 0 });

function compose(arr) {
  return function (ctx) {
    if (arr.length !== 0) {
      let func = arr.shift()
      func(ctx, next)
    }
    function next() {
      if (arr.length !== 0) {
        let func = arr.shift()
        func(ctx, next)
      }
    }
  }
}

3. 放大镜

碎碎酱：https://codepen.io/yinxin630/pen/gObvGGj

53. 行内元素的margin 和 padding

• 水平方向：水平方向上，都有效
• 垂直方向：垂直方向上，都无效，但是padding-bottom, padding-top会显示出效果，但是高度不会撑开，不会对周围元素有影响

54. 行内元素和块级元素

• 行内、块级元素可以相互转换
• 行内元素会在一条水平线上排列，块级则会在新的一行
• 行内元素不可以设置宽高，但是可以设置行高（line-height）
• 行内元素垂直方向上设置margin和padding无效，padding垂直方向有显示但是不会撑开，不会影响别的元素
• 块级可以包含行内元素和块级元素，行内元素只可以包含行内元素和文本

55. margin、padding和translate百分比是按照什么计算的

• margin：按照父元素的宽来计算的
• padding：按照父元素的宽来计算的
• translate：是按照本身的宽高计算的

56. display: inline-block元素之间有间隙

原因 inline-block对外是inline，对内是block，会将连续的空白符解析为一个空格

解决办法

• 删除空格
• 父元素设置font-size: 0
• 父元素设置letter-spacing: -4px
• 子元素设置vertical-align: bottom去除垂直间隙

57. HTTPS原理

HTTP是明文传输，传输的每一个环节都可能会被第三方窃取或者篡改。具体来说就是HTTP数据经过TCP层，然后经过WIFI路由器、运营商和目标服务器，都可能被中间人拿到数据并进行篡改，这就是常说的中间人攻击

HTTPS是一个加强版的HTTP。采用对称加密和非对称加密结合的方式来保护浏览器和服务端之间的通信安全。 对称加密算法加密数据 + 非对称加密算法交换密钥 + 数字证书验证身份 = 安全

HTTPS由两部分组成：HTTP + SSL/TLS，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据是加密后的数据

加密过程

首先浏览器会给服务器发送一个client_random和一个加密的方法列表

服务器接受后给浏览器返回另一个随机数server_random和加密方法

现在两者拥有三种相同的凭证: client_random, server_random和加密方法

接着用这个加密方法将两个随机数混合起来生成密钥，这个密钥就是浏览器和服务器通信的暗号了

对称加密和非对称加密

• 对称加密是最简单的方式，指的是加密和解密用的是同样的秘钥，优点是保证了消息的保密性，但缺点是密钥可能会泄露

• 非对称加密是说，如果有A、B两把密钥，用A加密过的数据包只能用B解密，反之用B加密的数据包只能由A解密，客户端在发消息的时候，先用公钥加密，服务器再用私钥解密。但是因为公钥不是保密的，可能会被窃取然后对消息进行篡改

数字证书和数字签名

为了解决非对称加密中公匙来源的不安全性。我们可以使用数字证书和数字签名来解决。

首先本地生成一对密钥，通过公钥去CA申请数字证书

• 数字签名：CA拿到信息后会通过单向的hash算法把信息加密，然后生成一个摘要，然后CA会用自己的私钥对摘要进行加密，最后得出的结果就是数字签名了

  

   

• 数字证书：最后CA会将申请的信息还有数字签名整合在一起，就生成了数字证书了，其实也就是一个公钥

  

   

• 数字证书如何起作用：

1. 客户端用CA的公钥解密数字证书，如果数字证书来源合法，解密成功后，客户端就获得了信息摘要了。然后客户端会按照和CA一样的hash算法将申请信息生成一份摘要。
2. 然后和解密出来的那份摘要进行对比，如果内容完整，则说明没有被篡改。客户端就可以从证书中拿到服务器的公钥和服务器进行安全的非对称加密通信了。服务器要想获得客户端的公钥也可以通过这个方式

握手过程

1. 客户端申请https通信发送一个随机数，还有加密方法
2. 服务器响应然后向客户端发送数字证书（公钥）还有随机数给客户端
3. 客户端TLS验证证书，拿到公钥，如果没有问题就生成一个随机值，然后用公钥加密传给服务器
4. 服务器收到后用私钥解密，拿到了对称密钥，之后可以通过这个密钥进行信息传输了，然后建立SSL连接通道
5. 共享密钥交换成功，客户端和服务端开始加密通信
6. 断开连接

客户端: 你好，我要发起一个 HTTPS 请求，请给我公钥
服务器: 好的，这是我的证书，里面有加密后的公钥
客户端: 解密成功以后告诉服务器: 这是我的 (用公钥加密后的) 对称秘钥。
服务器: 好的，我知道你的秘钥了，后续就用它传输。

使用

https加解密耗时比较长，也很消耗资源，如果不是安全性要求非常高可以不用

58. setImmediate() 和 process.nextTick()

• setTimeout为在指定时间之后就执行
• setImmediate设计是当前轮询阶段完成后就立即执行 如果放在同一个I/O循环内使用，setImmediate总是被优先调用，他的优势是如果在I/O周期内被调度的话，他会在所有定时器之前执行。他执行的方式是当前任务队列的尾部
• process.nextTick触发的是在当前执行栈的尾部，下一次事件循环之前，总是在异步之前。

为什么要使用process.nextTick()，因为可以允许用户处理错误，或者是在事件循环继续之前重试请求

59. 浏览器和node的事件循环

浏览器任务分为宏任务和微任务

• 宏任务：script中的代码、setTimeout、setInterval、I/O、UI render
• 微任务：promise、Object.observe、MutationObserver

node分为以下几种：

• microTask：微任务
• nextTick：process.nextTick
• timers: 各类定时器
• I/O callback：是否有已完成的I/O操作的回调函数，来自上一轮的轮训的残留，执行几乎所有的回调，但是不包括close，定时器还有setImmediate
• idle，prepare：仅在内部使用
• poll：等待新的I/O事件，会因timers和超时事件等结束时间，一般阻塞在这里
• check：执行setImmediate的回调
• close callback：关闭所有的closing handles，一些onclose事件

Node环境下

循环之前，会执行以下操作：

• 同步任务
• 发出异步请求
• 规划定时器生效的时间
• 执行process.nextTick()

开始循环 循环中进行的操作：

• 清空timers队列，清空nextTick队列，清空microTask队列
• 清空I/O队列，清空nextTick队列，清空microTask队列
• 清空check队列，清空nextTick队列，清空microTask队列
• 清空close队列，清空nextTick队列，清空microTask队列

区别

• node环境下的setTimeout定时器会依次一起执行，浏览器是一个一个分开的
• 浏览器环境下微任务的执行是每个宏任务执行之后，而node中微任务会在各个阶段之间执行，一个阶段结束立刻执行mircroTask

总结

浏览器环境下：

while(true){
    宏任务队列.shift()
    微任务队列全部任务()
}

Node环境下：

while(true){
    loop.forEach((阶段)=>{
        阶段全部任务()
        nextTick全部任务()
        microTask全部任务()
    })
}

60. React Fiber

原先React采用的是stack reconciler调度算法。页面可能会出现卡顿，因为setState之后React会立即开始调和过程，会遍历找不同，所有virtual dom都遍历完之后，才会渲染。在调和的过程时候，主线程被js占用了，所以交互、布局都会停止，就会卡顿

所以现在采用了Fiber reconciler来优化

• 任务拆分
• 更新暂停，终止和复用
• 设置优先级
• render可以返回多个元素

Scheduler

调度是fiber调和的一个过程

如果UI要有不错的表现，那就得考虑多点东西

• 并不是所有state都需要立刻更新，例如不在可视范围内的
• 不是所有更新优先级都是一样的，例如用户输入的优先级比请求资源展示要高
• 高优先级的应该打断低优先级的更新

所以调和的过程是每次只做一个小小的任务，完成之后查看还有没有优先级高的任务需要处理

Fiber数据结构

 

• return: 父节点
• child：第一个子节点
• sibling：兄弟节点

fiber {
  	stateNode: {},
    child: {},
    return: {},
    sibling: {},
}

任务拆分

Fiber拆分的单位是按照虚拟dom节点来拆，因为fiber tree是根据虚拟dom来构造出来的

任务暂停

Fiber利用浏览器的apirequestIdleCallback来让浏览器空闲的时候执行某种任务

function fiber(剩余时间) {
 if (剩余时间 > 任务所需时间) {
 做任务;
 } else {
 requestIdleCallback(fiber);
 }
}

使用requestAnimationFrame来渲染动画

优先级

{ 
 Synchronous: 1, // 同步任务，优先级最高
 Task: 2, // 当前调度正执行的任务
 Animation 3, // 动画
 High: 4, // 高优先级
 Low: 5, // 低优先级
 Offscreen: 6, // 当前屏幕外的更新，优先级最低
}

61. webpack流程

1. 初始化：从配置文件读取与合并参数，然后实例化插件new Plugin()
2. 开始编译：通过上一步获取的参数，初始化一个Complier对象加载插件，执行Compiler.run开始编译
3. 确定入口：根据配置中entry找出所有入口文件
4. 编译模块：从entry出发，调用配置的loader，对模块进行转换，同时找出模块依赖的模块，一直递归，一直到找到所有依赖的模块
5. 完成模块编译：这一步已经使用loader对所有模块进行了转换，得到了转换后的新内容以及依赖关系
6. 输出资源：根据入口与模块之间的依赖关系，组装成chunk代码块，生成文件输出列表
7. 输出成功：根据配置中的输出路径还有文件名，把文件写入系统，完成构建

62. webpack的热更新

主要依赖webpack, express, websocket

• 使用express启动本地服务，当浏览器访问的时候做出相应
• 服务端和客户端使用websocket实现长连接
• webpack监听源文件的变化
  • 每次编译完成之后会生成hash值，已改动模块的json文件，已改动模块代码的js文件
  • 编译完成后通过socket向客户端推送当前编译的hash值
• 客户端的websocket监听到有文件改动推送过来的hash值，会和上一次进行对比
  • 一致就走缓存
  • 不一致则通过ajax和jsonp获取最新的资源
• 使用内存文件系统去替换有修改的内容实现局部更新

63. CommonJs 与 ES6模块化区别

• CommonJs支持动态导入，ES6不支持
• CommonJs是同步导入，ES6是异步导入
• CommonJs导入的时候是值拷贝，如果导出变了他也不会变，但是ES6是引用的，如果导出变了，导入的部分也会变了

用法

• 导出：CommonJs是module.exports，ES6是export / export default
• 导入：CommonJs是const x = require(‘xx‘)，ES6是import xx from ‘xxx‘

64. 箭头函数和普通函数

普通函数

• 一般this指向全局对象window
• 作为对象方法调用的时候，this指向对象
• 作为构造函数时候，this指代new的对象
• 可以通过call、apply来改变this

箭头函数

• this总是指向词法作用域
• 无法通过call、apply改变this

65. node读取文件转换为buffer

const fs = require(‘fs‘)
const path = require(‘path‘)
const mimeType = require(‘mime-types‘) // 文件类型

const filePath = path.resolve(‘./01.png‘)
const data = fs.readFileSync(filePath)
const buffer = new Buffer(data).toString(‘base64‘)
const base64 = `data:${mimeType.lookup(filePath)};base64,${buffer}`
console.log(base64)

66. sort函数

• 数量小于10的数组使用插入排序
• 数量大于10的数组使用快排

67. 闭包 和 自执行函数

闭包

优点

• 可以将局部变量一直存在内存中
• 可以避免使用全局变量

缺点：

• 占用内存变多，可能导致内存泄漏

自执行函数

• 避免作用域命名污染
• 提升性能，减少对作用域的查找
• 避免全局命名冲突
• 保存闭包状态

区别

• 立即执行函数声明完立刻执行，一般只用于一次
• 闭包主要是为了让外部函数可以访问内部变量，减少了全局变量的使用

68. 0.1 + 0.2 ！== 0.3

js采用IEEE 754的双精度标准来进行计算，如果他碰到无法整除的小数的时候，就会取一个近似值，如果足够接近就觉得是那个值了

69. React服务端渲染

服务端渲染就是React通过Node.js转换成HTML再返回给浏览器，这个过程被称为“同构”，因为应用程序的大部分代码都可以在服务器和客户端上运行

优点

与传统的SPA单页应用程序比，

• 更好的SEO，因为搜索引擎等爬虫工具可以直接查看完全渲染的页面
• 更好的用户体验，如果网络缓慢，或者运行缓慢的设备，服务器渲染就很好

弊端

• 由于浏览器跟服务端有区别，document，window等可能获取不了，会报错
• 服务器会占用更多的内存

70. 前端路由的原理

• hash模式，后面带了个#，无论hash值怎么变，服务端都只会收到#号前的url,通过监听hashchange事件，根据hash来切换页面
• history模式，主要使用history.pushState和history.replaceState来改变URL，改变url只会更新浏览器的历史记录，不会引起页面更新，通过监听popstate来改变页面内容，同时禁止a标签的默认事件。

hash模式不需要后端配置，兼容性好，history模式需要后端配置才能使用

https://www.cnblogs.com/jcxfighting/p/11664231.html

71. Mobx原理

 

 

 特点：

• 开发难度低
• 代码量少
• 渲染性能好

工作原理

1. 定义状态让他变成可观察的
2. 创建衍生来响应状态变化
3. 使用action来改变状态

设计原则

Mobx支持单向数据流，动作改变状态，状态更新改变视图

• Mobx通过不缓存数据，在需要的时候重新计算来保证所有衍生在一致的状态
• 没有参与反应的衍生，就会被简单的垃圾回收

Mobx是同步运行的，有2个好处

• 不会获得旧的衍生
• 追踪堆栈会更简单

主要利用一个autoRun，这个函数可以让被我们用到的属性改变时候触发回调，而没被使用的属性发生改变则不会发生回调。

72. Object.create()实现原理

其实就是新建一个对象，然后覆盖对象的原型为传入的原型对象(类似继承)

function(constructor){
    const F = function(){}
    F.prototype = constructor
    const res = new F()
    return res
}

73. 事件穿透

设置css3属性pointer-events: none

74. 常见http状态码

• 200：成功，正常处理并返回
• 204：处理成功，但是返回的主体信息没有内容
• 301：永久重定向，请求的资源分配给另一个url
• 302：临时重定向，希望本次访问可以通过另一个url来获取资源
• 303：应该使用get来访问另一个url
• 304：表示协商缓存可用
• 400：请求中有语法错误
• 401：未经许可，要验证
• 403：拒绝访问，权限不够
• 404：访问资源不存在
• 500：请求异常，也可能是前端bug
• 503：服务器停机维护，无法处理请求

75. js、css阻塞

js的async加载还有defer加载都不阻塞页面渲染还有资源加载

• defer会按顺序加载，async乱序
• defer是页面都解析完了在运行，立即下载延迟执行
• async下载完成后立刻执行
• 同时指定的话，async优先级高

内嵌和外部js

• 内嵌js会阻塞所有资源的加载
• 外部js会阻塞后面的内容呈现以及资源的下载

css

• css不会阻塞dom解析，会阻塞渲染，因为要dom树跟style树结合生成渲染树才会渲染
• css会阻塞后续js语句执行

如果css后面跟着内嵌js，则会出现阻塞情况，因为浏览器会维持css跟js顺序，样式表必须在嵌入的js之前加载完。

加载顺序

• js在head中会立即执行，阻塞后续资源下载与执行。因为js可能会修改dom，不阻塞的话，dom操作顺序不可控。
• js的执行依赖css。只有前面的css全部下载完，才会执行js

注意

• css应放在head中，这样可以尽快响应，渲染页面，因为他不会阻塞资源下载
• js应该放在body底部，让dom尽快渲染出来，避免dom被阻塞
• css会阻塞js执行，他不会阻塞js下载，但是js会等到css加载玩之后才会执行

JS 代码在执行前，浏览器必须保证在 JS 之前的所有 CSS 样式都解析完成，不然不就乱套了，前面的 CSS 样式可能会覆盖 JS 文件中定义的元素样式，这是 CSS 阻塞后续 JS 执行的根本原因。

76. 隐式转换

• 数字运算符
• 点号操作符
• if语句内
• = =

https://blog.csdn.net/itcast_cn/article/details/82887895

77. React首屏优化

1. 使用浏览器缓存
2. webpack的JS压缩，html压缩
3. 提取公共资源
4. 将webpack开发环境修改为生产环境
5. 使用雪碧图
6. 使用cdn

78. Object.assign

如果对象只有一层，则是深拷贝，如果是多层则是浅拷贝

const obj1 = {
  a: 1,
  b: {
    c: 2
  }
}

const obj2 = Object.assign({}, obj1)
console.log(obj1 == obj2)
console.log(obj1, obj2)
obj1.b = 2
console.log(obj1 == obj2)
console.log(obj1, obj2)

79. innerHtml 和 outerHtml

 

• inner只是标签内，outer是包括标签

80. rem 和 em

• rem是根据根元素的字体大小定的
• em是根据自身元素的字体大小定的，如果自身没有，那可以从父元素继承字体大小

81. 垃圾回收机制 和 内存泄漏

垃圾回收

• 标记清除

最常用的垃圾回收方式，运行的时候他会给变量标记，如果环境中的变量已经无法访问到这些变量，就清除

var m = 0,n = 19 // 把 m,n,add() 标记为进入环境。
add(m, n) // 把 a, b, c标记为进入环境。
console.log(n) // a,b,c标记为离开环境，等待垃圾回收。
function add(a, b) {
  a++
  var c = a + b
  return c
}

例如函数的局部变量和参数，外部访问不了，则就会被清除

• 引用计数

判断资源被引用的次数

var arr = [1, 2, 3, 4];
arr = [2, 4, 5]

例如一开始[1,2,3,4]的引用次数为1，不会被清除，但是下面吧arr的引用换了，[1,2,3,4]的引用数变成0，将被清除

内存泄漏

1. 意外的全局变量

function foo(arg) {
    bar = "this is a hidden global variable";
}

这样子bar会声明在全局变量里面，不会被释放

2. 计时器 如果使用setInterval而没有关闭，则他会一直存在不会被释放

3. 闭包 闭包会维持局部变量，就无法释放了

4. 没有清理dom引用 dom元素的引用如果不清除，他就会一直存在

优化

1. 数组优化

var arr = [1,2,3]
arr.length = 0 // 这样子优化可以不用新生成一个空数组

2. 对象复用

var t = {}

while(){
    t.a = 1
}

t = null

尽量复用对象不要每次都生成，然后吼用完设置为null，垃圾回收

3. 循环使用函数表达式

function t(){
    
}

while(){
    t()
    // var t = function(){} 这样子就不用循环创建很多函数了
}

82. 手写Promise 和 Promise.all

Promise

https://juejin.cn/post/6844903625769091079

以下为简略版

function myPromise(executor) {
  this.state = ‘pending‘;
  this.value = undefined;
  this.reason = undefined;
  this.onResolvedCallbacks = [];
  this.onRejectedCallbacks = [];
  let resolve = value => {
    if (this.state === ‘pending‘) {
      this.state = ‘fulfilled‘;
      this.value = value;
      this.onResolvedCallbacks.forEach(fn => fn());
    }
  };
  let reject = reason => {
    if (this.state === ‘pending‘) {
      this.state = ‘rejected‘;
      this.reason = reason;
      this.onRejectedCallbacks.forEach(fn => fn());
    }
  };
  try {
    executor(resolve, reject);
  } catch (err) {
    reject(err);
  }
}

myPromise.prototype.then = function (onFulfilled, onRejected) {
  // 声明返回的promise2
  let promise2 = new Promise((resolve, reject) => {
    if (this.state === ‘fulfilled‘) {
      onFulfilled(this.value)
    };
    if (this.state === ‘rejected‘) {
      onRejected(this.reason)
    };
    if (this.state === ‘pending‘) {
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      })
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason)
      })
    }
  });
  // 返回promise，完成链式
  return promise2;
}

new myPromise((resolve, reject) => {
  console.log(‘1‘)
  resolve(1)
  console.log(‘2‘)
}).then((res) => {
  console.log(res)
  console.log(‘4‘)
  return 2
})

Promise.all

const myPromiseAll = function (promiseList){
    const result = []
    return new Promise((resolve, reject) => {
        let index = 0
        next()
        function next(){
            promiseList[index].then((res) => {
                result.push(res)
                index++
                if(index === promiseList.length){
                    resolve(result)
                } else {
                    next()
                }
            })
        }
    })
    
}

83. post的方法

• application/x-www-form-urlencoded （url传参数）
• multipart/form-data （上传文件）
• application/json （传json）
• text/xml

84. http options预检请求

正式跨域之前，会发起option请求，预检一下。检测发送的请求是否安全，同时发送请求地址，请求方法，服务器判断来源域名是否再许可名单内，请求方法支不支持，支持则允许请求

复杂请求才会发送预检，以下为复杂请求

• put/delete/patch/post的其中一种
• 发送json格式（content-type: application/json）
• 请求中有自定义头部

为什么要进行预检？ 复杂请求可能会对服务器产生副作用，数据修改等。所以要检测一下请求来源在不在许可名单上

85. oop三大特点

• 封装
• 继承
• 多态

86. 手写限制并发数

function limitPromise(taskList, limit) {
  return new Promise((resolve, reject) => {
    let index = 0
    let active = 0
    let finish = 0
    let result = []

    function next() {
      if (finish >= taskList.length) {
        resolve(result)
        return
      }

      while (active < limit && index < taskList.length) {
        active++
        let cur = index
        taskList[index].then((res) => {
          active--
          finish++
          result[cur] = res
          next()
        })
        index++
      }
    }
    next()
  })
}

87. webpack的tree shaking

tree shaking是用于清除无用代码的方式，webpack3/4开始之后就自动集成

88. getComputedStyle 和 style

• getComputedStyle只读，style可读可写
• style只能获取内联样式

window.getComputedStyle(dom, null).getPropertyValue(‘display‘)

89. 怪异盒模型

• 标准盒模型：大小 = content + margin + padding + border

• 怪异盒模型：大小 = width（content + padding + border） + margin

• content-box: 默认，标准盒模型

• border-box：border和padding算入width中

    .container {
      display: flex;
      width: 200px;
      height: 50px;
    }

    .item1 {
      width: 50%;
      background: red;
      border: 10px solid black;
    }

    .item2 {
      width: 50%;
      background: yellow;
    }

  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
  </div>

效果如图

假设现在两个div一行放置，都是50%宽，假如我们再期中一个加上边框，这样另一个就会被挤压

这时候我们可以将box-sizing设置为border-box

.item1 {
  width: 50%;
  background: red;
  border: 10px solid black;
  box-sizing: border-box;
}

挤压的问题就没有啦

90. Object.defineProperty

Object.defineProperty(obj, prop, descriptor)

MDN描述：
obj要在其上定义属性的对象。
prop要定义或修改的属性的名称。
descriptor将被定义或修改的属性描述符。

• value：设定值
• writable：是否可被重写
• enumberable：是否可枚举（for..in, Object.keys）
• set/get
• configrable：是否可重定义

91. HTTP如何复用连接

设置http的header：Connection: keep-alive，告诉服务器，待会我还要请求，就可以避免再次三次握手了

92. HTTP和TCP的关系

• http是应用层，tcp是传输层
• http是基于tcp的基础上实现的
• tcp只是单纯的进行连接，http是会进行收发数据

93. node的优势

• 完全是js语法
• 高并发能力很好
• 非阻塞I/O
• 开发周期短
• 单进程、单线程

94. HTTP报文结构

• 请求报文：请求行，请求头，空行，请求数据
• 响应报文，状态行，消息头，空行，响应正文

请求头

• 请求方法：get/post
• host：请求主机
• connection：连接状态
• cache-control：缓存
• accept：能发送的类型
• user-agent：代理
• reference：请求资源的url
• accept-encoding：支持的编码方式
• cookie：cookie

响应头

• date：响应时间
• last-modify：最后修改时间
• etag：资源标识
• connection：连接状态
• content-type：资源类型

95. async / await

async

async总是返回promise

• 没有显示return，则返回promise.resolve(undefined)
• 返回不是promise的话，则返回promise.resolve(data)
• 返回promise就会得到promise

await

• await只可以用在async里面
• 如果await后是非promise，则获取里面resolve的值

与generator的区别

async就是generator的语法糖

async对比generator的改进

1. 内置执行器，不需要next来执行
2. 更好的语义化
3. 返回promise，可以继续操作

96. 是否每一次请求都会三次握手

如果没有缓存的情况下，请求头设置connection:keep-alive则可以不重新握手

97. TCP的keepAlive和HTTP的keep-alive

• TCP的keepAlive是侧重于保持客户端和服务端的连接，会不定时发送心跳包验证有没有断开连接，如果没有这个机制的话，一方断开，另一方不知道，就会对服务器资源产生较大的影响

• HTTP的keep-alive可以让服务器客户端保持这个连接，不需要重新tcp进行连接了

98. TCP两次握手可不可以呢

假如第一次发出连接请求，如果服务器端没有确认，客户端再进行一次请求，然后他们开始连接，在这之后，如果第一次只是延迟了，然后现在发送给客户端，如果没有三次握手的话，就直接开启连接，然而客户端并没有数据要传输，则服务端会一直等待客户端发数据

99. TCP三次握手中可以传输数据吗

第一次第二次不可以，因为很容易被人攻击，而第三次握手已经进入establish状态了，已经确认双方的收发能力，可以传输

100. 2MSL等待状态

MSL是报文最大生存时间，客户端进入timewait的状态之后，需要等待2msl的时间，这样可以让最后发送的ack不会丢失，保证连接正常关闭，time_wait就是为了防止最后ack重发可能丢失的情况

101. websocket

http连接具有被动型，只能主动去向服务器请求看有没有新消息，一直轮询。

websocket是一个持久化的协议，连接了就不会自动断开。而且传递信息的时候只需要传递一点点头信息即可。一次握手，持久连接

1. 先进行TCP三次握手
2. TCP连接建立成功后，浏览器通过http协议发送websocket支持的版本号，地址等信息给服务端
3. 服务端接受后，如果协议版本匹配，数据包格式正确，则接受连接（Upgrade: websocket，Connection：Upgrade）
4. 浏览器收到回复后，触发onopen事件，就可以通过send发送数据了

102. hasOwnProperty

这个方法只会遍历自身属性，不会从原型链上遍历，可以用来判断属性是否在对象上或者是原型链继承来的

const obj = new Object()
obj.num = 1

Object.prototype.fn = function(){
    console.log(2)
}

obj.hasOwnProperty(num) // true
obj.hasOwnProperty(fn)  // false

103. DNS域名解析

域名解析过程

1. 检查浏览器缓存中有没有该域名的ip地址
2. 检查本机缓存中有没有该域名的ip地址
3. 向本地域名解析服务系统（LDNS）发起域名解析请求
4. 向根域名解析服务器发起域名解析请求
5. 根域名服务器返回gTLD域名解析服务器地址
6. 向gTLD服务器发起解析请求
7. gTLD服务器返回Name Server服务器
8. Name Server服务器返回IP地址给本地服务器
9. 本地域名服务器缓存解析结果
10. 返回解析结果给用户

域名解析方式

• A记录：A代表address，用来指定域名对应的ip地址
• MX记录：可以将某个域名下的邮件服务器指向自己的Mail Server
• CNAME记录：别名解析，可以将指定域名解析到其他域名上
• NS记录：为某个域名指定特定的DNS服务器去解析
• TXT记录：为某个主机名或域名设置指定的说明

104. JWT原理

使用JWT服务器就不需要保存session数据了，更容易扩展

数据结构

由三部分组成，中间以.分隔

• header
• payload
• signature

header

{
    "alg": "HS256",
    "typ": "JWT"
}

alg代表算法，typ代表类型，最后用base64编码转换一下变成字符串

payload

除了官方给的字段，我们还可以自定义字段，例如:

{
    "name": "bb",
    "age" : 21
}

signature

这是一个签名，用于防止前面的数据被篡改

我们需要自定义一个 密钥 ，不能给用户知道，然后生成签名

使用方式及特点

使用方式

• 客户端收到后可以存入cookie或localStorage
• 每次请求时候可以在自定义请求头加上Authorization

特点

• 默认不加密，可以自己通过密钥再加密一下
• 不能保存session状态，在有效期前一直有效
• 尽量使用https防止泄露

105. 什么是DOCTYPE及其作用

DOCTYPE是用来声明文档类型和DTD规范的。主要用于验证文件合法性。如果要提高浏览器的兼容性，需要设置一下<!DOCTYPE>

106. koa原理

koa是基于express来开发出来的，但是他更简洁，自由度更高，十分轻量。功能都通过插件来实现，这种拔插式的架构设计模式，很符合unix哲学

koa2不在使用generator，而是采用了async/await

与 express 的区别

express：

• 整合了更多功能
• 但是回调函数十分不便

koa：

• 使用async/await更加方便
• 需要自己配置插件中间件等

结构

application.js

这个是入口文件，继承了events可以执行事件监听还有触发事件。

• listen是通过对http.createServer的封装，传入一个回调函数，包含了中间件、上下文还有res等
• use是收集中间件，将多个中间件放进缓存队列中，用koa-compose组合

context.js

这个就是koa的应用上下文ctx了，可以通过他来访问请求头啊设置响应头等等

request/response.js

对原生的req,res等做一下封装，可以在这里取到headers设置headers/body等

洋葱模型

app.use(async (ctx, next) => {
    console.log(1);
    await next();
    console.log(6);
});

app.use(async (ctx, next) => {
    console.log(2);
    await next();
    console.log(5);
});

app.use(async (ctx, next) => {
    console.log(3);
    ctx.body = "hello world";
    console.log(4);
});

输出 1 2 3 4 5 6

意思就是说，先从上到下执行完await next()之前的内容，然后再从下到上执行await next()之后的内容

koa通过use函数，吧中间件push到队列中，洋葱模型可以让所有中间件依次执行，每执行完一次，就通过next()传递ctx参数

next()就相当于一个接力棒，将参数等传递给下一个中间件。只需要执行一下next就可以将之后的中间件都执行了！

不同于express框架，修改响应需要等请求结束之后，但用koa就可以将修改响应的代码放到next后面就可以了

前期处理 -> 交给并等待其他中间件处理 -> 后期处理

107. babel基本原理

什么是babel

babel是一个js的编译器，用来将代码转换成兼容浏览器运行的代码

• 语法转换
• 通过polyfill的方式添加缺失的特性
• js源码转换

babel基本原理

核心就是AST抽象语法树。

1. parsing（解析）：首先将源码转成抽象语法树，词法分析，语法分析
2. transforming（转换）：将抽象语法树处理生成新的语法树
3. generating（生成）：将新的语法树生成js代码

 

 

108. npm版本号

版本号

版本号分为X.Y.Z三位

• 大变动，向下不兼容，需要更新X
• 增加功能，向下兼容，更新Y
• 修复bug，更新Z

具体符号

• ~: 大约匹配，固定Y，Z随意变动
• ^: 兼容某个版本，固定X, Y, Z变动
• x: 任意版本，例如1.x.2，就可以是1.4.2, 1.8.2

109. git rebase 和 merge

• rebase:会取消分支的每一个提交，然后更新到最新分支，找到两个分支第一个相同的提交，然后提取之后所有记录，添加到目标分支的后面，
• merge: 将两个分支，合并提交为一个分支，并且提交两个commit。新建一个commit对象，吧两个分支以前的记录都指向新commit对象，会保留之前所有的commit

110. React-Router 原理

主要依赖的是history库。

顶层router监听history，history发生变化的时候，router调用setState把location向下传递。设置到RouterContext。router根据RouterContext决定是否显示。

Link标签禁用a标签的默认事件，调用history.push方法来改变url。

111. document.readyState

• loading：dom还在加载
• interactive：dom加载完了，但是图片，css等还在加载
• complete：全部加载完了

112. symbol

symbol函数会返回symbol类型的值，他不支持new。

• 解决属性名冲突
• 私有属性

113. Samsite cookie

cookie的属性SameSite有三个值

• strict：完全禁止第三方cookie，跨站点时，任何情况都不会发送cookie。
• lax：大多数情况禁止第三方cookie，但是导航到目标网址的get请求除外（例如a标签，预加载请求，get表单）
• none：关闭samesite属性，但必须设置secure才能生效

114. async 和 promise的区别

• 更加简洁
• 可以使用try/catch来进行错误处理
• 可以很方便的使用中间值传递给下一个promise，不需要像promise那样一直then
• 容易追踪错误，报错会具体到哪一行

115. import 和 require如何在浏览器实现

import

需要用babel进行转换，转换成commonJS规范

export

例如export default会被转换成exports.default

// babel编译前
export default {}

// babel编译后
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {};
/*
* exports
* {default: {} , __esModule: true}
*/

import

使用_interopRequireDefault来处理一遍，为了兼容和区分commonjs和es6

// babel编译前
import Test, {msg, fn} from ‘test‘

// babel编译后
‘use strict‘;

var _test = require(‘test‘);

var _test2 = _interopRequireDefault(_test);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

webpack中会为import和export添加一个__esModule: true的标识，来标记这是es6的东东

116. target 和 currentTarget的区别

• target：返回触发事件的源对象
• currentTarget：返回事件绑定的对象

  document.getElementById(‘test‘).addEventListener(‘click‘, function (e) {
    console.log(e.target)
    console.log(e.currentTarget)
  })

  <div id="test">
    <button>1</button>
  </div>

117. 为什么javascript是单线程的

• 防止dom渲染冲突的问题
• html5中的web worker可以实现多线程

118. DNS预解析

• html源码下载完后，会解析页面包含的链接的标签，提前查询对应的域名
• 对访问过的页面，会记录一个域名列表，再次打开下载html的时候会同时解析DNS

预解析某域名
<link rel="dns-prefetch" href="//img.alicdn.com">

强制开启HTTPS下的DNS预解析
<meta http-equiv="x-dns-prefetch-control" content="on">

119. 什么是bundle、chunk、module

• bundle是指webpack打包出来的文件
• chunk是指webpack进行模块依赖分析的时候，代码分隔出来的代码块
• module是开发中的单个模块

120. 什么是loader、plugin

• loader是webpack可以加载解析非js文件的能力
• plugin可以扩展webpack得功能，更加灵活。

121. 组件懒加载原理

• 例如react-loadable主要利用import()来返回一个promise的性质，进行loading的异步操作。
• webpack通过require.ensure()来实现按需加载

require.ensure

require.ensure(dependencies,callback,errorCallback,chunkName)他会返回一个promise，先是判断dependencies是否被加载过，加载过则获取缓存值。没有的话就生成一个promise，然后缓存起来。接着生成一个script标签，填充好信息放到html文件上，就完成了按需加载了。

require.ensure可以自定义文件名

122. HTML5离线缓存

利用manifest属性，当浏览器发现头部有manifest属性，就会请求manifest文件，如果是第一次，则根据文件内容下载响应的资源。如果已经离线缓存过了，则直接使用离线的资源加载。

123. 点击劫持，如何防范

攻击者通过iframe嵌套的方式，将iframe设为透明，诱导用户点击。

可以通过http头设置X-FRAME-OPTIONS来防御iframe嵌套的点击劫持攻击

124. 观察者模式 与 发布订阅模式

观察者模式

  function Subject() {
    this.state = 0
    this.observers = []
  }
  Subject.prototype.attach = function (observer) {
    this.observers.push(observer)
  }
  Subject.prototype.getState = function () {
    return this.state
  }
  Subject.prototype.setState = function (state) {
    this.state = state
    this.noticefyAllObservers()
  }
  Subject.prototype.noticefyAllObservers = function () {
    this.observers.forEach(observer => {
      observer.update()
    })
  }

  function Observer(name, subject) {
    this.name = name
    this.subject = subject
    this.subject.attach(this)
  }
  Observer.prototype.update = function () {
    console.log(this.name, this.subject.getState())
  }

  const subject = new Subject()
  const o1 = new Observer(‘o1‘, subject)
  const o2 = new Observer(‘o2‘, subject)
  const o3 = new Observer(‘o3‘, subject)

  subject.setState(1)
  subject.setState(2)
  subject.setState(3)

发布订阅模式

  function Event() {
    this.events = {}
  }
  Event.prototype.on = function (event, fn) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(fn)
  }
  Event.prototype.emit = function (event) {
    const args = [...arguments].splice(1)
    this.events[event].forEach(fn => {
      fn.apply(this, args)
    })
  }
  Event.prototype.off = function (event, fn) {
    const currentEvent = this.events[event]
    this.events[event] = currentEvent.filter(item => item !== fn)
  }

  const publisher = new Event()
  const fn1 = function (e) {
    console.log(‘a1‘)
    console.log(e)
  }
  const fn2 = function (e) {
    console.log(‘a2‘)
    console.log(e)
  }
  publisher.on(‘a‘, fn1)
  publisher.on(‘a‘, fn2)
  publisher.emit(‘a‘, ‘aowu‘)
  publisher.off(‘a‘, fn2)
  publisher.emit(‘a‘, ‘aowu‘)

区别

• 观察者模式，观察者是知道subject的，发布订阅模式中，发布者跟订阅者不知道对方的存在，只有通过消息代理进行通信
• 观察者模式大多是同步的，发布订阅大多是异步的
• 发布订阅模式大多是松散耦合的，观察者反之

128. nginx负载均衡

https://www.jianshu.com/p/4c250c1cd6cd

129. redis

https://www.imweb.io/topic/584412459be501ba17b10a7b

130. Set,Map,WeakSet,WeakMap

• Set：可以遍历，元素唯一
• WeakSet：元素都是对象，元素都是弱引用，可以被垃圾回收，不容易造成内存泄露，不能遍历
• Map：键值对，可以遍历
• WeakMap：键名为对象，键名是弱引用，不能遍历

131. token 与 cookie的区别

token

• 加密解密时间较长，占用内存大
• 不仅仅支持浏览器，还支持移动端等
• 可以防止crsf攻击
• token是无状态的，很好扩展

cookie

• 自动发送，方便
• app端无法使用cookie
• 不在https中使用容易遭受crsf攻击

132. null 与 undefined

• null：对象类型，是对象原型链的终点，已定义，为空值
• undefined：表示没有赋值，undefined类型，未被定义

133. react中使用persist

react的合成事件调用之后全都会被重用，所有属性都无效了，如果要异步访问的话，就要用event.persist()，这样就会从事件池里面删除，允许保留事件的引用

134. position: relative会影响子元素offsetLeft等属性

135. 小程序和H5有何区别

1. 小程序渲染方式与H5不同，小程序一般通过Native原生渲染的，但是小程序也支持web渲染，可以初始化一个webview组件，在webview中加载H5页面

小程序下，native方式性能比web方式好

2. 小程序特有的双线程设计。H5下，通常我们全部打包在一个文件里面。小程序编译之后有两个，分别是view层，和业务逻辑。运行的时候会有两条线程分别处理两个文件，一个是主渲染线程，负责渲染view层的内容。另一个是service worker线程，他负责执行业务逻辑。

• 运行环境不同，h5大多用于web-view或者浏览器，小程序是使用一个基于浏览器重构的内置解析器，大大地优化了性能、缓存等
• 性能不同，小程序依赖微信客户端实现，对解析进行了很多优化，首次打开会缓存很多资源，因此比H5要流畅很多，底层优化技术使得小程序更接近于原生的APP
• 小程序开发成本低，不需要担心莫名其妙的bug出现，可以调用官方的api
• 微信用户更多，相比h5，微信流量更多
• 小程序无法使用dom
• 小程序能使用很多手机的权限

136. 字符串slice、substr、substring

• slice：正常的截取，如果有负数则倒着数
• substr：第一个参数为开始下标，第二个参数代表截取多少个字符
• substring：传入两个参数，较小的一个为起始下标

137. 基本包装类型

基本类型不是对象，但是他们又有一些方法，为什么呢？

因为后台会对基本类型进行包装，例如字符串、整数、布尔值会首先利用构造函数创建实例，使用完之后就销毁

let s1 = ‘hello‘
let s2 = s1.substring(2)
// ↓ 后台包装
let s1 = new String(‘hello‘) // 包装
let s2 = s1.substring(2) // 可以调用方法
s1 = null // 销毁

138. toString 与 valueOf

• null 与 undefined 没有这俩方法
• toString：值类型返回字符串形式，对象类型返回[ibject Object]形式
• valueOf：无论是值还是引用类型，基本都是原样返回，是Date的时候，返回时间戳
• 进行字符串转换时候，优先toString，进行数值计算优先valueOf
• toString支持传参，可以进行进制转换

139. es6的class实现私有变量

1. 闭包

class A {
    constructor (x) {
        let _x = x
        this.showX = function () {
            return _x
        }
    }
}

let a = new A(1)
// 无法访问
a._x        // undefined
// 可以访问
a.showX()   // 1

2. 利用symbol

class A {
  constructor(x) {
    // 定义symbol
    const _x = Symbol(‘x‘)

    // 利用symbol声明私有变量
    this[_x] = x
  }

  showX() {
    return this[_x]
  }
}

let a = new A(1)

// 1. 第一种方式
a[_x]    // 报错 Uncaught ReferenceError: _x is not defined

// 2. 第二种方式
// 自行定义一个相同的Symbol
const x = Symbol(‘x‘)
a[x]        // 无法访问，undefined

// 3. 第三种方式，可以访问（正解）
a.showX()   //1

140. TypeScript的type与interface

interface

• 同名interface自动聚合，也可以跟同名的class自动聚合
• 只能表示object, function, class类型

type

• 不仅仅表示object, function, class类型
• 不能重名
• 支持复杂的类型操作

141. JavaScript的V8引擎

JavaScript引擎

JavaScript是一个解释型语言，跟编译型语言不同，js是一边执行一边解析的。为了提高性能引入了java虚拟机和C++编译器的一些东西

执行流程

源代码 -> 抽象语法树 -> 字节码 -> JIT -> 本地代码

V8引擎

相比其他的javascript引擎（转换成字节码或解释执行），V8引擎将代码直接编译成原生机器码，使用了内联缓存提高性能。

工作流程：源代码先被解析成抽象语法树然后用JIT编译器直接从抽象语法树生成代码，提高代码执行速度（不用转换成字节吗了）

142. 堆与栈的区别

• 堆：主要存new等分配的内存块，编译器不会自动释放他们，引用类型的放在堆里面
• 栈： 主要存放函数参数，局部变量等，编译器自动分配和释放，基本数据类型放在栈里面

143. unicode utf8 utf16

• unicode是为了解决世界上编码不统一的问题，包含了所有符号、文字的编码集，每个字符由2个字节表示，英文字符只需要1个字节，所以保存起来就会浪费空间
• utf8每次8个位传输，是变长的编码方式，使用1~4个字节表示一个符号，utf8中文字符一般用到3个字节
• utf16每次16个位传输

区别

unicode：世界上所有符号的编码集 utf8、utf16：是unicode的字符集，不同的编码实现

144. class 和 function的区别

• class封装的更加合理，方便维护和使用
• class没有像function那样状态提升
• class不用写原型方法那些方便一点
• class要使用super才能使用this