面试答案

浏览web文章的时候收集的大厂的一些面试题当然是查漏补缺,学习一波了

原文问题链接: https://juejin.im/post/5bc92e9ce51d450e8e777136

https://8899hudada.github.io/page/2/

—————- 阿里-网易-滴滴 —————-

————————— 阿里 —————————
使用过的koa2中间件
koa-body原理
介绍自己写过的中间件
有没有涉及到Cluster
介绍pm2
master挂了的话pm2怎么处理
如何和MySQL进行通信
——- node的东西后面再解答 ————
React声明周期及自己的理解?
react的生命周期有:
(getDefaultProps getInitialState)
componentWillMount render componentDidMount 完成初始化赋值, 渲染DOM, 初始数据请求并再次渲染只执行一次
componentWillReciveProps(nextProps) 提前根据传入的数据修改当前组件的state 并不会重复出发render
shouldComponentUpdate(nextProps, nextState) componentWillUpdate render componentDidUpdate 决定是否更新提升性能
componentWillUnmount 卸载清空定时任务网络请求等

如何配置React-Router?
1.标签的方式: BrowserRouter/HashRouter Router Switch exact Route path component this.props.children redirect 通过 path 跟 Component 对应的方式
2.对象配置的方式: {path component indexRoute childRoutes onLeave onEnter }
3.按需加载的方式配置路由提升性能 Route 可以定义 getIndexRoute getComponents getChildRoutes 几个异步函数只有需要的时候才调用

路由的动态加载模块?
根据路由组件打包成多个 bundle，只有在点击到对应的 Route 时，这个 bundle 才会被加载
webpack babel-plugin-systax-dynamic-import react-loadable

<Route exact path="/settings"
  component={Loadable({
    loader: () => import(/* webpackChunkName: "Settings" */ './Settings.js'),
    loading:Loading
  })}
/>

服务端渲染SSR ?
主要是利于SEO 减少首页白屏
理解: 通过后台(新的 renderToNodeStream 替代原始的 renderToString)最后返回已经把数据处理好的 html 页面(link => css, div#root, script)
css-modules-require-hook/preset (csshook) 处理 css 引入
express body-parser cookie-parser 处理 js
react-router-dom 处理后端路由
react react-dom 解析jsx语法
redux react-redux react-thunk 处理全局数据 (createStore applyMiddleware compose)

介绍路由的history?
它属于 Bom 浏览器对象, 常用来原生实现路由跳转但是不刷新页面的功能记录浏览历史记录用来实现前进后退的功能,
中间可以做一些数据处理,与信息提示
H5新增了两个API: history.pushState 和 history.replaceState
接收3个参数 (状态对象object, 标题title, 地址url)

介绍Redux数据流的流程?
view => action/dispatch => store(reducer) => view

Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理 ?
react-redux(Provider 传入到最外层组件store 在需要用到的地方用 connect 获取 (mapStateToProps, mapDispatchToProps) 在页面中引用)
类似发布订阅模式, 一个地方修改了这个值, 其他所有使用了这个相同状态的地方也会更改

多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块?
一个全局的 reducer , 页面级别的 reducer , 然后redux 里有个 combineReducers 把所有的 reducer 合在一起,小组件的使用与全局的使用是分开的互不影响

使用过的Redux中间件?
redux react-redux redux-thunk(把action 返回的对象换成一个异步函数) redux-saga

如何解决跨域的问题?
iframe nginx node jsonp cors(在header中设置 Access-Control-Allow-Origin)
H5的 window.postMessage

常见Http请求头?
:authority: www.cnblogs.com
: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: ‘’,
referer: https://www.cnblogs.com/,
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
x-requested-with: XMLHttpRequest

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

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

其他css方式设置垂直居中?
父元素 line-height 与 height 同高
transform: translate(-50%, -50%)
just-comtent:center aligin-items:center

居中为什么要使用transform（为什么不使用marginLeft/Top?
相对于自生元素的大小更加可控

使用过webpack里面哪些 plugin 和 loader?
plugin:
DllReferencePlugin => 生成 manifest.json 文件利于缓存页面数据
html-webpack-plugin => 把带hash的dll js/css插入到html中
copy-webpack-plugin => 把 src 目录外的文件(static) 引入到 dist 目录里
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 => 处理框架的语法

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

dev-server是怎么跑起来?
这个用 node 搭建本地资源服务器类似的
devServer: {
contentBase: ‘./‘, 服务器搭建在当前目录
historyApiFallback:true,
inline：true,
hot：true,
port: 8080
}

项目优化?
项目的优化是一根线上的优化, 即从一个网址请求到页面渲染的各个相关的环节都有优化, 这个还包括项目代码的优化
DNS 解析
TCP 连接
HTTP 请求抛出
服务端处理请求，HTTP 响应返回
浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
(构建功能及性能优化, 图片优化, 浏览器缓存, 离线存储技术, 服务端渲染, css性能方案, js性能方案, 重绘回流, 事件循环异步更新,懒加载, 事件节流与防抖)

抽取公共文件是怎么配置的?
用 webpack 打包处理 dll

1
2
3

new webpack.DllReferencePlugin({
  manifest: path.resolve(ROOT_PATH, `dist/dll/${NODE_ENV}/vendor-manifest.json`)
})

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

怎么实现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;
}

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变更的双向绑定效果

————————— 网易 —————————
介绍redux，主要解决什么问题?
不好用 props 去传递使用的一些公共的数据的管理

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

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

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

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

搜索请求中文如何请求?
把中文替换成字符编码再发请求

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

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

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

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

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

通过什么做到并发请求?
改接口让后台一次请求查询更多的数据,减少请求
并行改为串行
jquery 的 var d2 = $.Deferred()
使用 promise.all 统一处理所有的请求数据

http1.1时如何复用tcp连接?
tcp 长连接本来就是复用的

介绍service worker
服务端推送消息不用轮询

redux请求中间件如何处理并发
还是那一套吧, 防抖节流合并请求 promise.all等

介绍Promise，异常捕获
Promise.catch() promise.then().catch() try{}catch{}

介绍position属性包括CSS3新增
static fixed absolute relative inherit
position:sticky
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置
当元素在容器中被滚动超过指定的偏移值时，元素在容器内就固定在指定位置
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

浏览器事件流向?
事件捕获处于目标事件冒泡

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

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

介绍this各种情况?
指向当前function object对象 react组件实例 window

前端怎么控制管理路由?
标签的方式对象配置的方式动态路由

使用路由时出现问题如何解决?
Switch匹配最后一个路由放404的页面
全局的路由拦截, 例如登陆token的校验

React怎么做数据的检查和变化?
prop-types 第三方插件检查数据的类型以及 isRequired 必须传入
componentWillRecieveProps(nextProps) 对比传入数据的变化

————————— 滴滴 —————————
react-router怎么实现路由切换?

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

a标签 this.props.history.push(‘path’) withRouter(Component) window.$history.push(‘path’)

react-router里的标签和标签有什么区别?
Link只加载对应路由的组件,页面不会重新渲染 a标签实现页面跳转

标签默认事件禁掉之后做了什么才实现了跳转?
href=’javascript:void(0);’ 在 onClick={} 处理页面跳转

React层面的性能优化?

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

import { Button } from ‘antd’，打包的时候只打包button，分模块加载，是怎么做到的?
webpack 打包前会把所有的组件分成一个个的小 chunk
当页面加载的时候再用 getComponents方法引入到项目里, 实现分模块加载

使用import时，webpack对node_modules里的依赖会做什么?
一般直接引入组件不做压缩编译等设置loader 的时候 exclude: /node_modules/

JS异步解决方案的发展历程以及优缺点?
function(callback){} promise.then().catch() promise.all([]) generater/yield async/await

Http报文的请求会有几个部分?
请求行请求头数据体
状态行 HTTP/1.1 200 ok，响应头，响应正文

cookie放哪里，cookie能做的事情和存在的价值?
后端生成放在 http的请求头里一般5k大小用于身份认证的功能携带少量的信息每次请求都会带上

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

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

React中Dom结构发生变化后内部经历了哪些变化?
diff算法对比虚拟dom与现在视图dom, 计算哪些节点需要重新渲染算出最小操作集然后到组件 render

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 算法同上

key主要是解决哪一类的问题，为什么不建议用索引index（重绘）?
循环渲染子元素加个key值使diff算法更快, 使用index的话, 当数组增删的时候, dom元素对应index改变会出现渲染的问题

Redux中异步的请求怎么处理?
react-thunk react-saga 把返回action对象改成异步函数处理并返回

Redux中间件是什么东西，接受几个参数（两端的柯里化函数）?
中间件是怎么拿到store和action，然后怎么处理?
处理异步函数打印logger信息等

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

柯里化函数两端的参数具体是什么东西?
middleware(store)(dispatch) 第二个括号内的（dispatch），传递给了具体函数的next

state是怎么注入到组件的，从reducer到组件经历了什么样的过程?
react-redux connect(state, dispatch)(component)
store => reducers => value => this.props

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

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
}

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输出到结果文件
通过对节点的监听，从而找到合适的节点对文件做适当的处理

介绍AST（Abstract Syntax Tree）抽象语法树?
虚拟dom 类似 render(‘div’, ‘data-‘, text)

安卓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数据

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

跨域怎么解决，有没有使用过Apache等方案?
node代理 nginx cors
启用Apache 的 proxy module反向代理解决js跨域问题
配置完成之后，访问 http://localhost/project 实际就是访问 http://ip_address/project 上的资源来实现跨域

—————- 今日头条-有赞-挖财 —————-

————————— 今日头条 —————————
对async、await的理解，内部原理?
async、await 是一种异步编程的解决方式
await/async和yield都被编译器在编译时转化为了状态机
因为(C# 和 .NET 都提供了这个功能)

介绍下Promise，内部实现?
是一种异步解决方案,简单点就是一个容器,状态机
内部实现就是 pending => fullield rejected 用 then(f1, f2)

清除浮动?

::before, ::after {
  display: block;
  content: '',
  clear: both;
}

overflow:hidden

定位问题（绝对定位、相对定位等）?

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

tcp3次握手?
tcp属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(ip)-> 4 传输层(tcp) -> 5 应用层(http)）?

redux的设计思想 ?
一个全局的状态管理中心, 不用一步一步的 props 传递数据, 使数据的使用更加方便

接入redux的过程? 绑定connect的过程? connect原理?
react-redux 提供的两个api Provider标签中传入全局的store store里面有reducer 里面有对应的 action的处理方法用户使用是,通过connect(mapStateToProps, mapDispatchToProps)(component) 传入到组件中
每一个action-types 都有对应的修改store 里的state的方法

webpack介绍?
Webpack 是一种模块化的打包方案
把所有的代码都模块化, 通过统一的入口文件(一般是app.js), 打包出统一的出口
根据 loader plugin 来个性化打包的方法插件满足不同的项目需求

== 和 ===的区别，什么情况下用相等==?
== 会进行隐式转换
=== 得判断数据的类型是否相同
现在基本上不用 ==, 不晓得什么情况下能用吧

bind、call、apply的区别?
都是指定函数的this指向, 来让函数实现自身没有的方法
bind 底层还是 call apply 的封装
call 参数是一个一个的, apply 参数是数组

动画的了解?

介绍下原型链（解决的是继承问题吗）?
继承: 原型链继承、借用构造函数继承(call, apply)、组合继承
原型链继承只是继承的一种方式

对跨域的了解?

————————— 有赞 —————————
Linux 754 介绍?
最后一层目录权限为754, 直接进入到最后一层目录 chmod 754 5/4/3/2/1

介绍冒泡排序，选择排序，冒泡排序如何优化?
冒泡排序:
1.依次两两比较相邻的元素，如果第一个比第二个大，则进行交换
2.经过第一轮比较之后，最大的数已经出现在数组最后一个位置了
3.然后再对除了最后一个元素外的所有数都重复一遍上述比较，结束后第二个的数会到达数组倒数第二个位置
4.再依次对剩下的数进行重复，直到排序完毕

1	for (let j = 0; j < arr.length - i; j++) {}

优化: 在第一层循环内加个 bool = true 在第二个循环的 if 里如果交换就设置 bool = false

选择排序:
1.从数组的开头起，将第一个元素和其他所有元素都进行一次比较，选择出最小的元素放在数组的第一个位置
2.然后再从第二个元素开始，将第二个元素和除第一个之外的所有元素进行一次比较，选择出最小的元素放在数组的第二个位置
3.对后面的第三，第四……的元素分别重复上面的步骤，直到所有的数据完成排序

transform动画和直接使用left、top改变位置有什么优缺点?
设置一次的初始末尾位置, 用浏览器的GPU去处理动画, 页面更加流畅, 减少页面的重绘和回流性能更高

如何判断链表是否有环?
“快慢指针”: 用两个指针 fast 每次走两步 slow 每次走一步; 当 fast 再次与 slow 相遇的时候就说明链表有环

介绍二叉搜索树的特点?
二叉树就是树的每个节点最多只能有两个子节点
二叉搜索树由于其独特的数据结构，使得其无论在增删，还是查找，时间复杂度都是O(h)，h为二叉树的高度。因此二叉树应该尽量的矮，即左右节点尽量平衡

介绍暂时性死区 ?
let const 变量申明前引用报错只能申明一次变量不会变量提升按申明的位置开始起作用

ES6中的Map和原生的对象有什么区别?
Object的键只能是字符串，Map的键可以是任意类型的值（包括对象），所以Map是一种更完善的Hash结构实现

观察者和发布-订阅的区别?
观察者: 多个对一个的观察并更新
发布-订阅: 一个通过调度中心对多个的通知

react异步渲染的概念,介绍Time Slicing 和 Suspense?
一个组件不会阻塞其他组件的渲染, 但是会异步的
如果设备网速够快的话, 感觉上是同步的
异步的渲染页面,只展示最终的渲染状态, 就是等待页面的数据获取到了之后, 再一次性的把页面渲染出来, 如果是多个请求的数据,可以先渲染出来 (有点把后端服务端渲染的页面放到前端来渲染的感觉, 中间请求数据的时候给一个请求提示)

react生命周期的改变?

react中props改变后在哪个生命周期中处理?
componentWillReciveProps => shouldComponentUpdate

介绍纯函数?
就是 return 一个jsx 语法的模块 , 不 extends React.Component, 不用组件实例化, 也没有生命周期, 无state，只有props 纯渲染的, 效率更高

前端性能优化?

pureComponent 和 FunctionComponent 区别?
一个是为了提高性能的浅比较组件, 一个是可以纯函数组件或者高阶组件

介绍JSX?

1
2
3

// 利用HTML语法来创建虚拟DOM。
// 当遇到 < JSX就当HTML解析，遇到 { 就当JavaScript解析
// on 绑定事件, style={{}} 设置行内样式

如何做RN在安卓和IOS端的适配?

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

介绍虚拟DOM?
含有标签的属性和方法的一个node节点对象

如何设计一个localStorage，保证数据的实效性?
是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式, 为了数据的时效性, 可以和数据一起存一个data时间戳, 也可以是token等
localStorage.setItem(‘date’,Json.stringIfy(date))

如何设计Promise.all()

介绍高阶组件?
把基础组件当做函数参数,传入到函数中, 并做相应的操作, 再渲染组件

sum(2, 3)实现sum(2)(3)的效果?
函数柯里化, 保证一次传入更少的参数, 做更加明确的事情

react性能优化?

两个对象如何比较是否相等?

function diff(obj1,obj2){
    let o1 = obj1 instanceof Object;
    let o2 = obj2 instanceof Object;
    /*  判断不是对象  */
    if(!o1 || !o2){
        return obj1 === obj2;
    }

    //Object.keys() 返回一个由对象的自身可枚举属性(key值)组成的数组,例如：数组返回下表：let arr = ["a", "b", "c"];console.log(Object.keys(arr))->0,1,2;
    if(Object.keys(obj1).length !== Object.keys(obj2).length){
        return false
    }

    for(var attr in obj1){
        var t1 = obj1[attr] instanceof Object;
        var t2 = obj2[attr] instanceof Object;
        if(t1 && t2){
            return diff(obj1[attr],obj2[attr]);
        }else if(obj1[attr] !== obj2[attr]){
            return false;
        }
    }
    return true;
}

————————— 挖财 —————————
JS的原型?
prototype

变量作用域链?
以前的 var 声明变量, 存在变量提升, 分为全局作用域和函数作用域, 按照作用域链从内到外,往上查找

call、apply、bind的区别?

防抖和节流的区别?

介绍各种异步方案?

react生命周期?

介绍Fiber?
React Fibre是React核心算法正在进行的重新实现 fiber代表一个工作单元
React Fiber的目标是提高其对动画，布局和手势等领域的适用性
它的主体特征是增量渲染：能够将渲染工作分割成块，并将其分散到多个帧中

前端性能优化?

介绍DOM树对比?
diff 算法一层一层往下比较

react中的key的作用?
有循环的时候确定某一个虚拟 DOM 节点, 可以帮助 diff 算法更快的更新虚拟DOM

如何设计状态树?
一个公共的reducer 然后就是各个页面级别的reducer

介绍css，csrf?
xss 跨站脚本攻击客户端输入的脚本
csrf 跨站请求伪造后台模仿的请求攻击

http缓存控制?
1.0 max-age 1.1 E-tag Last-Modified(If-Modified-Since) 看http那篇

项目中如何应用数据结构?
不是复杂的项目, 数据结构应该尽量简单
静态数组适合元素不超过100的场合
动态数组适合元素不超过1000的场合
链表适合元素不超过3000的场合

native提供了什么能力给RN?

如何做工程上的优化?

shouldComponentUpdate是为了解决什么问题?
解决了组件是否需要再次 render 渲染, 如果并不需要渲染, 可以提升渲染效率

如何解决props层级过深的问题?

用 redux 全局状态管理
顶层组件的 context this.context.属性去引用

前端怎么做单元测试?
mocha chai should

webpack生命周期?
webpack打包的整个过程?
webpack将创建所有应用程序的依赖关系图表。图表的起点被称之为入口起点(entry point)
loader可以使你在require()或”加载”模块时预处理文件。因此，loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法
由于loader仅在每个文件的基础上执行转换，而插件(plugins)最常用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能，包括打包优化压缩及配置编译时的变量等功能
将所有的资源(assets)归拢在一起后，还需要告诉webpack在哪里打包应用程序。webpack的output属性描述了如何处理归拢在一起的代码(bundled code)

1	output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js'}

常用的plugins?

pm2怎么做进程管理，进程挂掉怎么处理 ?
PM2是一个带有负载均衡功能的Node.js应用的进程管理器。它允许你永远保持应用的存活,重新加载无需停机

不用pm2怎么做进程管理

—————- 沪江-饿了么-携程-喜马拉雅 —————-

————————— 沪江 —————————
介绍下浏览器跨域?
协议域名端口号的同源同域策略来确保请求的安全性

怎么去解决跨域问题?

jsonp方案需要服务端怎么配合?
配置返回的数据类型必须是jsonp 类型的，而不是json 类型的,解决跨域必须在ajax 方法中dataType 设置为jsonp
客户端js 代码中ajax 方法还要设置jsonpCallback 这个属性

Ajax发生跨域要设置什么（前端）?
Origin: https://blog.csdn.net

加上CORS之后从发起到请求正式成功的过程?
Request Method: OPTIONS 请求是否能行
Request Method: POST 发起请求

xsrf跨域攻击的安全性问题怎么防范?
是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）
提交验证码: 在表单中增加一个随机的数字或字母验证码，通过强制用户和应用进行交互，来有效地遏制CSRF攻击
Referer Check : 检查如果是非正常页面过来的请求，则极有可能是CSRF攻击
token验证: 在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求
在 HTTP 头中自定义属性并验证: 类似cookie的方法

使用Async会注意哪些东西?
await 接收返回来的 Promise , 用在 try{}catch{} 中抓取错误信息

Async里面有多个await请求，可以怎么优化（请求是否有依赖）?
await promise.all([p1, p2]) 同时发起异步请求

Promise和Async处理失败的时候有什么区别?
Promise、generator错误都可以在构造体里面被捕获，而async/await返回的是promise,可以通过catch直接捕获错误
generator 抛出的错误，以及await 后接的Promise.reject都必须被捕获，否则会中断执行

Redux在状态管理方面解决了React本身不能解决的问题?
props 层级太深的问题

Redux有没有做过封装?
一份store树，离开页面再次进入，数据不会初始化: (@修饰器) connectstore对ReactDom继承注入action和store，重写componentWillUnmount生命周期，离开页面自动触发store初始化

react生命周期，常用的生命周期?

对应的生命周期做什么事?

遇到性能问题一般在哪个生命周期里解决?
shouldUpdateComponent

怎么做性能优化（异步加载组件…）?
Time slicing upscape

写react有哪些细节可以优化?

React的事件机制（绑定到 document ）?
React组件上声明的事件没有绑定在React组件对应的原生DOM节点上，而是绑定在document节点上，触发的事件是对原生事件的包装
主要包含事件注册、触发以及回调函数的存储
ReactEventListener：负责事件注册和事件分发, React将DOM事件全都注册到document节点上，事件分发主要调用dispatchEvent进行，从事件触发组件开始，向父元素遍历
ReactEventEmitter：负责每个组件上事件的执行
EventPluginHub：负责回调函数的存储

介绍下事件代理，主要解决什么问题?

前端开发中用到哪些设计模式?
单例模式: 购物车, 全局缓存
观察者模式: 登录页面登录后，会需要刷新各个模块的信息（头像、nav）这类
工厂模式: 学生课程分数
命令模式: 刷新菜单界面
策略模式: 商品打折

React/Redux中哪些功能用到了哪些设计模式?
代理模式: 事件的注册, 触发
@connect: 装饰器模式
一个 store: 单例模式
appmidlleware(thunk, logger): 中介者模式
state => view : 发布订阅者模式

JS变量类型分为几种，区别是什么?
值类型引用类型

JS里垃圾回收机制是什么，常用的是哪种，怎么处理的?
标记清除法: 函数声明一个变量的时候，就将这个变量标记为“进入环境” 当变量离开环境时，则将其标记为“离开环境” 然后回收
引用计数法: 跟踪记录每个值被引用的次数引用次数为0的值所占用的内存就会被回收

一般怎么组织CSS（Webpack）
miniExtraCss()
style-loader css-loader postCss-loader less-loader

————————— 饿了么 —————————
小程序里面开页面最多多少?
每个小程序账号仅支持配置最多20个域名
每个域名最多可绑定20个小程序
在公众平台后台域名配置成功后，才可以使用web-view组件

React子父组件之间如何传值?
props func

Emit事件怎么发，需要引入什么?

介绍下React高阶组件，和普通组件有什么区别?
把组件当参数传入函数组件中, 作相应的逻辑处理再返回

一个对象数组，每个子对象包含一个id和name，React如何渲染出全部的name? map()
在哪个生命周期里写? render()
其中有几个name不存在，通过异步接口获取，如何做? 把对象放在 state 里, 先提示 loading , 获取到了后再渲染
渲染的时候key给什么值，可以使用index吗，用id好还是index好? id; 数组增删的时候 index 对应的数据存在变化

webpack如何配sass，需要配哪些loader?
sass-loader node-sass

配css需要哪些loader
style-loader css-loader postCss-loader

如何配置把js、css、html单独打包成一个文件?
js => bundle.js
css => miniCss => cope.js
html => router.page

div垂直水平居中（flex、绝对定位）?

两个元素块，一左一右，中间相距10像素,上下固定，中间滚动布局如何实现?

[1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]?

1
2
3

const index = array.findIndex(4)
const arrayBouth =  array.slice(index, 1)
return [...arrayBouth[0], ...[a, b], ...arrayBouth[1]]

取数组的最大值（ES5、ES6）?
Math.max(…[1,2,3])

apply和call的区别?

ES5和ES6有什么区别?

some、every、find、filter、map、forEach有什么区别?

上述数组随机取数，每次返回的值都不一样?
Math.random()

如何找0-5的随机数，95-99呢?

1	array.filter(item => item > 0 && item < 5)

页面上有1万个button如何绑定事件?
事件委托, 冒泡触发

如何判断是button?
冒泡的时候带上 index

页面上生成一万个button，并且绑定事件，如何做（JS原生操作DOM）

循环绑定时的index是多少，为什么，怎么解决?
9999 0 开始

页面上有一个input，还有一个p标签，改变input后p标签就跟着变化，如何处理?
监听input的哪个事件，在什么时候触发
onKeyup

————————— 携程 —————————
对React看法，有没有遇到一些坑?
pureComponent 只是浅比较
以及一些多次渲染的 render

对闭包的看法，为什么要用闭包?
增加了内存的消耗
某些浏览器上因为回收机制的问题，有内存溢出风险
增加了代码的复杂度，维护和调试不便

延长作用域链
生成预编译函数
更好的组织代码，比如模块化，异步代码转同步
setTimeout()(i) 问题

手写数组去重函数?
new Set(arr) (可能有兼容性问题)
arr.sort() 不相等就push到新的数组中
利用对象的属性不能相同的特点进行去重
利用includes

手写数组扁平化函数?
就是把多维数组变成一维数组

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

介绍下Promise的用途和性质?

Promise和Callback有什么区别?

React生命周期?

————————— 喜马拉雅 —————————
ES6新的特性?

介绍Promise?

Promise有几个状态?

说一下闭包?

React的生命周期?

componentWillReceiveProps的触发条件是什么?

React16.3对生命周期的改变?
UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

介绍下React的Filber架构?
改变了之前react的组件渲染机制，新的架构使原来同步渲染的组件现在可以异步化，可中途中断渲染，执行更高优先级的任务。释放浏览器主线程
画Filber渲染树?
就是组件的生命周期树, componentWillMount 一层一层的往下渲染 componentWillUnmount再往上

介绍React高阶组件?

父子组件之间如何通信?

Redux怎么实现属性传递，介绍下原理?

React-Router版本号?

网站SEO怎么处理?
前端加 meta discription keyword
后端 ssr

介绍下HTTP状态码 403、301、302是什么?
403 服务器拒绝请求
301 永久重定向
302 临时重定向

缓存相关的HTTP请求头?
尽量降低http的请求次数
Expires
Cache-Contro: Public Private no-cache no-store max-age min-fresh
Last-Modified/If-Modified-Since
ETag

no-cache>Expires>Last-Modified 前面的生效后,后面的基本就失效了

介绍HTTPS ?

HTTPS怎么建立安全通道?

前端性能优化（JS原生和React）?

用户体验做过什么优化?

对PWA有什么了解?
progressive web app: 渐进式网页应用
客户端要和推送服务进行绑定，会生成一个绑定后的推送服务API接口，服务端调用此接口，发送消息。同时，浏览器也要支持推送功能，在注册 sw 时, 加上推送功能的判断

对安全有什么了解?

介绍下数字签名的原理?
A：将明文进行摘要运算后得到摘要（消息完整性），再将摘要用A的私钥加密（身份认证），得到数字签名，将密文和数字签名一块发给B。
B：收到A的消息后，先将密文用自己的私钥解密，得到明文。将数字签名用A的公钥进行解密后，得到正确的摘要（解密成功说明A的身份被认证了

前后端通信使用什么方案?

RESTful常用的Method?

介绍下跨域?

Access-Control-Allow-Origin在服务端哪里配置?
response的header

csrf跨站攻击怎么解决?
token post方法 http header 中加验证

—————- 兑吧-微医-寺库-宝宝树 —————-

————————— 兑吧 —————————
localStorage和cookie有什么区别?

CSS选择器有哪些?

盒子模型，以及标准情况和IE下的区别?

如何实现高度自适应?

prototype和——proto——区别?

_construct是什么?

new是怎么实现的 ?

promise的精髓，以及优缺点?

如何实现H5手机端的适配?

rem、flex的区别（root em）?

em和px的区别?

React声明周期?

如何去除url中的#号?

Redux状态管理器和变量挂载到window中有什么区别?

webpack和gulp的优缺点?

如何实现异步加载?

如何实现分模块打包（多入口）?

前端性能优化（1js css；2 图片；3 缓存预加载； 4 SSR； 5 多域名加载；6 负载均衡）?

并发请求资源数上限（6个）?

base64为什么能提升性能，缺点?

介绍webp这个图片文件格式?
WebP是一种有损压缩这个格式的图像的体积将比JPEG格式图像减小40% 主要优势在于高效率

介绍koa2?

Promise如何实现的?

异步请求，低版本fetch如何低版本适配?

ajax如何处理跨域?

CORS如何设置?

jsonp为什么不支持post方法?
只支持get方法获取数据

介绍同源策略?

React使用过的一些组件?

介绍Immuable?

介绍下redux整个流程原理?

介绍原型链?

如何继承?

————————— 微医 —————————
介绍JS数据类型，基本数据类型和引用数据类型的区别?

Array是Object类型吗?

数据类型分别存在哪里?

var a = {name: “前端开发”}; var b = a; a = null那么b输出什么
var a = {b: 1}存放在哪里
var a = {b: {c: 1}}存放在哪里

栈和堆的区别?

垃圾回收时栈和堆的区别?

数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少?
没有差别吧通过索引index去拿

栈和堆具体怎么存储?

介绍闭包以及闭包为什么没清除?

闭包的使用场景?

JS怎么实现异步?

异步整个执行周期?

Promise的三种状态?

Async/Await怎么实现?

Promise和setTimeout执行先后的区别?

JS为什么要区分微任务和宏任务?

Promise构造函数是同步还是异步执行，then呢?

发布-订阅和观察者模式的区别?

JS执行过程中分为哪些阶段?

词法作用域和this的区别?
一个是定义时的作用域一个是执行时的作用域

平常是怎么做继承?

深拷贝和浅拷贝?

loadsh深拷贝实现原理?

ES6中let块作用域是怎么实现的?

React中setState后发生了什么?

setState为什么默认是异步?

setState什么时候是同步的?

为什么3大框架出现以后就出现很多native（RN）框架（虚拟DOM）?

虚拟DOM主要做了什么?

虚拟DOM本身是什么（JS对象）

304是什么?
客户端已经执行了GET，但文件未变化

打包时Hash码是怎么生成的?
版本号 + 时间戳

随机值存在一样的情况，如何避免?
多维度产生随机数

使用webpack构建时有无做一些自定义操作?

webpack做了什么?

a，b两个按钮，点击aba，返回顺序可能是baa，如何保证是aba（Promise.all）?

node接口转发有无做什么优化?

node起服务如何保证稳定性，平缓降级，重启等?

RN有没有做热加载?
没有

RN遇到的兼容性问题?

RN如何实现一个原生的组件?

RN混原生和原生混RN有什么不同?

什么是单页项目?

遇到的复杂业务场景?

Promise.all实现原理?

————————— 寺库 —————————
介绍Promise的特性，优缺点?

介绍Redux?

RN的原理，为什么可以同时在安卓和IOS端运行?

RN如何调用原生的一些功能?

介绍RN的缺点?

介绍排序算法和快排原理?
快排原理: 一个数为基准小的放前面大的放后面 (再重复)

堆和栈的区别?

介绍闭包?

闭包的核心是什么?

网络的五层模型?

HTTP和HTTPS的区别?

HTTPS的加密过程?

介绍SSL和TLS?
SSL记录协议和SSL握手协议

介绍DNS解析?

JS的继承方法?

介绍垃圾回收?

cookie的引用为了解决什么问题?

cookie和localStorage的区别?

如何解决跨域问题?

前端性能优化?

————————— 宝宝树 —————————
使用canvas绘图时如何组织成通用组件?

formData和原生的ajax有什么区别?
设置header 里的 Content-Type 的类型
Content-type：application/x-www-form-urlencoded

介绍下表单提交，和formData有什么关系?

介绍redux接入流程?

rudux和全局管理有什么区别（数据可控、数据响应）?

RN和原生通信 ?
使用回调函数Callback，它提供了一个函数来把返回值传回给JavaScript
使用Promise来实现
原生模块向JavaScript发送事件

介绍MVP怎么组织?

介绍异步方案?

promise如何实现then处理?

koa2中间件原理?
koa2 的中间件是洋葱模型。基于async/await 可以更好的处理异步操作

常用的中间件?
1.koa:面向node.js的表达式HTTP中间件框架，使Web应用程序和API更加令人愉快地编写
2.koa-router:Router middleware for koa(koa的路由中间件)
3.koa-views:Template rendering middleware for koa.(koa的模板渲染中间件)
4.koa-bodyparser:用来解析body的中间件，比方说你通过post来传递表单，json数据，或者上传文件，在koa中是不容易获取的，通过koa-bodyparser解析之后，在koa中this.body就能直接获取到数据。ps：xml数据没办法通过koa-bodyparser解析，有另一个中间件koa-xml-body
5.promise-mysql:Promise-mysql是mysqljs / mysql的一个包装函数，它包含Bluebird承诺的函数调用。通常这会用Bluebird的.promisifyAll()方法完成，但是mysqljs / mysql的脚本与Bluebird所期望的不同

服务端怎么做统一的状态处理?
用promise拦截状态码

如何对相对路径引用进行优化?

node文件查找优先级?

npm2和npm3+有什么区别?
npm3 和 npm2 对于依赖的处理不一样了
npm2所有项目依赖是嵌套关系，而npm3为了改进嵌套过多、套路过深的情况，会将所有依赖放在第二层依赖中（所有依赖只嵌套一次，彼此平行，也就是平铺的结构

————————— 海康威视 —————————
knex连接数据库响应回调
介绍异步方案
如何处理异常捕获
项目如何管理模块
前端性能优化
JS继承方案
如何判断一个变量是不是数组
变量a和b，如何交换
事件委托
多个标签生成的Dom结构是一个类数组
类数组和数组的区别
dom的类数组如何转成数组
介绍单页面应用和多页面应用
redux状态树的管理
介绍localstorage的API

————————— 蘑菇街 —————————
html语义化的理解
和的区别
对闭包的理解
工程中闭包使用场景
介绍this和原型
使用原型最大的好处
react设计思路
为什么虚拟DOM比真实DOM性能好
react常见的通信方式
redux整体的工作流程
redux和全局对象之间的区别
Redux数据回溯设计思路
单例、工厂、观察者项目中实际场景
项目中树的使用场景以及了解
工作收获

————————— 酷家乐 —————————
react生命周期
react性能优化
添加原生事件不移除为什么会内存泄露
还有哪些地方会内存泄露
setInterval需要注意的点
定时器为什么是不精确的
setTimeout(1)和setTimeout(2)之间的区别
介绍宏任务和微任务
promise里面和then里面执行有什么区别
介绍pureComponet
介绍Function Component
React数据流
props和state的区别
介绍react context
介绍class和ES5的类以及区别
介绍箭头函数和普通函数的区别
介绍defineProperty方法，什么时候需要用到
for..in 和 object.keys的区别
介绍闭包，使用场景
使用闭包特权函数的使用场景
get和post有什么区别

————————— 百分点 —————————
React15/16.x的区别
重新渲染render会做些什么
哪些方法会触发react重新渲染
state和props触发更新的生命周期分别有什么区别
setState是同步还是异步
对无状态组件的理解
介绍Redux工作流程
介绍ES6的功能
let、const以及var的区别
浅拷贝和深拷贝的区别
介绍箭头函数的this
介绍Promise和then
介绍快速排序
算法：前K个最大的元素

————————— 海风教育 —————————
对react看法，它的优缺点
使用过程中遇到的问题，如何解决的
react的理念是什么（拿函数式编程来做页面渲染）
JS是什么范式语言(面向对象还是函数式编程)
koa原理，为什么要用koa(express和koa对比)
使用的koa中间件
ES6使用的语法
Promise 和 async/await 和 callback的区别
Promise有没有解决异步的问题（promise链是真正强大的地方）
Promise和setTimeout的区别（Event Loop）
进程和线程的区别（一个node实例就是一个进程，node是单线程，通过事件循环来实现异步）
介绍下DFS深度优先
介绍下观察者模式
观察者模式里面使用的数据结构(不具备顺序，是一个list)

meta标签

meta标签：提供给页面的一些元信息（名称/值对），比如针对搜索引擎和更新频度的描述和关键词。

name：名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。把 content 属性关联到一个名称。
http-equiv：没有name时，会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。
content：名称/值对中的值，可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用。
scheme：用于指定要用来翻译属性值的方案。

css哪些属性可以继承

字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关：list-style-image, list-style-position, list-style-type, list-style
颜色：color

css3有哪些新属性

（1）边框：

border-radius：圆角边框，border-radius:25px;
box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888;
border-image：边框图片，border-image:url(border.png) 30 30 round;

（2）背景：

background-size：规定背景图片的尺寸，background-size:63px 100px;
background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box;
CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);

（3）文本效果：

text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;
word-wrap：允许文本进行换行。word-wrap:break-word;

（4）字体：CSS3 @font-face 规则可以自定义字体。

（5）2D 转换（ transform）

translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。 transform: translate(50px,100px);
rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg);
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4);
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg);
matrix()：把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

（6）3D 转换

rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

（7）transition：过渡效果，使页面变化更平滑

简写为： transition: [ || || || ];

（8）animation：动画

使用CSS3 @keyframes 规则。

animation-name: 定义动画名称
animation-duration: 指定元素播放动画所持续的时间长
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )：指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。
animation-delay: 指定元素动画开始时间
animation-iteration-count:infinite | ：指定元素播放动画的循环次
animation-direction: normal | alternate：指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
animation-play-state:running | paused ：控制元素动画的播放状态。

简写为： animation:[ || || || || || ]

这里只列出了一部分，详情可以去看w3school的CSS3 教程。

闭包是什么，什么时候闭包会消除?

因为作用域链，外部不能访问内部的变量和方法，这时我们就需要通过闭包，返回内部的方法和变量给外部，从而就形成了一个闭包。

JavaScript是一门具有自动垃圾回收机制的编程语言，主要有两种方式：

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。

引用计数（reference counting）的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0 时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。

导致问题：会导致循环引用的变量和函数无法回收。

解决：将用完的函数或者变量置为null。

怎么理解js是单线程的

主要说一下异步以及事件循环机制，还有事件队列中的宏任务、微任务。

macrotask：主代码块，setTimeout，setInterval、setImmediate等。
microtask：process.nextTick（相当于node.js版的setTimeout），Promise 。process.nextTick的优先级高于Promise。

更详细可以看这篇博客：这一次，彻底弄懂 JavaScript 执行机制，讲的非常清晰。

有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？

排序算法最坏事件复杂度平均时间复杂度稳定度空间复杂度
冒泡排序 O(n^2) O(n^2) 稳定 O(1)
插入排序 O(n^2) O(n^2) 稳定 O(1)
选择排序 O(n^2) O(n^2) 稳定 O(1)
快速排序 O(n^2) O(nlog2n) 不稳定 O(log2n)~O(n)
二叉树排序 O(n^2) O(nlog2n) 不一定 O(n)
堆排序 O(nlog2n) O(nlog2n) 不稳定 O(1)
整个序列已经有序或完全倒序时，快排的效率最低。

//发送请求

http状态码，cookie字段，cookie一般存的是什么，session怎么存在的？

这部分可以参考我的博客：HTTP协议知识点总结

http请求方式有哪些？

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
更多请看：HTTP请求方法

怎么用原生js实现一个轮播图，以及滚动滑动

之前我使用轮播图都是用的antd的组件，所以我大致说了一下思路，用定时器去实现，以及如何实现平滑的滚动效果。详情请看：原生js实现轮播图

用过哪些开源的组件

说了antd和element-ui。

怎么实现上传下载的功能

主要说了下form表单和input标签。

react生命周期，以及diff算法，diff算法是对树的深度优先遍历还是广度优先遍历？
强缓存和协商缓存

参考：HTTP协议知识点总结

react-router的原理

react-router就是控制不同的url渲染不同的组件。react-router在history库的基础上，实现了URL与UI的同步。

原理：DOM渲染完成之后，给window添加onhashchange事件监听页面hash的变化，并且在state属性中添加了route属性，代表当前页面的路由。

具体步骤：

当点击链接，页面hash改变时，触发绑定在 window 上的 onhashchange 事件；
在 onhashchange 事件中改变组件的 state中的 route 属性，react组件的state属性改变时，自动重新渲染页面；
页面随着 state 中的route属性改变，自动根据不同的hash给Child变量赋值不同的组件，进行渲染。

参考：react-router的实现原理

怎么用无人机捕获天空上的鸟

这个题目我也不造啊，毕竟我没用过无人机，有知道的大神可以在评论中回答一下~

终面

终面是去的现场，在深圳总部那边，基本就是闲聊了二十来分钟吧，面完还有hr小姐姐给我们介绍和参观了无人机，酷炫~

做的项目中，哪个做的最深入最久
为什么要做前端，喜欢做前端么
未来的职业规划
了解大疆么，大疆的文化是什么
除了实习，还做过哪些项目
如果生活富足，衣食无忧，你会选择干什么
阿里巴巴

阿里是提前批，找人内推了菜鸟网络，面了六轮，面的我怀疑人生了，中途四面本来已经挂了，后面三面面试官又捞起来给我加面了一轮，不过最后还是挂在了hr。

一面

css选择器，怎么选择相同的类

id、class、标签、伪类、通配符等。可以用getElementsByClassName（）选择相同的类。

css3有哪些伪类，伪类选择器有哪些

这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。

伪类：用于向某些选择器添加特殊的效果。例如，a标签的 :link, :visited,:hover, :active; 以及 :first-child, :last-child。
伪元素：是html中不存在的元素，用于将特殊的效果添加到某些选择器。例如:before, :after, :first-letter, :first-line。css3只新增了一个伪元素::selection（改变用户所选取部分的样式）。

参考： CSS3 选择器——伪类选择器

OSI七层网络模型

OSI七层模型作用对应协议对应设备
应用层它是计算机用户，以及各种应用程序和网络之间的接口 HTTP, FTP, SMTP, POP3 计算机设备
表示层信息的语法语义以及它们的关系，如加密解密、转换翻译、压缩解压缩 IPX, LPP, XDP
会话层建立、维护、管理应用程序之间的会话 SSL, TLS, DAP, LDAP
传输层服务点编址，分段与重组、连接控制、流量控制、差错控制 TCP, UDP 防火墙
网络层为网络设备提供逻辑地址，进行路由选择、分组转发 IP ARP RARP ICMP IGMP 路由器
数据链路层物理寻址，同时将原始比特流转变为逻辑传输路线 PPTP, ARP, RARP 交换机
物理层机械、电子、定时接口通道信道上的原始比特流传输 IEEE 802.2, Ethernet v.2, Internetwork 网卡
参考：一张非常强大的OSI七层模型图解

MVC和MVVM的区别

Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法；
View作为视图层，主要负责数据的展示；
Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。

MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

MVVM把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

参考：浅析前端开发中的 MVC/MVP/MVVM 模式

用过哪些设计模式

（1）单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

实现方法：先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。

（2）发布/订阅模式
定义：又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

场景：订阅感兴趣的专栏和公众号。

（3）策略模式
定义：将一个个算法（解决方案）封装在一个个策略类中。

优点：

策略模式可以避免代码中的多重判断条件。
策略模式很好的体现了开放-封闭原则，将一个个算法（解决方案）封装在一个个策略类中。便于切换，理解，扩展。
策略中的各种算法可以重复利用在系统的各个地方，避免复制粘贴。
策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。
违反最少知识原则，必须要了解各种策略类，才能更好的在业务中应用。

应用场景：根据不同的员工绩效计算不同的奖金；表单验证中的多种校验规则。

（4）代理模式

定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

应用场景：图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）

（5）中介者模式

定义：通过一个中介者对象，其他所有相关对象都通过该中介者对象来通信，而不是互相引用，当其中的一个对象发生改变时，只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。

应用场景：例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

（6）装饰者模式

定义：在不改变对象自身的基础上，在程序运行期间给对象动态的添加方法。

应用场景：有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。

参考： JavaScript设计模式

Http状态码
https怎么加密

参考： HTTP协议知识点总结

es6相比es5有哪些优点

大概说一下：let、const，模板字符串，箭头函数，做异步处理的promise、generator、async await，es6模块等。

参考：阮一峰 —— ECMAScript 6 入门

ajax请求过程

不多说，上面有。

有哪些性能优化

参考：

懒加载怎么实现

场景：一个页面中很多图片，但是首屏只出现几张，这时如果一次性把图片都加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区在加载。优化首屏加载。

实现：img标签src属性为空，给一个data-xx属性，里面存放图片真实地址，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

优点：页面加载速度快，减轻服务器压力、节约流量，用户体验好。

项目中写过什么组件，组件有哪些功能

主要介绍了下实习项目写过的组件，说了下如何实现的。

二面

react框架有哪些设计的好的地方

主要介绍了以下几个部分：

JSX语法
组件化
react单项数据流
虚拟DOM
react生命周期

react是怎么工作的，怎么提高性能

主要还是说了下react的生命周期，还有shouldComponentUpdate这个函数，以及diff算法。

redux有哪些需要改进，你觉得你用的不怎么舒服的地方？

我当时说的是redux的subscribe方法有点麻烦，每次更新数据都要手动的subscribe一下，所以觉得react-redux的api封装的更好，用起来比较简单。

参考：

怎么设计一个类似于antd 的 react 组件库

这个问题把我给问懵了额，我是按照软件工程的生命周期流程来答的。

你做的最自豪的一个项目

这个略过…言之有理即可

mysql 的左关联和右关联

左关联：保留左表中所有的元组，右表中没有的属性填充NULL。

右关联：保留右表中所有的元组，左表中没有的属性填充NULL。

有没有折腾过后端

直接说了没有，之前学了点PHP，不过都快忘得差不多了额。

学习方法和未来的学习路线

言之有理即可。

浏览器页面渲染机制

解析html建立dom树
解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

参考：从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

XSS和CSRF防范措施
（1）XSS：跨站脚本攻击
攻击方式：在URL或者页面输入框中插入JavaScript代码。
防范：
设置httpOnly，禁止用document.cookie操作；
输入检查：在用户输入的时候进行格式检查；
对输出转义。
（2）CSRF：跨站点伪造请求
攻击方式：攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。主要是拿到了用户的登录态。
防范：
检查 Referer 字段：这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，通常来说，Referer 字段应和请求的地址位于同一域名下
添加校验 Token：这种数据通常是表单中的一个数据项。服务器生成token并附加在表单中，其内容是一个伪乱数。当客户端通过表单提交请求时，这个伪乱数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪乱数，而通过 CSRF 传来的欺骗性攻击中，攻击者无从事先得知这个伪乱数的值，服务器端就会因为校验 Token 的值为空或者错误，拒绝这个可疑请求
通过输入验证码来校验合法请求

三面

这一面基本问的是个人知识沉淀了，如实回答就可以了。

在项目中的难点，怎么解决的
你的优势是什么
redux 源码学到了什么，怎么看源码的
了解哪些前端的前沿技术
平时看什么书，兴趣爱好是什么
异步有哪些方法
博客写了什么
除了实习经历，还做过哪些项目
四面

这一面是在杭州菜鸟现场面的，尴尬的是通知我的小姐姐一直强调是hr面，我天真的以为是hr面了，然鹅问了很多技术，当时候想的是阿里的hr都这么厉害了，都能直接问技术了。临走之前，特意问了面试官是hr面么，他说是技术，然后我……大概就知道自己凉了。

mysql的索引用的什么，介绍一下b树，b+树，红黑树这些

mysql的索引用的是B+树。

参考：数据结构中常见的树（BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B+树、B*树）

Mysql的基本写法

参考：一千行 MySQL 学习笔记

估算下杭州上空现在有多少架飞机

这个题目，也真的是为难我了额。在网上搜到了个答案，可以参考下：高盛的面试题

两组数据，都存储五亿条url，内存有4G，如何找出相同的两条url

参考：面试- 阿里-. 大数据题目- 给定a、b两个文件，各存放50亿个url，每个url各占64字节，内存限制是4G，让你找出a、b文件共同的url?

如何找到一个字符串中最长的两个字符串

解法：后缀数组。首先生成字符串的所有后缀数组，在进行排序，找出相邻两个最长的公共子串（从第一位开始相同的）

例如：abcdeabc

生成后缀数组：【abcdeabc，bcdeabc，cdeabc，deabc，eabc，abc，bc，c】

再排序：【abcdeabc，abc，bcdeabc，bc，cdeabc，c，deabc，eabc】

找出相邻的最长公共子串：【abc，bc，c】

因此，最长的串是abc。

在白板上画出这个项目的整个架构

画了下项目的功能架构什么的。

XSS, CSRF,token 怎么来的，sql 注入知道么

sql注入：

攻击方式：服务器上的数据库运行非法的 SQL 语句，主要通过拼接字符串的形式来完成，改变sql语句本身的语义。通过sql语句实现无账号登陆，甚至篡改数据库。

防御：

使用参数化查询：使用预编译语句，预先编译的 SQL 语句，并且传入适当参数多次执行。由于没有拼接的过程，因此可以防止 SQL 注入的发生。使用preparedStatement的参数化sql，通过先确定语义，再传入参数，就不会因为传入的参数改变sql的语义。（通过setInt，setString，setBoolean传入参数）
单引号转换：将传入的参数中的单引号转换为连续两个单引号，PHP 中的 Magic quote 可以完成这个功能。
检查变量数据类型和格式。
使用正则表达式过滤传入的参数，对特殊符号过滤或者转义处理。

怎么设计一个ant的组件
你觉得你实习做的项目有什么改进的地方
你做过印象最深刻的项目
算法了解过吗

就知道一些基本的排序额…

Setstate 会发生什么

setState会引发一次组件的更新过程，从而引发页面的重新绘制。主要会涉及以下几个生命周期函数：

shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
componentWillUpdate（被调用时this.state没有更新）
render（被调用时this.state得到更新）
componentDidUpdate

平时处理过什么兼容性

参考： web前端兼容性问题总结

了解分布式和负载均衡么

然鹅我并不了解呃。

参考：服务器负载均衡的基本功能和实现原理

五面

第四面确实是挂了，没面hr就让我走了，后面过了两天之后，三面面试官又把我捞起来了，说我计算机基础还有数据库基础不怎么好，然后说问我几个简单的，之后给了我机会面了hr，感谢三面面试官让我体验了阿里的整个面试流程，很满足了。

进程和线程的区别

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。
在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。
所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）。
内存分配方面：系统在运行的时候会为每个进程分配不同的内存空间；而对线程而言，除了CPU外，系统不会为线程分配内存（线程所使用的资源来自其所属进程的资源），线程组之间只能共享资源。
包含关系：没有线程的进程可以看做是单线程的，如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。

冒泡排序和快速排序的区别

简述了下冒泡和快排的思想，以及冒泡和快排的时间复杂度。

OSI七层模型以及作用

上面有写噢，不知道的往上翻。

你有哪些优势，或者打动他的

呃，最怕这种自夸的问题额，然后就是夸了一顿，手动捂脸。

面向对象和非面向对象有什么区别

面向对象三大特性：封装,继承,多态。

面向对象的好处：

将对象进行分类，分别封装它们的数据和可以调用的方法，方便了函数、变量、数据的管理，方便方法的调用（减少重复参数等），尤其是在编写大型程序时更有帮助。
用面向对象的编程可以把变量当成对象进行操作，让编程思路更加清晰简洁，而且减少了很多冗余变量的出现

参考：面向对象（一）|面向对象概念及优点

设计模式有哪些，说下装饰者模式和代理模式

前面有总结，往前翻。

重载和重写有什么区别

方法重写(overriding)：

也叫子类的方法覆盖父类的方法，要求返回值、方法名和参数都相同。
子类抛出的异常不能超过父类相应方法抛出的异常。(子类异常不能超出父类异常)
子类方法的的访问级别不能低于父类相应方法的访问级别(子类访问级别不能低于父类访问级别)。

方法重载(overloading):

重载是在同一个类中的两个或两个以上的方法，拥有相同的方法名，但是参数却不相同，方法体也不相同，最常见的重载的例子就是类的构造函数。

参考：方法重载和重写的区别

hr面

为什么选择前端开发
什么事情让你最有成就感
什么让你最有挫败感
为什么选择阿里
平时是怎么学习的
职业发展
百度

二面三面都有手写代码的环节，对于我这种动手能力弱的人来说还是挺吃力。当时提前批投递的是深圳百度，总共只招五个前端，没过也很正常。后面正式批笔试过了，但是要去北京面试，也就直接放弃了。

为什么要用flex布局，align-items和justify-content的区别

传统布局基于盒模型，非常依赖 display属性、position属性、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在垂直方向上的对齐方式；

justify-content：定义在水平方向上的对齐方式。

webpack是怎么打包的，babel又是什么？

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

saas和less不同于普通css的地方

定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；
嵌套写法，父子关系一目了然；
使用运算符，可以进行样式的计算；
内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

es 6模块和其他模块不同的地方

对比了一下es6模块和CommonJS模块：

区别 CommonJS es6
加载原理第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。
输出值的拷贝（模块中值的改变不会影响已经加载的值）值的引用（静态分析，动态引用，原来模块值改变会改变加载的值）
加载方式运行时加载（加载整个模块，即模块中的所有接口）编译时加载（只加载需要的接口）
this指向指向当前模块指向undefined
循环加载只输出已经执行的部分，还未执行的部分不会输出遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。

有没有用过es6的一些异步处理函数

Promise，generator，async await

redux怎么处理异步操作

可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。

其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。

为什么reducer要是个纯函数，纯函数是什么？

纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。

原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同（浅比较）。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。

高阶函数是什么，怎么去写一个高阶函数

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。

编写高阶函数，就是让函数的参数能够接收别的函数。

vue跟react的区别是什么

没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。

参考： Vue.js与React的全面对比

nodejs处理了什么问题

可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。

响应式布局，怎么做移动端适配

使用媒体查询可以实现响应式布局。

移动端适配方案：

（1）meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

<meta

name
=
“viewport”

content
=
“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”

width=device- 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

（2）媒体查询（响应式)

（3）动态 rem 方案

参考：移动端是怎么做适配的？

二面

怎么做一个实时的聊天系统

使用WebSocket和nodejs，《nodejs实战》这本书详细介绍了这个项目。

当消息有延迟的时候，怎么保证消息的正确顺序

每个消息在被创建时，都将被赋予一个全局唯一的、单调递增的、连续的序列号（SerialNumber，SN）。可以通过一个全局计数器来实现这一点。通过比较两个消息的SN，确定其先后顺序。

怎么做一个登陆窗口，input有哪些兼容性

使用form表单。

input按钮如何校验

使用正则表达式。

webpack有配置过吗？原理知道吗

参考前面。

父子组件如何通信，子组件怎么跟父组件通信？

父组件把state作为props传递给子组件进行通信。

父组件写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子组件，子组件调用父组件的函数，同时引起state变化。

简单说一下pwa

面试的这个部门就是做pwa的，所以说了下自己对pwa的理解。

从url输入到页面显示会有哪些步骤

（1）DNS服务器解析域名，找到对应服务器的IP地址;

（2）和服务器建立TCP三次握手连接；

（3）发送HTTP请求，服务器会根据HTTP请求到数据服务器取出相应的资源，并返回给浏览器；

（4）浏览器处理响应

加载：浏览器对一个html页面的加载顺序是从上而下的。

当加载到外部css文件、图片等资源，浏览器会再发起一次http请求，来获取外部资源。
当加载到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，等待js文件加载、解析完毕才可以恢复html文档的渲染线程。

解析：解析DOM树和CSSDOM树。
渲染：构建渲染树，将DOM树进行可视化表示，将页面呈现给用户。

method有哪些方法，分别是什么意思？post和put的区别

post：上传资源

put：修改资源

https有几次握手
http2比http1好的地方

主要是考察http2的几个特性。

参考：HTTP协议知识点总结

页面刷新不出来，是有哪些问题

可以从第三题的每个步骤进行分析，大概是：

域名不存在，或者ip地址错误
网络问题，不能建立正常的tcp连接
服务器找不到正确的资源

上一次系统性的学习是什么时候，怎么学习的

学习react的时候，看文档、博客，照着网上写了点小项目。

你觉得项目中最自豪的是什么
上家公司有哪些不好的地方

网易

网易是在杭州网易大厦面的，一天面完三轮，然后录用排序，择优录取的吧。我投的是网易考拉，哭唧唧，后面被拒了之后还伤心的卸载了考拉。之后正式批投了杭研，过了笔试，要去武汉面，本来海康也是在武汉面的，考虑到还要住一晚上，有点怕怕，就没去了。

图片懒加载src
Promise异步
水平垂直居中
数组有哪些方法，哪些会改变原数组

改变原数组的方法：pop、push、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill；

不改变原数组（复制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes；

循环遍历：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

操作dom有哪些方法

创建：

createDocumentFragment
()

//创建一个DOM片段

createElement
()

//创建一个具体的元素

createTextNode
()

//创建一个文本节点

添加：appendChild()

移出：removeChild()

替换：replaceChild()

插入：insertBefore()

复制：cloneNode(true)

查找：

getElementsByTagName
()

//通过标签名称

getElementsByClassName
()

//通过标签名称

getElementsByName
()

//通过元素的Name属性的值

getElementById
()

//通过元素Id，唯一性

左边定宽右边自适应

（1）左盒子左浮动，右盒子width=100%

（2）左盒子左浮动，右盒子margin-left=左盒子宽度

（3）左盒子左浮动，右盒子右浮动，设置calc（100vw-盒子宽度）

（4）父容器设置display=flex，右盒子flex：1

事件代理

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

后端了解么

直接说了不了解，笑哭。

二面

节流和防抖，手写一下代码

（1）防抖：

定义：合并事件且不会去触发事件，当一定时间内没有触发这个事件时，才真正去触发事件。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

场景： keydown事件上验证用户名，输入法的联想。

（2）节流：

定义：持续触发事件时，合并一定时间内的事件，在间隔一定时间之后再真正触发事件。每间隔一段时间触发一次。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

场景： resize改变布局时，onscroll滚动加载下面的图片时。

实现：

当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为0)，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

缺陷：第一次事件会立即执行，停止触发后没办法再激活事件。

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

缺陷：第一次事件会在n秒后执行，停止触发后依然会再执行一次事件。

知道哪些性能优化
react为什么比其他要快，虚拟dom知道吗
写过什么组件
平时怎么学习的
node，webpack了解么
模块化，commonjs,es6模块
redux怎么实现的

hr面

项目上有哪些难点，项目中学到了什么
不喜欢跟什么样的人共事
平时怎么学习
为什么来杭州
职业发展
搜狗

搜狗是内推的，面试也很迷，第一面到第二面中间隔了二十几天，然后二面完了也毫无反馈。

一面

说一下项目，整个网络过程，从前端到后台
Ajax 底层实现，readystate 有哪些

0-（未初始化）还没有调用send()方法
1-（载入）已调用send()方法，正在发送请求
2-（载入完成）send()方法执行完成，已经接收到全部响应内容
3-（交互）正在解析响应内容
4-（完成）响应内容解析完成，可以在客户端调用了

状态码有哪些，100,307
OSI七层模型
TCP三次握手
SSL握手过程
jQuery 有哪些方法
display 有哪些属性，说一下flex的属性
Es6的async awiat ，generator
Map有哪些方法

Map的方法：set, get, has, delete, clear

遍历方法：

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。

参考： Set 和 Map 数据结构

正则用过吗？exec, 匹配一个手机号
css3动画了解吗，怎么写一个loading动画
怎么实现跨域,cors涉及哪些请求字段
编程: 判断两个网络地址是否属于同一个子网掩码

用与运算符就可以了。当时是在牛客网的面试系统上写的，一直AC不出，也是很迷了额。

怎么上传文件

二面

怎么计算在一个页面上的停留时间

方案1：websocket，前端开个长连接，后台统计长连接时间。

方案2：ajax轮询，隔几秒发一个查询，后台记录第一与最后一个查询间隔时间。

方案3：关闭窗口或者跳转的时候会触发window.onbeforeunload函数，可以在该函数中做处理（有兼容性问题）；统计完数据记录到本地cookies中，一段时间后统一发送。

给你一亿个数，是连续的，怎么找出两个不存在的数

用bitmap就能搞定了，存在为1，不存在为0。

一个搜索框的输入联想，会遇到什么问题？如果第一个请求延迟，第二个请求先到，请问怎么处理？

键盘输入太快，每次输入都去联想，需要多次发送请求，会导致用户体验太差，可以使用防抖优化。

在前端做判断，判断此时的值是否与返回的值相同，不同就丢弃，相同就显示在页面。

Http的缓存
二维码怎么工作的，扫描pc端的二维码，怎么让pc端登录？

pc端随机生成一个含有唯一uid的二维码，并与服务器建立一个长连接；
手机扫描二维码，解析出二维码中的uid，并把这个uid和手机端的用户密码进行绑定，上传给服务器；
服务器获得客户端信息之后，pc端的长连接轮询操作会获得该消息，显示该账号的信息；
pc端会再开一个长连接与手机端保持通信，等待手机端确认登陆后，获得服务器授权的token，就可以在pc端登陆进行正常通信了。

Promise 做什么的，有哪几种状态

异步处理的，有三个状态：resolve，pending，reject。

项目有哪些难点，怎么处理的
遇到过哪些性能优化

电信IT研发中心

当时听说电信对学历要求很高，本科基本都是211起的，想着自己本科太渣，就直接放弃了网上的笔试。之后电信来了学校宣讲会，跟朋友吃完饭看到了，就去说凑凑热闹，刚好有笔试也就做了。做完之后笔试居然考了最高分，比第二名高出二十分，手动捂脸额。一面完分数也挺高的，有95分，运气爆棚。重点是今年电信开的薪资实在太高了，目前还在纠结选哪个。

Xhtml和html的区别

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

遇到过哪些兼容性问题
浏览器内核有哪些，移动端用的是哪个

Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

对于Android手机而言，使用率最高的就是Webkit内核。

怎么实现标签页的通信
Cookie、session,localstorage，sessionstorage
React 和jquery 之间的区别，哪个好用
怎么实现继承
Es6,es7有哪些特性
怎么跨域
Commonjs用的js哪个特性?

因为js之前只能在浏览器运行，为了能让js能在服务器上运行，所以设计了commonjs规范，而且js之前没有模块化的概念。

选择器优先级
伪类知道吗，有哪些
块级元素有哪些，怎么转成行内元素
一个完整的http请求，页面渲染过程，js和css文件怎么渲染

二面

一面问的都很常规的，不知道为啥给了这么高的分。二面的时候三个面试官，总共就问了三个问题，然后就说面试结束了，不超过五分钟。

TCP怎么工作的

三次握手

OSI七层模型，路由器工作在哪一层？

网络层

平时用什么语言，用过哪些框架

深信服

深信服给的薪资居然比电信还低，而且加班还严重，就直接拒了。

一面

跨域，同源策略，webpack里面有个跨域的方式知道么
怎么把es6转成es5，babel怎么工作的

解析：将代码字符串解析成抽象语法树
变换：对抽象语法树进行变换操作
再建：根据变换后的抽象语法树再生成代码字符串

反向代理知道么，Nginx
继承有哪些方式
怎么实现一个sleep ，手写一个promise
能写一个二叉树么，怎么去遍历
深拷贝怎么写
在公司除了完成上级交待的任务，还做了什么
怎么实现垂直中间布局
Call和apply，哪个性能开销大

在思否上提问了，已有大神回答。

参考： call和apply的哪个性能更好

正则写一个手机号，全局匹配是什么
删除一个数组中的某个数

splice方法

模块化介绍一下，什么是编译时优化
有哪些网络安全名词，怎么防范
平时怎么学习

二面

二面小哥哥问了几个问题之后，就一直跟我介绍深信服内部的一些管理、技术氛围、晋升机制什么的，全程都是笑脸额。

git push -u 是什么意思

绑定默认提交的远程版本库，加了参数-u后，以后即可直接用git push 代替git push origin master

git rebase解释下

有test和dev两个分支，分别有两个commit，此时执行下列命令：

git checkout test
git rebase dev
以dev为基准将test的提交进行回放，挨个的应用到dev上去，然后test的那些提交就会废弃。等价于git merge dev。

git merge 和git rebase区别：

merge不会修改提交历史，rebase会修改提交历史

。

rebase只应用于本地没有提交的代码，如果应用到已经提交到远程的分支不要应用，不然会非常的麻烦，git merge 可以应用于远程分支。

linux命令，怎么打开一个文件

cat abc.txt

你的上级给你review 代码时会提什么建议
怎么看待加班和工作效率
get和post分别进行几次数据交互

get请求过程：（2次交互）

浏览器请求tcp连接（第一次握手）　　
服务器答应进行tcp连接（第二次握手）　　
浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）　　
服务器返回200 ok响应。

post请求过程：（3次交互）

浏览器请求tcp连接（第一次握手）　　
服务器答应进行tcp连接（第二次握手）　　
浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）　　
服务器返回100 continue响应　　
浏览器开始发送数据　　
服务器返回200 ok响应

怎么打断点，如何确定一个结果来自于哪个函数

ThoughtWorks

TW是内推的，做了内推作业后，就面了技术和文化面。技术面是在作业的基础上加两个功能，只写出来一个，后面一个没时间写了，然后就只讲了下思路。

文化面面了快一个小时，听说TW不加班，对女程序员还很友好，挺中意的公司，不过最后还是挂了额。

华为

华为的面试就不多说了，基本不问前端的，进去是随机分岗的。华为的面试阵仗是我见过的最大的，听说要招一万人，在万达那里面的，全是人啊，阔怕。现在正泡在offer池里，估计国庆后发正式offer吧。

二面碰到的是个女面试官，太恐怖了，一直在怼我，最怕碰到女面试官了，惨。

小米

小米是内推的，电话面了一面，国庆后要我去武汉现场面，那会学校刚好有事应该也不会去了。

redux主要做什么的，用过redux的一些中间件吗，简单说一下
react生命周期说一下，diff算法说一下
setstate时会合并修改，是在哪个函数里修改的？宏事件和微事件

setstate是异步更新的，通过一个队列机制实现state的更新，当执行setState时，会将需要更新的state合并后放入状态队列，而不会立即更新，队列可以高效的批量更新state。

let、const、var的区别；如果const定义的是个对象，能够修改对象的属性吗？

const实际上保证的并不是变量的值不得改动，而是变量指向的那个指针不得改动，可以给对象添加属性。如果真的想将对象冻结，应该使用Object.freeze方法。

Object.freeze和Object.seal的区别

Object.preventExtension：禁止对象添加新属性并保留已有属性;

Object.seal：在一个现有对象上调用 Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false;

Object.freeze：在一个现有对象上调用 Object.seal(..) 并把所有“数据访问”属性标记为 writable:false。

说一下防抖，应用场景是什么
快速排序算法说下，基点怎么选？如果一个数组是已经排序好的怎么选基点？

数组元素随机，取固定基准；
数组元素已排序或逆序，取随机基准；
更好的方法：三数取中，选取数组开头，中间和结尾的元素，通过比较，选择中间的值作为快排的基准。

算法的稳定性，冒泡、快排
lodash，underscore的库了解么？有哪些方法
整个项目的架构，包括前端、后台、运营
sort的底层实现机制，看过源码么？

数组长度<=22时采用插入排序，大于22用快排。

怎么调试bug？打过断点么？如果前端代码被压缩，如何去找到相应元素？

chromre控制台下，在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {})，点击会将压缩 js 文件格式化缩进规整的文件，这时候在设定断点可读性就大大提高了。

相关阅读:
Oracle学习
 WPF中获取DataGrid列表的选中行Id的方法
 调用MySql存储过程的方法 '增删改查'
MySql中存储过程的基本增删改查操作
 在WinForm中遍历获取TreeView的节点及其子节点
 WinForm获取MySql数据的基本增删改查
 WinForm中的用户控件实现分页功能
 NGUI之自适应屏幕
 快速排序法
 Array,ArrayList、List<T>、HashSet<T>、LinkedList<T>与Dictionary<K,V>
原文地址：https://www.cnblogs.com/huangxingquan/p/12419315.html