前端進階

時間：2023-02-20 16:50:01 | 來源：建站知識

時間：2023-02-20 16:50:01 來源：建站知識

前端進階：對于前端面試來說，還會涉及到一些原理性的東西，具體這篇來重點探討一下這方面的問題。

1、請講述一下瀏覽器從輸入一個url到網(wǎng)頁展示的整個過程？

具體總結(jié)主要為6個步驟：

1. DNS解析 ：進行域名解析，找到對應的服務ip
2. TCP連接 ：進行三次握手，確?？梢赃M行數(shù)據(jù)傳輸
3. 發(fā)送HTTP請求 ：發(fā)送具體的請求信息
4. *服務器處理請求并返回HTTP報文 ：服務器返回詳情的內(nèi)容，具體包括：狀態(tài)碼,響應報頭和響應報文
5. 瀏覽器解析渲染頁面 ：首先瀏覽器解析HTML文件構(gòu)建DOM樹，然后解析CSS文件構(gòu)建渲染樹，等到渲染樹構(gòu)建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上
6. 連接結(jié)束 ：斷開TCP連接

具體深入了解，課詳細查看： 從輸入URL到頁面加載發(fā)生了什么

2、如何優(yōu)化網(wǎng)站性能？

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

3、promise的理解？

Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。它由社區(qū)最早提出和實現(xiàn)，ES6將其寫進了語言標準，統(tǒng)一了用法，原生提供了Promise對象。

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息。Promise提供統(tǒng)一的API，各種異步操作都可以用同樣的方法進行處理。

有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易。

Promise缺點

1）無法取消Promise，一旦新建它就會立即執(zhí)行，無法中途取消。

2）如果不設置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯誤，不會反應到外部。

3）當處于Pending狀態(tài)時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

4）同步調(diào)用，在發(fā)起一個函數(shù)或方法調(diào)用時，沒有得到結(jié)果之前，該調(diào)用就不返回，直到返回結(jié)果；

說明：異步調(diào)用的概念和同步相對，在一個異步調(diào)用發(fā)起后，被調(diào)用者立即返回給調(diào)用者，但調(diào)用者不能立刻得到結(jié)果，被調(diào)用者在實際處理這個調(diào)用的請求完成后，通過狀態(tài)、通知或回調(diào)等方式來通知調(diào)用者請求處理的結(jié)果。

簡單地說，同步就是發(fā)出一個請求后什么事都不做，一直等待請求返回后才會繼續(xù)做事；異步就是發(fā)出請求后繼續(xù)去做其他事，這個請求處理完成后會通知你，這時候就可以處理這個回應了。

4、解決跨域的方法？

什么是跨域

只要協(xié)議、域名、端口有不同，則視為不同的域。（域名和域名對應的IP也是跨域）

跨域的解決方案

1) CORS : (Cross-Origin Resource Sharing)基于服務器支持的跨域，服務器設置Access-Control-Allow-Origin響應頭，瀏覽器可允許跨域

2）服務器代理

3） 設置domain :能從子域設到主域，如http://a.b.c.com—>http://b.c.com—>http://c.com ;具體情況：在頁面中用iframe打開了另一個頁面（前提：兩個頁面主域是相同的）;利用frameElement.contentWindow.document.domain設置frame子頁面的主域，document.domain設置主頁面的主域，之后就能互相獲取dom中的數(shù)據(jù)。缺點是只能用于不同子域間的交互。

4） img的src ：擁有src屬性的img標簽，每次改變src屬性，都會發(fā)起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 屬性值都是相同的，以此用作數(shù)據(jù)傳輸?shù)墓ぞ摺?br>
但由于跨域的限制，是無法獲取另一個frame中的window.name數(shù)據(jù)，所以要使用一個同域的代理(proxy.html)：

7） jsonp ：只能獲取get請求

9） nginx代理

5、瀏覽器的理解？

1） 用戶界面 － 包括地址欄、后退/前進按鈕、書簽目錄等，也就是所看到的除了用來顯示所請求頁面的主窗口之外的其他部分

2） 瀏覽器引擎 － 用來查詢及操作渲染引擎的接口

3） 渲染引擎 － 用來顯示請求的內(nèi)容，例如，如果請求內(nèi)容為html，它負責解析html及css，并將解析后的結(jié)果顯示出來。

4） 網(wǎng)絡 － 用來完成網(wǎng)絡調(diào)用，例如http請求，它具有平臺無關的接口，可以在不同平臺上工作。

5） UI后端 － 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口。

6） jS解釋器 － 用來解釋執(zhí)行JS代碼。

7） 數(shù)據(jù)存儲 － 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術，這是一種輕量級完整的客戶端存儲技術

6、async/await的理解？

async/await其實是Promise的語法糖，它能實現(xiàn)的效果都能用then鏈來實現(xiàn)，這也和我們之前提到的一樣，它是為優(yōu)化then鏈而開發(fā)出來的。從字面上來看，async是“異步”的簡寫，await譯為等待，所以我們很好理解async聲明function是異步的，await等待某個操作完成

await等待的是一個Promise對象，或者是其他值（也就是說可以等待任何值），如果等待的是Promise對象，則返回Promise的處理結(jié)果；如果是其他值，則返回該值本身。并且await會暫停當前async function的執(zhí)行，等待Promise的處理完成。若Promise正常處理（fulfillded），其將回調(diào)的resolve函數(shù)參數(shù)作為await表達式的值，繼續(xù)執(zhí)行async function；若Promise處理異常（rejected），await表達式會把Promise異常原因拋出；另外如果await操作符后面的表達式不是一個Promise對象，則返回該值本身。

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

答：設置cookie的secure屬性，當設置為true時，表示創(chuàng)建的 Cookie 會被以安全的形式向服務器傳輸，也就是只能在 HTTPS 連接中被瀏覽器傳遞到服務器端進行會話驗證，如果是 HTTP 連接則獲取該信息，所以不會被竊取到Cookie 的具體內(nèi)容。 但是這會導致在同一服務器下HTTPS切換到HTTP協(xié)議時，HTTP無法訪問、修改同名Cookie，所以必須在HTTPS下清除Cookie或者設定Cookie的作用域。

8、請講述一下http和https的區(qū)別？

1）https協(xié)議需要到ca申請證書，一般免費證書較少，因而需要一定費用。

2）http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。

3）http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。

4）http的連接很簡單，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進行加密傳輸、身份認證的網(wǎng)絡協(xié)議，比http協(xié)議安全。

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

部分渲染樹（或者整個渲染樹）需要 重新分析并且節(jié)點尺寸需要重新計算 。這被稱為 重排 。注意這里至少會有一次重排-初始化頁面布局 。

由于節(jié)點的 幾何屬性發(fā)生改變或者由于樣式發(fā)生改變 ，例如改變元素背景色時，屏幕上的部分內(nèi)容需要更新。這樣的更新被稱為 重繪 。

造成重排或者重繪的場景

1）添加、刪除、更新 DOM 節(jié)點

2）通過 display: none 隱藏一個 DOM 節(jié)點-觸發(fā)重排和重繪

3）通過 visibility: hidden 隱藏一個 DOM 節(jié)點-只觸發(fā)重繪，因為沒有幾何變化

4）移動或者給頁面中的 DOM 節(jié)點添加動畫

5）添加一個樣式表，調(diào)整樣式屬性

6）用戶行為，例如調(diào)整窗口大小，改變字號，或者滾動。

10、請講述一下ajax的理解和優(yōu)缺點？

答：ajax是無須進行刷新頁面就可以請求后臺的數(shù)據(jù)的一種方法，通過XmlHttpRequest對象來向服務器發(fā)送異步請求，從服務器中獲取數(shù)據(jù)，然后通過js進行操作dom，以此來更新頁面內(nèi)容。

1）、具體實現(xiàn)過程

a、創(chuàng)建一個XmlHttpRequest的對象

b、設置響應HTTP請求的回調(diào)函數(shù)

c、創(chuàng)建一個HTTP請求，指定響應的請求方法、url、參數(shù)等

d、發(fā)送HTTP請求

e、獲取服務端返回的數(shù)據(jù)

f、使用js操作dom更新頁面的內(nèi)容

2）缺點

a、對搜索引擎不友好

b、要實現(xiàn)Ajax下的前后退功能成本較大

c、跨域問題限制

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

答：jsonp是一種非官方跨域數(shù)據(jù)交互協(xié)議，它允許在服務器端集成< script >標簽返回至客戶端，通過javascript回調(diào)的形式實現(xiàn)跨域訪問。因為同源策略的原因，我們不能使用XMLHttpRequest與外部服務器進行通信，但是< script >可以訪問外部資源，所以通過JSON與< script >相結(jié)合的辦法，可以繞過同源策略從外部服務器直接取得可執(zhí)行的JavaScript函數(shù)。

原理

客戶端定義一個函數(shù)，比如jsonpCallback，然后創(chuàng)建< script >，src為url + ?jsonp=jsonpCallback這樣的形式，之后服務器會生成一個和傳遞過來jsonpCallback一樣名字的參數(shù)，并把需要傳遞的數(shù)據(jù)當做參數(shù)傳入，比如jsonpCallback(json)，然后返回給客戶端，此時客戶端就執(zhí)行了這個服務器端返回的jsonpCallback(json)回調(diào)。

優(yōu)缺點

優(yōu)點 -兼容性好，簡單易用，支持瀏覽器與服務器雙向通信

缺點 -只支持GET請求；存在腳本注入以及跨站請求偽造等安全問題

注意：JSONP不使用XMLHttpRequest對象加載資源，不屬于真正意義上的AJAX。

12、如何設計封裝一個組件？

答：組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量低耦合，單一職責，可復用性，可維護性前端組件化設計思路

13、js加載的方式defer/async

答：渲染引擎遇到 script 標簽會停下來，等到執(zhí)行完腳本，繼續(xù)向下渲染defer 是“渲染完再執(zhí)行”，async 是“下載完就執(zhí)行”，defer 如果有多個腳本，會按照在頁面中出現(xiàn)的順序加載，多個async 腳本不能保證加載順序加載

14、css動畫和js動畫的區(qū)別？

答：js 動畫代碼相對復雜一些動畫運行時，對動畫的控制程度上，js 能夠讓動畫，暫停，取消，終止，css動畫不能添加事件動畫性能看，js 動畫多了一個js 解析的過程 ，性能不如 css 動畫好

15、XSS與CSRF兩種跨站攻擊區(qū)別？

xss

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

csrf

csrf 跨站請求偽造，以你的名義，發(fā)送惡意請求，通過 cookie 加參數(shù)等形式過濾，沒法徹底杜絕攻擊，只能提高攻擊門檻

16、ios滑動卡頓

-webkit-overflow-scrolling:touch 可能會在IOS系統(tǒng)低的情況出現(xiàn)滾動條；嘗試溢出解決

還想了解更多的可以去含光丶 - 簡書 看我之前發(fā)的文章。