【前端面试题】2021/3/12挺经典的面试题，这个经历很深刻。
今天面試去啦，填了職業性格測試，人格測試及招聘的基本經歷信息，面試官是技術頭頭，柔中帶鋼，問題潤物細無聲的感覺，很考驗基本功。
上午10:30面試了一個達達的前端，采用的是線上騰訊會議的方式，面試官是個大美女，最窒息的操作是讓我投屏在瀏覽器控制臺敲代碼，用編譯器它不香？下午4:00面試的是一家生態監控的公司，比較注重完美人格的公司，除了技術主管談到了的技術問題，其他的流程都是職業性格測試，職業經歷，人格測試等。這里總結一下幾個回答不是很好的問題。
目錄
?
1.使用正則表達式驗證手機號碼
2.畫一條0.5px的線？
3.從輸入URL到頁面加載完成期間經歷了什么？
4.JavaScript是單線程，怎樣執行異步的代碼 ？
5.什么是正向代理與反向代理？
1.使用正則表達式驗證手機號碼
驗證正則解釋
2.畫一條0.5px的線？
我當時直接來一個border：0.5px.面試問我確定？因為平時可能都是直接border：1px.沒注意細節。這里操作一下。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>測試0.5px</title><style type="text/css">#demo{border:0.5px solid #000000;background-color: red;width: 150px;height: 150px;}</style></head><body><div id="demo">我是求職者</div></body> </html>好像也沒啥問題
面試官問到的應該不是這個問題，查一下資料。指的應該是某些0.5px在移動端低版本為0px的問題.經過試驗你會發現有些版本可能會有誤差，最小尺寸問題不詳，按照他的思路擼一下吧。
采用meta?viewport的方式。
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />采用transform: scale()的方式
將繪制出來的線條的高度進行半倍的縮放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>boardTest</title> <style> p{ margin: 50px auto; padding: 5px 10px 5px 10px; color: red; text-align: center; width: 60px; } p:first-child{ border-bottom: 1px solid red; } p:last-child{ position: relative; } p:last-child:after { position: absolute; content: ''; width: 100%; left: 0; bottom: 0; height: 1px; background-color: red; -webkit-transform: scale(1,0.5); transform: scale(1,0.5); -webkit-transform-origin: center bottom; transform-origin: center bottom } </style> </head> <body> <div> <p>點擊1</p> <p>點擊2</p> </div> </body> </html>基本就是上面的方法啦，當然可能也可以用漸變色linear-gradient的方式，不談了。
3.從輸入URL到頁面加載完成期間經歷了什么？
1、DNS域名解析
?回車敲響的那一刻，瀏覽器檢查了輸入框，www.sunjiaoshou.com是什么鬼東西？？我需要的可是IP地址呀！萬般無奈之下找向了瀏覽器緩存，讓其查找是否有這家伙的記錄，結果并沒有發現，此時找向系統緩存，主要去查找了系統中的hosts文件，同樣沒有，此時找向路由器緩存，查看路由器映射表，然而，并沒有！于是，計算機將域名發給了本地DNS服務器（提供本地連接的服務商），本地DNS服務器找不到會將域名發送給其他服務器，進行遞歸過程，首先會發送到根域名服務器去找，返回頂級域名服務器的IP地址，再請求頂級域名服務器IP返回二級域名服務器IP，再請求二級域名服務器IP返回三級域名服務器IP......直到找到對應的IP地址，返回給瀏覽器。???????????????
2、發起TCP連接（三次握手）
? 拿到IP地址后的瀏覽器很開心，終于可以有目的的去聯系遠方的“朋友”了，此時作用于傳輸層的TCP協議向遠端服務器發起連接請求，此舉成為三次握手：
①源端->遠端：你好，我想跟你連接可以嗎？（SYN=1,seq=x）
②遠端->源端：可以，你確定要連接是吧？（SYN=1,ACK=1,seq=y,ack=x+1）
③源端->遠端：確定，我們連接吧！（ACK=1,seq=x+1,ack=y+1）
3、發送HTTP請求，接受HTTP響應
????????OK，連接上了，傳輸吧，這時就需要將用戶輸入的地址封裝成HTTP Request請求報文，發送到服務器，服務器收到請求后會發出應答，即響應數據。
????????HTTP請求報文格式：請求行+請求頭+空行+消息體，請求行包括請求方式（GET/POST/DELETE/PUT）、請求資源路徑（URL）、HTTP版本號????????
????????HTTP響應報文格式：狀態行+響應頭+空行+消息體，狀態行包括HTTP版本號、狀態碼、狀態說明。
?
4、斷開TCP連接（四次揮手）
????????傳也傳完了，那咱們斷開連接吧！
①源端->遠端：好了，咱們斷開吧（FIN=1,seq=u）
②遠端->源端：行，等我稍微檢查一下還有沒有要發你的數據（ACK=1,seq=v,ack=u+1）
③遠端->源端：可以了，咱們斷開吧，拜拜（FIN=1,ACK=1,seq=w,ack=u+1）
④源端->遠端：好的，再會，拜拜（ACK=1,seq=u+1,ack=w+1）
5、瀏覽器解析HTML代碼，請求js，css等資源，最后進行頁面渲染，呈現給用戶
????????瀏覽器獲取文件后開始利用內核解析了，解析過程中也會出現一些HTTP請求請求一些資源，如js，css等文件，將這些文件下載到本地。瀏覽器解析HTML文件時會自上而下，起初產生一個DOM樹，解析CSS之后產生CSS規則樹，后將兩樹進行融合，合成為渲染層，最后調用操作系統的Native GUI的API繪制。
4.JavaScript是單線程，怎樣執行異步的代碼 ？
JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript 不能有多個線程呢 ？這樣能提高效率啊。
JavaScript 的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript 的主要用途是與用戶互動，以及操作 DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript 同時有兩個線程，一個線程在某個 DOM 節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？
所以，為了避免復雜性，從一誕生，JavaScript 就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
為了利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創建多個線程，但是子線程完全受主線程控制，且不得操作 DOM。所以，這個新標準并沒有改變 JavaScript 單線程的本質。
單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。
js 引擎執行異步代碼而不用等待，是因為有 消息隊列和事件循環。
- 消息隊列：消息隊列是一個先進先出的隊列，它里面存放著各種消息。
- 事件循環：事件循環是指主線程重復從消息隊列中取消息、執行的過程。
實際上，主線程只會做一件事情，就是從消息隊列里面取消息、執行消息，再取消息、再執行。當消息隊列為空時，就會等待直到消息隊列變成非空。而且主線程只有在將當前的消息執行完成后，才會去取下一個消息。這種機制就叫做事件循環機制，取一個消息并執行的過程叫做一次循環。
while(true) {var message = queue.get();execute(message); }主線程在執行完當前循環中的所有代碼后，就會到消息隊列取出這條消息(也就是 message 函數)，并執行它。到此為止，就完成了工作線程對主線程的通知，回調函數也就得到了執行。如果一開始主線程就沒有提供回調函數，AJAX 線程在收到 HTTP 響應后，也就沒必要通知主線程，從而也沒必要往消息隊列放消息。
5.什么是正向代理與反向代理？
正向代理
正向代理類似一個跳板機，代理訪問外部資源
比如我們國內訪問谷歌，直接訪問訪問不到，我們可以通過一個正向代理服務器，請求發到代理服，代理服務器能夠訪問谷歌，這樣由代理去谷歌取到返回數據，再返回給我們，這樣我們就能訪問谷歌了
正向代理的用途：
（1）訪問原來無法訪問的資源，如google
? ? ?? （2） 可以做緩存，加速訪問資源
（3）對客戶端訪問授權，上網進行認證
（4）代理可以記錄用戶訪問記錄（上網行為管理），對外隱藏用戶信息
?反向代理
反向代理（Reverse Proxy）實際運行方式是指以代理服務器來接受internet上的連接請求，然后將請求轉發給內部網絡上的服務器，并將從服務器上得到的結果返回給internet上請求連接的客戶端，此時代理服務器對外就表現為一個服務器
?
反向代理的作用：
（1）保證內網的安全，阻止web攻擊，大型網站，通常將反向代理作為公網訪問地址，Web服務器是內網
（2）負載均衡，通過反向代理服務器來優化網站的負載
?
好啦，本期的內容就分享到這里，我們下期見！
??????????? 好書不厭百回讀，熟讀自知其中意。讓學習成為習慣，用知識改變命運，讓博客見證成長，用行動證明努力。
??????????? 如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！
??????????? 聽說 👉 點贊 👈 的人運氣不會太差，每一天都會元氣滿滿呦！^ _ ^ ?? ?? ??
??????????? 碼字不易，大家的支持就是我堅持下去的動力。點贊后不要忘了👉 關注 👈我哦！
??????????? 更多精彩內容請前往 孫叫獸的博客
微信公眾號【電商程序員】，分享改變自己的項目。
如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 👇 留個言。或者你有更好的想法，歡迎一起交流學習~~~
?
?
?
?
總結
以上是生活随笔為你收集整理的【前端面试题】2021/3/12挺经典的面试题，这个经历很深刻。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移动端适配的几种解决办法
- 下一篇： 【前端面试题】关于一些js的一些面试题（