IT培訓-高端面授IT培訓機構
        
          
            云和教育：云和數據集團高端IT職業教育品牌
            
        
          
    
          

          



          
    
          
        
          
                        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
          
        
          
            
          
                
          
                    
            
                        
          • 
                            國家級
            全民數字素養與技能培訓基地            
                        
            • 
                        
          • 
                            河南省
            第一批產教融合型企業建設培育單位            
                        
            • 
                        
          • 
                            鄭州市
            數字技能人才（碼農）培養評價聯盟            
                        
            • 
                        
                    
          
                
          
            
          
        
          
    
          

          





          

          
    
          
        
                
          
            
          測試 | 幾道前端開發面試題，你會做嗎？
          
            
            
                
          • 
                    
            發布時間：
            
                    
            2020-12-16
            
                
            • 
                
          • 
                    
            版權所有：
            
                    
            云和教育
            
                
            • 
                
          • 
                    
            分享：
            
                    
            
                        
                        
            
                            
                            
                            
                            
                            
                            
                            
                        
            
                        
                        
                    
            
                
            • 
            
          
            
          
                
          最近總結了一些前端面試一面題目，比較偏基礎，大部分題目都應該會，即使不會也似曾相識，都能說上幾句。但為什么有些人能過有些人過不了，這就是考查你的基礎知識是否全面且扎實。會是應該的，但你的答案一定要詳細并且有些題要說出多種答案，這就需要各位平常的積累了。
          

          

          css
          

          calc, support, media各自的含義及用法？
          

          @support主要是用于檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個屬性，你可以寫一套樣式，如果不支持某個屬性，你也可以提供另外一套樣式作為替補。
          

          calc() 函數用于動態計算長度值。calc()函數支持 “+”, “-“, “*”, “/” 運算；
          

          @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
          

          css水平、垂直居中的寫法，請至少寫出4種？
          

          這題考查的是css的基礎知識是否全面，所以平時一定要注意多積累
          

          水平居中
          

            

          • 行內元素:?text-align: center
            • 

          • 塊級元素:?margin: 0 auto
            • 

          • position:absolute +left:50%+ transform:translateX(-50%)
            • 

          • display:flex + justify-content: center
            • 

          

          垂直居中
          

            

          • 設置line-height 等于height
            • 

          • position：absolute +top:50%+ transform:translateY(-50%)
            • 

          • display:flex + align-items: center
            • 

          • display:table+display:table-cell + vertical-align: middle;
            • 

          

          1rem、1em、1vh、1px各自代表的含義？
          

          rem
          

          rem是全部的長度都相對于根元素<html>元素。通常做法是給html元素設置一個字體大小，然后其他元素的長度單位就為rem。
          

          em
          

            

          • 子元素字體大小的em是相對于父元素字體大小
            • 

          • 元素的width/height/padding/margin用em的話是相對于該元素的font-size
            • 

          

          vw/vh
          

          全稱是 Viewport Width 和 Viewport Height，視窗的寬度和高度，相當于 屏幕寬度和高度的 1%，不過，處理寬度的時候%單位更合適，處理高度的 話 vh 單位更好。
          

          px
          

          px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
          

          一般電腦的分辨率有{1920*1024}等不同的分辨率
          

          1920*1024 前者是屏幕寬度總共有1920個像素,后者則是高度為1024個像素
          

          畫一條0.5px的直線？
          

          考查的是css3的transform
          

          

          ?
          

          height: 1px;transform: scale(0.5);
          

          

          

          說一下盒模型？
          

          盒模型是css中重要的基礎知識，也是必考的基礎知識
          

          盒模型的組成，由里向外content,padding,border,margin.
          

          在IE盒子模型中，width表示content+padding+border這三個部分的寬度
          

          在標準的盒子模型中，width指content部分的寬度
          

          box-sizing的使用
          

          

           ?box-sizing: content-box 是W3C盒子模型
          
box-sizing: border-box 是IE盒子模型
          

          

          box-sizing的默認屬性是content-box
          

          畫一個三角形？
          

          這屬于簡單的css考查，平時在用組件庫的同時，也別忘了原生的css
          

          

          

          清除浮動的幾種方式，及原理？
          

          清除浮動簡單，但這題要引出的是BFC，BFC也是必考的基礎知識點
          

            

          • ::after / <br> / clear: both
            • 

          • 創建父級?BFC(overflow:hidden)
            • 

          • 父級設置高度
            • 

          

          BFC （塊級格式化上下文），是一個獨立的渲染區域，讓處于?BFC?內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
          

          觸發條件:
          

            

          • 根元素
            • 

          • position: absolute/fixed
            • 

          • display: inline-block / table
            • 

          • float?元素
            • 

          • ovevflow !== visible
            • 

          

          規則:
          

            

          • 屬于同一個?BFC?的兩個相鄰?Box?垂直排列
            • 

          • 屬于同一個?BFC?的兩個相鄰?Box?的?margin?會發生重疊
            • 

          • BFC?的區域不會與?float?的元素區域重疊
            • 

          • 計算?BFC?的高度時，浮動子元素也參與計算
            • 

          • 文字層不會被浮動層覆蓋，環繞于周圍
            • 

          

          HTML
          

          說一下<label>標簽的用法
          

          label標簽主要是方便鼠標點擊使用，擴大可點擊的范圍，增強用戶操作體驗
          

          遍歷A節點的父節點下的所有子節點
          

          這題考查原生的js操作dom,屬于非常簡單的基礎題，但長時間使用mvvm框架，可能會忘記
          

          

          ?
          

          <script>    var b=document.getElementById("a").parentNode.children;    console.log(b)</script>
          

          

          

          JS
          

          用js遞歸的方式寫1到100求和？
          

          遞歸我們經常用到，vue在實現雙向綁定進行數據檢驗的時候用的也是遞歸，但要我們面試的時候手寫一個遞歸，如果對遞歸的概念理解不透徹，可能還是會有一些問題。
          

          

          

          頁面渲染html的過程？
          

          不需要死記硬背，理解整個過程即可
          

          瀏覽器渲染頁面的一般過程：
          

          1.瀏覽器解析html源碼，然后創建一個 DOM樹。并行請求 css/image/js在DOM樹中，每一個HTML標簽都有一個對應的節點，并且每一個文本也都會有一個對應的文本節點。DOM樹的根節點就是 documentElement，對應的是html標簽。
          

          2.瀏覽器解析CSS代碼，計算出最終的樣式數據。構建CSSOM樹。對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優先級：瀏覽器默認設置 < 用戶設置 < 外鏈樣式 < 內聯樣式 < html中的style。
          

          3.DOM Tree + CSSOM –> 渲染樹（rendering tree）。渲染樹和DOM樹有點像，但是是有區別的。
          

          DOM樹完全和html標簽一一對應，但是渲染樹會忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節點。渲染樹中的每一個節點都存儲有對應的css屬性。
          

          4.一旦渲染樹創建好了，瀏覽器就可以根據渲染樹直接把頁面繪制到屏幕上。
          

          以上四個步驟并不是一次性順序完成的。如果DOM或者CSSOM被修改，以上過程會被重復執行。實際上，CSS和JavaScript往往會多次修改DOM或者CSSOM。
          

          說一下CORS？
          

          CORS是一種新標準，支持同源通信，也支持跨域通信。fetch是實現CORS通信的
          

          如何中斷ajax請求？
          

          一種是設置超時時間讓ajax自動斷開，另一種是手動停止ajax請求，其核心是調用XML對象的abort方法，ajax.abort()
          

          說一下事件代理？
          

          事件委托是指將事件綁定到目標元素的父元素上，利用冒泡機制觸發該事件
          

          

          

          target、currentTarget的區別？
          

          currentTarget當前所綁定事件的元素
          

          target當前被點擊的元素
          

          說一下宏任務和微任務？
          

            

          1. 宏任務：當前調用棧中執行的任務稱為宏任務。（主代碼快，定時器等等）。
            2. 

          2. 微任務：當前（此次事件循環中）宏任務執行完，在下一個宏任務開始之前需要執行的任務為微任務。（可以理解為回調事件，promise.then，proness.nextTick等等）。
            3. 

          3. 宏任務中的事件放在callback queue中，由事件觸發線程維護；微任務的事件放在微任務隊列中，由js引擎線程維護。
            4. 

          

          說一下繼承的幾種方式及優缺點？
          

          說比較經典的幾種繼承方式并比較優缺點就可以了
          

            

          1. 借用構造函數繼承，使用call或apply方法，將父對象的構造函數綁定在子對象上
            2. 

          2. 原型繼承，將子對象的prototype指向父對象的一個實例
            3. 

          3. 組合繼承
            4. 

          

          原型鏈繼承的缺點
          

            

          • 字面量重寫原型會中斷關系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數。
            • 

          

          借用構造函數（類式繼承）
          

            

          • 借用構造函數雖然解決了剛才兩種問題，但沒有原型，則復用無從談起。
            • 

          

          組合式繼承
          

            

          • 組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數復用，又保證每個實例都有它自己的屬性。
            • 

          

          說一下閉包？
          

          閉包的實質是因為函數嵌套而形成的作用域鏈
          

          閉包的定義即：函數?A?內部有一個函數?B，函數?B?可以訪問到函數?A?中的變量，那么函數?B?就是閉包
          

          export和export default的區別？
          

          使用上的不同
          

          

          

          說一下自己常用的es6的功能？
          

          此題是一道開放題，可以自由回答。但要注意像let這種簡單的用法就別說了，說一些經常用到并有一定高度的新功能
          

          像module、class、promise等，盡量講的詳細一點。
          

          什么是會話cookie,什么是持久cookie?
          

          cookie是服務器返回的，指定了expire time（有效期）的是持久cookie,沒有指定的是會話cookie
          

          數組去重？
          

          此題看著簡單，但要想面試官給你高分還是有難度的。至少也要寫出幾種方法
          

          js
          

          

          es6
          

          

          

          get、post的區別
          

          此題比較簡單，但一定要回答的全面
          

          1.get傳參方式是通過地址欄URL傳遞，是可以直接看到get傳遞的參數，post傳參方式參數URL不可見，get把請求的數據在URL后通過？連接，通過&進行參數分割。psot將參數存放在HTTP的包體內
          

          2.get傳遞數據是通過URL進行傳遞，對傳遞的數據長度是受到URL大小的限制，URL最大長度是2048個字符。post沒有長度限制
          

          3.get后退不會有影響，post后退會重新進行提交
          

          4.get請求可以被緩存，post不可以被緩存
          

          5.get請求只URL編碼，post支持多種編碼方式
          

          6.get請求的記錄會留在歷史記錄中，post請求不會留在歷史記錄
          

          7.get只支持ASCII字符，post沒有字符類型限制
          

          你所知道的http的響應碼及含義？
          

          此題有過開發經驗的都知道幾個，但還是那句話，一定要回答的詳細且全面。
          

          1xx(臨時響應)
          

          100: 請求者應當繼續提出請求。
          

          101(切換協議) 請求者已要求服務器切換協議，服務器已確認并準備進行切換。
          

          2xx(成功)
          

          200：正確的請求返回正確的結果
          

          201：表示資源被正確的創建。比如說，我們 POST 用戶名、密碼正確創建了一個用戶就可以返回 201。
          

          202：請求是正確的，但是結果正在處理中，這時候客戶端可以通過輪詢等機制繼續請求。
          

          3xx(已重定向)
          

          300：請求成功，但結果有多種選擇。
          

          301：請求成功，但是資源被永久轉移。
          

          303：使用 GET 來訪問新的地址來獲取資源。
          

          304：請求的資源并沒有被修改過
          

          4xx(請求錯誤)
          

          400：請求出現錯誤，比如請求頭不對等。
          

          401：沒有提供認證信息。請求的時候沒有帶上 Token 等。
          

          402：為以后需要所保留的狀態碼。
          

          403：請求的資源不允許訪問。就是說沒有權限。
          

          404：請求的內容不存在。
          

          5xx(服務器錯誤)
          

          500：服務器錯誤。
          

          501：請求還沒有被實現。
          

          

          

          云和數據HTML5全棧精英班，經過多年的技術迭代和項目革新，逐步發展成為集網站、手機應用、小程序、快應用、桌面應用、后臺開發等多領域開發課程，新增Egg、TypeScript、Vue、React、HybridAPP等時下最流行的新技術，結合企業實際用人需求，只為培養更多高端IT技術人才。
          

          ?