前端面試題答案收集

PART ONE -- HTML

一、html5 新特性，語義化？

---

新特性：

• 語義特性，添加 <header></header><nav></nav> 等標籤。
• 多媒體，用於媒介回放的 video 和 audio 元素
• 圖像效果，用於繪畫的 canvas 元素， svg 元素
• 離線 & 緩存，對本地離線存儲的更好的支持，localSrorage等
• 設備兼容特性，HTML5 提供了史無前例的數據與應用介入開放接口。
• 連接特性。Server-Sent Event 和 WebSockets 就是其中兩個特性，這兩個特性能幫助咱們實現服務器將數據「推送」到客戶端的功能。
• 性能與集成特性，HTML5 會經過 XMLHttpRequest2 等技術，幫助您的 Web 應用和網站在多樣化的環境中更快速的工做。

語義化：

語義化就是用合理、正確的標籤來展現內容。語義化的優勢有：易於用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構；有利於 SEO，搜索引擎根據標籤來肯定上下文個各個關鍵字的權重；方便其餘設備解析，如讀屏器；有利於開發和維護，語義化更具備可讀性，代碼更好維護，與 CSS3 關係更和諧。

二、瀏覽器的標準模式和怪異模式

---

標準模式：此模式下，瀏覽器按照 HTML 與 CSS 標準對文檔進行解析和渲染；
怪異模式：此模式下，瀏覽器按照就有的非標準的實現方式對文檔進行解析和渲染。

三、使用 data- 的好處

---

• 自定義屬性，能夠被 js 很好的操做
• 經過 js 的 element.dataset. 或 jQuery 的 data(‘‘) 拿到，* 能夠爲 url 等字符

四、什麼是漸進式渲染

---

服務端渲染局部，客戶端渲染局部。（參考： https://segmentfault.com/a/11...）

PART TWO -- CSS

一、盒模型，box-sizing

---

盒模型：Every element in web design is a rectangular box。

CSS3 的 box-sizing 屬性：

• content-box(默認)：width = contentWidth + padding(left/right) + border(left/right)
• padding-box：width = contentWidth(包含padding) + border(left/right)
• border-box：width = contentWidth(包含 padding 和 border)

二、CSS3 新特性，僞類，僞元素，錨僞類

---

CSS3 新增特性主要有（使用比較頻繁的）：過渡（transition）、動畫（animation）、形狀轉換（transform）、文字超出省略號、彈性佈局（flex）、柵格佈局（grid）、多列布局（column-count）、媒體查詢。
（參考：https://segmentfault.com/a/11...）

三、CSS實現隱藏頁面元素的方式

---

1. opacity: 0 -> 只能從視覺上隱藏元素，元素依舊佔據位置並對網頁的佈局起做用，也會影響用戶交互。在讀屏軟件中不會被隱藏。
2. visibility: hidden -> 被隱藏的元素依然會對網頁佈局起做用，但不會影響任何用戶交互。在讀屏軟件中也會被隱藏。
3. diaplsy: none -> 隱藏元素，確保元素不可見而且連盒模型也不生成，被隱藏的元素不佔據任何空間，且一旦設置了 display 爲 none，任何對該元素直接的用戶交互操做都不願能。讀屏軟件也沒法被讀到。
4. position：absolute -> 配合 top 和 left 屬性，將元素移出可視區域，不會影響佈局，又能讓元素保持可操做。
5. clip-path：剪裁（eg: clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);）

四、CSS 實現水平居中和垂直居中

---

本身最經常使用的三種：

.box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.box {
    display: flex:
    align-items: center;
    justify-content: center;
}

.box {
    display: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

(別人寫的總結：https://segmentfault.com/a/11...

五、說說 position, display

---

position：元素在頁面中的佈局遵照一套文檔流的方式，默認的定位屬性值爲 static。它實際上是未被設置定位的。元素若是被定爲了，那麼它的 top, left, bottom, right 值就會生效，能設置定位的屬性是 relative， absolute，fixed。須要注意的是被定爲的元素的層次（z-index）會獲得提升。

• relative：相對定位，元素會在自身文檔流所在位置上被移動，其餘的元素則不會調整位置來彌補它偏離後剩下的空襲。
• absolute：絕對定位，元素脫離文檔流，其餘的元素會調整位置來彌補它偏離後剩下的空隙。
• fixed：固定定位，元素相對的偏移參考是可視窗口

display：每個元素都有默認的 display 屬性。
常見的block屬性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。
常見的inline屬性元素有: span, a, em。

六、解釋一下 css3 的 flexbox，以及適用場景
Flex 意爲「彈性佈局」，用來爲盒狀模型提供最大的靈活性。採用 Flex 佈局的元素，稱爲 flex 容器，簡稱「容器」。它的全部自元素自動成爲容器成員，稱爲 flex 項目（flex item），簡稱「項目」。常規佈局是基於塊和內聯流方向，而 flex 佈局是基於 flex-flow 流，能夠很方便的用來作居中，能對不一樣屏幕大小自適應。在佈局上有了比之前更佳靈活的空間。

七、實現兩欄佈局有哪些方法？

---

參考：七種實現左側固定，右側自適應兩欄佈局的方法

1. 左列定寬，右列自適應

   • margin + float

     <div class="box">
         <div class="left"></div>
         <div class="right-fix">
             <div class="right">
                 <p>right</p><p>right</p>
             </div>
         </div>
     </div>

     .left {
         float: left;
         width: 100px;
         position: relative;
     }
     .right-fix {
         float: right;
         width: 100%;
         margin-left: -100px;
     }
     .right {
         margin-left: 120px; // 造成 20px 間隔
     }

   • absolute

     <div class="box">
         <div class="left"></div>
         <div class="right"></div>
     </div>

     .box{
         position: relative;
     }
     .left{
         position: absolute;
         left: 0;
         width: 100px;
     }
     .right{
         position: absolute;
         left: 120px; // 造成 20px 間隔
         right: 0;
     }

2. 左列不定寬，右列自適應

• float + BFC

這個方法主要是應用到 BFC 的一個特性
浮動元素的塊狀兄弟元素會五十付哦那個元素的位置，儘可能佔滿一整行，這樣該兄弟元素就會被浮動元素覆蓋
若浮動元素的塊狀兄弟元素爲BFC，則不會佔滿一整行，而是根據浮動元素的寬度，佔據該行剩下的寬度，避免與浮動元素重疊。
*浮動元素與其塊狀BFC兄弟元素之間的margin能夠生效，這將繼續減小兄弟元素的寬度

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.left{
    float: left;
    width: 100px;
    margin-right: 20px; //造成 20px 的間隔
}
.right{
    overflow: hidden; //經過設置overflow: hidden來觸發BFC特性
}

• table 佈局

  <div class="box">
      <div class="left"></div>
      <div class="right"></div>
  </div>

  .box{
      display: table;
      width: 100%;
      table-layout: fixed;
  }
  .left, .right{
      display: table-cell;
  }
  .left{
      width: 100px;
      padding-right: 20px;
  }

• flex

  <div class="box">
      <div class="left"></div>
      <div class="right"></div>
  </div>

  .parent{
      display: flex;
  }
  .left{
      margin-right: 20px;
  }
  .right{
      flex: 1;
  }

PART THREE -- JS

一、JS的基本類型有哪些？引用類型有哪些？null 和 undefined 的區別。

---

JS基本類型：null，undefined，boolean，number，string，symbol。
引用類型：Object
undefined：定義了可是沒有賦初始值
null：未定義的對象

二、引用類型和基本類型有什麼區別？哪一個是存在堆哪個是存在棧上面的？

---

基本數據類型

• 基本數據類型的值是不可變的
• 基本數據類型不能夠添加屬性和方法
• 基本數據類型的賦值是簡單賦值
• 基本數據類型的比較是值的比較
• 基本數據類型是存放在棧區的

引用類型

• 引用類型的值是能夠改變的
• 引用類型能夠添加屬性和方法
• 引用類型的賦值是對象引用
• 引用類型的比較是引用的比較
• 引用類型是同時保存在棧區和堆區中的

三、new 一個對象具體作了什麼？

---

新生成一個對象 -> 連接到原型 -> 綁定 this -> 返回新對象

四、箭頭函數和普通函數有什麼區別？

---

• 箭頭函數不能做爲構造函數，不能使用 new
• 箭頭函數只能做爲匿名函數使用
• 箭頭函數中的 this 會捕獲其上下文的 this 值
• 箭頭函數不綁定 arguments， 取而代之用 rest 參數（...）解決
• 箭頭函數當方法使用的時候沒有定義 this 綁定
• 箭頭函數不能看成 Generator 函數，不能使用 yield 關鍵字
• 箭頭函數不能返回對象字面量
• 箭頭函數不能換行
• 普通函數每一個都有其本身的 this 值，構造函數的 this 指向一個新的對象；嚴格模式下的函數的 this 指向 undefined；若是函數是做爲對象的方法被調用的，則 this 指向了那個調用它的對象

五、對閉包的的理解

---

之前寫的關於閉包的一篇文章

六、property 和 attribute 的區別

---

Property 是 DOM 中的屬性，是 JavaScript 裏的對象；
Attribute 是 HTML 標籤上的特性，它的值只可以是字符串。

七、setTimeout和promise的執行順序

---

看題：

setTimeout(function() {
   console.log(1)
}, 0);

new Promise(function(resolve, reject) {
  console.log(2)
  for (var i = 0; i < 10000; i++) {
    if(i === 10) {console.log(10)}
       i == 9999 && resolve();
  }
   console.log(3)
}).then(function() {
   console.log(4)
})

console.log(5);

以上代碼的輸出結果爲：2 10 3 5 4 1

setTimeout(fn, 0) 表示當即執行，也就是用來改變任務的執行順序，要求瀏覽器「儘量快」的進行回調;Promise 新建後當即執行，Promise 構造函數裏的代碼是同步執行的;then 方法指向的回調將在當前腳本全部同步任務執行完後執行
then 比 setTimeout 執行要早，是由於其實 setTimeout 又一個最小執行時間（minimun delay）爲 4ms，並非 0s 執行。
參考文章

未完待續...