美团面试准备• Webpack原生构建基于React+antd的公司内部中后台管理系统，与各部门沟通需求，对接业务逻辑，

自我介绍以及项目介绍

• Webpack原生构建基于React+antd的公司内部中后台管理系统，与各部门沟通需求，对接业务逻辑，进行相关业务流程梳理，提炼需求，实现了公司内部事务流程管理体系及相应的数据展示系统。

Webpack是一个 JavaScript 的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，将程序需要的模块打包成一个或多个 bundle文件。

要使用 webpack，那么必然需要安装 webpack、webpack-cli

编写配置文件 webpack.config.js，其中定义入口以及输出的bundle文件

webpack 的核心概念

entry: 入口 //定义一个入口文件
output: 输出 //定义一个输出的bundle文件
loader: 模块转换器，用于把模块原内容按照需求转换成新内容
插件(plugins): 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情

loader，它就是一个转换器，将前端文件进行编译形成浏览器可识别的文件，babel-loader，css-loader, less-loader等

有顺序的链式执行，先sass-loader再css-loader再style-loader

code Spliting 代码分割
loaders
模块热更新（在开发过程中大大提高的调试和效率）

例： SCSS文件处理流程：

SCSS源代码会先交给sass-loader把SCSS转换成CSS

把sass-loader输出的CSS交给css-loader处理，找出CSS中依赖的资源、压缩CSS等；

把css-loader输出的CSS交给style-loader处理，转换成通过脚本加载的JavaScript代码；

plugins可以理解为插件，用于拓展webpack的一些功能。插件需要用require()引入。

1）需要监听index.js改变，可以在package文件里进行设置： “start”: “webpack --watch --config webpack.config.js” 启动：npm run start

PS：在项目中，提交代码时，不能把watch给提交上去，一直watch，会把服务拖死的，注意！

2）webpack-dev-server可以做到热加载，依赖webpack-cli，安装需安装两。同时需要安装HtmlWebpackPlugin，打包输出HTML

什么是CDN

CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。

简单的说，CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验

React有什么特点？

React的主要功能如下：

它使用**虚拟DOM **而不是真正的DOM。
它可以用服务器端渲染 SSR。
它遵循单向数据流或数据绑定。（由父到子）

4. 什么是JSX？

JSX 是一种新的语法，可以在JavaScript 文件里面写HTML。直观容易理解，易维护。通过render(){ return( 一个html模板 ) }。JSX需要用Babel 转换器将 JSX 文件转换为 JavaScript。

React生命周期

1. 挂载卸载过程

1.1.constructor()

constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。

1.2.componentWillMount()

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

1.3.componentDidMount()

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

1.4.componentWillUnmount ()

在此处完成组件的卸载和数据的销毁。

clear你在组建中所有的setTimeout,setInterval
移除所有组建中的监听 removeEventListener

2. 更新过程

2.1. componentWillReceiveProps (nextProps)

在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

2.2. shouldComponentUpdate(nextProps,nextState)

主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

2.3.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

2.4.componentDidUpdate(prevProps,prevState)

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

2.5.render()

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

websocket

WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个，但也不算是持久链接。websocket协议是借助了http，先发送http请求确认升级为websocket协议

其中有两个属性：

Upgrade: websocket
Connection: Upgrade

项目中用到了一个reconnecting-websocket的模块，用来自动兼容断线重连的问题，有的时候会因为服务器的一些问题，或者用户网络的问题导致websocket连接中断。是一个js库，npm安装就可以直接用了。

手工实现断线重连比较麻烦，浏览器有断线重连1000次就永远放弃的机制。

SEO优化

尽量让代码语义化，h1-h6 是用于标题类的，<nav>标签是用来设置页面导航栏。

尽可能少的使用无语义的标签div和span等

合理的设置网页的title、description、keywords等标签

<title>标题内容</title>
<meta name=”description” content=”你的描述内容”>
<meta name=”keyword” content=”关键字1，关键字2，—“>

HTML语义化是指用合适的标签来标记内容，比如HTML5中的标签<header> <footer> <aside> <article> <nav>等

Electron

用来将web项目打包成桌面应用，项目打包完大概50-100M

electron是基于Chromium和Node.js，去解决多端应用的一项技术。

渲染进程和主进程之间怎么通讯？

Http请求头包含哪些信息

浏览器缓存机制

强缓存，协商缓存

状态码304代表什么？

美团面试准备