[面試專題]一線互聯網大廠面試總結

道阻且長啊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,只是看不到元素,元素依然存在而且佔有原有位置. 注: 事件綁定的差別: 一、display:none：元素完全消失，不會觸發綁定的事件.
二、visibility:hidden：沒法觸發其點擊事件，有一種說法是display:none是元素看不見摸不着，而visibility:hidden是看不見摸得着，這種說法是不許確的，設置元素的visibility後沒法觸發點擊事件，說明這種方法元素也是消失了，只是依然佔據着頁面空間。
三、opacity:0：能夠觸發點擊事件，設置元素透明度爲0後，元素只是相對於人眼不存在而已，對瀏覽器來講，它仍是存在的，因此能夠觸發綁定事件
動畫屬性的差別: 一、display:none：徹底不受transition屬性的影響，元素當即消失
二、visibility：hidden：元素消失的時間跟transition屬性設置的時間同樣，可是沒有動畫效果.
三、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內部屬性
• 頁面之間傳參
• 程序題:數組找公共元素

網易

• 出入棧可能性計算
• 數組去重