1.怎么去設(shè)計(jì)一個(gè)組件封裝?

1.組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量

2.低耦合，單一職責(zé)，可復(fù)用性，可維護(hù)性

3.前端組件化設(shè)計(jì)思路

2.js 異步加載的方式

1.渲染引擎遇到 script 標(biāo)簽會(huì)停下來(lái)，等到執(zhí)行完腳本，繼續(xù)向下渲染

2.defer 是“渲染完再執(zhí)行”，async 是“下載完就執(zhí)行”，defer 如果有多個(gè)腳本，會(huì)按照在頁(yè)面中出現(xiàn)的順序加載，多個(gè)async 腳本不能保證加載順序

3.加載 es6模塊的時(shí)候設(shè)置 type=module，異步加載不會(huì)造成阻塞瀏覽器，頁(yè)面渲染完再執(zhí)行，可以同時(shí)加上async屬性，異步執(zhí)行腳本(利用頂層的this等于undefined這個(gè)語(yǔ)法點(diǎn)，可以偵測(cè)當(dāng)前代碼是否在 ES6 模塊之中)

3.css 動(dòng)畫和 js 動(dòng)畫的差異

1.代碼復(fù)雜度，js 動(dòng)畫代碼相對(duì)復(fù)雜一些

2.動(dòng)畫運(yùn)行時(shí)，對(duì)動(dòng)畫的控制程度上，js 能夠讓動(dòng)畫，暫停，取消，終止，css動(dòng)畫不能添加事件

3.動(dòng)畫性能看，js 動(dòng)畫多了一個(gè)js 解析的過(guò)程，性能不如 css 動(dòng)畫好

4.XSS 與 CSRF 兩種跨站攻擊

1.xss 跨站腳本攻擊，主要是前端層面的，用戶在輸入層面插入攻擊腳本，改變頁(yè)面的顯示，或則竊取網(wǎng)站 cookie，預(yù)防方法：不相信用戶的所有操作，對(duì)用戶輸入進(jìn)行一個(gè)轉(zhuǎn)義，不允許 js 對(duì) cookie 的讀寫

2.csrf 跨站請(qǐng)求偽造，以你的名義，發(fā)送惡意請(qǐng)求，通過(guò) cookie 加參數(shù)等形式過(guò)濾

3.我們沒法徹底杜絕攻擊，只能提高攻擊門檻

5.事件委托，目的，功能，寫法

1.把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上

2.優(yōu)點(diǎn)，減少內(nèi)存消耗，動(dòng)態(tài)綁定事件

3.target 是觸發(fā)事件的最具體的元素，currenttarget是綁定事件的元素(在函數(shù)中一般等于this)

4.JavaScript 事件委托詳解

6.線程，進(jìn)程

1.線程是最小的執(zhí)行單元，進(jìn)程是最小的資源管理單元

2.一個(gè)線程只能屬于一個(gè)進(jìn)程，而一個(gè)進(jìn)程可以有多個(gè)線程，但至少有一個(gè)線程

7.負(fù)載均衡

1.當(dāng)系統(tǒng)面臨大量用戶訪問，負(fù)載過(guò)高的時(shí)候，通常會(huì)使用增加服務(wù)器數(shù)量來(lái)進(jìn)行橫向擴(kuò)展，使用集群和負(fù)載均衡提高整個(gè)系統(tǒng)的處理能力

8.什么是CDN緩存

1.CDN 是一種部署策略，根據(jù)不同的地區(qū)部署類似nginx 這種服務(wù)服務(wù)，會(huì)緩存靜態(tài)資源。前端在項(xiàng)目?jī)?yōu)化的時(shí)候，習(xí)慣在講臺(tái)資源上加上一個(gè) hash 值，每次更新的時(shí)候去改變這個(gè) hash，hash 值變化的時(shí)候，服務(wù)會(huì)去重新取資源

2.(CDN)是一個(gè)經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲(chǔ)、負(fù)載均衡、網(wǎng)絡(luò)請(qǐng)求的重定向和內(nèi)容管理4個(gè)要件

9.閉包的寫法，閉包的作用，閉包的缺點(diǎn)

1.使用閉包的目的--隱藏變量，間接訪問一個(gè)變量,在定義函數(shù)的詞法作用域外，調(diào)用函數(shù)

2.閉包的內(nèi)存泄露，是IE的一個(gè) bug，閉包使用完成之后，收回不了閉包的引用，導(dǎo)致內(nèi)存泄露

3.閉包造成內(nèi)存泄露的實(shí)驗(yàn)

10.跨域問題，誰(shuí)限制的跨域，怎么解決

1.瀏覽器的同源策略導(dǎo)致了跨域

2.用于隔離潛在惡意文件的重要安全機(jī)制

3.[jsonp ，允許 script 加載第三方資源]segmentfault.com/a/11...

4.nginx 反向代理(nginx 服務(wù)內(nèi)部配置 Access-Control-Allow-Origin *)

5.cors 前后端協(xié)作設(shè)置請(qǐng)求頭部，Access-Control-Allow-Origin 等頭部信息

6.iframe 嵌套通訊，postmessage

以上就是“優(yōu)質(zhì)選題：web前端面試題”，你能回答上來(lái)嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動(dòng)力節(jié)點(diǎn)Java官網(wǎng)。