1.怎么去設計一個組件封裝?

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

2.低耦合，單一職責，可復用性，可維護性

3.前端組件化設計思路

2.js 異步加載的方式

1.渲染引擎遇到 script 標簽會停下來，等到執(zhí)行完腳本，繼續(xù)向下渲染

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

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

3.css 動畫和 js 動畫的差異

1.代碼復雜度，js 動畫代碼相對復雜一些

2.動畫運行時，對動畫的控制程度上，js 能夠讓動畫，暫停，取消，終止，css動畫不能添加事件

3.動畫性能看，js 動畫多了一個js 解析的過程，性能不如 css 動畫好

4.XSS 與 CSRF 兩種跨站攻擊

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

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

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

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

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

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

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

4.JavaScript 事件委托詳解

6.線程，進程

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

2.一個線程只能屬于一個進程，而一個進程可以有多個線程，但至少有一個線程

7.負載均衡

1.當系統(tǒng)面臨大量用戶訪問，負載過高的時候，通常會使用增加服務器數(shù)量來進行橫向擴展，使用集群和負載均衡提高整個系統(tǒng)的處理能力

8.什么是CDN緩存

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

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

9.閉包的寫法，閉包的作用，閉包的缺點

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

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

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

10.跨域問題，誰限制的跨域，怎么解決

1.瀏覽器的同源策略導致了跨域

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

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

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

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

6.iframe 嵌套通訊，postmessage

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