摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來

前端 面試 筆試

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布局的優缺點

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

實現動畫有哪些途徑

CSS3

JS幀動畫,定時器,requestAnimateFrame

Canvas動畫

SVG

圖片

對象繼承的實現

二面(跪了)

web安全

https加密過程,證書用途

xss幾種形式,防范手段,過濾哪些字符?

xsrf原理,實例,防范手段(Laravel的token)

Sql注入

性能優化

代碼優化(html,css,js)

網絡性能優化:

Cache緩存之強制緩存和協商緩存.看具體詳情

CDN原理及應用

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,動畫屬性生效,能夠進行正常的動畫效果.

代碼演示地址

inline和block元素列舉,block和inline-block區別?

span包含12px大小英文"abc",問span高度?baseline怎么理解?

css實現自適應正方形?

string查找第一個不重復字符.如果換成字符串呢?

Angular數據綁定機制?

重繪和回流的理解

querySelectAll和ByClassName所獲取元素的區別?如何綁定事件?

getComputedStyle用法?

addEventListener綁定事件?參數不同的執行順序.

正則匹配電話號碼.exec,match,search用法?推薦一篇高質量正則文章

數據類型判斷的方法,toString判斷的來源?

ES6 class原理?

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圖片的

模塊

四欄布局

數組,數組對象去重

數組查某個字符出現次數

選擇器權值

右鍵菜單定制

函數不定參

定時器原理

url=>渲染:script阻塞

數據結構應用

數據雙向綁定(vue,ng原理)

面向對象三要素

閉包

三欄布局

內聯元素包含塊元素的表現

三種隱藏方式的區別

求最大子數組和.

塊元素和內聯元素渲染區別?

ul li實現計數.

flex-box用法

svg與canvas

JPG,png圖片特點,場景

CSS寫輪播

拖拽組建

PV統計

URL監聽變化

1.數組操作

2.排序算法

3.動態規劃(書包問題)

4.編程題(正則)

線程

各類通信協議

二叉樹

算法復雜度

棧封裝,利用棧對數組reverse(編程)

各類排序算法以及復雜度計算

Node的一些用法

二叉樹遍歷

JS內部屬性

頁面之間傳參

程序題:數組找公共元素

出入棧可能性計算

數組去重