面試答案

時間 2020-05-29

原文原文鏈接

瀏覽web文章的時候收集的大廠的一些面試題固然是查漏補缺,學習一波了javascript

原文問題連接: http://www.javashuo.com/article/p-ybuqbrnu-bu.htmlcss

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

—————- 阿里-網易-滴滴 —————-前端

————————— 阿里 —————————
使用過的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 卸載清空定時任務網絡請求等vue

如何配置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 幾個異步函數只有須要的時候才調用java

路由的動態加載模塊?
根據路由組件打包成多個 bundle，只有在點擊到對應的 Route 時，這個 bundle 纔會被加載
webpack babel-plugin-systax-dynamic-import react-loadablenode

<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)mysql

介紹路由的history?
它屬於 Bom 瀏覽器對象, 經常使用來原生實現路由跳轉可是不刷新頁面的功能記錄瀏覽歷史記錄用來實現前進後退的功能,
中間能夠作一些數據處理,與信息提示
H5新增了兩個API: history.pushState 和 history.replaceState
接收3個參數 (狀態對象object, 標題title, 地址url)react

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

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之間通訊的橋樑，主要作的事情是:
　　一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
　　二、自身必須有一個update()方法
　　三、待屬性變更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]]

取數組的最大值（ES五、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狀態碼 40三、30一、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將es六、es七、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-width: 讓當前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內核。