摘要：道阻且長啊前端面試總結(jié)前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進(jìn)按鈕書簽?zāi)夸洖g覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構(gòu)建的，使用自主研發(fā)的渲染引擎，和都使用網(wǎng)絡(luò)用來

前端 面試 筆試

1.瀏覽器工作原理

瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸?瀏覽器引擎－ 用來查詢及操作渲染引擎的接口 渲染引擎－
渲染界面:Firefox、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit.
網(wǎng)絡(luò)－ 用來完成網(wǎng)絡(luò)調(diào)用，例如http請求 UI 后端－
用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個(gè)平臺的通用接口，底層使用操作系統(tǒng)的用戶接口 JS解釋器－ 解釋執(zhí)行JS代碼
數(shù)據(jù)存儲－ 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)

2.Web安全,舉例說明

3.狀態(tài)碼

4.同源:同端口,同域名,同協(xié)議

5.對象繼承

6.ES6歷史以及新特性有哪些?

7.promise原理

8.事件模型

9.常見兼容性問題,列舉(移動端/PC端)

10.性能優(yōu)化　　　

類似百度搜索的提示框，兼容各大瀏覽器，可用鍵盤控制.
勉強(qiáng)憋了出來，但是掛掉了，犯了一些低級錯(cuò)誤，顯示經(jīng)驗(yàn)不足．
面試官建議多看書，多寫組件.

1.Ajax原理

2.瀏覽器解析過程

流程： 解析html以構(gòu)建dom樹->構(gòu)建render樹->布局render樹->繪制render樹
參考文章

3.垂直居中

4.數(shù)據(jù)類型判斷

5.路由實(shí)現(xiàn)

6.數(shù)據(jù)本地存儲

7.跨域 參考

8.數(shù)據(jù)雙向綁定單向綁定優(yōu)缺點(diǎn)

1.無線性能優(yōu)化

2.Tap事件,Touch

3.數(shù)據(jù)存儲

1.Dom操作

2.移動布局方案

3.前后端協(xié)作

4.原生Ajax實(shí)現(xiàn)過程

1.單鏈表反轉(zhuǎn)

2.快排

3.即時(shí)通信(除了Ajax和websocket)

懵逼了
總結(jié)一下其他方式
1.Comet技術(shù)：基于HTTP長連接的Web端實(shí)時(shí)通信技術(shù)
2.SSE：服務(wù)器發(fā)送事件,使用長鏈接進(jìn)行通訊

4.服務(wù)器代理轉(zhuǎn)發(fā)如何處理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布局的優(yōu)缺點(diǎn)

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

實(shí)現(xiàn)動畫有哪些途徑

CSS3

JS幀動畫,定時(shí)器,requestAnimateFrame

Canvas動畫

SVG

圖片

對象繼承的實(shí)現(xiàn)

二面(跪了)

web安全

https加密過程,證書用途

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

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

Sql注入

性能優(yōu)化

代碼優(yōu)化(html,css,js)

網(wǎng)絡(luò)性能優(yōu)化:

Cache緩存之強(qiáng)制緩存和協(xié)商緩存.看具體詳情

CDN原理及應(yīng)用

HTTP壓縮之gzip

上下文環(huán)境對象

設(shè)計(jì)模式(要求說出如何實(shí)現(xiàn),應(yīng)用,優(yōu)缺點(diǎn)):

單例模式

工廠模式

發(fā)布訂閱模式

跨域(產(chǎn)生原因)

JSONP原理

CORS如何設(shè)置

Nginx代理

讀過哪些框架源碼?

如何寫一個(gè)CSS庫,要注意哪些東西?

JS面向?qū)ο笾庋b,繼承,多態(tài)的體現(xiàn)和應(yīng)用?

BST

promiseAll如何實(shí)現(xiàn),以及如何實(shí)現(xiàn)多層異步回調(diào)?

加油站問題(貪心算法)

XHR具體底層原理和API

單例模式實(shí)現(xiàn)/設(shè)計(jì)模式

JSONP原理,回調(diào)過程

Latex怎么解析

hash算法實(shí)現(xiàn),如何避免沖突,如何在沖突里檢測

Generater

ES6怎么編譯成ES5,css-loader原理,過程

ES6轉(zhuǎn)成ES5的常見例子

常見數(shù)據(jù)結(jié)構(gòu),常見算法

node多線程實(shí)現(xiàn)

進(jìn)程和線程

對前端的理解

說說rn,weex原理

說說XHR

Jq的選擇器引擎,$(".a .b")以及$(".a").find(".b")

MD5摘要算法其他用途

前端架構(gòu)的理解

前端框架的看法

如何做前后端分離

在不使用后端模板渲染的情況下,如何做前端數(shù)據(jù)直出(不使用異步請求數(shù)據(jù))?

SSR適用什么場景?SPA首屏空白原因?

vue構(gòu)建過程原理,具體流程

模板到DOM大致流程:
template模板經(jīng)過parse處理后返回AST 獲得一棵AST后再經(jīng)過generate()生成渲染函數(shù)
執(zhí)行渲染函數(shù)后會獲得一個(gè)VNode，即虛擬DOM patch函數(shù)，負(fù)責(zé)把虛擬DOM變?yōu)檎嬲鼶OM。

vue2新增內(nèi)容?獨(dú)立構(gòu)建（standalone）和運(yùn)行時(shí)構(gòu)建（runtime-only）的差別和應(yīng)用?詳情

爬蟲的實(shí)現(xiàn)原理?如何實(shí)現(xiàn)一個(gè)爬蟲,如何解析文件?

如何解決爬蟲慢的問題?

多線程如何保障各個(gè)線程的安全?

webpack工具和node了解哪些?node各個(gè)模塊的底層原理?

CSS3實(shí)現(xiàn)卡片翻轉(zhuǎn)?

說說職業(yè)規(guī)劃?

說說HTML難點(diǎn),語義化的體現(xiàn)?

說說CSS重要難點(diǎn)?如何實(shí)現(xiàn)垂直水平居中?

JS中this是什么?如何改變this?

講講時(shí)間復(fù)雜度計(jì)算?

算法題:假定26個(gè)字母對應(yīng)1-26,將一串?dāng)?shù)字轉(zhuǎn)成字母有多少種可能?
暴力解法復(fù)雜度是多少?

(百度外賣業(yè)務(wù):包含移動客戶端(RN,hybrid),PC web端,H5,后臺界面vue,桌面應(yīng)用包含編輯器插件,前端構(gòu)建工具,node中間層)

盒模型之box-sizing

XHR原理及API

session和sessionStorage

map forEach(數(shù)組各個(gè)API細(xì)節(jié))

dom事件代理,有什么優(yōu)點(diǎn)?

三種隱藏方式差別:visibility:hidden,display:none,opacity:0

渲染上的差異:
1.將元素設(shè)置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導(dǎo)致瀏覽器的回流和重繪。
2.設(shè)置元素的visibility為hidden，和display:none的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會回流。
3.opacity:0,只是看不到元素,元素依然存在并且占有原有位置. 注: 事件綁定的差異: 1、display:none：元素徹底消失，不會觸發(fā)綁定的事件.
2、visibility:hidden：無法觸發(fā)其點(diǎn)擊事件，有一種說法是display:none是元素看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準(zhǔn)確的，設(shè)置元素的visibility后無法觸發(fā)點(diǎn)擊事件，說明這種方法元素也是消失了，只是依然占據(jù)著頁面空間。
3、opacity:0：可以觸發(fā)點(diǎn)擊事件，設(shè)置元素透明度為0后，元素只是相對于人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發(fā)綁定事件
動畫屬性的差異: 1、display:none：完全不受transition屬性的影響，元素立即消失
2、visibility：hidden：元素消失的時(shí)間跟transition屬性設(shè)置的時(shí)間一樣，但是沒有動畫效果.
3、opacity:0,動畫屬性生效,能夠進(jìn)行正常的動畫效果.

代碼演示地址

inline和block元素列舉,block和inline-block區(qū)別?

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

css實(shí)現(xiàn)自適應(yīng)正方形?

string查找第一個(gè)不重復(fù)字符.如果換成字符串呢?

Angular數(shù)據(jù)綁定機(jī)制?

重繪和回流的理解

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

getComputedStyle用法?

addEventListener綁定事件?參數(shù)不同的執(zhí)行順序.

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

數(shù)據(jù)類型判斷的方法,toString判斷的來源?

ES6 class原理?

function rest參數(shù)長度?function.length如何判斷與arguments對象長度區(qū)別?

var a;typeof a;let a;考察點(diǎn)

mvp,mvc,mvvm

vuex原理,watch對象

js defer async順序,模塊依賴(AMD,CMD差別)

設(shè)計(jì)模式和應(yīng)用

session和cookie

清浮動,BFC

cookie存儲在哪里?(memory)

BFC

Flexbox用法,詳見總結(jié)

排序,找出最大三個(gè)數(shù)

快排原理,復(fù)雜度計(jì)算

繼承的實(shí)現(xiàn)方式

vdom原理,實(shí)現(xiàn)

webpack打包是如何處理css圖片的

模塊

四欄布局

數(shù)組,數(shù)組對象去重

數(shù)組查某個(gè)字符出現(xiàn)次數(shù)

選擇器權(quán)值

右鍵菜單定制

函數(shù)不定參

定時(shí)器原理

url=>渲染:script阻塞

數(shù)據(jù)結(jié)構(gòu)應(yīng)用

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

面向?qū)ο笕?/p>

閉包

三欄布局

內(nèi)聯(lián)元素包含塊元素的表現(xiàn)

三種隱藏方式的區(qū)別

求最大子數(shù)組和.

塊元素和內(nèi)聯(lián)元素渲染區(qū)別?

ul li實(shí)現(xiàn)計(jì)數(shù).

flex-box用法

svg與canvas

JPG,png圖片特點(diǎn),場景

CSS寫輪播

拖拽組建

PV統(tǒng)計(jì)

URL監(jiān)聽變化

1.數(shù)組操作

2.排序算法

3.動態(tài)規(guī)劃(書包問題)

4.編程題(正則)

線程

各類通信協(xié)議

二叉樹

算法復(fù)雜度

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

各類排序算法以及復(fù)雜度計(jì)算

Node的一些用法

二叉樹遍歷

JS內(nèi)部屬性

頁面之間傳參

程序題:數(shù)組找公共元素

出入棧可能性計(jì)算

數(shù)組去重