前端常見面試-進階篇

時間 2020-03-05

標籤前端常見面試進階欄目快樂工作简体版

原文原文鏈接

上一篇文章，咱們對js相關的知識點作了一個具體的介紹，有須要的朋友可自行查看：前端常見面試-js篇。固然對於前端面試來講，還會涉及到一些原理性的東西，具體這篇來重點探討一下這方面的問題。javascript

一、請講述一下瀏覽器從輸入一個url到網頁展現的整個過程？

具體總結主要爲6個步驟：css

DNS解析：進行域名解析，找到對應的服務ip
TCP鏈接 ：進行三次握手，確保能夠進行數據傳輸
發送HTTP請求：發送具體的請求信息
*服務器處理請求並返回HTTP報文：服務器返回詳情的內容，具體包括：狀態碼,響應報頭和響應報文
瀏覽器解析渲染頁面：首先瀏覽器解析HTML文件構建DOM樹，而後解析CSS文件構建渲染樹，等到渲染樹構建完成後，瀏覽器開始佈局渲染樹並將其繪製到屏幕上
鏈接結束：斷開TCP鏈接

具體深刻了解，課詳細查看：從輸入URL到頁面加載發生了什麼html

二、如何優化網站性能？

答：http 請求方面，減小請求數量，請求體積，對應的作法是，對項目資源進行壓縮，控制項目資源的 dns 解析在2到4個域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，壓縮資源，提取公共資源壓縮，提取 css ，js 公共方法不要縮放圖片，使用雪碧圖，使用字體圖表（阿里矢量圖庫）使用 CDN，拋開無用的 cookie減小重繪重排，CSS屬性讀寫分離，最好不要用js 修改樣式，dom 離線更新，渲染前指定圖片的大小js 代碼層面的優化，減小對字符串的計算，合理使用閉包，首屏的js 資源加載放在最底部前端

三、promise的理解？

         Promise是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最先提出和實現，ES6將其寫進了語言標準，統一了用法，原生提供了Promise對象。
         所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise是一個對象，從它能夠獲取異步操做的消息。Promise提供統一的API，各類異步操做均可以用一樣的方法進行處理。
         有了Promise對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。java

Promise缺點

1）沒法取消Promise，一旦新建它就會當即執行，沒法中途取消。
2）若是不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。
3）當處於Pending狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。
4）同步調用，在發起一個函數或方法調用時，沒有獲得結果以前，該調用就不返回，直到返回結果；ios

說明：異步調用的概念和同步相對，在一個異步調用發起後，被調用者當即返回給調用者，但調用者不能馬上獲得結果，被調用者在實際處理這個調用的請求完成後，經過狀態、通知或回調等方式來通知調用者請求處理的結果。
簡單地說，同步就是發出一個請求後什麼事都不作，一直等待請求返回後纔會繼續作事；異步就是發出請求後繼續去作其餘事，這個請求處理完成後會通知你，這時候就能夠處理這個迴應了。nginx

四、解決跨域的方法？

什麼是跨域

只要協議、域名、端口有不一樣，則視爲不一樣的域。（域名和域名對應的IP也是跨域）web

跨域的解決方案

         1) CORS: (Cross-Origin Resource Sharing)基於服務器支持的跨域，服務器設置Access-Control-Allow-Origin響應頭，瀏覽器可容許跨域
         2）服務器代理
         3）設置domain:能從子域設到主域，如a.b.c.com—>b.c.com—>c.com ;具體狀況：在頁面中用iframe打開了另外一個頁面（前提：兩個頁面主域是相同的）;利用frameElement.contentWindow.document.domain設置frame子頁面的主域，document.domain設置主頁面的主域，以後就能互相獲取dom中的數據。缺點是隻能用於不一樣子域間的交互。
         4）img的src：擁有src屬性的img標籤，每次改變src屬性，都會發起http請求，經常使用於埋點需求
         5）postMessage面試

var win = window.open("http://target.com");
var win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");
function handleMessage(event){
  if(event.orgin!="http://test.org:4000")
    return;
  var data = event.data;
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

         6）window.name：即便在頁面打開多層iframe後，每一個iframe中window.name 屬性值都是相同的，以此用做數據傳輸的工具。
但因爲跨域的限制，是沒法獲取另外一個frame中的window.name數據，因此要使用一個同域的代理(proxy.html)：
         7）jsonp：只能獲取get請求
         9）nginx代理ajax

五、瀏覽器的理解？

1）用戶界面 －包括地址欄、後退/前進按鈕、書籤目錄等，也就是所看到的除了用來顯示所請求頁面的主窗口以外的其餘部分
2）瀏覽器引擎 －用來查詢及操做渲染引擎的接口
3）渲染引擎 －用來顯示請求的內容，例如，若是請求內容爲html，它負責解析html及css，並將解析後的結果顯示出來。
4）網絡－用來完成網絡調用，例如http請求，它具備平臺無關的接口，能夠在不一樣平臺上工做。
5）UI後端 －用來繪製相似組合選擇框及對話框等基本組件，具備不特定於某個平臺的通用接口，底層使用操做系統的用戶接口。
6）jS解釋器 －用來解釋執行JS代碼。
7）數據存儲 －屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據，HTML5定義了web database技術，這是一種輕量級完整的客戶端存儲技術

六、async/await的理解？

async/await實際上是Promise的語法糖，它能實現的效果都能用then鏈來實現，這也和咱們以前提到的同樣，它是爲優化then鏈而開發出來的。從字面上來看，async是「異步」的簡寫，await譯爲等待，因此咱們很好理解async聲明function是異步的，await等待某個操做完成
await等待的是一個Promise對象，或者是其餘值（也就是說能夠等待任何值），若是等待的是Promise對象，則返回Promise的處理結果；若是是其餘值，則返回該值自己。而且await會暫停當前async function的執行，等待Promise的處理完成。若Promise正常處理（fulfillded），其將回調的resolve函數參數做爲await表達式的值，繼續執行async function；若Promise處理異常（rejected），await表達式會把Promise異常緣由拋出；另外若是await操做符後面的表達式不是一個Promise對象，則返回該值自己。

七、https模式下請求頭帶有cookie須要如何配置？

答：設置cookie的secure屬性，當設置爲true時，表示建立的 Cookie 會被以安全的形式向服務器傳輸，也就是隻能在 HTTPS 鏈接中被瀏覽器傳遞到服務器端進行會話驗證，若是是 HTTP 鏈接則獲取該信息，因此不會被竊取到Cookie 的具體內容。可是這會致使在同一服務器下HTTPS切換到HTTP協議時，HTTP沒法訪問、修改同名Cookie，因此必須在HTTPS下清除Cookie或者設定Cookie的做用域。

八、請講述一下http和https的區別？

1）https協議須要到ca申請證書，通常免費證書較少，於是須要必定費用。
2）http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
3）http和https使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
4）http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

九、請講述一下dom的重繪和重排？

部分渲染樹（或者整個渲染樹）須要從新分析而且節點尺寸須要從新計算。這被稱爲重排。注意這裏至少會有一次重排-初始化頁面佈局。
因爲節點的幾何屬性發生改變或者因爲樣式發生改變，例如改變元素背景色時，屏幕上的部份內容須要更新。這樣的更新被稱爲重繪。

形成重排或者重繪的場景

1）添加、刪除、更新 DOM 節點
2）經過 display: none 隱藏一個 DOM 節點-觸發重排和重繪
3）經過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，由於沒有幾何變化
4）移動或者給頁面中的 DOM 節點添加動畫
5）添加一個樣式表，調整樣式屬性
6）用戶行爲，例如調整窗口大小，改變字號，或者滾動。

十、請講述一下ajax的理解和優缺點？

答：ajax是無須進行刷新頁面就能夠請求後臺的數據的一種方法，經過XmlHttpRequest對象來向服務器發送異步請求，從服務器中獲取數據，而後經過js進行操做dom，以此來更新頁面內容。

1）、具體實現過程

         a、建立一個XmlHttpRequest的對象
         b、設置響應HTTP請求的回調函數
         c、建立一個HTTP請求，指定響應的請求方法、url、參數等
         d、發送HTTP請求
         e、獲取服務端返回的數據
         f、使用js操做dom更新頁面的內容

2）缺點

         a、對搜索引擎不友好
         b、要實現Ajax下的先後退功能成本較大
         c、跨域問題限制

十一、請講解一下對jsonp的理解？

答：jsonp是一種非官方跨域數據交互協議，它容許在服務器端集成< script >標籤返回至客戶端，經過javascript回調的形式實現跨域訪問。由於同源策略的緣由，咱們不能使用XMLHttpRequest與外部服務器進行通訊，可是< script >能夠訪問外部資源，因此經過JSON與< script >相結合的辦法，能夠繞過同源策略從外部服務器直接取得可執行的JavaScript函數。

原理

客戶端定義一個函數，好比jsonpCallback，而後建立< script >，src爲url + ?jsonp=jsonpCallback這樣的形式，以後服務器會生成一個和傳遞過來jsonpCallback同樣名字的參數，並把須要傳遞的數據當作參數傳入，好比jsonpCallback(json)，而後返回給客戶端，此時客戶端就執行了這個服務器端返回的jsonpCallback(json)回調。