【搜到的美团前端⾯试题】答案整理
（1）input 中如何监听值的变化？
  Answer：因为input的onchange事件是要改变值之后失去焦点才触发，并不能实现实时监听，所以存在3种情况，第⼀种是只需要失去焦点时监听，那就⽤onchange，第⼆种是js改变值，这时候可以在改变值的⽅法⾥⼿动触发，第三种则是实时监听，可以⽤keypress、keydown、keyup等事件监听。
（2）什么是事件冒泡和事件捕获，区别是什么？
  Answer：事件冒泡是⼦元素向⽗元素传递事件，⽽事件捕获是⽗元素向⼦元素传递事件（ps.事件代理/事件委托：直接在⽗元素写事件，可以避免遍历⼦节点的操作，优化性能），事件触发的顺序是相反的。阻⽌：event.stopPropagation();
（3）什么是跨域，如何处理跨域？
  Answer：⼀个域下的⽂档或脚本试图去请求另⼀个域下的资源。（协议，域名，端⼝，三者有⼀不⼀样，就是跨域）。
解决⽅法：1.jsonp（动态创建srcipt标签请求静态资源服务器的资源，缺点是只能实现get请求）；2.docu
ment.domain + iframe跨域（仅限主域相同，⼦域不同的跨域应⽤场景。实现原理：两个页⾯都通过js强制设置document.domain为基础主域，实现同域）；3.location.hash + iframe（a欲与b跨域相互通信，通过中间页c来实现。三个页⾯，不同域之间利⽤iframe的location.hash传值，相同域之间直接js访问来通信。）；4.window.name + iframe跨域（name值在不同的页⾯、甚⾄不同域名加载后依旧存在，并且可以⽀持⾮常长的 name 值（2MB））；5.postMessage跨域（postMessage是HTML5 XMLHttpRequest Level 2中的API，postMessage(data,origin)⽅法接受两个参数，data最好为字符串，origin是协议+主机+端⼝号，也可以设置为"*"，表⽰可以传递给任意窗⼝，如果要指定和当前窗⼝同源的话设置为"/"）；6.跨域资源共享（CORS）（普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端⽆须设置，若要带cookie请求：前后端都需要设置。）；6.nginx代理跨域；7.nodejs中间件代理跨域；8.WebSocket协议跨域。
（4）什么是节流与防抖，如何实现
前端websocket怎么用  Answer：前端中存在的⼀种因为⽤户⾏为会频繁触发的事件，因为对DOM的操作、资源加载等耗费性能的处理，容易导致页⾯卡顿甚⾄浏览器崩溃。为了解决这类需求，产⽣了函数节流与防抖。节流就是预定⼀个函数，只有在⼤于等于执⾏周期时才执⾏，周期内调⽤不执⾏（⽐如窗⼝调整，页⾯滚动，抢购疯狂点击）。防抖就是函数需要频繁触发时，只有⾜够空闲才会执⾏⼀次（⽐如实时搜索，拖拽）。
（5）⽹站的性能优化
  Answer：1、减少http访问请求，合并css，js和图⽚（精灵图）等提⾼访问性能。2、静态资源使⽤浏览器缓存。3、压缩⽂件减少传输数据量。4、减少cookie传播，不必要的数据则不要写⼊cookie。5、使⽤CDN（内容分发⽹络）加速（他可以将数据缓存到距离⽤户最近的位置，⽤户可以尽快获取数据，数据中⼼也可以减轻压⼒，从⽽提⾼访问速度）。6、使⽤代理服务器，在代理服务器上缓存部分热点信息，⽤户可以直接从代理服务器获取数据，从⽽加快web访问速度；另外，使⽤反向代理可以实现负载
均衡，提⾼系统整体处理能⼒，提⾼⾼并发⽹站的性能【反向代理：⽤户不知道从哪来的数据，但是服务正常提供。正向代理：⽤户托⼀个服务器帮忙发送请求给真正要请求的服务器】。
7、代码优化（多线程，资源复⽤，垃圾回收……好像是后端的，前端就代码简化，去掉⽆⽤代码，逻辑循环清晰等等吧）。
（6）浏览器缓存原理
  Answer：发起请求的过程是：发起⽹络请求->后端处理->浏览器响应，⽽浏览器缓存则可以直接使⽤缓存不发起请求，或者发起请求后后端存储的数据和前端⼀致，则不必再把数据回传，减少响应数据。那么浏览器如何确定是否该缓存某个资源呢？它发起请求并拿到请求结果后，将请求结果和缓存标识存⼊浏览器缓存（浏览器对于缓存的处理是根据第⼀次请求资源时返回的响应头来确定的），然后每次发起请求都会先去浏览器缓存中查该请求的结果和缓存表⽰。在强缓存中可以设置HTTP Header的Expires和
Cacht-Control规定缓存过期时间和命中强缓存时间。⽽协商缓存就是浏览器拿着缓存标识去请求服务端，服务端决定要不要⽤缓存。
  PS：缓存机制：强制缓存优先于协商缓存进⾏，若强制缓存(Expires和Cache-Control)⽣效则直接使⽤
缓存，若不⽣效则进⾏协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使⽤缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存⼊浏览器缓存中；⽣效则返回304，继续使⽤缓存。如果啥缓存机制都没设置，那么浏览器会采⽤⼀个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。
（7）当输⼊ URL 时，整个过程是什么样的
  Answer：
域名解析（为了将消息从你的PC上传到服务器上，需要⽤到1P协议、ARP协议和0SPF协议）
发起TCP的3次握⼿
建⽴TCP连接后发起http请求
服务器响应http请求
浏览器解析htm代码，并请求html代码中的资源(如js、css、图⽚等）
断开TCP连接
浏览器对页⾯进⾏渲染
（8）React 的⽣命周期
  Answer：
componentWillMount// 服务端渲染时调⽤，在整个⽣命周期中只会调⽤⼀次.
componentDidMount// 初始化：组件第⼀次渲染完成，dom节点已⽣成。可以在这⾥请求ajax返回数据setState后，组件会重新渲染。整个⽣命周期中只会调⽤⼀次.
componentWillUnmount// 组件销毁后调⽤，多⽤于清理内存空间.
componentWillReceiveProps(newProps)// 当从⽗类接收到新的 props 前调⽤,newProps就是⽗级最新传⼊的数据，对⽐this.props 和 nextProps 将nextProps的state改为当前的state，页⾯可以重新渲染. shouldComponentUpdate// 组件接受到新属性、新状态调⽤.返回true则组件正常运⾏，返回false则阻⽌render调⽤，后⾯的函数不会被继续执⾏。必须return.
componentWillUpdate(newProps, nextState, newContext)  // 组件更新前调⽤.shouldComponentUpdate返回true后，组件进⼊重新渲染的进程，此时进⼊componentWillUpdate中，
也可以同样拿到nextProps和nextState. componentDidUpdate(prevProps, prevState, Snapshot)// 组件更新后调⽤.在这⾥可以拿到prevProps和prevState，也就是更新前的props和state.
render()  // 渲染组件
（9）React 中的 setState
  Answer：state的更新可能是异步的，因此如果要同步更新，可以添加回调函数。
（10）React 中函数组件和普通组件有什么区别
  Answer：函数组件是个纯函数，接受⼀个props对象，返回⼀个react元素，没有⽣命周期和状态state（所以也叫⽆状态组件）；⽽类组件需要继承React.Component并且创建render函数返回react元素，有⽣命周期和状态state。
（11）什么是 render prop 的组件
  Answer：render prop是React组件之间使⽤⼀个值为函数的prop在组件中共享代码的简单技术。他与⾼阶组件⼀样，都是React组件的⼀种设计模式，⽤于⽅法重⽤，因此更多⽤于容器型组件，渲染逻辑由调⽤者决定。
（12）fiber 是什么
  Answer：React Fiber是对核⼼算法的⼀次重新实现。破解JavaScript中同步操作时间过长的⽅法：分⽚。React Fiber把更新过程碎⽚化，每执⾏完⼀段更新过程，就把控制权交还给React负责任务协调的模块，看看有没有其他紧急任务要做，如果没有就继续去更新，如果有紧急任务，那就去做紧急任务。维护每⼀个分⽚的数据结构，就是Fiber。
（13）关于模块分包
  Answer：分包原则：按复⽤度，抽象度，稳定度分包。 fig.js中添加配置
（14）有没有接触过 node，你认为 node 怎么样
  Answer：没接触过。
（15）node 引⼊⼀个模块的过程是什么
  Answer：
（16）https 有什么⽤，原理是什么
  Answer：https是在http上建⽴ssl加密层，并对数据传输进⾏加密，是http协议的安全版。它的主要作⽤是对数据进⾏加密，并建⽴⼀个信息安全通道，保证传输过程中的数据安全，以及对⽹站服务器进⾏真实⾝份认证。HTTPS并不是⼀种新的协议，在通信接⼝使⽤了SSL和TLS协议⽽已。HTTP通常直接和TCP通信，⽽HTTPS中HTTP先和SSL 通信，再由SSL和TCP进⾏通信。（SSL协议并不是⼀个应⽤层协议，它是介于应⽤层和传输层协议之间的⼀个安全协议，https采⽤了它的两种加密⽅式的混合加密）
（17）https 如何保证证书是可信任的
  Answer：在菜单选项中查看证书功能。这信息可能是在页⾯信息中的⽂件属性或安全选项中。
（18）amd 和 cmd 的区别，commonjs，esmodule
  Answer：
（19）什么是函数柯⼒化
  Answer：
（20）virtual DOM 是什么以及是如何实现的
  Answer：
（21）dom diff 是什么
  Answer：
（22）get 和 post 请求
  Answer：
（23）如何进⾏ CI 以及测试的，是否使⽤ ESLint
  Answer：
（24）Accept 头部的作⽤什么，如果服务器不⽀持怎么办
  Answer：
三⾯⼤部分都是⼀些主观问题：
才⼯作⼀年为什么就想着换⼯作
你遇到过什么有挑战的事情吗 (这个⼀定得想好呀，没有也得憋出来⼀个)
你对未来的⼯作有什么样的期待

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。