Interview
自己找的
为什么不建议在 react 里使用 arrow function 定义
为什么不建议在 react 里使用 arrow function 定义
// 编译前
class Base {
text = 'base';
commonHandler = () => {
console.log('Base commonHandler', this.text);
};
}
class A extends Base {
text = 'A';
commonHandler() {
console.log('A commonHandler', this.text);
}
}
const a = new A();
a.commonHandler();
// 编译后
class Base {
constructor() {
this.text = 'base';
this.commonHandler = () => {
console.log('Base commonHandler', this.text);
};
}
}
class A extends Base {
constructor(...args) {
var _temp;
return (_temp = super(...args)), (this.text = 'A'), _temp;
}
commonHandler() {
console.log('A commonHandler', this.text);
}
}
const a = new A();
a.commonHandler();
// 在执行new的时候,A的commonHandler(不是箭头函数)会被Base的commonHandler(箭头函数)覆盖, 所以输出Base commonHandler A
export vs default export vs module.exports
React Fiber 逻辑
这可能是最通俗的 React Fiber(时间分片) 打开方式
阿里
使用过的 koa2 中间件 Link1
logger, session, koa-router
koa-body 原理
对于POST请求的处理，koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中
介绍自己写过的中间件
目前只写过log这种简单的中间件
pm2 start app.js -i max
cluster.fork()
介绍 pm2
master 挂了的话 pm2 怎么处理 Link1
pm2会自动重启运行
http header
#####General Header#####
1. Cache-Control
no-cache: 告诉浏览器、缓存服务器，不管本地副本是否过期，使用资源副本前，一定要到源服务器进行副本有效性校验。
must-revalidate: 告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。
no-store: 客户端不需要缓存
private: 代表只有发起请求的浏览器才可以进行缓存
public: http 请求返回的内容所经过的任何路径当中（包括中间一些http代理服务器以及发出请求的客户端浏览器），都可以对返回内容进行缓存操作。
max-age=，缓存多少秒后过期，过期之后浏览器才会再次发送请求。
2. Connection
该字段可以控制不转发给代理服务器的首部字段以及管理持久连接，下方这个响应报文头中的Connection就是用来管理持久连接的，其参数为keep-alive，就是保持持久连接的意思。可以使用close参数将其关闭。
3. Transfer-Encoding
该字段表示报文在传输过程中采用的编码方式，在HTTP/1.1的报文传输过程中仅对分块编码有效。下方这个截图就是Transfer-Encoding在Response Header中的使用，后边根的chunked(分块)的参数，说明报文是分块进行传输的。
#####Request Header#####
1. Accept
该字段可通知服务器用户代理能够处理的媒体类型以及该媒体类型对应的优先级。媒体类型可使用“type/subtype”这种形式来指定，分号后边紧跟着的是该类型的优先级。
2. Accept-Encoding
3. Accept-Language
4. Authorization
5. If-Match 与If-None-Match
6. If-Modified-Since与If-Unmodified-Since
8. Referer
9. User-Agent
#####Request Header#####
2. Age
该字段告知客户端，源服务器在多久前创建了该响应。
3. Etag
4. Location: 重定向
5. Server: 服务器端使用的服务器型号
6. Set-Cookie
移动端高清方案如何解决
#####物理像素(physical pixel)#####
物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素
#####设备独立像素(device-independent pixel)#####
设备独立像素又被称为CSS像素，是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。
#####设备像素比(device pixel ratio)#####
设备像素比简称为dpr，定义了物理像素和设备独立像素的对应关系：设备像素比 ＝ 物理像素 / 设备独立像素
#####Viewport#####
visual viewport 可见视口，指屏幕宽度
layout viewport 布局视口，指DOM宽度
ideal viewport 理想适口，使布局视口就是可见视口即为理想适口
1px 问题
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
addEventListener 参数分别是什么
addEventListener(type, listener, {
capture: false,
passive: false, //passive 监听器能保证的只有一点，那就是调用 preventDefault() 无效
once: false,
});
HTTPS
1. client向server发送请求https://baidu.com，然后连接到server的443端口。
2. 服务端必须要有一套数字证书，可以自己制作，也可以向组织申请。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面，这套证书其实就是一对公钥和私钥。
3. 传送证书
这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间、服务端的公钥，第三方证书认证机构(CA)的签名，服务端的域名信息等内容。
4. 客户端解析证书
这部分工作是由客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值（秘钥）。然后用证书对该随机值进行加密。
5. 传送加密信息
这部分传送的是用证书加密后的秘钥，目的就是让服务端得到这个秘钥，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。
6. 服务段加密信息
服务端用私钥解密秘密秘钥，得到了客户端传过来的私钥，然后把内容通过该值进行对称加密。
7. 传输加密后的信息
这部分信息是服务端用私钥加密后的信息，可以在客户端被还原。
8. 客户端解密信息
客户端用之前生成的私钥解密服务端传过来的信息，于是获取了解密后的内容
前端如何进行 SEO 优化
SSR
合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标
前后端分离的项目如何 SEO
使用prerender。但是回答prerender，面试官肯定会问你，如果不用prerender，让你直接去实现，好的，请看下面的第二个答案。
先去 https://www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫，就用nginx方向代理到我们自己用nodejs + puppeteer实现的爬虫服务器上，然后用你的爬虫服务器爬自己的前后端分离的前端项目页面，增加扒页面的接收延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即可。
一次性插入 1000 个 div，如何优化插入的性能
createElement(); //创建一个元素节点 => 接收参数为string类型的nodename
createTextNode(); //创建一个文本节点 => 接收参数为string类型的text内容
createAttribute(); //创建一个属性节点 => 接收参数为string类型的属性名称
createComment(); //创建一个注释节点 => 接收参数为string类型的注释文本
// 使用Fragment
var ul = document.getElementById('ul');
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
var li = document.createElement('li');
li.innerHTML = 'index: ' + i;
fragment.appendChild(li);
}
ul.appendChild(fragment);
向 1000 个并排的 div 元素中，插入一个平级的 div 元素，如何优化插入的性能
先display:none 然后插入 再display:block
componentWillReceiveProps(nextProps), componentWillUpdate(nextProps, nextState) 被 getDerivedStateFromProps(props, state)取代;
componentWillUpdate(nextProps, nextState) 内不能使用 setState
getDerivedStateFromProps()方法的 16.3 版本与之后的 16.4 和 16.5 有所调整：在 16.3 版本上，该方法仅在 props 变动时才会被触发;在 16.3 之后的版本上，该方法调整为 props 和 state 的变动都会触发该方法。
setState|prop change -> (getDerivedStateFromProps)componentWillReceiveProps -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate()
直到 render 函数被调用的时候，this.state 才得到更新。
this.forceUpdate() 会跳过 shouldComponentUpdate
如何配置 React-Router
有一个唯一的Router组件，这个组件接受一个history对象作为props（browserHistory、hashHistory、memoryHistory）
React Router v4 最大的变更，不是API的变更，而是从静态路由到动态路由的变化。什么是静态路由呢？静态路由是一堆在应用运行前就已经定义好的路由配置，应用需要在启动时，加载这些配置，构建出整个应用的路由表，然后当接收到某一请求时，根据请求地址，到应用路由表中找到对应的处理页面或处理方法。
路由的动态加载模块
静态路由是指初始化的时候需要定义的路由，运行的时候不能更改（koa、express）；动态路由（React Router） React 的懒加载：React.lazy、Suspense、dynamic import
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
react 和 vue 的比较
diff 算法
在标准dom机制下：在同一位置对比前后的dom节点，发现节点改变了，会继续比较该节点的子节点，一层层对比，找到不同的节点，然后更新节点。
在react的diff算法下，在同一位置对比前后dom节点(key),只要发现不同，就会删除操作前的domm节点（包括其子节点），替换为操作后的dom节点。
对比两种diff算法，大家可以发现，react的diff算法下，当dom节点更改时，会大大减少dom树的节点遍历，这也是其另外一个可以实现极速渲染的一个原因。
1. 难以重用和共享组件中的与状态相关的逻辑
2. 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
3. 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题。
4. 由于业务变动，函数组件不得不改为类组件等等。
服务端渲染 SSR
介绍路由的 history
介绍 Redux 数据流的流程
Redux 如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理
多个组件之间如何拆分各自的 state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块
使用过的 Redux 中间件
如何解决跨域的问题
常见 Http 请求头
移动端适配 1px 的问题
rem、vw、scale、postcss-write-svg
介绍 flex 布局
其他 css 方式设置垂直居中
居中为什么要使用 transform（为什么不使用 marginLeft/Top）
如果元素定宽高的话，也可以使用 margin；但是如果不定高宽的话就不好处理，不能用百分比因为的百分比值参照的不是父容器的高度，而是宽度
JavaScript/CSS =>计算样式=>布局=>绘制=>渲染层
CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层
由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，所以相对而言使用transform实现的动画效果肯定比left这些更加流畅。
使用过 webpack 里面哪些 plugin 和 loader
webpack 里面的插件是怎么实现的
dev-server 是怎么跑起来
项目优化
抽取公共文件是怎么配置的
项目中如何处理安全问题
怎么实现 this 对象的深拷贝
腾讯
移动端项目优化（H5）
移动端点透事件
我们知道，当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过 捕获，处理, 冒泡 一系列流程处理完成后， 才回去触发click事件
点透发生的理由: 当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了.
//解决办法
$modal.addEventListener('touchend', function(e) {
e.preventDefault()
});
setTimeout(() => {
$modal.style.display = 'none';
}, 300)
CRP(Critical Rendering Path，关键渲染路径)
CRP 优化
1. 首屏内联CSS
2. 使用媒体查询优化CSS
3. JS脚本async异步
4. 减小CSS和JS的体积
5. 脚本放到最底部
HTTP 缓存机制 前端安全 XSS / CSRF 及 如何防范 TCP 三次握手 ARP 地址解析协议 reflow（回流）&repaint（重绘）及优化 JS 几种继承方式 ES6 DNS 查询过程
在移动网络环境下，减少非必要 DNS 请求，将相关域名收敛成一个，可以尝到缓存的红利，进而可以减少打开页面时间
堆内存与栈内存 深浅拷贝
网易 介绍 redux，主要解决什么问题
文件上传如何做断点续传
var filesize = fileObj.size;
var blob = fileObj.slice(start_offset, filesize);
var fileOfBlob = new File([blob], fileObj.name);
//附加的文件数据应该放在请求的前面
formData.append('filename', fileObj.name);
//必须将fileid信息传送给服务器，服务器只有在获得了fileid信息后才对文件做断点续传处理
formData.append('fileid', fileid);
//请将文件数据放在最后的域
//formData.append("file",blob, fileObj.name);
formData.append('file', fileOfBlob);
表单可以跨域吗
可以，因为表单提交会直接跳转到其他页面，所以浏览器并没有做跨域处理
promise、async 有什么区别
可以理解为 async，await 是 Generator 的语法糖，await 后面的表达式会返回一个 Promise 对象
搜索请求如何处理（防抖）
防抖的概念是如果在规定的时间段内有多个请求的情况下，
搜索请求中文如何请求
可以使用 encodeURI 把中文字符转码成 UTF-8 的格式
介绍观察者模式
介绍中介者模式
从多对多到一对一，为了解耦，例如：React 和 Redux
观察者和订阅-发布的区别，各自用在哪里
介绍 react 优化
介绍 http2.0
新的二进制格式（Binary Format）、多路复用（MultiPlexing）、header 压缩、服务端推送（server push）
通过什么做到并发请求
http1.1 时如何复用 tcp 连接
HTTP1.1 里添加了持久连接的支持，再次发送请求时，可以直接使用上次已经建立完成的 TCP 连接，这样就避免了第二次 TCP 连接时的三次握手、消除另一次 TCP 慢启动的往返，极大了减小了网络延时。 目前，所有现代浏览器都尝试持久化 HTTP 连接，如果服务器支持的话。使用 HTTP1.1 的话，默认的就是持久连接；如果使用 HTTP 1.0，可以明确使用 connection:keep-alive 首部声明使用持久连接；还应注意一些 HTTP 库和框架的默认行为，它们有时候并不是默认使用持久连接的。 HTTP 1.1 引入了管道机制（Pipelining），即客户端可通过同一个 TCP 连接同时发送多个请求。如果客户端需要请求两个资源，以前的做法是在同一个 TCP 连接里面，先发送 A 请求，然后等待服务器做出回应，收到后再发出 B 请求；而管道机制则允许浏览器同时发出 A 请求和 B 请求，但是服务器还是按照顺序，先回应 A 请求，完成后再回应 B 请求。
介绍 service worker
介绍 css3 中 position:sticky
设置了 sticky 的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。
redux 请求中间件如何处理并发
介绍 Promise，异常捕获
介绍 position 属性包括 CSS3 新增
浏览器事件流向
介绍事件代理以及优缺点
React 组件中怎么做事件代理
React 并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点 document 上为每种事件添加唯一的 Listener，然后通过事件的 target 找到真实的触发元素。
React 组件事件代理的原理
介绍 this 各种情况
前端怎么控制管理路由
使用路由时出现问题如何解决
React 怎么做数据的检查和变化
滴滴 react-router 怎么实现路由切换
react-router 里的 Link 标签和 a 标签有什么区别
a 标签默认事件禁掉之后做了什么才实现了跳转
React 层面的性能优化
整个前端性能提升大致分几类
import { Button } from 'antd'，打包的时候只打包 button，分模块加载，是怎么做到的
使用 import 时，webpack 对 node_modules 里的依赖会做什么
JS 异步解决方案的发展历程以及优缺点
Http 报文的请求会有几个部分
cookie 放哪里，cookie 能做的事情和存在的价值
cookie 和 token 都存放在 header 里面，为什么只劫持前者
cookie 和 session 有哪些方面的区别
React 中 Dom 结构发生变化后内部经历了哪些变化
React 挂载的时候有 3 个组件，textComponent、composeComponent、domComponent，区别和关系，Dom 结构发生变化时怎么区分 data 的变化，怎么更新，更新怎么调度，如果更新的时候还有其他任务存在怎么处理
key 主要是解决哪一类的问题，为什么不建议用索引 index（重绘）
Redux 中异步的请求怎么处理
Redux 中间件是什么东西，接受几个参数（两端的柯里化函数）
柯里化函数两端的参数具体是什么东西
中间件是怎么拿到 store 和 action，然后怎么处理
state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程
koa 中 response.send、response.rounded、response.json 发生了什么事，浏览器为什么能识别到它是一个 json 结构或是 html
koa-bodyparser 怎么来解析 request
webpack 整个生命周期，loader 和 plugin 有什么区别
介绍 AST（Abstract Syntax Tree）抽象语法树
安卓 Activity 之间数据是怎么传递的
安卓 4.0 到 6.0 过程中 WebView 对 js 兼容性的变化
WebView 和原生是如何通信
跨域怎么解决，有没有使用过 Apache 等方案
今日头条 对 async、await 的理解，内部原理
可以理解为 async，await 是 Generator 的语法糖，是对 Promise 的封装，async 和 await 都会返回 Promise 对象，在使用 await 之前一定要给 function 加上 async
介绍下 Promise，内部实现
略
清除浮动
通常设置了浮动之后会影响它的兄弟元素的位置和父元素产生高度塌陷，clear 会为元素添加足够的空白空间，使到该元素的位置会放置在它前一个浮动元素之下，这跟增加元素外边距使到元素占据满行而强制换行的效果是一样的
定位问题（绝对定位、相对定位等
relative：不脱离文档流 absolute：static 定位以外的最邻近父级元素进行偏移定位 fixed：相对于浏览器窗口进行定位 z-index 属性：使用了以上三种定位后，都会使正常的文档流一定程度上发生改变，造成元素显示出现重叠的情形，特别是使用绝对定位时。为了能让重叠的元素有序的显示出来，我们需要在定位时对相关元素加上 z-index 属性，其值是一个整数值（默认值为 0），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效
BFC(margin 塌陷)
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。形成条件如下 1、浮动元素，float 除 none 以外的值 2、绝对定位元素，position（absolute，fixed） 3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions 4、overflow 除了 visible 以外的值（hidden，auto，scroll） Flex items' margins won't collapse.
BFC 常见作用
包含浮动元素;不被浮动元素覆盖;会阻止外边距折叠;
Symbol 内置属性
Class: Symbol.hasInstance, Symbol.toStringTag Object: Symbol.toPrimitive, Symbol.iterator
CSS 平行四边形
transform: skewX(-45deg);
CSS 三角形
width: 0px; border-top: 50px solid; border-left: 50px solid transparent; border-right: 50px solid transparent;
从输入 URL 到页面加载全过程
1. 输入网址。
2. 浏览器查找域名的IP地址。
3. 浏览器给web服务器发送一个HTTP请求
4. 网站服务的永久重定向响应
5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。
6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。
7. 服务器发回一个HTML响应
8. 浏览器开始显示HTML
9. 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…
浏览器渲染过程
1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成 CSS Rule Tree 。
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点
6. replaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。
tcp3 次握手
假想一下，如果我们去掉了第三次呢？ 因为我们不进行第三次握手，所以在 S 对 C 的请求进行回应(第二次握手)后，就会理所当然的认为连接已建立，而如果 C 并没有收到 S 的回应呢？此时，C 仍认为连接未建立，S 会对已建立的连接保存必要的资源，如果大量的这种情况，S 会崩溃。
tcp 属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(ip)-> 4 传输层(tcp) -> 5 应用层(http)）
mobx vs redux
mobx: 定义状态并使其可观察; 创建视图以响应状态的变化; action -> state -> view
redux 的设计思想
把整个网页的状态保存到一个对象中
接入 redux 的过程
绑定 connect 的过程
connect 原理
webpack 介绍
== 和 ===的区别，什么情况下用相等==
bind、call、apply 的区别
动画的了解
介绍下原型链（解决的是继承问题吗）
对跨域的了解
有赞 Linux 754 介绍
介绍冒泡排序，选择排序，冒泡排序如何优化
transform 动画和直接使用 left、top 改变位置有什么优缺点
如何判断链表是否有环
介绍二叉搜索树的特点
介绍暂时性死区
ES6 中的 map 和原生的对象有什么区别
观察者和发布-订阅的区别
react 异步渲染的概念,介绍 Time Slicing 和 Suspense
16.X 声明周期的改变
16.X 中 props 改变后在哪个生命周期中处理
介绍纯函数
前端性能优化
pureComponent 和 FunctionComponent 区别
介绍 JSX
如何做 RN 在安卓和 IOS 端的适配
RN 为什么能在原生中绘制成原生组件（bundle.js）
介绍虚拟 DOM
如何设计一个 localStorage，保证数据的实效性
如何设计 Promise.all()
介绍高阶组件
sum(2, 3)实现 sum(2)(3)的效果
react 性能优化
两个对象如何比较
挖财 JS 的原型
变量作用域链
call、apply、bind 的区别
防抖和节流的区别
介绍各种异步方案
react 生命周期
介绍 Fiber
前端性能优化
介绍 DOM 树对比
react 中的 key 的作用
如何设计状态树
介绍 css，xsrf
http 缓存控制
Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>
“no-cache”表示必须先与服务器确认返回的响应是否发生了变化，然后才能使用该响应来满足后续对同一网址的请求。因此，如果存在合适的校验值 (ETag)，no-cache 会发起往返通信来验证缓存的响应，但如果资源未发生变化，则可避免下载。相比之下，“no-store”则要简单得多。它直接禁止浏览器以及所有中间缓存存储任何版本的返回响应
>
项目中如何应用数据结构
native 提供了什么能力给 RN
如何做工程上的优化
shouldComponentUpdate 是为了解决什么问题
如何解决 props 层级过深的问题
前端怎么做单元测试
webpack 生命周期
webpack 打包的整个过程
常用的 plugins
pm2 怎么做进程管理，进程挂掉怎么处理
不用 pm2 怎么做进程管理
沪江 介绍下浏览器跨域
怎么去解决跨域问题
jsonp 方案需要服务端怎么配合
Ajax 发生跨域要设置什么（前端）
加上 CORS 之后从发起到请求正式成功的过程
xsrf 跨域攻击的安全性问题怎么防范
使用 Async 会注意哪些东西
Async 里面有多个 await 请求，可以怎么优化（请求是否有依赖）
Promise 和 Async 处理失败的时候有什么区别
Redux 在状态管理方面解决了 React 本身不能解决的问题
Redux 有没有做过封装
react 生命周期，常用的生命周期
对应的生命周期做什么事
遇到性能问题一般在哪个生命周期里解决
怎么做性能优化（异步加载组件...）
写 react 有哪些细节可以优化
React 的事件机制（绑定一个事件到一个组件上）
介绍下事件代理，主要解决什么问题
前端开发中用到哪些设计模式
React/Redux 中哪些功能用到了哪些设计模式
JS 变量类型分为几种，区别是什么
JS 里垃圾回收机制是什么，常用的是哪种，怎么处理的
一般怎么组织 CSS（Webpack）
饿了么 小程序里面开页面最多多少
React 子父组件之间如何传值
Emit 事件怎么发，需要引入什么
介绍下 React 高阶组件，和普通组件有什么区别
一个对象数组，每个子对象包含一个 id 和 name，React 如何渲染出全部的 name
在哪个生命周期里写
其中有几个 name 不存在，通过异步接口获取，如何做
渲染的时候 key 给什么值，可以使用 index 吗，用 id 好还是 index 好
webpack 如何配 sass，需要配哪些 loader
配 css 需要哪些 loader
如何配置把 js、css、html 单独打包成一个文件
div 垂直水平居中（flex、绝对定位）
两个元素块，一左一右，中间相距 10 像素
上下固定，中间滚动布局如何实现
[1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]
取数组的最大值（ES5、ES6）
apply 和 call 的区别
ES5 和 ES6 有什么区别
some、every、find、filter、map、forEach 有什么区别
上述数组随机取数，每次返回的值都不一样
如何找 0-5 的随机数，95-99 呢
页面上有 1 万个 button 如何绑定事件
如何判断是 button
页面上生成一万个 button，并且绑定事件，如何做（JS 原生操作 DOM）
循环绑定时的 index 是多少，为什么，怎么解决
页面上有一个 input，还有一个 p 标签，改变 input 后 p 标签就跟着变化，如何处理
监听 input 的哪个事件，在什么时候触发
携程 对 React 看法，有没有遇到一些坑
对闭包的看法，为什么要用闭包
手写数组去重函数
手写数组扁平化函数
介绍下 Promise 的用途和性质
Promise 和 Callback 有什么区别
React 生命周期
两道手写算法题
喜马拉雅 ES6 新的特性
介绍 Promise
Promise 有几个状态
说一下闭包
React 的生命周期
componentWillReceiveProps 的触发条件是什么
React16.3 对生命周期的改变
介绍下 React 的 Filber 架构
画 Filber 渲染树
介绍 React 高阶组件
父子组件之间如何通信
Redux 怎么实现属性传递，介绍下原理
React-Router 版本号
网站 SEO 怎么处理
介绍下 HTTP 状态码
403、301、302 是什么
缓存相关的 HTTP 请求头
介绍 HTTPS
HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。握手过程的简单描述如下：
- 浏览器将自己支持的一套加密规则发送给网站。
- 网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。
- 获得网站证书之后浏览器要做以下工作：
a) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。
- 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。
- 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。
- 网站接收浏览器发来的数据之后要做以下的操作：
a) 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。
b) 使用密码加密一段握手消息，发送给浏览器。
- 浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。
HTTPS 怎么建立安全通道
前端性能优化（JS 原生和 React）
用户体验做过什么优化
对 PWA 有什么了解
对安全有什么了解
介绍下数字签名的原理
前后端通信使用什么方案
RESTful 常用的 Method
介绍下跨域
Access-Control-Allow-Origin 在服务端哪里配置
csrf（Cross-site request forgery，跨站请求伪造)跨站攻击怎么解决
在用户不知情的情况下，带着合法的 cookie 访问了网站的特定 url，干了某些事情 CSRF 攻击之所以能够成功：是因为黑客可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。所以解决办法是：在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中 验证 HTTP Referer 字段 关键操作只接受 POST 请求，因为 GET 请求的参数携带在 URL 中，很容易进行模拟，而 POST 请求的参数在 http body 中 验证码，每次操作都需要用户进行互动，从而简单有效的防御了 CSRF 攻击，但是验证码太多，也会影响用户体验 可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端来验证这个 token 可以在 HTTP 头中自定义的属性里加入一个随机产生的 token，通过 XMLHttpRequest，可以给所有请求加上这个 token，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中 如果您在 cookie 中设置了 HttpOnly 属性，那么通过 js 脚本将无法读取到 cookie 信息，这样能有效的防止 XSS 攻击
XSS
XSS（Cross Site Scripting，跨站脚本攻击），是注入攻击的一种，特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径 XSS 是实现 CSRF 的诸多途径中的一条，一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF
内容安全策略(CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。
前端和后端怎么联调
兑吧 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 这个图片文件格式
介绍 koa2
Promise 如何实现的
异步请求，低版本 fetch 如何低版本适配
ajax 如何处理跨域
CORS 如何设置
jsonp 为什么不支持 post 方法
介绍同源策略
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 万个元素的时间相差多少
栈和堆具体怎么存储
介绍闭包以及闭包为什么没清除
闭包的使用场景
JS 怎么实现异步
异步整个执行周期
Promise 的三种状态
pending, fulfilled, rejected
Async/Await 怎么实现
Promise 和 setTimeout 执行先后的区别
JS 为什么要区分微任务和宏任务
Promise 构造函数是同步还是异步执行，then 呢
发布-订阅和观察者模式的区别
JS 执行过程中分为哪些阶段
词法作用域和 this 的区别
平常是怎么做继承
深拷贝和浅拷贝
loadsh 深拷贝实现原理
ES6 中 let 块作用域是怎么实现的
当调用 setState 时，React 会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。
setState 为什么默认是异步
为了体验，选择批量更新
setState 什么时候是同步的
setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。 setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。 setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和 setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。
为什么 3 大框架出现以后就出现很多 native（RN）框架（虚拟 DOM）
虚拟 DOM 主要做了什么
虚拟 DOM 本身是什么（JS 对象）
304 是什么
打包时 Hash 码是怎么生成的
随机值存在一样的情况，如何避免
使用 webpack 构建时有无做一些自定义操作
webpack 做了什么
a，b 两个按钮，点击 aba，返回顺序可能是 baa，如何保证是 aba（Promise.then）
node 接口转发有无做什么优化
node 起服务如何保证稳定性，平缓降级，重启等
RN 有没有做热加载
RN 遇到的兼容性问题
RN 如何实现一个原生的组件
RN 混原生和原生混 RN 有什么不同
什么是单页项目
遇到的复杂业务场景
Promise.all 实现原理
寺库 介绍 Promise 的特性，优缺点
介绍 Redux
RN 的原理，为什么可以同时在安卓和 IOS 端运行
RN 如何调用原生的一些功能
介绍 RN 的缺点
介绍排序算法和快排原理
堆和栈的区别
介绍闭包
闭包的核心是什么
网络的五层模型
HTTP 和 HTTPS 的区别
HTTPS 的加密过程
介绍 SSL 和 TLS
介绍 DNS 解析
JS 的继承方法
介绍垃圾回收
cookie 的引用为了解决什么问题
cookie 和 localStorage 的区别
如何解决跨域问题
前端性能优化
宝宝树 使用 canvas 绘图时如何组织成通用组件
formData 和原生的 ajax 有什么区别
介绍下表单提交，和 formData 有什么关系
介绍 redux 接入流程
rudux 和全局管理有什么区别（数据可控、数据响应）
RN 和原生通信
介绍 MVP 怎么组织
介绍异步方案
promise 如何实现 then 处理
koa2 中间件原理
常用的中间件
服务端怎么做统一的状态处理
如何对相对路径引用进行优化
node 文件查找优先级
npm2 和 npm3+有什么区别
海康威视 knex 连接数据库响应回调
介绍异步方案
如何处理异常捕获
项目如何管理模块
前端性能优化
JS 继承方案
如何判断一个变量是不是数组
变量 a 和 b，如何交换
事件委托
多个 li 标签生成的 Dom 结构是一个类数组
类数组和数组的区别
dom 的类数组如何转成数组
介绍单页面应用和多页面应用
redux 状态树的管理
介绍 localstorage 的 API
蘑菇街 html 语义化的理解
b 和 strong 的区别
对闭包的理解
工程中闭包使用场景
介绍 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)
Discussion
留言与讨论
想法、补充和不同意见都欢迎。