前端面試題(十四)

• title與h1的區別、b與strong的區別、i與em的區別

  • title與h1的區別

    • 定義
      title 是網站標題,一個頁面只能有一個
      h1 是文章的主題
    • 做用
      title歸納網站信息，能夠直接告訴搜索引擎和用戶這 個網站是關於什麼主題和內容的，是顯示在網頁Tab欄裏的;
      h1突出文章主題，面對用戶，更突出其視覺效果，指向頁面主體信息，是顯示在網頁中的
    • 注意
      若是title爲空，可是頁面存在h1,b,strong標籤，搜索引擎會默認頁面title爲h1內的內容，因此 得出結論h1是在沒有外界干擾下除title之外第二個能強調頁面主旨的標記，在一個頁面中應該使用且只使用一次h1標記

  • b與strong的區別

    • 定義
      b(bold)是實體標籤，用來給文字加粗
      strong是邏輯標籤，做用是增強字符語氣
    • 區別
      b標籤只是加粗的樣式，沒有實際含義，經常使用來表達無強調或着中意味的粗體文字
      strong表示標籤內字符重要，用以強調，其默認格式是加粗，可是能夠經過css添加樣式，使用別的樣式強調
    • 注意
      爲了符合css3的規範語義化，b應儘可能少用而改用strong

  • i與em的區別

    • 定義
      i(italic)是實體標籤，用來使字符傾斜
      em(emphasis)是邏輯標籤，做用是強調文本內容
    • 區別
      i標籤只是斜體的樣式，沒有實際含義，經常使用來表達無強調或着重意味的斜體，好比生物學名、術語、外來語
      em表示標籤內字符重要，用以強調，其默認格式是斜體，可是能夠經過CSS添加樣式
    • 注意
      爲了符合CSS3的規 範，i應儘可能少用而改用em
      物理元素是告訴瀏覽器我應該以何種格式顯示文字，邏輯元素告訴瀏覽器這些文字有怎麼樣的重要性
      對於搜索引擎來講em和strong比i和b要重視的多

---

• style標籤寫在body前和body後的區別

  • style 標籤寫在 body 前:
    利於瀏覽器的逐步渲染

    resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint

  • style 標籤寫在 body 後:
    因爲瀏覽器以逐行方式對html文檔進行解析,當解析到寫在尾部的樣式表（外聯或寫在style標籤）會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後從新渲染

    在windows的IE下可能會出現FOUC現象（即樣式失效致使的頁面閃爍問題）

---

• 寫一個數組去重的方法（支持多維數組）

  先將多維數組降維
  而後經過 es6 的 Set 去重

  function flat(arr, target) {
      arr.forEach(item => {
          if (Array.isArray(item)) {
            flat(item, target)
          } else {
            target.push(item)
          }
      })
  }
  
  function flatArr(arr) {
      let result = []
      flat(arr, result)
  
      return result
  }
  
  function uniqueArr(arr) {
      return [...new Set(flatArr(arr))]
  }
  
  const result = uniqueArr([1, 2, 3, 4, [3, 4, [4, 6]]])
  
  console.log(result) // 1,2,3,4,6

面試題摘自Github