使用過的koa2中間件
koa-body原理
介紹自己寫過的中間件
有沒有涉及到Cluster
介紹pm2
master掛了的話pm2怎么處理
如何和MySQL進(jìn)行通信
——- node的東西后面再解答 ————
React聲明周期及自己的理解?
react的生命周期有:
(getDefaultProps getInitialState)
componentWillMount render componentDidMount 完成初始化賦值, 渲染DOM, 初始數(shù)據(jù)請求并再次渲染只執(zhí)行一次
componentWillReciveProps(nextProps) 提前根據(jù)傳入的數(shù)據(jù) 修改當(dāng)前組件的state 并不會重復(fù)出發(fā)render
shouldComponentUpdate(nextProps, nextState) componentWillUpdate render componentDidUpdate 決定是否更新提升性能
componentWillUnmount 卸載清空定時任務(wù) 網(wǎng)絡(luò)請求等

如何配置React-Router?
1.標(biāo)簽的方式: BrowserRouter/HashRouter Router Switch exact Route path component this.props.children redirect 通過 path 跟 Component 對應(yīng)的方式
2.對象配置的方式: {path component indexRoute childRoutes onLeave onEnter }
3.按需加載的方式配置路由提升性能 Route 可以定義 getIndexRoute getComponents getChildRoutes 幾個異步函數(shù) 只有需要的時候才調(diào)用

路由的動態(tài)加載模塊?
根據(jù)路由組件打包成多個 bundle，只有在點擊到對應(yīng)的 Route 時，這個 bundle 才會被加載
webpack babel-plugin-systax-dynamic-import react-loadable

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

服務(wù)端渲染SSR ?
主要是利于SEO 減少首頁白屏
理解: 通過后臺(新的 renderToNodeStream 替代原始的 renderToString)最后返回已經(jīng)把數(shù)據(jù)處理好的 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 處理全局?jǐn)?shù)據(jù) (createStore applyMiddleware compose)

介紹路由的history?
它屬于 Bom 瀏覽器對象, 常用來原生實現(xiàn)路由跳轉(zhuǎn)但是不刷新頁面的功能記錄瀏覽歷史記錄用來實現(xiàn)前進(jìn)后退的功能,
中間可以做一些數(shù)據(jù)處理,與信息提示
H5新增了兩個API: history.pushState 和 history.replaceState
接收3個參數(shù) (狀態(tài)對象object, 標(biāo)題title, 地址url)

介紹Redux數(shù)據(jù)流的流程?
view => action/dispatch => store(reducer) => view

Redux如何實現(xiàn)多個組件之間的通信，多個組件使用相同狀態(tài)如何進(jìn)行管理 ?
react-redux(Provider 傳入到最外層組件store 在需要用到的地方用 connect 獲取 (mapStateToProps, mapDispatchToProps) 在頁面中引用)
類似發(fā)布訂閱模式, 一個地方修改了這個值, 其他所有使用了這個相同狀態(tài)的地方也會更改

多個組件之間如何拆分各自的state，每塊小的組件有自己的狀態(tài)，它們之間還有一些公共的狀態(tài)需要維護(hù)，如何思考這塊?
一個全局的 reducer , 頁面級別的 reducer , 然后redux 里有個 combineReducers 把所有的 reducer 合在一起,小組件的使用與全局的使用是分開的互不影響

使用過的Redux中間件?
redux react-redux redux-thunk(把action 返回的對象換成一個異步函數(shù)) redux-saga

如何解決跨域的問題?
iframe nginx node jsonp cors(在header中設(shè)置 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 的細(xì)線

介紹flex布局?
display: flex , direction row colum 設(shè)置主軸和垂直的軸
just-comtent aligin-items 來設(shè)置兩個軸的元素節(jié)點

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

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

使用過webpack里面哪些 plugin 和 loader?
plugin:
DllReferencePlugin => 生成 manifest.json 文件利于緩存頁面數(shù)據(jù)
html-webpack-plugin => 把帶hash的dll js/css插入到html中
copy-webpack-plugin => 把 src 目錄外的文件(static) 引入到 dist 目錄里
happypack => 因為js是單線程的多進(jìn)程來分別執(zhí)行這些線程完成的時候在 event loop 中返回給 webpack 處理提高打包效率
webpack-bundle-analyzer => 用來分析打包的大小針對性的去處理文件
DefinePlugin => 注入一些全局的 config 區(qū)分開發(fā)和生產(chǎn)
mini-css-extract-plugin => 壓縮 css 代碼

loader:
url-loader => 小圖片轉(zhuǎn)化成 base64 進(jìn)行加載
styly-loader css-loader postcss-loader less-loader => 處理 css
eslint-loader => 代碼檢查
vue-loader react-loader => 處理框架的語法

webpack里面的插件是怎么實現(xiàn)的?
插件開發(fā)，最重要的兩個對象：compiler、compilation
compiler.plugin(‘***’)就相當(dāng)于給compiler設(shè)置了事件監(jiān)聽
所以compiler.plugin(‘compile’)就代表：當(dāng)編譯器監(jiān)聽到compile事件時，我們應(yīng)該做些什么
compilation（’編譯器’對’編譯ing’這個事件的監(jiān)聽）相當(dāng)于對編譯過程的監(jiān)聽
compiler.plugin(“emit”, function(compilation, callback) {} 最后執(zhí)行 emit 輸出的回調(diào)函數(shù) callback

dev-server是怎么跑起來?
這個用 node 搭建本地資源服務(wù)器類似的
devServer: {
contentBase: ‘./‘, 服務(wù)器搭建在當(dāng)前目錄
historyApiFallback:true,
inline：true,
hot：true,
port: 8080
}

項目優(yōu)化?
項目的優(yōu)化是一根線上的優(yōu)化, 即從一個網(wǎng)址請求到頁面渲染的各個相關(guān)的環(huán)節(jié)都有優(yōu)化, 這個還包括項目代碼的優(yōu)化
DNS 解析
TCP 連接
HTTP 請求拋出
服務(wù)端處理請求，HTTP 響應(yīng)返回
瀏覽器拿到響應(yīng)數(shù)據(jù)，解析響應(yīng)內(nèi)容，把解析的結(jié)果展示給用戶
(構(gòu)建功能及性能優(yōu)化, 圖片優(yōu)化, 瀏覽器緩存, 離線存儲技術(shù), 服務(wù)端渲染, css性能方案, js性能方案, 重繪回流, 事件循環(huán)異步更新,懶加載, 事件節(jié)流與防抖)

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

1
2
3

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

項目中如何處理安全問題?
HTTPS請求
登陸的時候加圖片驗證 ,一般的登陸密碼等加 md5 加鹽處理
重要數(shù)據(jù)的防爬蟲的頁面數(shù)據(jù)組合展示
所有的請求在 http header 里帶上 token

怎么實現(xiàn)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];        // 避免相互引用對象導(dǎo)致死循環(huán)，如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 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
　　具體步驟：
　　第一步：需要 observe 的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter
這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化
　　第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖
　　第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
　　1、在自身實例化時往屬性訂閱器(dep)里面添加自己
　　2、自身必須有一個update()方法
　　3、待屬性變動dep.notice()通知時，能調(diào)用自身的 update() 方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。
　　第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果

————————— 網(wǎng)易 —————————
介紹redux，主要解決什么問題?
不好用 props 去傳遞使用的一些公共的數(shù)據(jù)的管理

文件上傳如何做斷點續(xù)傳?
用 H5 的 File api
先得獲得一個文件ID 文件HASH值的思路就是：MD5（文件名稱文件長度文件修改時間自定義的瀏覽器ID）
在上傳文件之前，從服務(wù)端查詢文件的斷點續(xù)傳信息, 決定從什么位置上傳數(shù)據(jù)
關(guān)鍵技術(shù)點是：從上次上傳的長度位置上傳
var blob = fileObj.slice(start_offset,filesize)
function upload_file(fileObj, start_offset, fileid){}

表單可以跨域嗎?
本身是不能跨域的, 提交 action 是一步性操作, 可以模擬 post 方法進(jìn)行跨域請求

promise、async有什么區(qū)別?
異步編程的最高境界，就是根本不用關(guān)心它是不是異步
async 能夠使異步事件用同步的方法寫, 不用寫太多嵌套代碼,代碼可讀性更高
錯誤抓取 Promise.catch(){} try {} catch {}
promise的箭頭函數(shù)中不能打斷點, async 只關(guān)心返回的結(jié)果

搜索請求如何處理（防抖）?
防抖 : 是限制下次函數(shù)調(diào)用之前必須等待的時間間隔(300ms)。將若干個函數(shù)調(diào)用合成一次，并在給定時間過去之后僅被調(diào)用一次
節(jié)流: 節(jié)流函數(shù)允許一個函數(shù)在規(guī)定的時間內(nèi)只執(zhí)行一次

搜索請求中文如何請求?
把中文替換成字符編碼再發(fā)請求

介紹觀察者模式?
把自己注入到被觀察的對象里, 對象改變某個數(shù)據(jù)的時候, 調(diào)用自己的update函數(shù)更新相應(yīng)的狀態(tài), 強耦合的方式

觀察者和訂閱-發(fā)布的區(qū)別，各自用在哪里?
兩者的主要區(qū)別是調(diào)度的地方不同訂閱發(fā)布模式比觀察者模式，中間多一個“調(diào)度中心”。因此更解耦，所以常見系統(tǒng)中，訂閱發(fā)布模式能讓業(yè)務(wù)更清晰
觀察者模式是由具體目標(biāo)調(diào)度的而發(fā)布/訂閱模式是統(tǒng)一由調(diào)度中心調(diào)的，所以觀察者模式的訂閱者與發(fā)布者之間是存在依賴的，而發(fā)布/訂閱模式則不會
可以把restful請求的通信方式，看做觀察者模式的應(yīng)用；而服務(wù)總線（MQ）的方式，則是訂閱發(fā)布模式

介紹中介者模式?
中介對象主要是用來封裝行為的，行為的參與者就是那些對象，但是通過中介者，這些對象不用相互知道(機場交通控制系統(tǒng))
中介者模式與業(yè)務(wù)相關(guān)，訂閱/發(fā)布模式與業(yè)務(wù)無關(guān)
雖然實現(xiàn)結(jié)構(gòu)非常相像，但是很明顯的是，中介者模式參與業(yè)務(wù)相關(guān)東西，所以內(nèi)容是大相徑庭的

介紹react優(yōu)化?
this的綁定方法在constructor中綁定事件
在父組件因狀態(tài)的變化更改，而子組件并沒有狀態(tài)變化時, 不讓子組件render shouldComponentUpdate(nextProps, nextState) React.PureComponent 替換 React.Component
加key
redux性能優(yōu)化使用reselect庫在調(diào)用到已經(jīng)執(zhí)行過的數(shù)據(jù)時，react不會再次對數(shù)據(jù)進(jìn)行渲染，而是從reselector中取出緩存數(shù)據(jù)加載，減少了重新渲染，達(dá)到性能優(yōu)化的效果
用函數(shù)子組件進(jìn)行UI和邏輯的分離, 拆分成更小組件, 數(shù)據(jù)的變更改變盡量少的組件
一些與狀態(tài)無關(guān)的屬性不要放在state里, 避免數(shù)據(jù)改變重新渲染dom

介紹http2.0?
HTTP2.0相比HTTP1.1可以給用戶帶來更佳的用戶體驗
新增二進(jìn)制分幀傳輸改進(jìn)傳輸性能，實現(xiàn)低延遲和高吞吐量
壓縮頭部用首部表來跟蹤和存儲之間發(fā)送的鍵-值對
多路復(fù)用并行請求
服務(wù)端推送（Server Push）

通過什么做到并發(fā)請求?
改接口讓后臺一次請求查詢更多的數(shù)據(jù),減少請求
并行改為串行
jquery 的 var d2 = $.Deferred()
使用 promise.all 統(tǒng)一處理所有的請求數(shù)據(jù)

http1.1時如何復(fù)用tcp連接?
tcp 長連接本來就是復(fù)用的

介紹service worker
服務(wù)端推送消息不用輪詢

redux請求中間件如何處理并發(fā)
還是那一套吧, 防抖節(jié)流合并請求 promise.all等

介紹Promise，異常捕獲
Promise.catch() promise.then().catch() try{}catch{}

介紹position屬性包括CSS3新增
static fixed absolute relative inherit
position:sticky
該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置
當(dāng)元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)就固定在指定位置
元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對于viewport來計算元素的偏移量

瀏覽器事件流向?
事件捕獲處于目標(biāo) 事件冒泡

介紹事件代理以及優(yōu)缺點?
事件代理發(fā)生在事件冒泡的處理上 , 可以不用每個子元素都綁定事件處理的方法, 動態(tài)的子元素也可以觸發(fā)冒泡
如果把所有事件都用事件代理，可能會出現(xiàn)事件誤判,

React組件中怎么做事件代理,及其原理?
區(qū)別于瀏覽器事件處理方式，React并未將事件處理函數(shù)與對應(yīng)的DOM節(jié)點直接關(guān)聯(lián)，而是在頂層使用了一個全局事件監(jiān)聽器監(jiān)聽所有的事件
React會在內(nèi)部維護(hù)一個映射表記錄事件與組件事件處理函數(shù)的對應(yīng)關(guān)系
當(dāng)某個事件觸發(fā)時，React根據(jù)這個內(nèi)部映射表將事件分派給指定的事件處理函數(shù)
當(dāng)映射表中沒有事件處理函數(shù)時，React不做任何操作
當(dāng)一個組件安裝或者卸載時，相應(yīng)的事件處理函數(shù)會自動被添加到事件監(jiān)聽器的內(nèi)部映射表中或從表中刪除

介紹this各種情況?
指向當(dāng)前function object對象 react組件實例 window

前端怎么控制管理路由?
標(biāo)簽的方式對象配置的方式動態(tài)路由

使用路由時出現(xiàn)問題如何解決?
Switch匹配最后一個路由放404的頁面
全局的路由攔截, 例如登陸token的校驗

React怎么做數(shù)據(jù)的檢查和變化?
prop-types 第三方插件檢查數(shù)據(jù)的類型以及 isRequired 必須傳入
componentWillRecieveProps(nextProps) 對比傳入數(shù)據(jù)的變化

————————— 滴滴 —————————
react-router怎么實現(xiàn)路由切換?

定義路由的時候path 和 component 一一對應(yīng), 頁面的路由改變就加載對應(yīng)的組件

a標(biāo)簽 this.props.history.push(‘path’) withRouter(Component) window.$history.push(‘path’)

react-router里的標(biāo)簽和

React層面的性能優(yōu)化?

整個前端性能提升大致分幾類?

import { Button } from ‘a(chǎn)ntd’，打包的時候只打包button，分模塊加載，是怎么做到的?
webpack 打包前會把所有的組件分成一個個的小 chunk
當(dāng)頁面加載的時候再用 getComponents方法引入到項目里, 實現(xiàn)分模塊加載

使用import時，webpack對node_modules里的依賴會做什么?
一般直接引入組件不做壓縮編譯等設(shè)置loader 的時候 exclude: /node_modules/

JS異步解決方案的發(fā)展歷程以及優(yōu)缺點?
function(callback){} promise.then().catch() promise.all([]) generater/yield async/await

Http報文的請求會有幾個部分?
請求行請求頭數(shù)據(jù)體
狀態(tài)行 HTTP/1.1 200 ok，響應(yīng)頭，響應(yīng)正文

cookie放哪里，cookie能做的事情和存在的價值?
后端生成放在 http的請求頭里一般5k大小用于身份認(rèn)證的功能攜帶少量的信息每次請求都會帶上

cookie和token都存放在header里面，為什么只劫持前者?
cookie 每次請求都會帶上內(nèi)容主要包括：名字，值，過期時間，路徑和域,cookie是有狀態(tài)的被劫持不安全, 可以設(shè)置httpOnly 防止 cors
token可以設(shè)置失效時間, 是無狀態(tài)的被劫持后危險性要低一些, 在跨端能力上更好

cookie和session有哪些方面的區(qū)別?
cookie 機制采用的是在客戶端保持狀態(tài)的方案 session 機制采用的是在服務(wù)器端保持狀態(tài)的方案
cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙考慮到安全應(yīng)當(dāng)使用session
session會在一定時間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會比較占用你服務(wù)器的性能考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE
單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie
將登陸信息等重要信息存放為SESSION 其他信息如果需要保留，可以放在COOKIE中

React中Dom結(jié)構(gòu)發(fā)生變化后內(nèi)部經(jīng)歷了哪些變化?
diff算法對比虛擬dom與現(xiàn)在視圖dom, 計算哪些節(jié)點需要重新渲染算出最小操作集然后到組件 render

React掛載的時候有3個組件，textComponent、composeComponent、domComponent，區(qū)別和關(guān)系，
Dom結(jié)構(gòu)發(fā)生變化時怎么區(qū)分data的變化，怎么更新，更新怎么調(diào)度，如果更新的時候還有其他任務(wù)存在怎么處理?
ReactClass
他們都接收node參數(shù)
如果node是null，則生成ReactDOMEmptyComponent
如果node是數(shù)字或字符串，則生成eactDOMTextComponent
如果傳入的node是一個對象，是ReactElement對象,分別生成ReactDOMComponent和ReactCompositeComponent
雖然是不同的對象，但是都實現(xiàn)了mountComponent,receiveComponent和unmountComponent三個關(guān)鍵的方法
mountComponent方法用于把ReactElement轉(zhuǎn)化為HTML標(biāo)記，最終掛載到DOM上，而經(jīng)瀏覽器解析后的DOM元素，就是用戶視角看到的React組件了
更新的時候,繼續(xù)diff 算法同上

key主要是解決哪一類的問題，為什么不建議用索引index（重繪）?
循環(huán)渲染子元素加個key值使diff算法更快, 使用index的話, 當(dāng)數(shù)組增刪的時候, dom元素對應(yīng)index改變會出現(xiàn)渲染的問題

Redux中異步的請求怎么處理?
react-thunk react-saga 把返回action對象改成異步函數(shù)處理并返回

Redux中間件是什么東西，接受幾個參數(shù)（兩端的柯里化函數(shù)）?
中間件是怎么拿到store和action，然后怎么處理?
處理異步函數(shù) 打印logger信息等

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

// 當(dāng)我們調(diào)用applyMiddleware方法時
applyMiddleware(store,[logger])

// 會依次middlewares數(shù)組中的方法，并且每次執(zhí)行都重新封裝store.dispatch
middlewares.forEach(middleware =>
  dispatch = middleware(store)(dispatch)
)

// 這里體現(xiàn)了函數(shù)柯里化，每次執(zhí)行一個中間件，middleware(store)(dispatch),第二個括號內(nèi)的（dispatch），傳遞給了具體函數(shù)的next

柯里化函數(shù)兩端的參數(shù)具體是什么東西?
middleware(store)(dispatch) 第二個括號內(nèi)的（dispatch），傳遞給了具體函數(shù)的next

state是怎么注入到組件的，從reducer到組件經(jīng)歷了什么樣的過程?
react-redux connect(state, dispatch)(component)
store => reducers => value => this.props

koa中response.send、response.rounded、response.json發(fā)生了什么事，瀏覽器為什么能識別到它是一個json結(jié)構(gòu)或是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有什么區(qū)別?
對于loader，它就是一個轉(zhuǎn)換器，將A文件進(jìn)行編譯形成B文件，這里操作的是文件，比如將A.scss或A.less轉(zhuǎn)變?yōu)锽.css，單純的文件轉(zhuǎn)換過程
對于plugin，它就是一個擴展器，它豐富了wepack本身，針對是loader結(jié)束后，webpack打包的整個過程，它并不直接操作文件，而是基于事件機制工作，會監(jiān)聽webpack打包過程中的某些節(jié)點
run：開始編譯
make：從entry開始遞歸分析依賴并對依賴進(jìn)行build
build-moodule：使用loader加載文件并build模塊
normal-module-loader：對loader加載的文件用acorn編譯，生成抽象語法樹AST
program：開始對AST進(jìn)行遍歷，當(dāng)遇到require時觸發(fā)call require事件
seal：所有依賴build完成，開始對chunk進(jìn)行優(yōu)化（抽取公共模塊、加hash等）
optimize-chunk-assets：壓縮代碼
emit：把各個chunk輸出到結(jié)果文件
通過對節(jié)點的監(jiān)聽，從而找到合適的節(jié)點對文件做適當(dāng)?shù)奶幚?/p>

介紹AST（Abstract Syntax Tree）抽象語法樹?
虛擬dom 類似 render(‘div’, ‘data-‘, text)

安卓Activity之間數(shù)據(jù)是怎么傳遞的?
Activity_1利用Intent的putExtra()方法來攜帶數(shù)據(jù)，然后Activity_2通過Intent的getExtra()方法來獲取Activity_1傳遞過來的數(shù)據(jù)
利用startActivityForResult()這個方法來啟動Activity_2,然后Activity_2在利用Intent和setResult()方法來向Activity_1傳送數(shù)據(jù)，最后，Activity_1通過回調(diào)方法onActivityResult()來接收Activity_2數(shù)據(jù)

WebView和原生是如何通信?
1.JSbridge：:(webviewJavascriptBridge)一種js與原生native通信的機制，可以h5與native互調(diào)
2.Cordova

跨域怎么解決，有沒有使用過Apache等方案?
node代理 nginx cors
啟用Apache 的 proxy module反向代理解決js跨域問題
配置完成之后，訪問 http://localhost/project 實際就是訪問 http://ip_address/project 上的資源來實現(xiàn)跨域

—————- 今日頭條-有贊-挖財 —————-

————————— 今日頭條 —————————
對async、await的理解，內(nèi)部原理?
async、await 是一種異步編程的解決方式
await/async和yield都被編譯器在編譯時轉(zhuǎn)化為了狀態(tài)機
因為(C# 和 .NET 都提供了這個功能)

介紹下Promise，內(nèi)部實現(xiàn)?
是一種異步解決方案,簡單點就是一個容器,狀態(tài)機
內(nèi)部實現(xiàn) 就是 pending => fullield rejected 用 then(f1, f2)

清除浮動?

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

overflow:hidden

定位問題（絕對定位、相對定位等）?

從輸入URL到頁面加載全過程?

tcp3次握手?
tcp屬于哪一層（1 物理層 -> 2 數(shù)據(jù)鏈路層 -> 3 網(wǎng)絡(luò)層(ip)-> 4 傳輸層(tcp) -> 5 應(yīng)用層(http)）?

redux的設(shè)計思想 ?
一個全局的狀態(tài)管理中心, 不用一步一步的 props 傳遞數(shù)據(jù), 使數(shù)據(jù)的使用更加方便

接入redux的過程? 綁定connect的過程? connect原理?
react-redux 提供的兩個api Provider標(biāo)簽中傳入全局的store store里面有reducer 里面有對應(yīng)的 action的處理方法用戶使用是,通過connect(mapStateToProps, mapDispatchToProps)(component) 傳入到組件中
每一個action-types 都有對應(yīng)的修改store 里的state的方法

webpack介紹?
Webpack 是一種模塊化的打包方案
把所有的代碼都模塊化, 通過統(tǒng)一的入口文件(一般是app.js), 打包出統(tǒng)一的出口
根據(jù) loader plugin 來個性化打包的方法插件滿足不同的項目需求

== 和 ===的區(qū)別，什么情況下用相等==?
== 會進(jìn)行隱式轉(zhuǎn)換
=== 得判斷數(shù)據(jù)的類型是否相同
現(xiàn)在基本上不用 ==, 不曉得什么情況下能用吧

bind、call、apply的區(qū)別?
都是指定函數(shù)的this指向, 來讓函數(shù)實現(xiàn)自身沒有的方法
bind 底層還是 call apply 的封裝
call 參數(shù)是一個一個的, apply 參數(shù)是數(shù)組

動畫的了解?

介紹下原型鏈（解決的是繼承問題嗎）?
繼承: 原型鏈繼承、借用構(gòu)造函數(shù)繼承(call, apply)、組合繼承
原型鏈繼承只是繼承的一種方式

對跨域的了解?

————————— 有贊 —————————
Linux 754 介紹?
最后一層目錄權(quán)限為754, 直接進(jìn)入到最后一層目錄 chmod 754 5/4/3/2/1

介紹冒泡排序，選擇排序，冒泡排序如何優(yōu)化?
冒泡排序:
1.依次兩兩比較相鄰的元素，如果第一個比第二個大，則進(jìn)行交換
2.經(jīng)過第一輪比較之后，最大的數(shù)已經(jīng)出現(xiàn)在數(shù)組最后一個位置了
3.然后再對除了最后一個元素外的所有數(shù)都重復(fù)一遍上述比較，結(jié)束后第二個的數(shù)會到達(dá)數(shù)組倒數(shù)第二個位置
4.再依次對剩下的數(shù)進(jìn)行重復(fù)，直到排序完畢

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

優(yōu)化: 在第一層循環(huán)內(nèi)加個 bool = true 在第二個循環(huán)的 if 里如果交換就設(shè)置 bool = false

選擇排序:
1.從數(shù)組的開頭起，將第一個元素和其他所有元素都進(jìn)行一次比較，選擇出最小的元素放在數(shù)組的第一個位置
2.然后再從第二個元素開始，將第二個元素和除第一個之外的所有元素進(jìn)行一次比較，選擇出最小的元素放在數(shù)組的第二個位置
3.對后面的第三，第四……的元素分別重復(fù)上面的步驟，直到所有的數(shù)據(jù)完成排序

transform動畫和直接使用left、top改變位置有什么優(yōu)缺點?
設(shè)置一次的初始末尾位置, 用瀏覽器的GPU去處理動畫, 頁面更加流暢, 減少頁面的重繪和回流性能更高

如何判斷鏈表是否有環(huán)?
“快慢指針”: 用兩個指針 fast 每次走兩步 slow 每次走一步; 當(dāng) fast 再次與 slow 相遇的時候就說明鏈表有環(huán)

介紹二叉搜索樹的特點?
二叉樹就是樹的每個節(jié)點最多只能有兩個子節(jié)點
二叉搜索樹由于其獨特的數(shù)據(jù)結(jié)構(gòu)，使得其無論在增刪，還是查找，時間復(fù)雜度都是O(h)，h為二叉樹的高度。因此二叉樹應(yīng)該盡量的矮，即左右節(jié)點盡量平衡

介紹暫時性死區(qū) ?
let const 變量申明前引用報錯只能申明一次變量不會變量提升按申明的位置開始起作用

ES6中的Map和原生的對象有什么區(qū)別?
Object的鍵只能是字符串，Map的鍵可以是任意類型的值（包括對象），所以Map是一種更完善的Hash結(jié)構(gòu)實現(xiàn)

觀察者和發(fā)布-訂閱的區(qū)別?
觀察者: 多個對一個的觀察并更新
發(fā)布-訂閱: 一個通過調(diào)度中心對多個的通知

react異步渲染的概念,介紹Time Slicing 和 Suspense?
一個組件不會阻塞其他組件的渲染, 但是會異步的
如果設(shè)備網(wǎng)速夠快的話, 感覺上是同步的
異步的渲染頁面,只展示最終的渲染狀態(tài), 就是等待頁面的數(shù)據(jù)獲取到了之后, 再一次性的把頁面渲染出來, 如果是多個請求的數(shù)據(jù),可以先渲染出來 (有點把后端服務(wù)端渲染的頁面放到前端來渲染的感覺, 中間請求數(shù)據(jù)的時候給一個請求提示)

react生命周期的改變?

react中props改變后在哪個生命周期中處理?
componentWillReciveProps => shouldComponentUpdate

介紹純函數(shù)?
就是 return 一個jsx 語法的模塊 , 不 extends React.Component, 不用組件實例化, 也沒有生命周期, 無state，只有props 純渲染的, 效率更高

前端性能優(yōu)化?

pureComponent 和 FunctionComponent 區(qū)別?
一個是為了提高性能的淺比較組件, 一個是可以純函數(shù)組件或者高階組件

介紹JSX?

1
2
3

// 利用HTML語法來創(chuàng)建虛擬DOM。
// 當(dāng)遇到 < JSX就當(dāng)HTML解析，遇到 { 就當(dāng)JavaScript解析
// on 綁定事件, style={{}} 設(shè)置行內(nèi)樣式

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

RN為什么能在原生中繪制成原生組件（bundle.js）?

介紹虛擬DOM?
含有標(biāo)簽的屬性和方法的一個node節(jié)點對象

如何設(shè)計一個localStorage，保證數(shù)據(jù)的實效性?
是一種你不主動清除它，它會一直將存儲數(shù)據(jù)存儲在客戶端的存儲方式, 為了數(shù)據(jù)的時效性, 可以和數(shù)據(jù)一起存一個data時間戳, 也可以是token等
localStorage.setItem(‘date’,Json.stringIfy(date))

如何設(shè)計Promise.all()

介紹高階組件?
把基礎(chǔ)組件當(dāng)做函數(shù)參數(shù),傳入到函數(shù)中, 并做相應(yīng)的操作, 再渲染組件

sum(2, 3)實現(xiàn)sum(2)(3)的效果?
函數(shù)柯里化, 保證一次傳入更少的參數(shù), 做更加明確的事情

react性能優(yōu)化?

兩個對象如何比較是否相等?

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

    //Object.keys() 返回一個由對象的自身可枚舉屬性(key值)組成的數(shù)組,例如：數(shù)組返回下表：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 聲明變量, 存在變量提升, 分為全局作用域和函數(shù)作用域, 按照作用域鏈從內(nèi)到外,往上查找

call、apply、bind的區(qū)別?

防抖和節(jié)流的區(qū)別?

介紹各種異步方案?

react生命周期?

介紹Fiber?
React Fibre是React核心算法正在進(jìn)行的重新實現(xiàn) fiber代表一個工作單元
React Fiber的目標(biāo)是提高其對動畫，布局和手勢等領(lǐng)域的適用性
它的主體特征是增量渲染：能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個幀中

前端性能優(yōu)化?

介紹DOM樹對比?
diff 算法一層一層往下比較

react中的key的作用?
有循環(huán)的時候確定某一個虛擬 DOM 節(jié)點, 可以幫助 diff 算法更快的更新虛擬DOM

如何設(shè)計狀態(tài)樹?
一個公共的reducer 然后就是各個頁面級別的reducer

介紹css，csrf?
xss 跨站腳本攻擊客戶端輸入的腳本
csrf 跨站請求偽造后臺模仿的請求攻擊

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

項目中如何應(yīng)用數(shù)據(jù)結(jié)構(gòu)?
不是復(fù)雜的項目, 數(shù)據(jù)結(jié)構(gòu)應(yīng)該盡量簡單
靜態(tài)數(shù)組適合元素不超過100的場合
動態(tài)數(shù)組適合元素不超過1000的場合
鏈表適合元素不超過3000的場合

native提供了什么能力給RN?

如何做工程上的優(yōu)化?

shouldComponentUpdate是為了解決什么問題?
解決了組件是否需要再次 render 渲染, 如果并不需要渲染, 可以提升渲染效率

如何解決props層級過深的問題?

用 redux 全局狀態(tài)管理
頂層組件的 context this.context.屬性去引用

前端怎么做單元測試?
mocha chai should

webpack生命周期?
webpack打包的整個過程?
webpack將創(chuàng)建所有應(yīng)用程序的依賴關(guān)系圖表。圖表的起點被稱之為入口起點(entry point)
loader可以使你在require()或”加載”模塊時預(yù)處理文件。因此，loader類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強大方法
由于loader僅在每個文件的基礎(chǔ)上執(zhí)行轉(zhuǎn)換，而插件(plugins)最常用于（但不限于）在打包模塊的“compilation”和“chunk”生命周期執(zhí)行操作和自定義功能，包括打包優(yōu)化壓縮及配置編譯時的變量等功能
將所有的資源(assets)歸攏在一起后，還需要告訴webpack在哪里打包應(yīng)用程序。webpack的output屬性描述了如何處理歸攏在一起的代碼(bundled code)

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

常用的plugins?

pm2怎么做進(jìn)程管理，進(jìn)程掛掉怎么處理 ?
PM2是一個帶有負(fù)載均衡功能的Node.js應(yīng)用的進(jìn)程管理器。它允許你永遠(yuǎn)保持應(yīng)用的存活,重新加載無需停機

不用pm2怎么做進(jìn)程管理

—————- 滬江-餓了么-攜程-喜馬拉雅 —————-

————————— 滬江 —————————
介紹下瀏覽器跨域?
協(xié)議域名端口號的同源同域策略來確保請求的安全性

怎么去解決跨域問題?

jsonp方案需要服務(wù)端怎么配合?
配置返回的數(shù)據(jù)類型必須是jsonp 類型的，而不是json 類型的,解決跨域必須在ajax 方法中dataType 設(shè)置為jsonp
客戶端js 代碼中ajax 方法還要設(shè)置jsonpCallback 這個屬性

Ajax發(fā)生跨域要設(shè)置什么（前端）?
Origin: https://blog.csdn.net

加上CORS之后從發(fā)起到請求正式成功的過程?
Request Method: OPTIONS 請求是否能行
Request Method: POST 發(fā)起請求

xsrf跨域攻擊的安全性問題怎么防范?
是攻擊者通過一些技術(shù)手段欺騙用戶的瀏覽器去訪問一個自己曾經(jīng)認(rèn)證過的網(wǎng)站并執(zhí)行一些操作（如發(fā)郵件，發(fā)消息，甚至財產(chǎn)操作如轉(zhuǎn)賬和購買商品）
提交驗證碼: 在表單中增加一個隨機的數(shù)字或字母驗證碼，通過強制用戶和應(yīng)用進(jìn)行交互，來有效地遏制CSRF攻擊
Referer Check : 檢查如果是非正常頁面過來的請求，則極有可能是CSRF攻擊
token驗證: 在 HTTP 請求中以參數(shù)的形式加入一個隨機產(chǎn)生的 token，并在服務(wù)器端建立一個攔截器來驗證這個 token，如果請求中沒有 token 或者 token 內(nèi)容不正確，則認(rèn)為可能是 CSRF 攻擊而拒絕該請求
在 HTTP 頭中自定義屬性并驗證: 類似cookie的方法

使用Async會注意哪些東西?
await 接收返回來的 Promise , 用在 try{}catch{} 中抓取錯誤信息

Async里面有多個await請求，可以怎么優(yōu)化（請求是否有依賴）?
await promise.all([p1, p2]) 同時發(fā)起異步請求

Promise和Async處理失敗的時候有什么區(qū)別?
Promise、generator錯誤都可以在構(gòu)造體里面被捕獲，而async/await返回的是promise,可以通過catch直接捕獲錯誤
generator 拋出的錯誤，以及await 后接的Promise.reject都必須被捕獲，否則會中斷執(zhí)行

Redux在狀態(tài)管理方面解決了React本身不能解決的問題?
props 層級太深的問題

Redux有沒有做過封裝?
一份store樹，離開頁面再次進(jìn)入，數(shù)據(jù)不會初始化: (@修飾器) connectstore對ReactDom繼承注入action和store，重寫componentWillUnmount生命周期，離開頁面自動觸發(fā)store初始化

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

對應(yīng)的生命周期做什么事?

遇到性能問題一般在哪個生命周期里解決?
shouldUpdateComponent

怎么做性能優(yōu)化（異步加載組件…）?
Time slicing upscape

寫react有哪些細(xì)節(jié)可以優(yōu)化?

React的事件機制（綁定到 document ）?
React組件上聲明的事件沒有綁定在React組件對應(yīng)的原生DOM節(jié)點上，而是綁定在document節(jié)點上，觸發(fā)的事件是對原生事件的包裝
主要包含事件注冊、觸發(fā)以及回調(diào)函數(shù)的存儲
ReactEventListener：負(fù)責(zé)事件注冊和事件分發(fā), React將DOM事件全都注冊到document節(jié)點上，事件分發(fā)主要調(diào)用dispatchEvent進(jìn)行，從事件觸發(fā)組件開始，向父元素遍歷
ReactEventEmitter：負(fù)責(zé)每個組件上事件的執(zhí)行
EventPluginHub：負(fù)責(zé)回調(diào)函數(shù)的存儲

介紹下事件代理，主要解決什么問題?

前端開發(fā)中用到哪些設(shè)計模式?
單例模式: 購物車, 全局緩存
觀察者模式: 登錄頁面登錄后，會需要刷新各個模塊的信息（頭像、nav）這類
工廠模式: 學(xué)生課程分?jǐn)?shù)
命令模式: 刷新菜單界面
策略模式: 商品打折

React/Redux中哪些功能用到了哪些設(shè)計模式?
代理模式: 事件的注冊, 觸發(fā)
@connect: 裝飾器模式
一個 store: 單例模式
appmidlleware(thunk, logger): 中介者模式
state => view : 發(fā)布訂閱者模式

JS變量類型分為幾種，區(qū)別是什么?
值類型引用類型

JS里垃圾回收機制是什么，常用的是哪種，怎么處理的?
標(biāo)記清除法: 函數(shù)聲明一個變量的時候，就將這個變量標(biāo)記為“進(jìn)入環(huán)境” 當(dāng)變量離開環(huán)境時，則將其標(biāo)記為“離開環(huán)境” 然后回收
引用計數(shù)法: 跟蹤記錄每個值被引用的次數(shù) 引用次數(shù)為0的值所占用的內(nèi)存就會被回收

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

————————— 餓了么 —————————
小程序里面開頁面最多多少?
每個小程序賬號僅支持配置最多20個域名
每個域名最多可綁定20個小程序
在公眾平臺后臺域名配置成功后，才可以使用web-view組件

React子父組件之間如何傳值?
props func

Emit事件怎么發(fā)，需要引入什么?

介紹下React高階組件，和普通組件有什么區(qū)別?
把組件當(dāng)參數(shù)傳入函數(shù)組件中, 作相應(yīng)的邏輯處理再返回

一個對象數(shù)組，每個子對象包含一個id和name，React如何渲染出全部的name? map()
在哪個生命周期里寫? render()
其中有幾個name不存在，通過異步接口獲取，如何做? 把對象放在 state 里, 先提示 loading , 獲取到了后再渲染
渲染的時候key給什么值，可以使用index嗎，用id好還是index好? id; 數(shù)組增刪的時候 index 對應(yīng)的數(shù)據(jù)存在變化

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像素,上下固定，中間滾動布局如何實現(xiàn)?

[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]]

取數(shù)組的最大值（ES5、ES6）?
Math.max(…[1,2,3])

apply和call的區(qū)別?

ES5和ES6有什么區(qū)別?

some、every、find、filter、map、forEach有什么區(qū)別?

上述數(shù)組隨機取數(shù)，每次返回的值都不一樣?
Math.random()

如何找0-5的隨機數(shù)，95-99呢?

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

頁面上有1萬個button如何綁定事件?
事件委托, 冒泡觸發(fā)

如何判斷是button?
冒泡的時候帶上 index

頁面上生成一萬個button，并且綁定事件，如何做（JS原生操作DOM）

循環(huán)綁定時的index是多少，為什么，怎么解決?
9999 0 開始

頁面上有一個input，還有一個p標(biāo)簽，改變input后p標(biāo)簽就跟著變化，如何處理?
監(jiān)聽input的哪個事件，在什么時候觸發(fā)
onKeyup

————————— 攜程 —————————
對React看法，有沒有遇到一些坑?
pureComponent 只是淺比較
以及一些多次渲染的 render

對閉包的看法，為什么要用閉包?
增加了內(nèi)存的消耗
某些瀏覽器上因為回收機制的問題，有內(nèi)存溢出風(fēng)險
增加了代碼的復(fù)雜度，維護(hù)和調(diào)試不便

延長作用域鏈
生成預(yù)編譯函數(shù)
更好的組織代碼，比如模塊化，異步代碼轉(zhuǎn)同步
setTimeout()(i) 問題

手寫數(shù)組去重函數(shù)?
new Set(arr) (可能有兼容性問題)
arr.sort() 不相等就push到新的數(shù)組中
利用對象的屬性不能相同的特點進(jìn)行去重
利用includes

手寫數(shù)組扁平化函數(shù)?
就是把多維數(shù)組變成一維數(shù)組

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的用途和性質(zhì)?

Promise和Callback有什么區(qū)別?

React生命周期?

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

介紹Promise?

Promise有幾個狀態(tài)?

說一下閉包?

React的生命周期?

componentWillReceiveProps的觸發(fā)條件是什么?

React16.3對生命周期的改變?
UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

介紹下React的Filber架構(gòu)?
改變了之前react的組件渲染機制，新的架構(gòu)使原來同步渲染的組件現(xiàn)在可以異步化，可中途中斷渲染，執(zhí)行更高優(yōu)先級的任務(wù)。釋放瀏覽器主線程
畫Filber渲染樹?
就是組件的生命周期樹, componentWillMount 一層一層的往下渲染 componentWillUnmount再往上

介紹React高階組件?

父子組件之間如何通信?

Redux怎么實現(xiàn)屬性傳遞，介紹下原理?

React-Router版本號?

網(wǎng)站SEO怎么處理?
前端加 meta discription keyword
后端 ssr

介紹下HTTP狀態(tài)碼 403、301、302是什么?
403 服務(wù)器拒絕請求
301 永久重定向
302 臨時重定向

緩存相關(guān)的HTTP請求頭?
盡量降低http的請求次數(shù)
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怎么建立安全通道?

前端性能優(yōu)化（JS原生和React）?

用戶體驗做過什么優(yōu)化?

對PWA有什么了解?
progressive web app: 漸進(jìn)式網(wǎng)頁應(yīng)用
客戶端要和推送服務(wù)進(jìn)行綁定，會生成一個綁定后的推送服務(wù)API接口，服務(wù)端調(diào)用此接口，發(fā)送消息。同時，瀏覽器也要支持推送功能，在注冊 sw 時, 加上推送功能的判斷

對安全有什么了解?

介紹下數(shù)字簽名的原理?
A：將明文進(jìn)行摘要運算后得到摘要（消息完整性），再將摘要用A的私鑰加密（身份認(rèn)證），得到數(shù)字簽名，將密文和數(shù)字簽名一塊發(fā)給B。
B：收到A的消息后，先將密文用自己的私鑰解密，得到明文。將數(shù)字簽名用A的公鑰進(jìn)行解密后，得到正確的摘要（解密成功說明A的身份被認(rèn)證了

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

RESTful常用的Method?

介紹下跨域?

Access-Control-Allow-Origin在服務(wù)端哪里配置?
response的header

csrf跨站攻擊怎么解決?
token post方法 http header 中加驗證

—————- 兌吧-微醫(yī)-寺庫-寶寶樹 —————-

————————— 兌吧 —————————
localStorage和cookie有什么區(qū)別?

CSS選擇器有哪些?

盒子模型，以及標(biāo)準(zhǔn)情況和IE下的區(qū)別?

如何實現(xiàn)高度自適應(yīng)?

prototype和——proto——區(qū)別?

_construct是什么?

new是怎么實現(xiàn)的 ?

promise的精髓，以及優(yōu)缺點?

如何實現(xiàn)H5手機端的適配?

rem、flex的區(qū)別（root em）?

em和px的區(qū)別?

React聲明周期?

如何去除url中的#號?

Redux狀態(tài)管理器和變量掛載到window中有什么區(qū)別?

webpack和gulp的優(yōu)缺點?

如何實現(xiàn)異步加載?

如何實現(xiàn)分模塊打包（多入口）?

前端性能優(yōu)化（1js css；2 圖片；3 緩存預(yù)加載； 4 SSR； 5 多域名加載；6 負(fù)載均衡）?

并發(fā)請求資源數(shù)上限（6個）?

base64為什么能提升性能，缺點?

介紹webp這個圖片文件格式?
WebP是一種有損壓縮這個格式的圖像的體積將比JPEG格式圖像減小40% 主要優(yōu)勢在于高效率

介紹koa2?

Promise如何實現(xiàn)的?

異步請求，低版本fetch如何低版本適配?

ajax如何處理跨域?

CORS如何設(shè)置?

jsonp為什么不支持post方法?
只支持get方法獲取數(shù)據(jù)

介紹同源策略?

React使用過的一些組件?

介紹Immuable?

介紹下redux整個流程原理?

介紹原型鏈?

如何繼承?

————————— 微醫(yī) —————————
介紹JS數(shù)據(jù)類型，基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別?

Array是Object類型嗎?

數(shù)據(jù)類型分別存在哪里?

var a = {name: “前端開發(fā)”}; var b = a; a = null那么b輸出什么
var a = {b: 1}存放在哪里
var a = {b: {c: 1}}存放在哪里

棧和堆的區(qū)別?

垃圾回收時棧和堆的區(qū)別?

數(shù)組里面有10萬個數(shù)據(jù)，取第一個元素和第10萬個元素的時間相差多少?
沒有差別吧通過索引index去拿

棧和堆具體怎么存儲?

介紹閉包以及閉包為什么沒清除?

閉包的使用場景?

JS怎么實現(xiàn)異步?

異步整個執(zhí)行周期?

Promise的三種狀態(tài)?

Async/Await怎么實現(xiàn)?

Promise和setTimeout執(zhí)行先后的區(qū)別?

JS為什么要區(qū)分微任務(wù)和宏任務(wù)?

Promise構(gòu)造函數(shù)是同步還是異步執(zhí)行，then呢?

發(fā)布-訂閱和觀察者模式的區(qū)別?

JS執(zhí)行過程中分為哪些階段?

詞法作用域和this的區(qū)別?
一個是定義時的作用域一個是執(zhí)行時的作用域

平常是怎么做繼承?

深拷貝和淺拷貝?

loadsh深拷貝實現(xiàn)原理?

ES6中l(wèi)et塊作用域是怎么實現(xiàn)的?

React中setState后發(fā)生了什么?

setState為什么默認(rèn)是異步?

setState什么時候是同步的?

為什么3大框架出現(xiàn)以后就出現(xiàn)很多native（RN）框架（虛擬DOM）?

虛擬DOM主要做了什么?

虛擬DOM本身是什么（JS對象）

304是什么?
客戶端已經(jīng)執(zhí)行了GET，但文件未變化

打包時Hash碼是怎么生成的?
版本號時間戳

隨機值存在一樣的情況，如何避免?
多維度產(chǎn)生隨機數(shù)

使用webpack構(gòu)建時有無做一些自定義操作?

webpack做了什么?

a，b兩個按鈕，點擊aba，返回順序可能是baa，如何保證是aba（Promise.all）?

node接口轉(zhuǎn)發(fā)有無做什么優(yōu)化?

node起服務(wù)如何保證穩(wěn)定性，平緩降級，重啟等?

RN有沒有做熱加載?
沒有

RN遇到的兼容性問題?

RN如何實現(xiàn)一個原生的組件?

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

什么是單頁項目?

遇到的復(fù)雜業(yè)務(wù)場景?

Promise.all實現(xiàn)原理?

————————— 寺庫 —————————
介紹Promise的特性，優(yōu)缺點?

介紹Redux?

RN的原理，為什么可以同時在安卓和IOS端運行?

RN如何調(diào)用原生的一些功能?

介紹RN的缺點?

介紹排序算法和快排原理?
快排原理: 一個數(shù)為基準(zhǔn) 小的放前面大的放后面 (再重復(fù))

堆和棧的區(qū)別?

介紹閉包?

閉包的核心是什么?

網(wǎng)絡(luò)的五層模型?

HTTP和HTTPS的區(qū)別?

HTTPS的加密過程?

介紹SSL和TLS?
SSL記錄協(xié)議和SSL握手協(xié)議

介紹DNS解析?

JS的繼承方法?

介紹垃圾回收?

cookie的引用為了解決什么問題?

cookie和localStorage的區(qū)別?

如何解決跨域問題?

前端性能優(yōu)化?

————————— 寶寶樹 —————————
使用canvas繪圖時如何組織成通用組件?

formData和原生的ajax有什么區(qū)別?
設(shè)置header 里的 Content-Type 的類型
Content-type：application/x-www-form-urlencoded

介紹下表單提交，和formData有什么關(guān)系?

介紹redux接入流程?

rudux和全局管理有什么區(qū)別（數(shù)據(jù)可控、數(shù)據(jù)響應(yīng)）?

RN和原生通信 ?
使用回調(diào)函數(shù)Callback，它提供了一個函數(shù)來把返回值傳回給JavaScript
使用Promise來實現(xiàn)
原生模塊向JavaScript發(fā)送事件

介紹MVP怎么組織?

介紹異步方案?

promise如何實現(xiàn)then處理?

koa2中間件原理?
koa2 的中間件是洋蔥模型?；赼sync/await 可以更好的處理異步操作

常用的中間件?
1.koa:面向node.js的表達(dá)式HTTP中間件框架，使Web應(yīng)用程序和API更加令人愉快地編寫
2.koa-router:Router middleware for koa(koa的路由中間件)
3.koa-views:Template rendering middleware for koa.(koa的模板渲染中間件)
4.koa-bodyparser:用來解析body的中間件，比方說你通過post來傳遞表單，json數(shù)據(jù)，或者上傳文件，在koa中是不容易獲取的，通過koa-bodyparser解析之后，在koa中this.body就能直接獲取到數(shù)據(jù)。ps：xml數(shù)據(jù)沒辦法通過koa-bodyparser解析，有另一個中間件koa-xml-body
5.promise-mysql:Promise-mysql是mysqljs / mysql的一個包裝函數(shù)，它包含Bluebird承諾的函數(shù)調(diào)用。通常這會用Bluebird的.promisifyAll()方法完成，但是mysqljs / mysql的腳本與Bluebird所期望的不同

服務(wù)端怎么做統(tǒng)一的狀態(tài)處理?
用promise攔截狀態(tài)碼

如何對相對路徑引用進(jìn)行優(yōu)化?

node文件查找優(yōu)先級?

npm2和npm3 有什么區(qū)別?
npm3 和 npm2 對于依賴的處理不一樣了
npm2所有項目依賴是嵌套關(guān)系，而npm3為了改進(jìn)嵌套過多、套路過深的情況，會將所有依賴放在第二層依賴中（所有依賴只嵌套一次，彼此平行，也就是平鋪的結(jié)構(gòu)

————————— 海康威視 —————————
knex連接數(shù)據(jù)庫響應(yīng)回調(diào)
介紹異步方案
如何處理異常捕獲
項目如何管理模塊
前端性能優(yōu)化
JS繼承方案
如何判斷一個變量是不是數(shù)組
變量a和b，如何交換
事件委托
多個標(biāo)簽生成的Dom結(jié)構(gòu)是一個類數(shù)組
類數(shù)組和數(shù)組的區(qū)別
dom的類數(shù)組如何轉(zhuǎn)成數(shù)組
介紹單頁面應(yīng)用和多頁面應(yīng)用
redux狀態(tài)樹的管理
介紹localstorage的API

————————— 蘑菇街 —————————
html語義化的理解
和的區(qū)別
對閉包的理解
工程中閉包使用場景
介紹this和原型
使用原型最大的好處
react設(shè)計思路
為什么虛擬DOM比真實DOM性能好
react常見的通信方式
redux整體的工作流程
redux和全局對象之間的區(qū)別
Redux數(shù)據(jù)回溯設(shè)計思路
單例、工廠、觀察者項目中實際場景
項目中樹的使用場景以及了解
工作收獲

————————— 酷家樂 —————————
react生命周期
react性能優(yōu)化
添加原生事件不移除為什么會內(nèi)存泄露
還有哪些地方會內(nèi)存泄露
setInterval需要注意的點
定時器為什么是不精確的
setTimeout(1)和setTimeout(2)之間的區(qū)別
介紹宏任務(wù)和微任務(wù)
promise里面和then里面執(zhí)行有什么區(qū)別
介紹pureComponet
介紹Function Component
React數(shù)據(jù)流
props和state的區(qū)別
介紹react context
介紹class和ES5的類以及區(qū)別
介紹箭頭函數(shù)和普通函數(shù)的區(qū)別
介紹defineProperty方法，什么時候需要用到
for..in 和 object.keys的區(qū)別
介紹閉包，使用場景
使用閉包特權(quán)函數(shù)的使用場景
get和post有什么區(qū)別

————————— 百分點 —————————
React15/16.x的區(qū)別
重新渲染render會做些什么
哪些方法會觸發(fā)react重新渲染
state和props觸發(fā)更新的生命周期分別有什么區(qū)別
setState是同步還是異步
對無狀態(tài)組件的理解
介紹Redux工作流程
介紹ES6的功能
let、const以及var的區(qū)別
淺拷貝和深拷貝的區(qū)別
介紹箭頭函數(shù)的this
介紹Promise和then
介紹快速排序
算法：前K個最大的元素

————————— 海風(fēng)教育 —————————
對react看法，它的優(yōu)缺點
使用過程中遇到的問題，如何解決的
react的理念是什么（拿函數(shù)式編程來做頁面渲染）
JS是什么范式語言(面向?qū)ο筮€是函數(shù)式編程)
koa原理，為什么要用koa(express和koa對比)
使用的koa中間件
ES6使用的語法
Promise 和 async/await 和 callback的區(qū)別
Promise有沒有解決異步的問題（promise鏈?zhǔn)钦嬲龔姶蟮牡胤剑?br>Promise和setTimeout的區(qū)別（Event Loop）
進(jìn)程和線程的區(qū)別（一個node實例就是一個進(jìn)程，node是單線程，通過事件循環(huán)來實現(xiàn)異步）
介紹下DFS深度優(yōu)先
介紹下觀察者模式
觀察者模式里面使用的數(shù)據(jù)結(jié)構(gòu)(不具備順序，是一個list)

meta標(biāo)簽

meta標(biāo)簽：提供給頁面的一些元信息（名稱/值對），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。

name：名稱/值對中的名稱。常用的有author、description、keywords、generator、revised、others。把 content 屬性關(guān)聯(lián)到一個名稱。
http-equiv：沒有name時，會采用這個屬性的值。常用的有content-type、expires、refresh、set-cookie。把content屬性關(guān)聯(lián)到http頭部。
content：名稱/值對中的值，可以是任何有效的字符串。始終要和 name 屬性或 http-equiv 屬性一起使用。
scheme：用于指定要用來翻譯屬性值的方案。

css哪些屬性可以繼承

字體相關(guān)：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相關(guān)： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相關(guān)：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：規(guī)定背景圖片的尺寸，background-size:63px 100px;
background-origin：規(guī)定背景圖片的定位區(qū)域，背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。background-origin:content-box;
CSS3 允許您為元素使用多個背景圖像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);

（3）文本效果：

text-shadow：向文本應(yīng)用陰影，可以規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。text-shadow: 5px 5px 5px #FF0000;
word-wrap：允許文本進(jìn)行換行。word-wrap:break-word;

（4）字體：CSS3 @font-face 規(guī)則可以自定義字體。

（5）2D 轉(zhuǎn)換（ transform）

translate()：元素從其當(dāng)前位置移動，根據(jù)給定的 left（x 坐標(biāo)）和 top（y 坐標(biāo)）位置參數(shù)。 transform: translate(50px,100px);
rotate()：元素順時針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時針旋轉(zhuǎn)。transform: rotate(30deg);
scale()：元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)。transform: scale(2,4);
skew()：元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)。transform: skew(30deg,20deg);
matrix()：把所有 2D 轉(zhuǎn)換方法組合在一起，需要六個參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

（6）3D 轉(zhuǎn)換

rotateX()：元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateX(120deg);
rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateY(130deg);

（7）transition：過渡效果，使頁面變化更平滑

transition-property ：執(zhí)行動畫對應(yīng)的屬性，例如 color，background 等，可以使用 all 來指定所有的屬性。
transition-duration：過渡動畫的一個持續(xù)時間。
transition-timing-function：在延續(xù)時間段，動畫變化的速率，常見的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。
transition-delay：延遲多久后開始動畫。

簡寫為： transition: [ || || || ];

（8）animation：動畫

使用CSS3 @keyframes 規(guī)則。

animation-name: 定義動畫名稱
animation-duration: 指定元素播放動畫所持續(xù)的時間長
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )：指元素根據(jù)時間的推進(jìn)來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。
animation-delay: 指定元素動畫開始時間
animation-iteration-count:infinite | ：指定元素播放動畫的循環(huán)次
animation-direction: normal | alternate：指定元素動畫播放的方向，其只有兩個值，默認(rèn)值為normal，如果設(shè)置為normal時，動畫的每次循環(huán)都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
animation-play-state:running | paused ：控制元素動畫的播放狀態(tài)。

簡寫為： animation:[ || || || || || ]

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

閉包是什么，什么時候閉包會消除?

因為作用域鏈，外部不能訪問內(nèi)部的變量和方法，這時我們就需要通過閉包，返回內(nèi)部的方法和變量給外部，從而就形成了一個閉包。

JavaScript是一門具有自動垃圾回收機制的編程語言，主要有兩種方式：

垃圾收集器在運行的時候會給存儲在內(nèi)存中的所有變量都加上標(biāo)記（可以使用任何標(biāo)記方式）。然后，它會去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量，原因是環(huán)境中的變量已經(jīng)無法訪問到這些變量了。最后，垃圾收集器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值并回收它們所占用的內(nèi)存空間。

引用計數(shù)（reference counting）的含義是跟蹤記錄每個值被引用的次數(shù)。當(dāng)聲明了一個變量并將一個引用類型值賦給該變量時，則這個值的引用次數(shù)就是1。如果同一個值又被賦給另一個變量，則該值的引用次數(shù)加1。相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數(shù)減1。當(dāng)這個值的引用次數(shù)變成0 時，則說明沒有辦法再訪問這個值了，因而就可以將其占用的內(nèi)存空間回收回來。這樣，當(dāng)垃圾收集器下次再運行時，它就會釋放那些引用次數(shù)為零的值所占用的內(nèi)存。

導(dǎo)致問題：會導(dǎo)致循環(huán)引用的變量和函數(shù)無法回收。

解決：將用完的函數(shù)或者變量置為null。

怎么理解js是單線程的

主要說一下異步以及事件循環(huán)機制，還有事件隊列中的宏任務(wù)、微任務(wù)。

macrotask：主代碼塊，setTimeout，setInterval、setImmediate等。
microtask：process.nextTick（相當(dāng)于node.js版的setTimeout），Promise 。process.nextTick的優(yōu)先級高于Promise。

更詳細(xì)可以看這篇博客：這一次，徹底弄懂 JavaScript 執(zhí)行機制，講的非常清晰。

有哪些排序算法，時間復(fù)雜度是多少？什么時候快排的效率最低？

排序算法最壞事件復(fù)雜度平均時間復(fù)雜度穩(wěn)定度空間復(fù)雜度
冒泡排序 O(n^2) O(n^2) 穩(wěn)定 O(1)
插入排序 O(n^2) O(n^2) 穩(wěn)定 O(1)
選擇排序 O(n^2) O(n^2) 穩(wěn)定 O(1)
快速排序 O(n^2) O(nlog2n) 不穩(wěn)定 O(log2n)~O(n)
二叉樹排序 O(n^2) O(nlog2n) 不一定 O(n)
堆排序 O(nlog2n) O(nlog2n) 不穩(wěn)定 O(1)
整個序列已經(jīng)有序或完全倒序時，快排的效率最低。

//發(fā)送請求

http狀態(tài)碼，cookie字段，cookie一般存的是什么，session怎么存在的？

這部分可以參考我的博客：HTTP協(xié)議知識點總結(jié)

http請求方式有哪些？

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

怎么用原生js實現(xiàn)一個輪播圖，以及滾動滑動

之前我使用輪播圖都是用的antd的組件，所以我大致說了一下思路，用定時器去實現(xiàn)，以及如何實現(xiàn)平滑的滾動效果。詳情請看：原生js實現(xiàn)輪播圖

用過哪些開源的組件

說了antd和element-ui。

怎么實現(xiàn)上傳下載的功能

主要說了下form表單和input標(biāo)簽。

react生命周期，以及diff算法，diff算法是對樹的深度優(yōu)先遍歷還是廣度優(yōu)先遍歷？
強緩存和協(xié)商緩存

參考：HTTP協(xié)議知識點總結(jié)

react-router的原理

react-router就是控制不同的url渲染不同的組件。react-router在history庫的基礎(chǔ)上，實現(xiàn)了URL與UI的同步。

原理：DOM渲染完成之后，給window添加onhashchange事件監(jiān)聽頁面hash的變化，并且在state屬性中添加了route屬性，代表當(dāng)前頁面的路由。

具體步驟：

當(dāng)點擊鏈接，頁面hash改變時，觸發(fā)綁定在 window 上的 onhashchange 事件；
在 onhashchange 事件中改變組件的 state中的 route 屬性，react組件的state屬性改變時，自動重新渲染頁面；
頁面隨著 state 中的route屬性改變，自動根據(jù)不同的hash給Child變量賦值不同的組件，進(jìn)行渲染。

參考：react-router的實現(xiàn)原理

怎么用無人機捕獲天空上的鳥

這個題目我也不造啊，畢竟我沒用過無人機，有知道的大神可以在評論中回答一下~

終面

終面是去的現(xiàn)場，在深圳總部那邊，基本就是閑聊了二十來分鐘吧，面完還有hr小姐姐給我們介紹和參觀了無人機，酷炫~

做的項目中，哪個做的最深入最久
為什么要做前端，喜歡做前端么
未來的職業(yè)規(guī)劃
了解大疆么，大疆的文化是什么
除了實習(xí)，還做過哪些項目
如果生活富足，衣食無憂，你會選擇干什么
阿里巴巴

阿里是提前批，找人內(nèi)推了菜鳥網(wǎng)絡(luò)，面了六輪，面的我懷疑人生了，中途四面本來已經(jīng)掛了，后面三面面試官又撈起來給我加面了一輪，不過最后還是掛在了hr。

一面

css選擇器，怎么選擇相同的類

id、class、標(biāo)簽、偽類、通配符等?？梢杂胓etElementsByClassName（）選擇相同的類。

css3有哪些偽類，偽類選擇器有哪些

這里要區(qū)分一下偽類和偽元素的概念。根本區(qū)別在于它們是否創(chuàng)造了新的元素(抽象)。

偽類：用于向某些選擇器添加特殊的效果。例如，a標(biāo)簽的 :link, :visited,:hover, :active; 以及 :first-child, :last-child。
偽元素：是html中不存在的元素，用于將特殊的效果添加到某些選擇器。例如:before, :after, :first-letter, :first-line。css3只新增了一個偽元素::selection（改變用戶所選取部分的樣式）。

參考： CSS3 選擇器——偽類選擇器

OSI七層網(wǎng)絡(luò)模型

OSI七層模型作用對應(yīng)協(xié)議對應(yīng)設(shè)備
應(yīng)用層它是計算機用戶，以及各種應(yīng)用程序和網(wǎng)絡(luò)之間的接口 HTTP, FTP, SMTP, POP3 計算機設(shè)備
表示層信息的語法語義以及它們的關(guān)系，如加密解密、轉(zhuǎn)換翻譯、壓縮解壓縮 IPX, LPP, XDP
會話層建立、維護(hù)、管理應(yīng)用程序之間的會話 SSL, TLS, DAP, LDAP
傳輸層服務(wù)點編址，分段與重組、連接控制、流量控制、差錯控制 TCP, UDP 防火墻
網(wǎng)絡(luò)層為網(wǎng)絡(luò)設(shè)備提供邏輯地址，進(jìn)行路由選擇、分組轉(zhuǎn)發(fā) IP ARP RARP ICMP IGMP 路由器
數(shù)據(jù)鏈路層物理尋址，同時將原始比特流轉(zhuǎn)變?yōu)檫壿媯鬏斅肪€ PPTP, ARP, RARP 交換機
物理層機械、電子、定時接口通道信道上的原始比特流傳輸 IEEE 802.2, Ethernet v.2, Internetwork 網(wǎng)卡
參考：一張非常強大的OSI七層模型圖解

MVC和MVVM的區(qū)別

Model用于封裝和應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對數(shù)據(jù)的處理方法；
View作為視圖層，主要負(fù)責(zé)數(shù)據(jù)的展示；
Controller定義用戶界面對用戶輸入的響應(yīng)方式，它連接模型和視圖，用于控制應(yīng)用程序的流程，處理用戶的行為和數(shù)據(jù)上的改變。

MVC將響應(yīng)機制封裝在controller對象中，當(dāng)用戶和你的應(yīng)用產(chǎn)生交互時，控制器中的事件觸發(fā)器就開始工作了。

MVVM把View和Model的同步邏輯自動化了。以前Controller負(fù)責(zé)的View和Model同步不再手動地進(jìn)行操作，而是交給框架所提供的數(shù)據(jù)綁定功能進(jìn)行負(fù)責(zé)，只需要告訴它View顯示的數(shù)據(jù)對應(yīng)的是Model哪一部分即可。也就是雙向數(shù)據(jù)綁定，就是View的變化能實時讓Model發(fā)生變化，而Model的變化也能實時更新到View。

參考：淺析前端開發(fā)中的 MVC/MVP/MVVM 模式

用過哪些設(shè)計模式

（1）單例模式

定義：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。

實現(xiàn)方法：先判斷實例存在與否，如果存在則直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個類只有一個實例對象。

適用場景：一個單一對象。比如：彈窗，無論點擊多少次，彈窗只應(yīng)該被創(chuàng)建一次。

（2）發(fā)布/訂閱模式
定義：又叫觀察者模式,它定義對象間的一種一對多的依賴關(guān)系,當(dāng)一個對象的狀態(tài)發(fā)生改變時,所有依賴于它的對象都將得到通知。

場景：訂閱感興趣的專欄和公眾號。

（3）策略模式
定義：將一個個算法（解決方案）封裝在一個個策略類中。

優(yōu)點：

策略模式可以避免代碼中的多重判斷條件。
策略模式很好的體現(xiàn)了開放-封閉原則，將一個個算法（解決方案）封裝在一個個策略類中。便于切換，理解，擴展。
策略中的各種算法可以重復(fù)利用在系統(tǒng)的各個地方，避免復(fù)制粘貼。
策略模式在程序中或多或少的增加了策略類。但比堆砌在業(yè)務(wù)邏輯中要清晰明了。
違反最少知識原則，必須要了解各種策略類，才能更好的在業(yè)務(wù)中應(yīng)用。

應(yīng)用場景：根據(jù)不同的員工績效計算不同的獎金；表單驗證中的多種校驗規(guī)則。

（4）代理模式

定義：為一個對象提供一個代用品或占位符，以便控制對它的訪問。

應(yīng)用場景：圖片懶加載（先通過一張loading圖占位，然后通過異步的方式加載圖片，等圖片加載好了再把完成的圖片加載到img標(biāo)簽里面。）

（5）中介者模式

定義：通過一個中介者對象，其他所有相關(guān)對象都通過該中介者對象來通信，而不是互相引用，當(dāng)其中的一個對象發(fā)生改變時，只要通知中介者對象就可以?？梢越獬龑ο笈c對象之間的緊耦合關(guān)系。

應(yīng)用場景：例如購物車需求，存在商品選擇表單、顏色選擇表單、購買數(shù)量表單等等，都會觸發(fā)change事件，那么可以通過中介者來轉(zhuǎn)發(fā)處理這些事件，實現(xiàn)各個事件間的解耦，僅僅維護(hù)中介者對象即可。

（6）裝飾者模式

定義：在不改變對象自身的基礎(chǔ)上，在程序運行期間給對象動態(tài)的添加方法。

應(yīng)用場景：有方法維持不變，在原有方法上再掛載其他方法來滿足現(xiàn)有需求；函數(shù)的解耦，將函數(shù)拆分成多個可復(fù)用的函數(shù)，再將拆分出來的函數(shù)掛載到某個函數(shù)上，實現(xiàn)相同的效果但增強了復(fù)用性。

參考： JavaScript設(shè)計模式

Http狀態(tài)碼
https怎么加密

參考： HTTP協(xié)議知識點總結(jié)

es6相比es5有哪些優(yōu)點

大概說一下：let、const，模板字符串，箭頭函數(shù)，做異步處理的promise、generator、async await，es6模塊等。

參考：阮一峰 —— ECMAScript 6 入門

ajax請求過程

不多說，上面有。

有哪些性能優(yōu)化

參考：

懶加載怎么實現(xiàn)

場景：一個頁面中很多圖片，但是首屏只出現(xiàn)幾張，這時如果一次性把圖片都加載出來會影響性能。這時可以使用懶加載，頁面滾動到可視區(qū)在加載。優(yōu)化首屏加載。

實現(xiàn)：img標(biāo)簽src屬性為空，給一個data-xx屬性，里面存放圖片真實地址，當(dāng)頁面滾動直至此圖片出現(xiàn)在可視區(qū)域時，用js取到該圖片的data-xx的值賦給src。

優(yōu)點：頁面加載速度快，減輕服務(wù)器壓力、節(jié)約流量，用戶體驗好。

項目中寫過什么組件，組件有哪些功能

主要介紹了下實習(xí)項目寫過的組件，說了下如何實現(xiàn)的。

二面

react框架有哪些設(shè)計的好的地方

主要介紹了以下幾個部分：

JSX語法
組件化
react單項數(shù)據(jù)流
虛擬DOM
react生命周期

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

主要還是說了下react的生命周期，還有shouldComponentUpdate這個函數(shù)，以及diff算法。

redux有哪些需要改進(jìn)，你覺得你用的不怎么舒服的地方？

我當(dāng)時說的是redux的subscribe方法有點麻煩，每次更新數(shù)據(jù)都要手動的subscribe一下，所以覺得react-redux的api封裝的更好，用起來比較簡單。

參考：

怎么設(shè)計一個類似于antd 的 react 組件庫

這個問題把我給問懵了額，我是按照軟件工程的生命周期流程來答的。

你做的最自豪的一個項目

這個略過…言之有理即可

mysql 的左關(guān)聯(lián)和右關(guān)聯(lián)

左關(guān)聯(lián)：保留左表中所有的元組，右表中沒有的屬性填充NULL。

右關(guān)聯(lián)：保留右表中所有的元組，左表中沒有的屬性填充NULL。

有沒有折騰過后端

直接說了沒有，之前學(xué)了點PHP，不過都快忘得差不多了額。

學(xué)習(xí)方法和未來的學(xué)習(xí)路線

言之有理即可。

瀏覽器頁面渲染機制

解析html建立dom樹
解析css構(gòu)建render樹（將CSS代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合DOM合并成render樹）
布局render樹（Layout/reflow），負(fù)責(zé)各元素尺寸、位置的計算
繪制render樹（paint），繪制頁面像素信息
瀏覽器會將各層的信息發(fā)送給GPU，GPU會將各層合成（composite），顯示在屏幕上。

參考：從瀏覽器多進(jìn)程到JS單線程，JS運行機制最全面的一次梳理

XSS和CSRF防范措施
（1）XSS：跨站腳本攻擊
攻擊方式：在URL或者頁面輸入框中插入JavaScript代碼。
防范：
設(shè)置httpOnly，禁止用document.cookie操作；
輸入檢查：在用戶輸入的時候進(jìn)行格式檢查；
對輸出轉(zhuǎn)義。
（2）CSRF：跨站點偽造請求
攻擊方式：攻擊者通過一些技術(shù)手段欺騙用戶的瀏覽器去訪問一個自己曾經(jīng)認(rèn)證過的網(wǎng)站并執(zhí)行一些操作（如發(fā)郵件，發(fā)消息，甚至財產(chǎn)操作如轉(zhuǎn)賬和購買商品）。主要是拿到了用戶的登錄態(tài)。
防范：
檢查 Referer 字段：這個字段用以標(biāo)明請求來源于哪個地址。在處理敏感數(shù)據(jù)請求時，通常來說，Referer 字段應(yīng)和請求的地址位于同一域名下
添加校驗 Token：這種數(shù)據(jù)通常是表單中的一個數(shù)據(jù)項。服務(wù)器生成token并附加在表單中，其內(nèi)容是一個偽亂數(shù)。當(dāng)客戶端通過表單提交請求時，這個偽亂數(shù)也一并提交上去以供校驗。正常的訪問時，客戶端瀏覽器能夠正確得到并傳回這個偽亂數(shù)，而通過 CSRF 傳來的欺騙性攻擊中，攻擊者無從事先得知這個偽亂數(shù)的值，服務(wù)器端就會因為校驗 Token 的值為空或者錯誤，拒絕這個可疑請求
通過輸入驗證碼來校驗合法請求

三面

這一面基本問的是個人知識沉淀了，如實回答就可以了。

在項目中的難點，怎么解決的
你的優(yōu)勢是什么
redux 源碼學(xué)到了什么，怎么看源碼的
了解哪些前端的前沿技術(shù)
平時看什么書，興趣愛好是什么
異步有哪些方法
博客寫了什么
除了實習(xí)經(jīng)歷，還做過哪些項目
四面

這一面是在杭州菜鳥現(xiàn)場面的，尷尬的是通知我的小姐姐一直強調(diào)是hr面，我天真的以為是hr面了，然鵝問了很多技術(shù)，當(dāng)時候想的是阿里的hr都這么厲害了，都能直接問技術(shù)了。臨走之前，特意問了面試官是hr面么，他說是技術(shù)，然后我……大概就知道自己涼了。

mysql的索引用的什么，介紹一下b樹，b 樹，紅黑樹這些

mysql的索引用的是B 樹。

參考：數(shù)據(jù)結(jié)構(gòu)中常見的樹（BST二叉搜索樹、AVL平衡二叉樹、RBT紅黑樹、B-樹、B 樹、B*樹）

Mysql的基本寫法

參考：一千行 MySQL 學(xué)習(xí)筆記

估算下杭州上空現(xiàn)在有多少架飛機

這個題目，也真的是為難我了額。在網(wǎng)上搜到了個答案，可以參考下：高盛的面試題

兩組數(shù)據(jù)，都存儲五億條url，內(nèi)存有4G，如何找出相同的兩條url

參考：面試- 阿里-. 大數(shù)據(jù)題目- 給定a、b兩個文件，各存放50億個url，每個url各占64字節(jié)，內(nèi)存限制是4G，讓你找出a、b文件共同的url?

如何找到一個字符串中最長的兩個字符串

解法：后綴數(shù)組。首先生成字符串的所有后綴數(shù)組，在進(jìn)行排序，找出相鄰兩個最長的公共子串（從第一位開始相同的）

例如：abcdeabc

生成后綴數(shù)組：【abcdeabc，bcdeabc，cdeabc，deabc，eabc，abc，bc，c】

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

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

因此，最長的串是abc。

在白板上畫出這個項目的整個架構(gòu)

畫了下項目的功能架構(gòu)什么的。

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

sql注入：

攻擊方式：服務(wù)器上的數(shù)據(jù)庫運行非法的 SQL 語句，主要通過拼接字符串的形式來完成，改變sql語句本身的語義。通過sql語句實現(xiàn)無賬號登陸，甚至篡改數(shù)據(jù)庫。

防御：

使用參數(shù)化查詢：使用預(yù)編譯語句，預(yù)先編譯的 SQL 語句，并且傳入適當(dāng)參數(shù)多次執(zhí)行。由于沒有拼接的過程，因此可以防止 SQL 注入的發(fā)生。使用preparedStatement的參數(shù)化sql，通過先確定語義，再傳入?yún)?shù)，就不會因為傳入的參數(shù)改變sql的語義。（通過setInt，setString，setBoolean傳入?yún)?shù)）
單引號轉(zhuǎn)換：將傳入的參數(shù)中的單引號轉(zhuǎn)換為連續(xù)兩個單引號，PHP 中的 Magic quote 可以完成這個功能。
檢查變量數(shù)據(jù)類型和格式。
使用正則表達(dá)式過濾傳入的參數(shù)，對特殊符號過濾或者轉(zhuǎn)義處理。

怎么設(shè)計一個ant的組件
你覺得你實習(xí)做的項目有什么改進(jìn)的地方
你做過印象最深刻的項目
算法了解過嗎

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

Setstate 會發(fā)生什么

setState會引發(fā)一次組件的更新過程，從而引發(fā)頁面的重新繪制。主要會涉及以下幾個生命周期函數(shù)：

shouldComponentUpdate（被調(diào)用時this.state沒有更新；如果返回了false，生命周期被中斷，雖然不調(diào)用之后的函數(shù)了，但是state仍然會被更新）
componentWillUpdate（被調(diào)用時this.state沒有更新）
render（被調(diào)用時this.state得到更新）
componentDidUpdate

平時處理過什么兼容性

參考： web前端兼容性問題總結(jié)

了解分布式和負(fù)載均衡么

然鵝我并不了解呃。

參考：服務(wù)器負(fù)載均衡的基本功能和實現(xiàn)原理

五面

第四面確實是掛了，沒面hr就讓我走了，后面過了兩天之后，三面面試官又把我撈起來了，說我計算機基礎(chǔ)還有數(shù)據(jù)庫基礎(chǔ)不怎么好，然后說問我?guī)讉€簡單的，之后給了我機會面了hr，感謝三面面試官讓我體驗了阿里的整個面試流程，很滿足了。

進(jìn)程和線程的區(qū)別

根本區(qū)別：進(jìn)程是操作系統(tǒng)資源分配的基本單位，而線程是任務(wù)調(diào)度和執(zhí)行的基本單位。
在開銷方面：每個進(jìn)程都有獨立的代碼和數(shù)據(jù)空間（程序上下文），程序之間的切換會有較大的開銷；線程可以看做輕量級的進(jìn)程，同一類線程共享代碼和數(shù)據(jù)空間，每個線程都有自己獨立的運行棧和程序計數(shù)器（PC），線程之間切換的開銷小。
所處環(huán)境：在操作系統(tǒng)中能同時運行多個進(jìn)程（程序）；而在同一個進(jìn)程（程序）中有多個線程同時執(zhí)行（通過CPU調(diào)度，在每個時間片中只有一個線程執(zhí)行）。
內(nèi)存分配方面：系統(tǒng)在運行的時候會為每個進(jìn)程分配不同的內(nèi)存空間；而對線程而言，除了CPU外，系統(tǒng)不會為線程分配內(nèi)存（線程所使用的資源來自其所屬進(jìn)程的資源），線程組之間只能共享資源。
包含關(guān)系：沒有線程的進(jìn)程可以看做是單線程的，如果一個進(jìn)程內(nèi)有多個線程，則執(zhí)行過程不是一條線的，而是多條線（線程）共同完成的；線程是進(jìn)程的一部分，所以線程也被稱為輕權(quán)進(jìn)程或者輕量級進(jìn)程。

冒泡排序和快速排序的區(qū)別

簡述了下冒泡和快排的思想，以及冒泡和快排的時間復(fù)雜度。

OSI七層模型以及作用

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

你有哪些優(yōu)勢，或者打動他的

呃，最怕這種自夸的問題額，然后就是夸了一頓，手動捂臉。

面向?qū)ο蠛头敲嫦驅(qū)ο笥惺裁磪^(qū)別

面向?qū)ο笕筇匦裕悍庋b,繼承,多態(tài)。

面向?qū)ο蟮暮锰帲?/p>

將對象進(jìn)行分類，分別封裝它們的數(shù)據(jù)和可以調(diào)用的方法，方便了函數(shù)、變量、數(shù)據(jù)的管理，方便方法的調(diào)用（減少重復(fù)參數(shù)等），尤其是在編寫大型程序時更有幫助。
用面向?qū)ο蟮木幊炭梢园炎兞慨?dāng)成對象進(jìn)行操作，讓編程思路更加清晰簡潔，而且減少了很多冗余變量的出現(xiàn)

參考：面向?qū)ο螅ㄒ唬﹟面向?qū)ο蟾拍罴皟?yōu)點

設(shè)計模式有哪些，說下裝飾者模式和代理模式

前面有總結(jié)，往前翻。

重載和重寫有什么區(qū)別

方法重寫(overriding)：

也叫子類的方法覆蓋父類的方法，要求返回值、方法名和參數(shù)都相同。
子類拋出的異常不能超過父類相應(yīng)方法拋出的異常。(子類異常不能超出父類異常)
子類方法的的訪問級別不能低于父類相應(yīng)方法的訪問級別(子類訪問級別不能低于父類訪問級別)。

方法重載(overloading):

重載是在同一個類中的兩個或兩個以上的方法，擁有相同的方法名，但是參數(shù)卻不相同，方法體也不相同，最常見的重載的例子就是類的構(gòu)造函數(shù)。

參考：方法重載和重寫的區(qū)別

hr面

為什么選擇前端開發(fā)
什么事情讓你最有成就感
什么讓你最有挫敗感
為什么選擇阿里
平時是怎么學(xué)習(xí)的
職業(yè)發(fā)展
百度

二面三面都有手寫代碼的環(huán)節(jié)，對于我這種動手能力弱的人來說還是挺吃力。當(dāng)時提前批投遞的是深圳百度，總共只招五個前端，沒過也很正常。后面正式批筆試過了，但是要去北京面試，也就直接放棄了。

為什么要用flex布局，align-items和justify-content的區(qū)別

傳統(tǒng)布局基于盒模型，非常依賴 display屬性、position屬性、float屬性。而flex布局更靈活，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局，比如水平垂直居中。

align-items：定義在垂直方向上的對齊方式；

justify-content：定義在水平方向上的對齊方式。

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

把項目當(dāng)做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。

babel將es6、es7、es8等語法轉(zhuǎn)換成瀏覽器可識別的es5或es3語法。

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

定義變量，可以把反復(fù)使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復(fù)書寫這一屬性值；
嵌套寫法，父子關(guān)系一目了然；
使用運算符，可以進(jìn)行樣式的計算；
內(nèi)置一些顏色處理函數(shù)用來對顏色值進(jìn)行處理，例如加亮、變暗、顏色梯度等；
繼承：為多個元素定義相同樣式的時候，我們可以考慮使用繼承的做法；
Mixins （混入）：有點像是函數(shù)或者是宏，當(dāng)某段 CSS經(jīng)常需要在多個元素中使用時，可以為這些共用的 CSS 定義一個Mixin，然后只需要在需要引用這些 CSS 地方調(diào)用該 Mixin 即可。

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

對比了一下es6模塊和CommonJS模塊：

區(qū)別 CommonJS es6
加載原理第一次加載模塊就會執(zhí)行整個模塊，再次用到時，不會執(zhí)行該模塊，而是到緩存中取值。不會緩存運行結(jié)果，動態(tài)的去被加載的模塊中取值，并且變量總是綁定其所在模塊。
輸出值的拷貝（模塊中值的改變不會影響已經(jīng)加載的值）值的引用（靜態(tài)分析，動態(tài)引用，原來模塊值改變會改變加載的值）
加載方式運行時加載（加載整個模塊，即模塊中的所有接口）編譯時加載（只加載需要的接口）
this指向指向當(dāng)前模塊指向undefined
循環(huán)加載只輸出已經(jīng)執(zhí)行的部分，還未執(zhí)行的部分不會輸出遇到模塊加載命令import時不會去執(zhí)行模塊，而是生成一個動態(tài)的只讀引用，等到真正用到時再去模塊中取值。只要引用存在，代碼就能執(zhí)行。

有沒有用過es6的一些異步處理函數(shù)

Promise，generator，async await

redux怎么處理異步操作

可以引入Redux-thunk或者redux-promise這種中間件，可以延遲事件的派發(fā)。

其中的原理：是因為他們用了applymiddleware()包裝了store的dispatch方法，擁有可以處理異步的能力。

為什么reducer要是個純函數(shù)，純函數(shù)是什么？

純函數(shù)：對于相同的輸入，永遠(yuǎn)會得到相同的輸出，而且沒有任何可觀察的副作用，也不依賴外部環(huán)境的狀態(tài)。

原因：Redux只通過比較新舊兩個對象的存儲位置來比較新舊兩個對象是否相同（淺比較）。如果你在reducer內(nèi)部直接修改舊的state對象的屬性值，那么新的state和舊的state將都指向同一個對象。因此Redux認(rèn)為沒有任何改變，返回的state將為舊的state。兩個state相同的話，頁面就不會重新渲染了。

因為比較兩個Javascript對象所有的屬性是否相同的的唯一方法是對它們進(jìn)行深比較。但是深比較在真實的應(yīng)用當(dāng)中代價昂貴，因為通常js的對象都很大，同時需要比較的次數(shù)很多。因此一個有效的解決方法是作出一個規(guī)定：無論何時發(fā)生變化時，開發(fā)者都要創(chuàng)建一個新的對象，然后將新對象傳遞出去。同時，當(dāng)沒有任何變化發(fā)生時，開發(fā)者發(fā)送回舊的對象。也就是說，新的對象代表新的state。

高階函數(shù)是什么，怎么去寫一個高階函數(shù)

高階函數(shù)：參數(shù)值為函數(shù)或者返回值為函數(shù)。例如map，reduce，filter，sort方法就是高階函數(shù)。

編寫高階函數(shù)，就是讓函數(shù)的參數(shù)能夠接收別的函數(shù)。

vue跟react的區(qū)別是什么

沒有用過vue，所以就只說了vue具有雙向綁定，react是單向數(shù)據(jù)流。

參考： Vue.js與React的全面對比

nodejs處理了什么問題

可以處理高并發(fā)的I/O，也能與websocket配合，開發(fā)長連接的實時交互應(yīng)用程序。

響應(yīng)式布局，怎么做移動端適配

使用媒體查詢可以實現(xiàn)響應(yīng)式布局。

移動端適配方案：

（1）meta viewport：讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放。

<meta

name
=
“viewport”

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

width=device-width: 讓當(dāng)前viewport寬度等于設(shè)備的寬度
user-scalable=no: 禁止用戶縮放
initial-scale=1.0: 設(shè)置頁面的初始縮放值為不縮放
maximum-scale=1.0: 允許用戶的最大縮放值為1.0
minimum-scale=1.0: 允許用戶的最小縮放值為1.0

（2）媒體查詢（響應(yīng)式)

（3）動態(tài) rem 方案

參考：移動端是怎么做適配的？

二面

怎么做一個實時的聊天系統(tǒng)

使用WebSocket和nodejs，《nodejs實戰(zhàn)》這本書詳細(xì)介紹了這個項目。

當(dāng)消息有延遲的時候，怎么保證消息的正確順序

每個消息在被創(chuàng)建時，都將被賦予一個全局唯一的、單調(diào)遞增的、連續(xù)的序列號（SerialNumber，SN）?？梢酝ㄟ^一個全局計數(shù)器來實現(xiàn)這一點。通過比較兩個消息的SN，確定其先后順序。

怎么做一個登陸窗口，input有哪些兼容性

使用form表單。

input按鈕如何校驗

使用正則表達(dá)式。

webpack有配置過嗎？原理知道嗎

參考前面。

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

父組件把state作為props傳遞給子組件進(jìn)行通信。

父組件寫好state和處理該state的函數(shù)，同時將函數(shù)名通過props屬性值的形式傳入子組件，子組件調(diào)用父組件的函數(shù)，同時引起state變化。

簡單說一下pwa

面試的這個部門就是做pwa的，所以說了下自己對pwa的理解。

從url輸入到頁面顯示會有哪些步驟

（1）DNS服務(wù)器解析域名，找到對應(yīng)服務(wù)器的IP地址;

（2）和服務(wù)器建立TCP三次握手連接；

（3）發(fā)送HTTP請求，服務(wù)器會根據(jù)HTTP請求到數(shù)據(jù)服務(wù)器取出相應(yīng)的資源，并返回給瀏覽器；

（4）瀏覽器處理響應(yīng)

加載：瀏覽器對一個html頁面的加載順序是從上而下的。

當(dāng)加載到外部css文件、圖片等資源，瀏覽器會再發(fā)起一次http請求，來獲取外部資源。
當(dāng)加載到j(luò)s文件，html文檔會掛起渲染（加載解析渲染同步）的線程，等待js文件加載、解析完畢才可以恢復(fù)html文檔的渲染線程。

解析：解析DOM樹和CSSDOM樹。
渲染：構(gòu)建渲染樹，將DOM樹進(jìn)行可視化表示，將頁面呈現(xiàn)給用戶。

method有哪些方法，分別是什么意思？post和put的區(qū)別

post：上傳資源

put：修改資源

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

主要是考察http2的幾個特性。

參考：HTTP協(xié)議知識點總結(jié)

頁面刷新不出來，是有哪些問題

可以從第三題的每個步驟進(jìn)行分析，大概是：

域名不存在，或者ip地址錯誤
網(wǎng)絡(luò)問題，不能建立正常的tcp連接
服務(wù)器找不到正確的資源

上一次系統(tǒng)性的學(xué)習(xí)是什么時候，怎么學(xué)習(xí)的

學(xué)習(xí)react的時候，看文檔、博客，照著網(wǎng)上寫了點小項目。

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

網(wǎng)易

網(wǎng)易是在杭州網(wǎng)易大廈面的，一天面完三輪，然后錄用排序，擇優(yōu)錄取的吧。我投的是網(wǎng)易考拉，哭唧唧，后面被拒了之后還傷心的卸載了考拉。之后正式批投了杭研，過了筆試，要去武漢面，本來?？狄彩窃谖錆h面的，考慮到還要住一晚上，有點怕怕，就沒去了。

圖片懶加載src
Promise異步
水平垂直居中
數(shù)組有哪些方法，哪些會改變原數(shù)組

改變原數(shù)組的方法：pop、push、reverse、shift、sort、splice、unshift，以及兩個ES6新增的方法copyWithin 和 fill；

不改變原數(shù)組（復(fù)制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未標(biāo)準(zhǔn)的toSource以及ES7新增的方法includes；

循環(huán)遍歷：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

操作dom有哪些方法

創(chuàng)建：

createDocumentFragment
()

//創(chuàng)建一個DOM片段

createElement
()

//創(chuàng)建一個具體的元素

createTextNode
()

//創(chuàng)建一個文本節(jié)點

添加：appendChild()

移出：removeChild()

替換：replaceChild()

插入：insertBefore()

復(fù)制：cloneNode(true)

查找：

getElementsByTagName
()

//通過標(biāo)簽名稱

getElementsByClassName
()

//通過標(biāo)簽名稱

getElementsByName
()

//通過元素的Name屬性的值

getElementById
()

//通過元素Id，唯一性

左邊定寬右邊自適應(yīng)

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

（2）左盒子左浮動，右盒子margin-left=左盒子寬度

（3）左盒子左浮動，右盒子右浮動，設(shè)置calc（100vw-盒子寬度）

（4）父容器設(shè)置display=flex，右盒子flex：1

事件代理

利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行。打個比方：一個button對象，本來自己需要監(jiān)控自身的點擊事件，但是自己不來監(jiān)控這個點擊事件，讓自己的父節(jié)點來監(jiān)控自己的點擊事件。

后端了解么

直接說了不了解，笑哭。

二面

節(jié)流和防抖，手寫一下代碼

（1）防抖：

定義：合并事件且不會去觸發(fā)事件，當(dāng)一定時間內(nèi)沒有觸發(fā)這個事件時，才真正去觸發(fā)事件。

原理：對處理函數(shù)進(jìn)行延時操作，若設(shè)定的延時到來之前，再次觸發(fā)事件，則清除上一次的延時操作定時器，重新定時。

場景： keydown事件上驗證用戶名，輸入法的聯(lián)想。

（2）節(jié)流：

定義：持續(xù)觸發(fā)事件時，合并一定時間內(nèi)的事件，在間隔一定時間之后再真正觸發(fā)事件。每間隔一段時間觸發(fā)一次。

原理：對處理函數(shù)進(jìn)行延時操作，若設(shè)定的延時到來之前，再次觸發(fā)事件，則清除上一次的延時操作定時器，重新定時。

場景： resize改變布局時，onscroll滾動加載下面的圖片時。

實現(xiàn)：

當(dāng)觸發(fā)事件的時候，我們?nèi)〕霎?dāng)前的時間戳，然后減去之前的時間戳(最一開始值設(shè)為0)，如果大于設(shè)置的時間周期，就執(zhí)行函數(shù)，然后更新時間戳為當(dāng)前的時間戳，如果小于，就不執(zhí)行。

缺陷：第一次事件會立即執(zhí)行，停止觸發(fā)后沒辦法再激活事件。

當(dāng)觸發(fā)事件的時候，我們設(shè)置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行，直到定時器執(zhí)行，然后執(zhí)行函數(shù)，清空定時器，這樣就可以設(shè)置下個定時器。

缺陷：第一次事件會在n秒后執(zhí)行，停止觸發(fā)后依然會再執(zhí)行一次事件。

知道哪些性能優(yōu)化
react為什么比其他要快，虛擬dom知道嗎
寫過什么組件
平時怎么學(xué)習(xí)的
node，webpack了解么
模塊化，commonjs,es6模塊
redux怎么實現(xiàn)的

hr面

項目上有哪些難點，項目中學(xué)到了什么
不喜歡跟什么樣的人共事
平時怎么學(xué)習(xí)
為什么來杭州
職業(yè)發(fā)展
搜狗

搜狗是內(nèi)推的，面試也很迷，第一面到第二面中間隔了二十幾天，然后二面完了也毫無反饋。

一面

說一下項目，整個網(wǎng)絡(luò)過程，從前端到后臺
Ajax 底層實現(xiàn)，readystate 有哪些

0-（未初始化）還沒有調(diào)用send()方法
1-（載入）已調(diào)用send()方法，正在發(fā)送請求
2-（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3-（交互）正在解析響應(yīng)內(nèi)容
4-（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

狀態(tài)碼有哪些，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 數(shù)據(jù)結(jié)構(gòu)

正則用過嗎？exec, 匹配一個手機號
css3動畫了解嗎，怎么寫一個loading動畫
怎么實現(xiàn)跨域,cors涉及哪些請求字段
編程: 判斷兩個網(wǎng)絡(luò)地址是否屬于同一個子網(wǎng)掩碼

用與運算符就可以了。當(dāng)時是在?？途W(wǎng)的面試系統(tǒng)上寫的，一直AC不出，也是很迷了額。

怎么上傳文件

二面

怎么計算在一個頁面上的停留時間

方案1：websocket，前端開個長連接，后臺統(tǒng)計長連接時間。

方案2：ajax輪詢，隔幾秒發(fā)一個查詢，后臺記錄第一與最后一個查詢間隔時間。

方案3：關(guān)閉窗口或者跳轉(zhuǎn)的時候會觸發(fā)window.onbeforeunload函數(shù)，可以在該函數(shù)中做處理（有兼容性問題）；統(tǒng)計完數(shù)據(jù)記錄到本地cookies中，一段時間后統(tǒng)一發(fā)送。

給你一億個數(shù)，是連續(xù)的，怎么找出兩個不存在的數(shù)

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

一個搜索框的輸入聯(lián)想，會遇到什么問題？如果第一個請求延遲，第二個請求先到，請問怎么處理？

鍵盤輸入太快，每次輸入都去聯(lián)想，需要多次發(fā)送請求，會導(dǎo)致用戶體驗太差，可以使用防抖優(yōu)化。

在前端做判斷，判斷此時的值是否與返回的值相同，不同就丟棄，相同就顯示在頁面。

Http的緩存
二維碼怎么工作的，掃描pc端的二維碼，怎么讓pc端登錄？

pc端隨機生成一個含有唯一uid的二維碼，并與服務(wù)器建立一個長連接；
手機掃描二維碼，解析出二維碼中的uid，并把這個uid和手機端的用戶密碼進(jìn)行綁定，上傳給服務(wù)器；
服務(wù)器獲得客戶端信息之后，pc端的長連接輪詢操作會獲得該消息，顯示該賬號的信息；
pc端會再開一個長連接與手機端保持通信，等待手機端確認(rèn)登陸后，獲得服務(wù)器授權(quán)的token，就可以在pc端登陸進(jìn)行正常通信了。

Promise 做什么的，有哪幾種狀態(tài)

異步處理的，有三個狀態(tài)：resolve，pending，reject。

項目有哪些難點，怎么處理的
遇到過哪些性能優(yōu)化

電信IT研發(fā)中心

當(dāng)時聽說電信對學(xué)歷要求很高，本科基本都是211起的，想著自己本科太渣，就直接放棄了網(wǎng)上的筆試。之后電信來了學(xué)校宣講會，跟朋友吃完飯看到了，就去說湊湊熱鬧，剛好有筆試也就做了。做完之后筆試居然考了最高分，比第二名高出二十分，手動捂臉額。一面完分?jǐn)?shù)也挺高的，有95分，運氣爆棚。重點是今年電信開的薪資實在太高了，目前還在糾結(jié)選哪個。

Xhtml和html的區(qū)別

XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。

遇到過哪些兼容性問題
瀏覽器內(nèi)核有哪些，移動端用的是哪個

Trident內(nèi)核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。[又稱為MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等；
Presto內(nèi)核：Opera7及以上。[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink]
Webkit內(nèi)核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

對于Android手機而言，使用率最高的就是Webkit內(nèi)核。

怎么實現(xiàn)標(biāo)簽頁的通信
Cookie、session,localstorage，sessionstorage
React 和jquery 之間的區(qū)別，哪個好用
怎么實現(xiàn)繼承
Es6,es7有哪些特性
怎么跨域
Commonjs用的js哪個特性?

因為js之前只能在瀏覽器運行，為了能讓js能在服務(wù)器上運行，所以設(shè)計了commonjs規(guī)范，而且js之前沒有模塊化的概念。

選擇器優(yōu)先級
偽類知道嗎，有哪些
塊級元素有哪些，怎么轉(zhuǎn)成行內(nèi)元素
一個完整的http請求，頁面渲染過程，js和css文件怎么渲染

二面

一面問的都很常規(guī)的，不知道為啥給了這么高的分。二面的時候三個面試官，總共就問了三個問題，然后就說面試結(jié)束了，不超過五分鐘。

TCP怎么工作的

三次握手

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

網(wǎng)絡(luò)層

平時用什么語言，用過哪些框架

深信服

深信服給的薪資居然比電信還低，而且加班還嚴(yán)重，就直接拒了。

一面

跨域，同源策略，webpack里面有個跨域的方式知道么
怎么把es6轉(zhuǎn)成es5，babel怎么工作的

解析：將代碼字符串解析成抽象語法樹
變換：對抽象語法樹進(jìn)行變換操作
再建：根據(jù)變換后的抽象語法樹再生成代碼字符串

反向代理知道么，Nginx
繼承有哪些方式
怎么實現(xiàn)一個sleep ，手寫一個promise
能寫一個二叉樹么，怎么去遍歷
深拷貝怎么寫
在公司除了完成上級交待的任務(wù)，還做了什么
怎么實現(xiàn)垂直中間布局
Call和apply，哪個性能開銷大

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

參考： call和apply的哪個性能更好

正則寫一個手機號，全局匹配是什么
刪除一個數(shù)組中的某個數(shù)

splice方法

模塊化介紹一下，什么是編譯時優(yōu)化
有哪些網(wǎng)絡(luò)安全名詞，怎么防范
平時怎么學(xué)習(xí)

二面

二面小哥哥問了幾個問題之后，就一直跟我介紹深信服內(nèi)部的一些管理、技術(shù)氛圍、晉升機制什么的，全程都是笑臉額。

git push -u 是什么意思

綁定默認(rèn)提交的遠(yuǎn)程版本庫，加了參數(shù)-u后，以后即可直接用git push 代替git push origin master

git rebase解釋下

有test和dev兩個分支，分別有兩個commit，此時執(zhí)行下列命令：

git checkout test
git rebase dev
以dev為基準(zhǔn)將test的提交進(jìn)行回放，挨個的應(yīng)用到dev上去，然后test的那些提交就會廢棄。等價于git merge dev。

git merge 和git rebase區(qū)別：

merge不會修改提交歷史，rebase會修改提交歷史

。

rebase只應(yīng)用于本地沒有提交的代碼，如果應(yīng)用到已經(jīng)提交到遠(yuǎn)程的分支不要應(yīng)用，不然會非常的麻煩，git merge 可以應(yīng)用于遠(yuǎn)程分支。

linux命令，怎么打開一個文件

cat abc.txt

你的上級給你review 代碼時會提什么建議
怎么看待加班和工作效率
get和post分別進(jìn)行幾次數(shù)據(jù)交互

get請求過程：（2次交互）

瀏覽器請求tcp連接（第一次握手）　　
服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）　　
瀏覽器確認(rèn)，并發(fā)送get請求頭和數(shù)據(jù)（第三次握手，這個報文比較小，所以http會在此時進(jìn)行第一次數(shù)據(jù)發(fā)送）　　
服務(wù)器返回200 ok響應(yīng)。

post請求過程：（3次交互）

瀏覽器請求tcp連接（第一次握手）　　
服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）　　
瀏覽器確認(rèn)，并發(fā)送post請求頭（第三次握手，這個報文比較小，所以http會在此時進(jìn)行第一次數(shù)據(jù)發(fā)送）　　
服務(wù)器返回100 continue響應(yīng) 　　
瀏覽器開始發(fā)送數(shù)據(jù) 　　
服務(wù)器返回200 ok響應(yīng)

怎么打斷點，如何確定一個結(jié)果來自于哪個函數(shù)

ThoughtWorks

TW是內(nèi)推的，做了內(nèi)推作業(yè)后，就面了技術(shù)和文化面。技術(shù)面是在作業(yè)的基礎(chǔ)上加兩個功能，只寫出來一個，后面一個沒時間寫了，然后就只講了下思路。

文化面面了快一個小時，聽說TW不加班，對女程序員還很友好，挺中意的公司，不過最后還是掛了額。

華為

華為的面試就不多說了，基本不問前端的，進(jìn)去是隨機分崗的。華為的面試陣仗是我見過的最大的，聽說要招一萬人，在萬達(dá)那里面的，全是人啊，闊怕?，F(xiàn)在正泡在offer池里，估計國慶后發(fā)正式offer吧。

二面碰到的是個女面試官，太恐怖了，一直在懟我，最怕碰到女面試官了，慘。

小米

小米是內(nèi)推的，電話面了一面，國慶后要我去武漢現(xiàn)場面，那會學(xué)校剛好有事應(yīng)該也不會去了。

redux主要做什么的，用過redux的一些中間件嗎，簡單說一下
react生命周期說一下，diff算法說一下
setstate時會合并修改，是在哪個函數(shù)里修改的？宏事件和微事件

setstate是異步更新的，通過一個隊列機制實現(xiàn)state的更新，當(dāng)執(zhí)行setState時，會將需要更新的state合并后放入狀態(tài)隊列，而不會立即更新，隊列可以高效的批量更新state。

let、const、var的區(qū)別；如果const定義的是個對象，能夠修改對象的屬性嗎？

const實際上保證的并不是變量的值不得改動，而是變量指向的那個指針不得改動，可以給對象添加屬性。如果真的想將對象凍結(jié)，應(yīng)該使用Object.freeze方法。

Object.freeze和Object.seal的區(qū)別

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

Object.seal：在一個現(xiàn)有對象上調(diào)用 Object.preventExtensions(..) 并把所有現(xiàn)有屬性標(biāo)記為 configurable:false;

Object.freeze：在一個現(xiàn)有對象上調(diào)用 Object.seal(..) 并把所有“數(shù)據(jù)訪問”屬性標(biāo)記為 writable:false。

說一下防抖，應(yīng)用場景是什么
快速排序算法說下，基點怎么選？如果一個數(shù)組是已經(jīng)排序好的怎么選基點？

數(shù)組元素隨機，取固定基準(zhǔn)；
數(shù)組元素已排序或逆序，取隨機基準(zhǔn)；
更好的方法：三數(shù)取中，選取數(shù)組開頭，中間和結(jié)尾的元素，通過比較，選擇中間的值作為快排的基準(zhǔn)。

算法的穩(wěn)定性，冒泡、快排
lodash，underscore的庫了解么？有哪些方法
整個項目的架構(gòu)，包括前端、后臺、運營
sort的底層實現(xiàn)機制，看過源碼么？

數(shù)組長度<=22時采用插入排序，大于22用快排。

怎么調(diào)試bug？打過斷點么？如果前端代碼被壓縮，如何去找到相應(yīng)元素？

chromre控制臺下，在 Scripts 面板下面有個 Pretty print 按鈕(這種符號 {})，點擊會將壓縮 js 文件格式化縮進(jìn)規(guī)整的文件，這時候在設(shè)定斷點可讀性就大大提高了。

來源：https://www.icode9.com/content-4-649601.html

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版