[面試專題]一線網際網路大廠面試總結

逺方小鎭發表於2019-02-16
面試

道阻且長啊TAT(前端面試總結)

前端 面試 筆試

面試

騰訊一面

  • 1.瀏覽器工作原理

瀏覽器的主要元件包括： 使用者介面－ 包括位址列、後退/前進按鈕、書籤目錄 瀏覽器引擎－ 用來查詢及操作渲染引擎的介面 渲染引擎－
渲染介面:Firefox、Chrome和Safari是基於兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit.
網路－ 用來完成網路呼叫，例如http請求 UI 後端－
用來繪製類似組合選擇框及對話方塊等基本元件，具有不特定於某個平臺的通用介面，底層使用作業系統的使用者介面 JS直譯器－ 解釋執行JS程式碼
資料儲存－ 屬於持久層，瀏覽器需要在硬碟中儲存類似cookie的各種資料

  • 2.Web安全,舉例說明
  • 3.狀態碼
  • 4.同源:同埠,同域名,同協議
  • 5.物件繼承
  • 6.ES6歷史以及新特性有哪些?
  • 7.promise原理
  • 8.事件模型
  • 9.常見相容性問題,列舉(移動端/PC端)
  • 10.效能優化　　　

騰訊二面（機試）

類似百度搜尋的提示框，相容各大瀏覽器，可用鍵盤控制.
勉強憋了出來，但是掛掉了，犯了一些低階錯誤，顯示經驗不足．
面試官建議多看書，多寫元件.

阿里一面

  • 1.Ajax原理
  • 2.瀏覽器解析過程

流程： 解析html以構建dom樹->構建render樹->佈局render樹->繪製render樹
參考文章

  • 3.垂直居中
  • 4.資料型別判斷
  • 5.路由實現
  • 6.資料本地儲存
  • 7.跨域 參考
  • 8.資料雙向繫結單向繫結優缺點

阿里二面

  • 1.無線效能優化
  • 2.Tap事件,Touch
  • 3.資料儲存

搜狐一面

  • 1.Dom操作
  • 2.移動佈局方案
  • 3.前後端協作
  • 4.原生Ajax實現過程

搜狐二面

  • 1.單連結串列反轉
  • 2.快排
  • 3.即時通訊(除了Ajax和websocket)

懵逼了
總結一下其他方式
1.Comet技術：基於HTTP長連線的Web端實時通訊技術
2.SSE：伺服器傳送事件,使用長連結進行通訊

  • 4.伺服器代理轉發如何處理cookie(nginx)
proxy_cookie_domain localhost example.org;
proxy_cookie_domain ~.([a-z]+.[a-z]+)$ $1;

proxy_cookie_path /one/ /;
proxy_cookie_path / /two/;
  • 5.物件繼承
  • 6.this
  • 7.rem佈局的優缺點

騰訊Alloy Team

一面(記錄兩個,其他都還好)

  • 實現動畫有哪些途徑

    • CSS3
    • JS幀動畫,定時器,requestAnimateFrame
    • Canvas動畫
    • SVG
    • 圖片
  • 物件繼承的實現

二面(跪了)

  • web安全

    • https加密過程,證書用途
    • xss幾種形式,防範手段,過濾哪些字元?
    • xsrf原理,例項,防範手段(Laravel的token)
    • Sql注入

  • 效能優化

    • 程式碼優化(html,css,js)

    • 網路效能優化:

      1. Cache快取之強制快取和協商快取.看具體詳情
      2. CDN原理及應用
      3. HTTP壓縮之gzip
  • 上下文環境物件

  • 設計模式(要求說出如何實現,應用,優缺點):

    • 單例模式
    • 工廠模式
    • 釋出訂閱模式

  • 跨域(產生原因)

    • JSONP原理
    • CORS如何設定
    • Nginx代理
  • 讀過哪些框架原始碼?
  • 如何寫一個CSS庫,要注意哪些東西?

京東二面

  • JS物件導向之封裝,繼承,多型的體現和應用?
  • BST
  • promiseAll如何實現,以及如何實現多層非同步回撥?
  • 加油站問題(貪心演算法)

阿里二面

  • XHR具體底層原理和API
  • 單例模式實現/設計模式
  • JSONP原理,回撥過程
  • Latex怎麼解析
  • hash演算法實現,如何避免衝突,如何在衝突裡檢測
  • Generater
  • ES6怎麼編譯成ES5,css-loader原理,過程
  • ES6轉成ES5的常見例子
  • 常見資料結構,常見演算法
  • node多執行緒實現
  • 程式和執行緒

阿里三面

  • 對前端的理解
  • 說說rn,weex原理
  • 說說XHR
  • Jq的選擇器引擎,$(`.a .b`)以及$(`.a`).find(`.b`)
  • MD5摘要演算法其他用途

百度一面

  • 前端架構的理解
  • 前端框架的看法
  • 如何做前後端分離
  • 在不使用後端模板渲染的情況下,如何做前端資料直出(不使用非同步請求資料)?
  • SSR適用什麼場景?SPA首屏空白原因?
  • vue構建過程原理,具體流程

模板到DOM大致流程:
template模板經過parse處理後返回AST 獲得一棵AST後再經過generate()生成渲染函式
執行渲染函式後會獲得一個VNode，即虛擬DOM patch函式，負責把虛擬DOM變為真正DOM。

  • vue2新增內容?獨立構建（standalone）和執行時構建（runtime-only）的差別和應用?詳情
  • 爬蟲的實現原理?如何實現一個爬蟲,如何解析檔案?
  • 如何解決爬蟲慢的問題?
  • 多執行緒如何保障各個執行緒的安全?
  • webpack工具和node瞭解哪些?node各個模組的底層原理?
  • CSS3實現卡片翻轉?

百度二面

  • 說說職業規劃?
  • 說說HTML難點,語義化的體現?
  • 說說CSS重要難點?如何實現垂直水平居中?
  • JS中this是什麼?如何改變this?
  • 講講時間複雜度計算?
  • 演算法題:假定26個字母對應1-26,將一串數字轉成字母有多少種可能?
    暴力解法複雜度是多少?

(百度外賣業務:包含移動客戶端(RN,hybrid),PC web端,H5,後臺介面vue,桌面應用包含編輯器外掛,前端構建工具,node中間層)

餓了麼

  • 盒模型之box-sizing
  • XHR原理及API
  • session和sessionStorage
  • map forEach(陣列各個API細節)
  • dom事件代理,有什麼優點?
  • 三種隱藏方式差別:visibility:hidden,display:none,opacity:0

渲染上的差異:
1.將元素設定為display:none後，元素在頁面上將徹底消失，元素本來佔有的空間就會被其他元素佔有，也就是說它會導致瀏覽器的迴流和重繪。

2.設定元素的visibility為hidden，和display:none的區別在於，元素在頁面消失後，其佔據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會迴流。

3.opacity:0,只是看不到元素,元素依然存在並且佔有原有位置. 注: 事件繫結的差異: 1、display:none：元素徹底消失，不會觸發繫結的事件.
2、visibility:hidden：無法觸發其點選事件，有一種說法是display:none是元素看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準確的，設定元素的visibility後無法觸發點選事件，說明這種方法元素也是消失了，只是依然佔據著頁面空間。
3、opacity:0：可以觸發點選事件，設定元素透明度為0後，元素只是相對於人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發繫結事件
動畫屬性的差異: 1、display:none：完全不受transition屬性的影響，元素立即消失
2、visibility：hidden：元素消失的時間跟transition屬性設定的時間一樣，但是沒有動畫效果.
3、opacity:0,動畫屬性生效,能夠進行正常的動畫效果.

程式碼演示地址

頭條一面

  1. inline和block元素列舉,block和inline-block區別?
  2. span包含12px大小英文`abc`,問span高度?baseline怎麼理解?
  3. css實現自適應正方形?
  4. string查詢第一個不重複字元.如果換成字串呢?
  5. Angular資料繫結機制?
  6. 重繪和迴流的理解
  7. querySelectAll和ByClassName所獲取元素的區別?如何繫結事件?
  8. getComputedStyle用法?
  9. addEventListener繫結事件?引數不同的執行順序.
  10. 正則匹配電話號碼.exec,match,search用法?推薦一篇高質量正則文章
  11. 資料型別判斷的方法,toString判斷的來源?
  12. ES6 class原理?
  13. function rest引數長度?function.length如何判斷與arguments物件長度區別?

頭條二面

  • var a;typeof a;let a;考察點
  • mvp,mvc,mvvm
  • vuex原理,watch物件
  • js defer async順序,模組依賴(AMD,CMD差別)
  • 設計模式和應用
  • session和cookie
  • 清浮動,BFC
  • cookie儲存在哪裡?(memory)

搜狐提前批

  • BFC
  • Flexbox用法,詳見總結
  • 排序,找出最大三個數
  • 快排原理,複雜度計算
  • 繼承的實現方式
  • vdom原理,實現
  • webpack打包是如何處理css圖片的
  • 模組

CVTE面試

  • 四欄佈局
  • 陣列,陣列物件去重
  • 陣列查某個字元出現次數
  • 選擇器權值
  • 右鍵選單定製

Ruff

  • 函式不定參
  • 定時器原理
  • url=>渲染:script阻塞
  • 資料結構應用
  • 資料雙向繫結(vue,ng原理)

其他小公司:

  1. 物件導向三要素
  2. 閉包
  3. 三欄佈局
  4. 內聯元素包含塊元素的表現
  5. 三種隱藏方式的區別
  6. 求最大子陣列和.
  7. 塊元素和內聯元素渲染區別?
  8. ul li實現計數.
  9. flex-box用法
  10. svg與canvas
  11. JPG,png圖片特點,場景
  12. CSS寫輪播
  13. 拖拽組建
  14. PV統計
  15. URL監聽變化

筆試

人人網

  • 1.陣列操作
  • 2.排序演算法
  • 3.動態規劃(書包問題)
  • 4.程式設計題(正則)

CVTE

  • 執行緒
  • 各類通訊協議
  • 二叉樹
  • 演算法複雜度
  • 棧封裝,利用棧對陣列reverse(程式設計)

美團

  • 各類排序演算法以及複雜度計算
  • Node的一些用法
  • 二叉樹遍歷
  • JS內部屬性
  • 頁面之間傳參
  • 程式題:陣列找公共元素

網易

  • 出入棧可能性計算
  • 陣列去重

相關文章