Web前端面試題目彙總

Stephanie發表於2017-12-28

Web前端面試題目彙總

一、HTML/CSS部分

  • 1.什麼是盒子模型?

    盒子模型包含內容(content)、內邊距(pandding)、外邊距(margin)和邊框(border)四部分 。
    
  • 2.行級元素有哪些?塊級元素有哪些? 空(void)元素有那些?

    (1)行級元素
       
        特點:a.可以和其他元素處於一行,不用必須另起一行。
       
           b.元素的高度、寬度及頂部和底部邊距不可設定。
       
           c.元素的寬度就是它包含的文字、圖片的寬度,不可改變。
       常見的行級元素:a,span,img,input,textarea,label,button等
       
       (2)塊級元素 特點:a.每個塊級元素都是獨自佔一行,其後的元素也只能另起一行,並不能兩個元素共用一行。
       
         b.元素的高度、寬度、行高和頂底邊距都是可以設定的。  
       
         c.元素的寬度如果不設定的話,預設為父元素的寬度。
       
       常見的塊級元素:div、p、h1...h6、ol、ul、dl、table、address、
       
       blockquote,form等
       總結:(1)css樣式中用display:inline將塊級元素設為行級元素
            (2)可以用display:block將行級元素設為塊級元素
    
  • 3.簡述一下src與href的區別

    (1)href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文件(連結)之間的連結,用於超連結。
       (2)src是指向外部資源的位置,指向的內容將會嵌入到文件中當前標籤所在位置;在請求src資源時會將其指向的資源下載並應用到文件內,例如js指令碼,img圖片和frame等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源載入、編譯、執行完畢,圖片和框架等元素也如此,類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
       
  • 4.什麼是CSS Hack?
    一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
    IE瀏覽器Hack一般又分為三種,條件Hack、屬性級Hack、選擇符Hack
 // 1、條件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、屬性Hack
    .test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、選擇符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */
  • 5.position的值, relative和absolute分別是相對於誰進行定位的?

     absolute :生成絕對定位的元素, 相對於最近一級的 定位不是 static 的父元素來進行定位。
       
       fixed (老IE不支援)生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。
       
       relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。
       
       static 預設值。沒有定位,元素出現在正常的流中
       
       sticky 生成粘性定位的元素,容器的位置根據正常文件流計算得出
    

五、常見題

  • 1.分析輸入url到頁面返回的過程

       第一步:客戶機提出域名解析請求,並將該請求傳送給本地的域名伺服器。
       第二步:當本地的域名伺服器收到請求後,就先查詢本地的快取,如果有該記錄項,則本地的域名伺服器就直接把查詢的結果返回。
       第三步:如果本地的快取中沒有該記錄項,則本地的域名伺服器就直接把請求傳送給根域名伺服器,然後根域名伺服器再返回給本地域名伺服器一個所查詢域(根的子域)的主域名伺服器的地址。
       第四步:本地伺服器再向上一步返回的域名伺服器傳送請求,然後接受請求的伺服器查詢自己的快取,如果沒有該記錄項,則返回相關的下級的域名伺服器的地址。
       第五步:重複第四步,直到找到正確的記錄。
    
    
  • 2.web前端效能優化的方法

     a.減少http請求,合理設定HTTP快取
          http協議是無轉檯的應用層協議,意味著每次http請求都需要建立通訊鏈路、進行資料傳輸,而在伺服器端,每個http都需要啟動獨立的執行緒去出來處理。
         減少http的主要手段是合併css、合併javascript、合併圖片b.使用瀏覽器快取
       (1)靜態資原始檔可通過設定http頭中的cache-control和expires的屬性,可設定瀏覽器快取。
       (2)靜態資源變化需及時應用到客戶端瀏覽器,可通過改變檔名實現,即更新javascript檔案並不是更新javascript檔案內容,而是生成新的js檔案並更新html檔案中的引用。
       (3)使用瀏覽器快取策略的網站在更新靜態資源時,應採用逐量更新的方法。
       c.啟用壓縮
       伺服器端對檔案壓縮,在瀏覽器端對檔案解壓縮,可有效減少通訊傳輸的資料量。
       d.lazyload image
       例如圖片,在頁面剛載入時只載入第一屏,當使用者繼續往後滾屏時才載入後續的圖片。
       e.css放在頁面最上部,javascript放在頁面最下面
       f.減少cookie傳輸
       cookie包含在每次請求和響應中,太大的cookie會嚴重影響資料傳輸。
       g.javascript程式碼優化
    

相關文章