分享一篇關(guān)于前端面試真題的文章

Q: 怎么去設(shè)計(jì)一個(gè)組件封裝

1、組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量
2、低耦合，單一職責(zé)，可復(fù)用性，可維護(hù)性

Q: js 異步加載的方式

1、渲染引擎遇到 script 標(biāo)簽會(huì)停下來，等到執(zhí)行完腳本，繼續(xù)向下渲染/
2、defer 是“渲染完再執(zhí)行”，async 是“下載完就執(zhí)行”，defer 如果有多個(gè)腳本，會(huì)按照在頁面中出現(xiàn)的順序加載，多個(gè)async 腳本不能保證加載順序
3、加載 es6模塊的時(shí)候設(shè)置 type=module，異步加載不會(huì)造成阻塞瀏覽器，頁面渲染完再執(zhí)行，可以同時(shí)加上async屬性，異步執(zhí)行腳本（利用頂層的this等于undefined這個(gè)語法點(diǎn)，可以偵測當(dāng)前代碼是否在 ES6 模塊之中）

Q: 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 解析的過程，性能不如 css 動(dòng)畫好

Q: XSS 與 CSRF 兩種跨站攻擊
1、xss 跨站腳本攻擊，主要是前端層面的，用戶在輸入層面插入攻擊腳本，改變頁面的顯示，或則竊取網(wǎng)站 cookie，預(yù)防方法：不相信用戶的所有操作，對(duì)用戶輸入進(jìn)行一個(gè)轉(zhuǎn)義，不允許 js 對(duì) cookie 的讀寫
2、csrf 跨站請(qǐng)求偽造，以你的名義，發(fā)送惡意請(qǐng)求，通過 cookie 加參數(shù)等形式過濾
3、我們沒法徹底杜絕攻擊，只能提高攻擊門檻

Q: 事件委托，目的，功能，寫法
1、把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上
2、優(yōu)點(diǎn)，減少內(nèi)存消耗，動(dòng)態(tài)綁定事件
3、target 是觸發(fā)事件的最具體的元素，currenttarget是綁定事件的元素(在函數(shù)中一般等于this)

Q: 線程，進(jìn)程

1、線程是最小的執(zhí)行單元，進(jìn)程是最小的資源管理單元
2、一個(gè)線程只能屬于一個(gè)進(jìn)程，而一個(gè)進(jìn)程可以有多個(gè)線程，但至少有一個(gè)線程

Q: 負(fù)載均衡

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

Q: 什么是CDN緩存

1、CDN 是一種部署策略，根據(jù)不同的地區(qū)部署類似nginx 這種服務(wù)服務(wù)，會(huì)緩存靜態(tài)資源。前端在項(xiàng)目優(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è)要件

Q: 閉包的寫法，閉包的作用，閉包的缺點(diǎn)

1、使用閉包的目的——隱藏變量，間接訪問一個(gè)變量,在定義函數(shù)的詞法作用域外，調(diào)用函數(shù)
2、閉包的內(nèi)存泄露，是IE的一個(gè) bug，閉包使用完成之后，收回不了閉包的引用，導(dǎo)致內(nèi)存泄露

Q: 跨域問題，誰限制的跨域，怎么解決

1、瀏覽器的同源策略導(dǎo)致了跨域
2、用于隔離潛在惡意文件的重要安全機(jī)制
3、jsonp ，允許 script 加載第三方資源
4、nginx 反向代理（nginx 服務(wù)內(nèi)部配置 Access-Control-Allow-Origin *）
5、cors 前后端協(xié)作設(shè)置請(qǐng)求頭部，Access-Control-Allow-Origin 等頭部信息

Q: javascript 中常見的內(nèi)存泄露陷阱

1、內(nèi)存泄露會(huì)導(dǎo)致一系列問題，比如：運(yùn)行緩慢，崩潰，高延遲
2、內(nèi)存泄露是指你用不到（訪問不到）的變量，依然占居著內(nèi)存空間，不能被再次利用起來
3、意外的全局變量，這些都是不會(huì)被回收的變量（除非設(shè)置 null 或者被重新賦值），特別是那些用來臨時(shí)存儲(chǔ)大量信息的變量
4、周期函數(shù)一直在運(yùn)行，處理函數(shù)并不會(huì)被回收，jq 在移除節(jié)點(diǎn)前都會(huì)，將事件監(jiān)聽移除
5、js 代碼中有對(duì) DOM 節(jié)點(diǎn)的引用，dom 節(jié)點(diǎn)被移除的時(shí)候，引用還維持

Q: babel把ES6轉(zhuǎn)成ES5或者ES3之類的原理是什么

1、它就是個(gè)編譯器，輸入語言是ES6+，編譯目標(biāo)語言是ES5
2、解析：將代碼字符串解析成抽象語法樹
3、變換：對(duì)抽象語法樹進(jìn)行變換操作
4、再建：根據(jù)變換后的抽象語法樹再生成代碼字符串

Q: Promise 模擬終止

1、當(dāng)新對(duì)象保持“pending”狀態(tài)時(shí)，原Promise鏈將會(huì)中止執(zhí)行。
2、return new Promise(()=>{}); // 返回“pending”狀態(tài)的Promise對(duì)象

Q: promise 放在try catch里面有什么結(jié)果
1、Promise 對(duì)象的錯(cuò)誤具有冒泡性質(zhì)，會(huì)一直向后傳遞，直到被捕獲為止，也即是說，錯(cuò)誤總會(huì)被下一個(gè)catch語句捕獲
2、當(dāng)Promise鏈中拋出一個(gè)錯(cuò)誤時(shí)，錯(cuò)誤信息沿著鏈路向后傳遞，直至被捕獲

Q: 網(wǎng)站性能優(yōu)化

1、http 請(qǐng)求方面，減少請(qǐng)求數(shù)量，請(qǐng)求體積，對(duì)應(yīng)的做法是，對(duì)項(xiàng)目資源進(jìn)行壓縮，控制項(xiàng)目資源的 dns 解析在2到4個(gè)域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，
2、壓縮資源，提取公共資源壓縮，提取 css ，js 公共方法
3、不要縮放圖片，使用雪碧圖，使用字體圖表（阿里矢量圖庫）
4、使用 CDN，拋開無用的 cookie
5、減少重繪重排，CSS屬性讀寫分離，最好不要用js 修改樣式，dom 離線更新，渲染前指定圖片的大小
6、js 代碼層面的優(yōu)化，減少對(duì)字符串的計(jì)算，合理使用閉包，首屏的js 資源加載放在最底部

Q: js 自定義事件實(shí)現(xiàn)

1、原生提供了3個(gè)方法實(shí)現(xiàn)自定義事件
2、createEvent，設(shè)置事件類型，是 html 事件還是 鼠標(biāo)事件
3、initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件
4、dispatchEvent 觸發(fā)事件

Q: angular 雙向數(shù)據(jù)綁定與vue數(shù)據(jù)的雙向數(shù)據(jù)綁定

1、二者都是 MVVM 模式開發(fā)的典型代表
2、ngular 是通過臟檢測實(shí)現(xiàn)，angular 會(huì)將 UI 事件，請(qǐng)求事件，settimeout 這類延遲，的對(duì)象放入到事件監(jiān)測的臟隊(duì)列，當(dāng)數(shù)據(jù)變化的時(shí)候，觸發(fā) $diget 方法進(jìn)行數(shù)據(jù)的更新，視圖的渲染
3、vue 通過數(shù)據(jù)屬性的數(shù)據(jù)劫持和發(fā)布訂閱的模式實(shí)現(xiàn)，大致可以理解成由3個(gè)模塊組成，observer 完成對(duì)數(shù)據(jù)的劫持，compile 完成對(duì)模板片段的渲染，watcher 作為橋梁連接二者，訂閱數(shù)據(jù)變化及更新視圖

Q: get與post 通訊的區(qū)別
1、Get 請(qǐng)求能緩存，Post 不能
2、Post 相對(duì) Get 安全一點(diǎn)點(diǎn)，因?yàn)镚et 請(qǐng)求都包含在 URL 里，且會(huì)被瀏覽器保存歷史紀(jì)錄，Post 不會(huì)，但是在抓包的情況下都是一樣的。
3、Post 可以通過 request body來傳輸比 Get 更多的數(shù)據(jù)，Get 沒有這個(gè)技術(shù)
4、URL有長度限制，會(huì)影響 Get 請(qǐng)求，但是這個(gè)長度限制是瀏覽器規(guī)定的，不是 RFC 規(guī)定的
5、Post 支持更多的編碼類型且不對(duì)數(shù)據(jù)類型限制

Q: 有沒有去研究webpack的一些原理和機(jī)制，怎么實(shí)現(xiàn)的
1、解析webpack配置參數(shù)，合并從shell傳入和webpack.config.js文件里配置的參數(shù)，生產(chǎn)最后的配置結(jié)果。
2、注冊所有配置的插件，好讓插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點(diǎn)，以做出對(duì)應(yīng)的反應(yīng)。
3、從配置的entry入口文件開始解析文件構(gòu)建AST語法樹，找出每個(gè)文件所依賴的文件，遞歸下去。
4、在解析文件遞歸的過程中根據(jù)文件類型和loader配置找出合適的loader用來對(duì)文件進(jìn)行轉(zhuǎn)換。
5、遞歸完后得到每個(gè)文件的最終結(jié)果，根據(jù)entry配置生成代碼塊chunk。
6、輸出所有chunk到文件系統(tǒng)。

Q: ES6模塊與CommonJS模塊的差異

1、CommonJs 模塊輸出的是一個(gè)值的拷貝，ES6模塊輸出的是一個(gè)值的引用
2、CommonJS 模塊是運(yùn)行時(shí)加載，ES6模塊是編譯時(shí)輸出接口
3、ES6輸入的模塊變量，只是一個(gè)符號(hào)鏈接，所以這個(gè)變量是只讀的，對(duì)它進(jìn)行重新賦值就會(huì)報(bào)錯(cuò)

Q: 模塊加載AMD，CMD，CommonJS Modules/2.0 規(guī)范
1、這些規(guī)范的目的都是為了 JavaScript 的模塊化開發(fā)，特別是在瀏覽器端的
2、對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行
3、CMD 推崇依賴就近，AMD 推崇依賴前置

Q: Node 事件循環(huán)，js 事件循環(huán)差異

1、Node.js 的事件循環(huán)分為6個(gè)階段
2、瀏覽器和Node 環(huán)境下，microtask 任務(wù)隊(duì)列的執(zhí)行時(shí)機(jī)不同
Node.js中，microtask 在事件循環(huán)的各個(gè)階段之間執(zhí)行
瀏覽器端，microtask 在事件循環(huán)的 macrotask 執(zhí)行完之后執(zhí)行
3、遞歸的調(diào)用process.nextTick()會(huì)導(dǎo)致I/O starving，官方推薦使用setImmediate()

Q: 淺拷貝和深拷貝的問題
1、深拷貝和淺拷貝是只針對(duì)Object和Array這樣的復(fù)雜類型的
2、也就是說a和b指向了同一塊內(nèi)存，所以修改其中任意的值，另一個(gè)值都會(huì)隨之變化，這就是淺拷貝
3、淺拷貝， ”O(jiān)bject.assign() 方法用于將所有可枚舉的屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象
4、深拷貝，JSON.parse()和JSON.stringify()給了我們一個(gè)基本的解決辦法。但是函數(shù)不能被正確處理

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com