Web前端面試題目彙總

時間 2019-11-09

標籤 web 前端面試題目彙總欄目 HTML 简体版

原文原文鏈接

Web前端面試題目彙總

1、HTML/CSS部分

1.什麼是盒子模型？javascript

盒子模型包含內容(content)、內邊距(pandding)、外邊距(margin)和邊框(border）四部分 。

2.行級元素有哪些？塊級元素有哪些？空(void)元素有那些？css

(1)行級元素
   
    特色：a.能夠和其餘元素處於一行，不用必須另起一行。
   
    　　　b.元素的高度、寬度及頂部和底部邊距不可設置。
   
    　　　c.元素的寬度就是它包含的文字、圖片的寬度，不可改變。
   常見的行級元素:a,span,img,input,textarea,label,button等
   
   (2)塊級元素 特色：a.每一個塊級元素都是獨自佔一行，其後的元素也只能另起一行，並不能兩個元素共用一行。
   
   　　b.元素的高度、寬度、行高和頂底邊距都是能夠設置的。　　
   
   　　c.元素的寬度若是不設置的話，默認爲父元素的寬度。
   
   常見的塊級元素：div、p、h1...h六、ol、ul、dl、table、address、
   
   blockquote,form等
   總結：(1)css樣式中用display:inline將塊級元素設爲行級元素
        (2)能夠用display:block將行級元素設爲塊級元素

3.簡述一下src與href的區別html

(1)href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
   (2)src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

4.什麼是CSS Hack?
通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。
IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack

// 一、條件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 二、屬性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 三、選擇符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 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

5、常見題java

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

第一步：客戶機提出域名解析請求，並將該請求發送給本地的域名服務器。
   第二步：當本地的域名服務器收到請求後，就先查詢本地的緩存，若是有該記錄項，則本地的域名服務器就直接把查詢的結果返回。
   第三步：若是本地的緩存中沒有該記錄項，則本地的域名服務器就直接把請求發送給根域名服務器，而後根域名服務器再返回給本地域名服務器一個所查詢域（根的子域）的主域名服務器的地址。
   第四步：本地服務器再向上一步返回的域名服務器發送請求，而後接受請求的服務器查詢本身的緩存，若是沒有該記錄項，則返回相關的下級的域名服務器的地址。
   第五步：重複第四步，直到找到正確的記錄。

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代碼優化