七八、各大公司前端面试题+答案（持续更新）

JavaScript实现一个LazyMan

阿里

1. 使用过的Koa2中间件

   koa-bodyparser , koa-router , koa-session , koa-static

2. Koa-body原理

   npm install koa-bodyparser --save
   //使用
   const bodyParser = require('koa-bodyparser');
   app.use(bodyParser())
   //在代码中使用后，直接可以用ctx.request.body进行获取POST请求参数，中间件自动给我们作了解析
   var Koa = require('koa');
   var bodyParser = require('koa-bodyparser');
   var app = new Koa();
   app.use(bodyParser());
   app.use(async ctx => {
     // the parsed body will store in ctx.request.body 
     // if nothing was parsed, body will be an empty object {} 
     ctx.body = ctx.request.body;
   })
   

3. 介绍自己写过的中间件

   Koa2 中间件原理解析

4. 有没有涉及到Cluster

   解读Nodejs多核处理模块cluster

5. 介绍Pm2

   PM2用法简介

6. Master挂了的话Pm2怎么处理

   master挂了的话pm2怎么处理 使用pm2方便开启node集群模式

7. 如何和MySQL进行通信

   nodejs与mysql数据库的交互操作

8. React声明周期及自己的理解

   详解React生命周期

9. 如何配置React-Router

   关于react-router的几种配置方式
   React路由设置：React Router

10. 路由的动态加载模块

    react如何实现代码分割，路由动态加载

11. 服务端渲染SSR

    彻底理解React 之React SSR
    用Next.js快速上手React服务器渲染

12. 介绍路由的History

    SPA中前端路由基本原理与实现方式

13. 介绍Redux数据流的流程

    浅谈Redux框架
    view => action/dispatch => store(reducer) => view

14. Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理

    react-redux(Provider 传入到最外层组件store 在需要用到的地方 用 connect 获取 (mapStateToProps, mapDispatchToProps) 在页面中引用)类似发布订阅模式, 一个地方修改了这个值, 其他所有使用了这个相同状态的地方也会更改

15. 多个组件之间如何拆分各自的State，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块

    一个全局的 reducer , 页面级别的 reducer , 然后redux 里有个 combineReducers 把所有的 reducer 合在一起,小组件的使用与全局的使用是分开的互不影响

16. 使用过的Redux中间件

    redux react-redux redux-thunk(把action 返回的对象 换成一个异步函数) redux-saga

17. 如何解决跨域的问题

    iframe nginx node jsonp cors(在header中 设置 Access-Control-Allow-Origin)
    H5的 window.postMessage

18. 常见Http请求头

    :method: GET
    :path: /mvc/blog/ViewCountCommentCout.aspx?postId=6958181
    :scheme: https
    accept: application/json, text/javascript, /; q=0.01
    accept-encoding: gzip, deflate, br
    accept-language: zh-CN,zh;q=0.9,en;q=0.8
    content-type: text
    cookie: ‘’,
    token: ‘’,

19. 移动端适配1px的问题

    代码生成 0.5px 像素边框 页面展示的时候就是 1px 大小了
    缩放 transform: scaleY(0.5)
    虚线 background: linear-gradient(0 deg, #fff, #000)
    边框阴影 box-shadow: 0 0.5px 0 #000;
    图片 svg图片 base64 的细线

20. 介绍Flex布局

    display: flex , (弹性布局)
    direction row colum 设置主轴和垂直的轴
    just-comtent aligin-items 来设置两个轴的元素节点

21. 其他CSS方式设置垂直居中

    // 定位的方式
    .father {
        position: relative;
    }
    .son {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    //css3属性
    .father {
        position: relative;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    //flex布局
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    

22. 居中为什么要使用Transform（为什么不使用MarginLeft/Top）

    相对于自生元素的大小 更加可控

23. 使用过Webpack里面哪些Plugin和Loader

    plugin:
    compression-webpack-plugin => gzip
    html-webpack-plugin => 把带hash的dll js/css插入到html中
    uglifyjs-webpack-plugin => 删除代码里的console
    happypack => 因为js是单线程的 多进程来分别执行这些线程 完成的时候在 event loop 中返回给 webpack 处理 提高打包效率
    webpack-bundle-analyzer => 用来分析打包的大小 针对性的去处理文件
    DefinePlugin => 注入一些全局的 config 区分开发和生产
    mini-css-extract-plugin => 压缩 css 代码
    loader:
    url-loader => 小图片转化成 base64 进行加载
    styly-loader css-loader postcss-loader less-loader => 处理 css
    eslint-loader => 代码检查
    vue-loader react-loader => 处理框架的语法

24. Webpack里面的插件是怎么实现的

    插件开发，最重要的两个对象：compiler、compilation
    compiler.plugin(‘***’)就相当于给compiler设置了事件监听
    所以compiler.plugin(‘compile’)就代表：当编译器监听到compile事件时，我们应该做些什么
    compilation（’编译器’对’编译ing’这个事件的监听）相当于对编译过程的监听
    compiler.plugin(“emit”, function(compilation, callback) {} 最后执行 emit 输出的回调函数 callback

25. Dev-Server是怎么跑起来

    这个用 node 搭建本地资源服务器类似的
    devServer: {
    contentBase: ‘./‘, 服务器搭建在当前目录
    historyApiFallback:true,
    inline：true,
    hot：true,
    port: 8080
    }

26. 项目优化

    构建功能及性能优化, 图片优化, 浏览器缓存, 离线存储技术, 服务端渲染, css性能方案, js性能方案, 重绘回流, 事件循环异步更新,懒加载, 事件节流与防抖
    React 性能优化
    vuejs项目性能优化总结

27. 抽取公共文件是怎么配置的

    用 webpack 打包 处理 dll
    new webpack.DllReferencePlugin({ manifest: path.resolve(ROOT_PATH,dist/dll/${NODE_ENV}/vendor-manifest.json) })

28. 项目中如何处理安全问题

    HTTPS请求
    登陆的时候加图片验证 ,一般的登陆密码等 加 md5 加盐处理
    重要数据的防爬虫的页面数据组合展示
    所有的请求在 http header 里 带上 token

29. 怎么实现this对象的深拷贝

    var obj1 = { body: { a: 10 } }
    var obj2 = JSON.parse(JSON.stringify(obj1))
    lodash.cloneDeep()
    Object.create()

    var obj = finalObj || {}
      for (var i in initalObj) {
        var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
        if(prop === obj) {
          continue;
        }
        if (typeof prop === 'object') {
          obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
        } else {
          obj[i] = prop;
        }
      }
      return obj;
    }
    

30. vue 的双向绑定的原理是什么 ?

    vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
    　　具体步骤：
    　　第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
    这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
    　　第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
    　　第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
    　　1、在自身实例化时往属性订阅器(dep)里面添加自己
    　　2、自身必须有一个update()方法
    　　3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中绑定的回调，则功成身退。
    　　第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

---

网易

31. 介绍Redux，主要解决什么问题

    不好用 props 去传递使用的一些公共的数据的管理

32. 文件上传如何做断点续传

    用 H5 的 File api
    先得获得一个文件ID 文件HASH值的思路就是：MD5（文件名称+文件长度+文件修改时间+自定义的浏览器ID）
    在上传文件之前，从服务端查询文件的断点续传信息, 决定从什么位置上传数据
    关键技术点是：从上次上传的长度位置上传
    var blob = fileObj.slice(start_offset,filesize)
    function upload_file(fileObj, start_offset, fileid){}

33. 表单可以跨域吗

    本身是不能跨域的, 提交 action 是一步性操作, 可以模拟 post 方法进行跨域请求

34. Promise、Async有什么区别

    异步编程的最高境界，就是根本不用关心它是不是异步
    async 能够 使异步事件用同步的方法写, 不用写太多嵌套代码,代码可读性更高
    错误抓取 Promise.catch(){} try {} catch {}
    promise的箭头函数中不能打断点, async 只关心返回的结果

35. 搜索请求如何处理（防抖）

    防抖 : 是限制下次函数调用之前必须等待的时间间隔(300ms)。将若干个函数调用合成 一次，并在给定时间过去之后仅被调用一次
    节流: 节流函数允许一个函数在规定的时间内只执行一次

36. 搜索请求中文如何请求

    把中文 替换成字符编码 再发请求

37. 介绍观察者模式

    把自己注入到被观察的对象里, 对象改变某个数据的时候, 调用自己的update函数更新相应的状态, 强耦合的方式

38. 介绍中介者模式

    中介对象主要是用来封装行为的，行为的参与者就是那些对象，但是通过中介者，这些对象不用相互知道(机场交通控制系统)
    中介者模式与业务相关，订阅/发布模式与业务无关
    虽然实现结构非常相像，但是很明显的是，中介者模式参与业务相关东西，所以内容是大相径庭的

39. 观察者和订阅-发布的区别，各自用在哪里

    两者的主要区别是调度的地方不同 订阅发布模式比观察者模式，中间多一个“调度中心”。因此更解耦，所以常见系统中，订阅发布模式能让业务更清晰
    观察者模式是由具体目标调度的 而发布/订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会
    可以把restful请求的通信方式，看做观察者模式的应用；而服务总线（MQ）的方式，则是订阅发布模式

40. 介绍React优化

    this的绑定方法 在constructor中绑定事件
    在父组件因状态的变化更改，而子组件并没有状态变化时, 不让子组件render shouldComponentUpdate(nextProps, nextState) React.PureComponent 替换 React.Component
    加key
    redux性能优化 使用reselect库 在调用到已经执行过的数据时，react不会再次对数据进行渲染，而是从reselector中取出缓存数据加载，减少了重新渲染，达到性能优化的效果
    用函数子组件进行UI和逻辑的分离, 拆分成更小组件, 数据的变更改变尽量少的组件
    一些与状态无关的属性不要放在state里, 避免数据改变重新渲染dom

41. 介绍Http2.0

    HTTP2.0相比HTTP1.1可以给用户带来更佳的用户体验
    新增 二进制分帧传输 改进传输性能，实现低延迟和高吞吐量
    压缩头部 用 首部表 来跟踪和存储之间发送的 键-值 对
    多路复用 并行请求
    服务端推送（Server Push）

42. 通过什么做到并发请求

    改接口让后台一次请求查询更多的数据,减少请求
    并行改为串行
    使用 promise.all 统一处理所有的请求数据

43. Hhttp1.1时如何复用Tcp连接

    tcp 长连接 本来就是复用的

44. 介绍Service Worker

    服务端推送消息 不用轮询 (websocket)

45. 介绍CSS3中Position:sticky

    吸顶
    在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
    一 如果设置了top: 50px，那么元素在达到距离顶部50px时才会发生定位，否则并不会发生定位。
    二 需要考虑父容器的高度情况：sticky元素在到达父容器的底部时，则不会再发生定位，如果父容器高度并没有比sticky元素高，那么sticky元素一开始就达到了底部，并不会有定位的效果。
    　此外还有一点就是父元素的overflow属性，如果父元素的overflow属性并不是默认的visible属性，那么sticky元素则相对于该父元素定位。也就是如果要定位在顶部的话，此时这个效果就无效了。。。

46. Redux请求中间件如何处理并发

    防抖 节流 合并请求 promise.all等

47. 介绍Promise，异常捕获

    Promise.catch() promise.then().catch() try{}catch{}

48. 介绍position属性包括CSS3新增

    static fixed absolute relative inherit sticky

49. 浏览器事件流向

    事件捕获 处于目标 事件冒泡

50. 介绍事件代理以及优缺点

    事件代理发生在事件冒泡的处理上 , 可以不用每个子元素都绑定事件处理的方法, 动态的子元素也可以触发冒泡
    如果把所有事件都用事件代理，可能会出现事件误判,

51. React组件中怎么做事件代理,原理?

    区别于浏览器事件处理方式，React并未将事件处理函数与对应的DOM节点直接关联，而是在顶层使用了一个全局事件监听器监听所有的事件
    React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系
    当某个事件触发时，React根据这个内部映射表将事件分派给指定的事件处理函数
    当映射表中没有事件处理函数时，React不做任何操作
    当一个组件安装或者卸载时，相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除

52. 介绍This各种情况

    指向当前function object对象 react组件实例 window (谁调用 指向谁)

53. 前端怎么控制管理路由

    标签的方式 对象配置的方式 动态路由

54. 使用路由时出现问题如何解决

    Switch匹配 最后一个路由放404的页面
    全局的路由拦截, 例如登陆token的校验

55. React怎么做数据的检查和变化

    Switch匹配 最后一个路由放404的页面
    全局的路由拦截, 例如登陆token的校验

---

滴滴

58. React-Router怎么实现路由切换

    定义路由的时候path 和 component 一一对应, 页面的路由改变 就加载对应的组件

59. React-Router里的标签和a标签有什么区别

    Link只加载对应路由的组件,页面不会重新渲染 a标签实现页面跳转

60. a标签默认事件禁掉之后做了什么才实现了跳转

    点击事件里通过window.loation.href

61. React层面的性能优化

    参考26

62. 整个前端性能提升大致分几类

    构建功能及性能优化, 图片优化, 浏览器缓存, 离线存储技术, 服务端渲染, css性能方案, js性能方案, 重绘回流, 事件循环异步更新,懒加载, 事件节流与防抖

63. import { Button } from ‘antd’，打包的时候只打包button，分模块加载，是怎么做到的

    babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

64. 使用import时，Webpack对node_modules里的依赖会做什么

    一般直接引入组件 不做压缩编译等 设置loader 的时候 exclude: /node_modules/

65. JS异步解决方案的发展历程以及优缺点

    function(callback){} promise.then().catch() promise.all([]) generater/yield async/await

66. Http报文的请求会有几个部分

    请求行 请求头 数据体
    状态行 HTTP/1.1 200 ok，响应头，响应正文

67. Cookie放哪里，Cookie能做的事情和存在的价值

    后端生成 放在 http的请求头里 一般5k大小 用于身份认证的功能 携带少量的信息 每次请求都会带上

68. Cookie和Token都存放在Header里面，为什么只劫持前者

    cookie 每次请求都会带上 内容主要包括：名字，值，过期时间，路径和域,cookie是有状态的 被劫持不安全, 可以设置httpOnly 防止 cors. token可以设置失效时间, 是无状态的 被劫持后危险性要低一些, 在跨端能力上更好

69. Cookie和Session有哪些方面的区别

    cookie 机制采用的是在客户端保持状态的方案 session 机制采用的是在服务器端保持状态的方案
    cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session
    session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE
    单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
    将登陆信息等重要信息存放为SESSION 其他信息如果需要保留，可以放在COOKIE中

70. React中Dom结构发生变化后内部经历了哪些变化

    diff算法对比虚拟dom与现在视图dom, 计算哪些节点需要重新渲染 算出最小操作集 然后到组件 render

71. React挂载的时候有3个组件，TextComponent、ComposeComponent、DomComponent，区别和关系，Dom结构发生变化时怎么区分Data的变化，怎么更新，更新怎么调度，如果更新的时候还有其他任务存在怎么处理

    ReactClass
    他们都接收node参数
    如果node是null，则生成ReactDOMEmptyComponent
    如果node是数字或字符串，则生成eactDOMTextComponent
    如果传入的node是一个对象，是ReactElement对象,分别生成ReactDOMComponent和ReactCompositeComponent
    虽然是不同的对象，但是都实现了mountComponent,receiveComponent和unmountComponent三个关键的方法
    mountComponent方法用于把ReactElement转化为HTML标记，最终挂载到DOM上，而经浏览器解析后的DOM元素，就是用户视角看到的React组件了
    更新的时候,继续diff 算法 同上

72. Key主要是解决哪一类的问题，为什么不建议用索引index（重绘）

    循环渲染子元素 加个key值使diff算法更快, 使用index的话, 当数组增删的时候, dom元素对应index改变 会出现渲染的问题

73. Redux中异步的请求怎么处理

    react-thunk react-saga 把返回action对象 改成异步函数处理并返回

74. Redux中间件是什么东西，接受几个参数（两端的柯里化函数）

    const logger = store => next => action => {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result
    }
    
    // 当我们调用applyMiddleware方法时
    applyMiddleware(store,[logger])
    
    // 会依次middlewares数组中的方法，并且每次执行都重新封装store.dispatch
    middlewares.forEach(middleware =>
      dispatch = middleware(store)(dispatch)
    )
    
    // 这里体现了函数柯里化，每次执行一个中间件，middleware(store)(dispatch),第二个括号内的（dispatch），传递给了具体函数的next
    
    

75. 柯里化函数两端的参数具体是什么东西

    middleware(store)(dispatch) 第二个括号内的（dispatch），传递给了具体函数的next

76. 中间件是怎么拿到Store和Action，然后怎么处理

    如何理解redux中间件

77. State是怎么注入到组件的，从Reducer到组件经历了什么样的过程

    react-redux connect(state, dispatch)(component)
    store => reducers => value => this.props

78. Koa中response.send、Response.rounded、Response.json发生了什么事，浏览器为什么能识别到它是一个json结构或是html

79. Koa-bodyparser怎么来解析Request

    var Koa = require('koa')
    var bodyParser = require('koa-bodyparser')
    var app = new Koa()
    app.use(bodyParser())
    app.use(async ctx => {
      ctx.body =  ctx.request.body
    }
    

80. Webpack整个生命周期，Loader和Plugin有什么区别

    对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程
    对于plugin，它就是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点
    run：开始编译
    make：从entry开始递归分析依赖并对依赖进行build
    build-moodule：使用loader加载文件并build模块
    normal-module-loader：对loader加载的文件用acorn编译，生成抽象语法树AST
    program：开始对AST进行遍历，当遇到require时触发call require事件
    seal：所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
    optimize-chunk-assets：压缩代码
    emit：把各个chunk输出到结果文件
    通过对节点的监听，从而找到合适的节点对文件做适当的处理

81. 介绍AST（Abstract Syntax Tree）抽象语法树

    虚拟dom 类似 render(‘div’, ‘data-‘, text)

82. 安卓Activity之间数据是怎么传递的

    Activity_1利用Intent的putExtra()方法来携带数据，然后Activity_2通过Intent的getExtra()方法来获取Activity_1传递过来的数据
    利用startActivityForResult()这个方法来启动Activity_2,然后Activity_2在利用Intent和setResult()方法来向Activity_1传送数据，最后，Activity_1通过回调方法onActivityResult()来接收Activity_2数据

83. WebView和原生是如何通信

    1.JSbridge：:(webviewJavascriptBridge)一种js与原生native通信的机制，可以h5与native互调
    2.Cordova

84. 跨域怎么解决，有没有使用过Apache等方案

    启用Apache 的 proxy module反向代理解决js跨域问题
    配置完成之后，访问 http://localhost/project 实际就是访问 http://ip_address/project 上的资源 来实现跨域

---

今日头条

87. 对Async、Await的理解，内部原理

    async/await是在Promise的基础上做了改进，await是接收一个Promise对象，而当Promise执行到resolve()或者reject()的时候（fulfilled和rejected），await才会继续往下执行。
    所以关键点就是得是返回Promise对象的函数才行，不然await等你后面的函数执行完了，见你没返回Promise对象，那他就继续执行了
    对async/await的深入理解

88. 介绍下Promise，内部实现

    promise原理

89. 清除浮动
    浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。

    清除浮动的方式：

    • 为父元素设置高度
    • 为父元素添加overflow:hidden
    • 伪元素

    .fix::after { 
         content:""; 
         display:block; 
         clear:both;
    }
    

    使用伪元素的好处：不增加冗余的DOM节点，符合语义化

    overflow:hidden可以触发BFC机制。BFC：块级格式化上下文，创建了 BFC的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算BFC的高度时，浮动元素也参与计算

90. 定位问题（绝对定位、相对定位等）

    static： 默认值。没有定位，元素出现在正常的流中
    relative（相对定位）：生成相对定位的元素,相对于其正常（原先本身）位置进行定位
    absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
    fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

91. 从输入URL到页面加载全过程

    从输入url到页面加载完成发生了什么？

92. TCP3次握手

    TCP连接
    　　在通过第一步的DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接。
    　　第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；
    　　第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
    　　第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
    　　完成三次握手，客户端与服务器开始传送数据。

93. TCP属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(IP)-> 4 传输层(TCP) -> 5 应用层(Http)）

    传输层(TCP)

94. Redux的设计思想

    见第13题

95. 接入Redux的过程

    见第13题

96. 绑定Cconnect的过程

    动手实现 React-redux（三）：connect 和 mapStateToProps

97. Cconnect原理

    动手实现 React-redux（三）：connect 和 mapStateToProps

98. Webpack介绍

    本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，将项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

99. == ===的区别

    当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行=== 比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

100. Bind、Call、Apply的区别

 > [apply()、call()和 bind() 是做什么的，它们有什么区别](https://blog.csdn.net/zm06201118/article/details/89680464)

101. 动画的了解

     animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

102. 介绍下原型链（解决的是继承问题吗）

• 每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.
• JavaScript中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链
• 所有原型链的终点都是Object函数的prototype属性。Objec.prototype指向的原型对象同样拥有原型，不过它的原型是null，而null则没有原型

103. 对跨域的了解

     由于浏览器的 同源策略，在出现 域名、端口、协议有一种不一致时，就会出现跨域，属于浏览器的一种安全限制。
     解决跨域问题有很多种方式，常用的就是以下几种：
     1.jsonp 跨域：动态创建script，再请求一个带参网址实现跨域通信.缺点就是只能实现 get 一种请求
     2.document.domain + iframe跨域：两个页面都通过js强制设置document.domain为基础主域，就实现了同域.但是仅限主域相同，子域不同的跨域应用场景
     3.跨域资源共享（CORS）：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置
     4.nginx反向代理接口跨域：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题
     5.WebSocket协议跨域

---

有赞

105. Linux 754 介绍

     Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和68位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

106. 介绍冒泡排序，选择排序，冒泡排序如何优化

     js十大排序算法：冒泡排序

107. Transform动画和直接使用Left、Top改变位置有什么优缺点

     transform 性能更高一点，
     left，top兼容性更好

108. 如何判断链表是否有环

     【算法】如何判断链表有环

109. 介绍二叉搜索树的特点

     二叉查找树（BST）具备什么特性

110. 介绍暂时性死区

     当程序的控制流程在新的作用域(module, function或block作用域)进行实例化时，在此作用域中的用let/const声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，也就是对声明语句进行求值运算，所以是不能被访问的，访问就会抛出错误。所以在这运行流程一进入作用域创建变量，到变量开始可被访问之间的一段时间，就称之为TDZ(暂时死区)。
     理解es6中的暂时性死区

111. ES6中的Map和原生的对象有什么区别

     object和Map存储的都是键值对组合。但是：
     object的键的类型是 字符串；
     map的键的类型是 可以是任意类型；
     另外注意，object获取键值使用Object.keys（返回数组）；
     Map获取键值使用 map变量.keys() (返回迭代器)。

112. 观察者和发布-订阅的区别

     见39

113. React异步渲染的概念，介绍Time Slicing 和 Suspense

     React 的未来：Time Slicing 和 Suspense

114. 16.X声明周期的改变

     componentWillMount – 使用constructor或componentDidMount代替
     componentWillUpdate – 使用componentDidUpdate代替
     componentWillReceiveProps – 使用一个新的方法：static getDerivedStateFromProps来代替
     React 16.3版本中：
     componentWillMount，componentWillUpdate，componentWillReceiveProps还能用
     React 16.x版本中：
     启用弃用警告，三个方法变为：
     UNSAFE_componentWillMount
     UNSAFE_componentWillReceiveProps
     UNSAFE_componentWillUpdate
     在React17.0版本中：
     会移除这三个周期。

115. 16.X中Props改变后在哪个生命周期中处理

     从版本16.3开始，更新state以响应props更改的推荐方法是使用新的静态getDerivedStateFromProps生命周期。

116. 介绍纯函数

     一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看：
     1.函数的返回结果只依赖于它的参数。
     2.函数执行过程里面没有副作用。

117. 前端性能优化

     网站优化 14条–雅虎十四条优化原则

118. PureComponent和FunctionComponent区别

     Component和PureComponent的区别

119. 介绍JSX

     JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。
     React.js 可以用 JSX 来描述你的组件长什么样的。
     JSX 在编译的时候会变成相应的 JavaScript 对象描述。
     react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

120. 如何做RN在安卓和iOS端的适配

     如何开发一个适配Android和iOS双平台的React Native应用

121. RN为什么能在原生中绘制成原生组件（bundle.js）

122. 介绍虚拟DOM

     虚拟DOM介绍

123. 如何设计一个localStorage，保证数据的实效性

124. 如何设计Promise.all()

125. 介绍高阶组件