面試複習整理的筆記

時間 2019-12-01

標籤面試複習整理筆記欄目快樂工作简体版

原文原文鏈接

1、通訊類

一、什麼是同源策略及限制css

從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。html

源包括協議、域名、端口（默認端口80），這三方面有一個不同就表示跨域了前端

cookie,localstorage,indexDB沒法獲取web

DOM沒法獲取面試

AJAX請求不能發送ajax

二、先後端如何通訊算法

ajaxsegmentfault

websocket不受跨域限制後端

cors支持跨域、同源跨域

三、如何建立Ajax

藉助第三方框架：VUE，Jquery

XMLHttpRequest對象的工做流程

兼容性處理

事件的觸發條件

事件的觸發順序

ajax五部曲

四、跨域通訊的幾種方式

JSONP

Hash

postMessage

WebSocket

CORS

fetch('/some/url',{ method:'get'

}).then(function(response){}).catch(function(err){})

CORS怎樣實現跨域的？瀏覽器會攔截跨域的ajax請求，CORS會在http中加一個origin

2、安全類

CSRF：cross-site request forgery跨站請求僞造，利用自己漏洞執行接口

防護措施

Token驗證

Referer驗證

隱藏令牌

XSS

cross-site scripting跨域腳本攻擊，往頁面注入js運行

攻擊原理

防護措施

3、算法

一、排序

快速排序https://segmentfault.com/a/1190000009426421

選擇排序https://segmentfault.com/a/1190000009366805

希爾排序https://segmentfault.com/a/1190000009461832

二、堆棧、隊列、鏈表

三、遞歸

希爾排序https://segmentfault.com/a/1190000009857470

四、波蘭式和逆波蘭式

4、渲染機制

一、什麼是DOCTYPE及做用

DTD文檔類型定義，告訴瀏覽器文檔類型，決定使用何種協議解析以及切換瀏覽器模式；

DOCTYPE用來聲明文檔類型和DTD規範的

H5 <!DOCTYPE html>

H4有嚴格模式和寬鬆模式，嚴格模式不包括展現性的和棄用的元素

二、瀏覽器渲染過程

預解析 DOM tree cssom render tree,layout計算位置，

重排reflow

重繪repaint

佈局layout

5、js運行機制

js引擎、js與瀏覽器怎麼實現交互

測試1

console.log(1);
setTimeout(function () {
    console.log(2);
},0);
console.log(3);結果爲一、三、2

js是單線程的，同一時間只能作一件事，setTimeout是異步任務，異步任務執行時先掛起，等同步任務完成後，纔去響應異步任務

測試2

console.log('A');
while(1){};
console.log('B');結果爲A
執行while會卡住

測試3

for(var i=0;i<4;i++){
    setTimeout(function () {
        console.log(i);
    },1000);
}
結果爲4個4

循環時把setTimeout交給定時器模塊，達到1000的時間後，才放到異步隊列

通行棧放的同步隊列，異步任務到時間了就放入異步任務隊列，等同步任務執行完後去異步隊列取異步任務到通行棧，通行棧的異步任務執行完後又去取異步任務，這個循環稱之爲event loop
異步任務
setTimeout
DOM事件
ES6 promise

6、頁面性能

提高頁面性能的方法有哪些？

一、資源壓縮合並，減小HTTP請求

二、非核心代碼異步加載——異步加載的方式——異步加載的區別

異步加載的方式：動態腳本加載（說白了就是動態創造節點）、defer、async，在異步加載時的script標籤上加上defer、async屬性

異步加載的區別：defer是在HTML解析完後纔會執行，若是是多個，按照加載順序執行

async是在加載完後當即執行，若是是多個，執行順序和加載順序無關,先執行完的先出結果

三、利用瀏覽器緩存——緩存的分類——緩存的原理

緩存是請求的資源文件在本地的備份

緩存分類

強緩存:不請求直接從本地獲取資源（經過時間限制，EXPIRES和CACHE-CONTROL）

Expires表示過時時間，絕對時間以服務器爲準

Cache-Control表示相對時間，以客戶端時間爲準

若是兩個時間都有之後者爲準

協商緩存:瀏覽器和服務器協商是否用本地緩存

Last-Modified響應頭拿到資源的時間。當強緩存失效了，協商緩存發生請求時，請求頭會經過if-modified-since攜帶Last-Modified的值告訴服務器，服務器再作對比。

ETag服務器下發資源時的hash值。協商緩存可能只是時間變了可是內容沒變化，這種能夠仍是從緩存獲取資源，經過if-none-match攜帶ETag的值告訴服務器

四、使用CDN,CDN加速資源很是快

五、預解析DNS

dns-prefetch預解析

頁面中的a標籤在高級瀏覽器中是默認打開了預解析的，而通常https協議的瀏覽器是關閉了a標籤的預解析的，因此須要上面這個把a標籤的預解析打開

預解析把這句放在head中

7、錯誤監控

代碼質量體系，線上環境錯誤收集

一、前端錯誤分類

及時運行錯誤：代碼錯誤

資源加載錯誤

二、錯誤的捕獲分類

及時運行錯誤：try catch; window.onerror不能捕獲資源加載錯誤

資源加載錯誤:這種錯誤不會冒泡，因此window.onerror沒法捕獲錯誤。

三種：object.onerror;performance.getEntries;Error事件捕獲

performance.getEntries返回數組

performance.getEntries.forEach((item)=>{console.log(item.name)})表示加載的資源個數

document.getElementByTagName('img')

延伸：跨域的JS運行錯誤也能夠捕獲，錯誤提示是什麼？怎樣處理？

處理的方法

一、客戶端：在script標籤增長crossorigin屬性

二、服務端：設置js資源響應頭Access-Control-Allow-Origin:*

經過以上設置就能拿到錯誤信息了

三、上報錯誤的基本原理

採用Ajax通訊方式上報，利用Image對象上報,一行代碼，也不借助第三方庫

script標籤內容(new Image()).src='url'會發出請求

8、面試技巧

描述演練：架構、技術、人員組織、難點攻克

態度謙虛、回答靈活、學會讚美

業務能力：作過什麼業務、業務的業績、技術方案、技術難點、收穫

思考能力：同一件事從不一樣角度思考

學習能力

職業規劃：目標、近階段目標、長期目標、方式方法

團隊協做能力

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。