19年上半年前端實習面經

時間 2019-11-17

標籤 19年上半年前端實習简体版

原文原文鏈接

座標杭州，我在上半年陸續找過一些前端實習，記錄面經（只記錄技術面，不記錄HR面）於此，供你們分享，只記得其中一些問題了，見諒。
現正在準備秋招，你們一同加油吧！javascript

塗鴉智能

電話面試

Promise 如何實現鏈式調用
- Promise.then
實現 Promise2 在 Promise1 以後調用
- async await
- Promise.all

for...in 和 for...of 的區別

for...in 遍歷鍵名（Key）並轉化爲字符串，for...of 遍歷鍵值（Value）
for...in 語句以任意順序遍歷一個對象自有的、繼承的、可枚舉的、非 Symbol 的屬性
for...in 更適合遍歷對象，for...of 更適合遍歷數組。

for (let i in [1, 2, 3]) {
    console.log(typeof i); // string 數組下標被轉化字符串
    console.log(i); // '1', '2', '3'
  }
  
  var triangle = { a: 1, b: 2, c: 3 };
  
  function ColoredTriangle() {
    this.color = 'red';
  }
  
  ColoredTriangle.prototype = triangle;
  
  var obj = new ColoredTriangle();
  
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) { // 若是去了 hasOwnProperty() 這個約束條件會怎麼樣？
      console.log(`obj.${prop} = ${obj[prop]}`); // obj.color = red
    }
  }
複製代碼

簡述 Set 和 Map
- Map 對象保存鍵值對。任何值(對象或者原始值) 均可以做爲一個鍵或一個值。
- Set 對象容許你存儲任何類型的惟一值

Set 有哪些遍歷方法

Set.prototype.values()
  Set.prototype.keys() // 等於 Set.prototype.values()
  Set.prototype.entries() // [value, value]數組
  Set.prototype.[Symbol.iterator]()
  // 以上所有返回一個新的迭代器對象
  Set.prototype.forEach()
  for ... of
複製代碼

解構賦值失效的狀況

let [x = 1] = [undefined];
 x // 1
 let [x = 1] = [null]; 
 x // null
 // 注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。因此，只有當一個數組成員嚴格等於undefined，默認值纔會生效。
複製代碼

一面

請分別用 CSS、JS、React 實現動畫：方塊從屏幕左下角運動到右上角
- CSS：translate + animation position + top/left + transition
  - 這裏涉及到性能優化層面，首先我須要知道 CSS 的最終表現分爲如下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers，即查找並計算樣式 -> 排布 -> 繪製 -> 組合層。
  - 因爲 transform 是位於 Composite Layers層，而 width、left、margin 等則是位於 Layout 層，在 Layout層發生的改變一定致使Paint Setup and Paint -> Composite Layers，因此相對而言使用 transform 實現的動畫效果確定比 left 這些更加流暢。
  - 瀏覽器也會針對transform等開啓GPU加速。
- JS：requestAnimationFrame / setTimeout
- React：須要獲取 Ref
無限滾動列表的性能優化
- 設置一個可視區域，超過可視區域，直接刪除Dom
Typescript
- interface(接口)和type(類型別名)的區別
  - 均可以互相繼承（&，extnds）
  - interface 可以聲明合併
  - type 能夠聲明基本類型別名，聯合類型，元組等類型
    - type DiffName = string;
    - type Pet = Dog | Cat
- TS class 相對於 ES6 class 的拓展
  - readOnly 只讀屬性
  - abstract 抽象類包含抽象方法，必須在子類中實現，且子類使用 extends
  - private protected
閉包
- 基本定義和應用
  - 閉包是指有權訪問另外一個函數做用域中的變量的函數
  - 可以保證一些變量不被回收，持續引用
  - 私有化變量，方法封裝
  - 模擬塊級做用域
- 簡述防抖和節流，應用場景
Node
- 說一下經常使用的模塊html
  - path fs stream http util
- 實現 EventEmitter，以及應用場景前端
  - 基本方法：emit on
  - NodeJS 是基於異步事件驅動的架構，須要一個事件調度中心
  - stream fs net http 都繼承 EventEmitter
- 發佈-訂閱 模式和 觀察者 模式的區別java
  - 發佈-訂閱 模式，發佈者和訂閱者不須要彼此瞭解，有消息隊列的存在
  - 觀察者 模式主要以同步方式實現，發佈-訂閱 模式主要以異步方式實現
  - Subject 還保留了 Observers 的記錄
- 如何實現腳手架react
  - 思路：經過process.argv獲取參數，下載 Github 對應的 模板，修改 模板內容
  - 發佈：npm login npm publish
React
- 介紹 Redux 的原理和流程
- 介紹 Mobx 的原理，如何實現數據的監聽
  - proxy
- Redux 中爲何要直接替換數據源，而不是修改
  - redux 經過比較對象的引用來判斷是否同一個對象，若是是，則繼續使用舊的 state，因此不會有任何的變化
- 瞭解過 immutable.js 嗎
- Antd 按需加載的原理
```
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);
複製代碼
```

二面

日常學習前端的途徑
- 書籍（JS高程，你不知道的JS系列、深刻淺出NodeJS…）、Medium、大牛博客、掘金
爲何從事前端
在項目中，如何解決 Bug
談談 HTTP
- OSI七層
- 三次握手和四次揮手
- HTTP 和 HTTPS
- HTTP2
- websocket
- 報文
  - 起始行，首部，實體
- 緩存
- 請求方法
  - GET POST DELETE PUT OPTIONS HEAD CONNECT TRACE PATCH
- 狀態碼
- 跨域
- 簡單請求和複雜請求
- HTTP是無狀態：HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺乏狀態意味着若是後續處理須要前面的信息，則它必須重傳，這樣可能致使每次鏈接傳送的數據量增大。另外一方面，在服務器不須要先前信息時它的應答就較快。
  - cookie token
- HTTP是媒體獨立的：這意味着，只要客戶端和服務器知道如何處理的數據內容，任何類型的數據均可以經過HTTP發送。客戶端以及服務器指定使用適合的MIME-type內容類型。
- HTTP是無鏈接：無鏈接的含義是限制每次鏈接只處理一個請求。服務器處理完客戶的請求，並收到客戶的應答後，即斷開鏈接。採用這種方式能夠節省傳輸時間。

51信用卡

電話面試 + 一面

webapck
- 寫過 loader 和 plugin 嗎
- tree shaking
- splitChunks
React 的按需加載如何實現
- 經過 webpack 的動態導入 (dynamic imports)
- React.lazy React.suspense

React 的 HOC

屬性代理

渲染劫持

const HOC = (WrappedComponent) =>
    class extends WrappedComponent {
      render() {
        if (this.props.isRender) {
          return super.render();
        } else {
          return null;
        }
      }
複製代碼

React 怎麼和 Redux 結合
- 經過 react-redux 的 connect 高階函數
Redux 的 stroe 存儲在 React 何處
- Context
首屏加載時間怎麼看
- DomContentedLoaded
- DomContentedLoaded 是否和 Raect 生命週期裏的 render 同步
  - 不一樣步
路由鑑權
- 開兩個 tab 頁，其中一個 tab 頁更改了權限，怎麼保持另外一個 tab 頁權限同步
緩存機制
- 簡述強緩存和協商緩存
  - 強緩存
    - Expires表示一個絕對時間，容許客戶端在這個時間以前不去檢查（發請求）
    - Cache-Control
      - public 客戶端和 CDN 代理服務器均可以緩存
      - private 客戶端能夠緩存
      - max-age=60 緩存內容將在60秒後失效
      - no-cache 每次請求都須要通過服務端的協商緩存
      - no-store 禁用緩存
    - 返回值
      - 200(from disk/memory cache)
    - 特徵
      - 不會發送 HTTP 請求
  - 協商緩存
    - If-Modified-Since/Last-modified資源的最後修改時間
      - 粒度是秒級，若是在毫秒內更改內容，則沒法生效
    - If-None-Match/Etag根據實體內容生成的一段hash字符串
  - 返回值
    - 304 Not Modified
  - 特徵
    - 會訪問服務器
- 協商緩存是由服務端決定嗎
  - 是
- 協商緩存是由服務端返回資源嗎
  - 不是，從客戶端緩存中讀取
- 如何使 304 中攜帶 response
  - 放置於 response headers
- SPA 應用打包出來的 index.html 是否存在緩存
CDN
- 什麼是 CDN
- CDN 主要部署什麼資源
- CDN 如何更新資源
移動端
- 機型適配
  - JS + REM
  - VW + VH
- 如何判斷 DRP
  - 瀏覽器： window.devicePixelRatio
  - CSS：@media -webkit-min-device-pixel-ratio

百應科技

電話面試

React 的生命週期
- v16.3 以前
- v16.3 以後，引入 Fiber 架構
簡述 Redux 的工做流程
Redux 如何實現異步操做
- Redux-thunk 是一個容許你編寫返回一個函數而不是一個 action 的 actions creators 的中間件。若是知足某個條件，thunk 則能夠用來延遲 action 的派發(dispatch)，這能夠處理異步 action 的派發(dispatch)。
Mobx 如何轉化可觀察對象爲原生數組
- slice()

一面

說說你對 Koa 洋蔥模型的理解
如何加快 webpack 的構建速度
- DllPlugin、HappyPack
什麼是類型聲明文件（.d.ts）
你在 TS 中用到哪些語法
- 裝飾器 Decorators
  - 做用於類，指向類的構造函數
  - 做用於方法，參數爲實例對象，方法名，屬性描述符
- 泛型
- 類型約束（type)
- 類型斷言 (as)
- keyof typeof 操做符
- 接口
- 枚舉
- 映射類型（ReadOnly，Partial）
- 索引簽名
- 類及其繼承

二面

你的我的優點是什麼
輸入一個 URL 發生了什麼
瞭解過動態規劃嗎
說說時間複雜度和空間複雜度
什麼是 IPv4 和 IPv6 ，世界上一共有多少個 IP 地址
簡述 OSI 七層模型
簡述 HTTPS，什麼是對稱加密，非對稱加密

親寶寶

筆試

先作了一套筆試題，限時半個小時，比較簡單，主要考察基礎，還記得的題目有webpack

列出 CSS 選擇器的優先級
- !important > id > 類、僞類、屬性 > 元素、僞元素
- 行內樣式 > 內聯樣式 > 外聯樣式
介紹 position 的各個屬性
- 不要忘了 static sticky
寫出 display:none 和 visibility:hidden 的區別
new Boolean(false) && true 返回什麼，並解釋
手寫代碼，找出一個字符串中出現次數最多的那個字符

<script> alert(typeof a); </script>
  <script> function a() { a = 3; } </script> // 會出現什麼內容？
複製代碼

一面

簡述React Hooks
什麼是 Virturl DOM
- React在 16.8 版本爲咱們正式帶來了 Hooks API。什麼是 Hooks？簡而言之，就是對函數式組件的一些輔助，讓咱們沒必要寫 class 形式的組件也能使用 state 和其餘一些 React 特性。
簡述 Diff 算法的實現過程
ES6 class 的 static 屬性在構造函數的原型上嗎
- 不是，在構造函數自己上
三次握手，四次揮手
- ACK：確認序號有效
- SYN：發起一個新鏈接
- FIN：釋放一個鏈接
- 三次握手，最主要目的是保證鏈接是雙工的，可靠更多的是經過重傳機制來保證的
- 四次揮手，當 Client 發送 FIN，僅表示 Client 再也不發送數據，Server 可能還要發送數據，因此必須把 ACK 和 FIN 分開發送
判斷一個對象是不是數組如何判斷一個數組
- instanceOf
- Array.isArray()
- Object.prototype.toString.call()

二面

談談你對 PV / UV 的理解，該如何去實現

PV (page view)，即頁面瀏覽量，一個訪問者在 24 小時內到底看了你網站幾個頁面，不重複計算
UV (unique visitor)，即惟一訪問者，指你的網站 24 小時內有多少不一樣 IP 地址的訪問web

判斷頁面來源面試
- 經過請求頭中的 referrer 字段
簡述 JWT算法
- Headernpm
```
{
"alg": "HS256",
"typ": "JWT"
}
複製代碼
```
- Payload
```
{
"sub": "1234567890",
"name": "John Doe",
"admin": true
}
複製代碼
```
- Signature
```
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)
複製代碼
```
Header 和 Payload 串型化的算法是 Base64URL

JWT 做爲一個令牌（token），有些場合可能會放到 URL（好比 api.example.com/?token=xxx）。Base64 有三個字符+、/和=，在 URL 裏面有特殊含義，因此要被替換掉：=被省略、+替換成-，/替換成_ 。這就是 Base64URL 算法。
圖片懶加載，怎麼保證未加載的圖片佔據空間
將來前端的職業規劃

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。