金山面試總結

原本是想一面過了再發出來的（想給人一種深藏功與名的感受hhhh），可是一面沒有過哦（涼的理所固然）。我的以爲仍是基礎知識不夠紮實（深度和廣度都不夠），除了技術，其餘方面表現的都還行哈哈哈哈（但是有什麼用？？？！！！）

首先是自我介紹，而後面試官致命三連：以前有實習經歷嗎？答：沒有（笑）；以前有寫過c++，java嗎？答：暫時尚未學習後臺語言，等工做了前端學好了會學習一門後臺語言的（心裏os：我要是會，我還會來應聘前端崗？）；以前有學過其餘語言嗎？答：沒有（其實大一學過C語言，可是不敢回答，懼怕被提問）

1.移動端點透問題的處理

• 1.1 移動端點透問題是啥？

  當一個元素放覆蓋了另外一個元素, 覆蓋的元素監聽touch事件, 若是被覆蓋的元素監聽click事件，touch事件觸發後覆蓋的元素就消失了, 那麼就會出現點透問題

• 1.2 點透問題的出現緣由

  ① 當手指觸摸到屏幕的時候，系統生成兩個事件，一個是touch 一個是click
  ② touch事件先執行，執行完後從文檔上消失
  ③ click事件有100~300ms延遲，因此後執行
  ④ 但click事件執行的時候觸發的元素已經消失了, 對應的位置如今是下面的元素, 因此就觸發了下面元素的click事件

• 1.3 移動端點透問題解決方案

  ① 在touch事件中添加event.preverDefault(); 阻止事件擴散

  let oClick = document.querySelector(".click");
  let oTap = document.querySelector(".tap");
  oTap.ontouchstart = function (event) {
       this.style.display = "none";
       event.preventDefault(); //阻止事件擴散
       };
       oClick.onclick = function () {
       console.log("click");
  }

  ② 使用Zepto解決這個問題
  ③ 使用Fastclick插件

2.兩個元素重疊，點擊上面的元素如何告知瀏覽器想要點擊的是下面那個元素

• 2.1 我說了用js處理（冒泡）的方法，面試官：我就要用css呢
  心裏：CSS能夠嗎？能夠？嗎？後來翻了翻筆記，確實能夠
• 2.2 告訴瀏覽器當前元素不須要接收事件，能夠設置 pointer-events: none;

• 2.3 注意區分：cursor: pointer;

  cursor 屬性規定要顯示的光標的類型（形狀）。
  auto 默認。瀏覽器設置的光標。
  default 默認光標（一般是一個箭頭）
  pointer 光標呈現爲指示連接的指針（一隻手）

3.css的flex
伸縮容器中的兩個伸縮項，一個寬度已經固定，想讓另一項佔滿整個伸縮容器，給該元素設置flex: 1;便可

4.如何判斷某個瀏覽器是否支持某css屬性
答：有些有-webkit-前綴的就是chrome瀏覽器的私有屬性；有-ms-前綴的就是IE瀏覽器私有屬性
面試官：除了這個方法呢？我：不知道

5.css畫三角形

6.手寫動畫最小時間間隔最合適是多少，爲何？

（這題遇兩次了。。。）
多數顯示器默認頻率是60HZ，即一秒刷新60次，因此理論上最小間隔使1/60*1000ms=16.7ms

7.給你一個頁面，如何判斷網頁性能的好壞？（能夠理解爲哪些指標能夠反映一個網頁的性能）

面試現場還原：（我還真不知道如何判斷，瞎說了一些帶寬、響應時間啥的）我給面試官說：我知道如何優化一個網頁，可是我還真不瞭解如何判斷...
面試官：你得知道哪裏很差才能優化吧？我倒...

• 7.1 頁面加載時間：從頁面開始加載到頁面onload事件觸發的時間。通常來講onload觸發表明着直接經過HTML引用的CSS，JS，圖片資源已經徹底加載完畢。
• 7.2 所有頁面載入時間：指從最初啓動瀏覽開始，直到全部元素都被加載完成後，在2秒後仍然沒有網絡活動的時間。
• 7.3 首字節時間：從開始加載到收到服務器返回數據的第一字節的時間
• 7.4 使用長鏈接：鏈接視圖展示了頁面加載過程當中建立的（keepalive）鏈接，以及經過每一個鏈接所加載的資源。
• 7.5 DNS時間：進行域名解析所須要的時間
• 7.6 TCP時間：客戶端創建鏈接的時間
• 7.7 HTTP網頁打分：頁面渲染、下載速度、頁面流暢度

利用 window.performance.timing 能夠訪問到這些屬性

DNS查詢耗時 = domainLookupEnd - domainLookupStart
TCP連接耗時 = connectEnd - connectStart
request請求耗時 = responseEnd - responseStart
解析dom樹耗時 = domComplete - domInteractive
白屏時間 = domloadng - fetchStart
domready時間 = domContentLoadedEventEnd - fetchStart
onload時間 = loadEventEnd - fetchStart

8.promise相關的東西

9.parseInt()方法和Number()方法的區別

10.數據轉爲字符串的方法

11.存在隱式轉換的場景

12.閉包是啥，垃圾回收機制
只答上來了引用計數，還有一個是標記清除（我發誓我真的都知道，可是當時忘記了）

13.Render Tree和CSSOM Tree的區別

15.原型鏈是幹啥的

16.如何異步執行js代碼
答：promise
問：還有呢
答：動態建立script標籤（當時有點慌張了，應該把知道的都說一下的）

17.若是一個頁面被訪問屢次，如何優化（其實就是問防抖和節流）
答：能夠採用函數防抖
問：那防抖和節流的區別是啥（也答了）

18.瞭解gulp和grunt嗎
心裏：我剛剛說了最近了解了webpack
答：不瞭解（笑）

---

總結：反正全程都是「還有呢？？？」應該還有一些問題，暫時想起來的就是這些，總之仍是基礎知識不紮實...（菜是原罪，哭）