【前端面试题】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的一些面试题(