快手---效率部門---web前端開發---面經

1. 說一下瀏覽器緩存

瀏覽器緩存分爲強緩存和協商緩存；
強緩存：

expires
Http1.0 中的標準，表明過期時間，注意此處的時間都是指的是服務器的時間。
可以看到過期時間被設定爲了：Thu, 28 Sep 2017 06:38:37 GMT
存在的問題：服務器時間與客戶端時間的不一致，就會導致緩存跟期待效果出現偏差。
Cache-Control
Http1.1 中的標準，可以看成是 expires 的補充。使用的是相對時間的概念。
簡單介紹下Cache-Control的屬性設置。

max-age: 設置緩存的最大的有效時間，單位爲秒（s）。max-age會覆蓋掉Expires
s-maxage: 只用於共享緩存，比如CDN緩存（s -> share）。與max-age 的區別是：max-age用於普通緩存，
而s-maxage用於代理緩存。如果存在s-maxage,則會覆蓋max-age 和 Expires.
public：響應會被緩存，並且在多用戶間共享。默認是public。
private: 響應只作爲私有的緩存，不能在用戶間共享。如果要求HTTP認證，響應會自動設置爲private。
no-cache: 指定不緩存響應，表明資源不進行緩存。但是設置了no-cache之後並不代表瀏覽器不緩存，而是在緩存前要向服務器確認資源是否被更改。因此有的時候只設置no-cache防止緩存還是不夠保險，還可以加上private指令，將過期時間設爲過去的時間。
no-store: 絕對禁止緩存。
must-revalidate: 如果頁面過期，則去服務器進行獲取。

協商緩存：
協商緩存，瀏覽器會向服務器發送請求，同時如果上一次的緩存中有Last-modified 和 Etag 字段，
瀏覽器將在request header 中加入If-Modified-Since（對應於Last-modified），和If-None-Match（對應於Etag）。
Last-modified: 表明請求的資源上次的修改時間。
If-Modified-Since：客戶端保留的資源上次的修改時間。
Etag：資源的內容標識。（不唯一，通常爲文件的md5或者一段hash值，只要保證寫入和驗證時的方法一致即可）
If-None-Match：客戶端保留的資源內容標識。

2. 瀏覽器內核有哪些

瀏覽器內核又稱渲染引擎。負責對網頁語法的解釋並渲染網頁，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。

瀏覽器內核	對應瀏覽器
Trident	360 & IE
Gecko	FireFox火狐
WebKit	Chrome & Safari & Opera
Blink	Chrome（28及往後版本）、Opera（15及往後版本）中使用。

注：Blink這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，

3. 說一下你知道的狀態碼

1xx（臨時響應）表示臨時響應並需要請求者繼續執行操作的狀態代碼。
100 （繼續）請求者應當繼續提出請求。服務器返回此代碼表示已收到請求的第一部分，正在等待其餘部分。
101 （切換協議）請求者已要求服務器切換協議，服務器已確認並準備切換。
2xx （成功）表示成功處理了請求的狀態代碼。
200 （成功）服務器已成功處理了請求。通常，這表示服務器提供了請求的網頁。
201 （已創建）請求成功並且服務器創建了新的資源。
202 （已接受）服務器已接受請求，但尚未處理。
203 （非授權信息）服務器已成功處理了請求，但返回的信息可能來自另一來源。
204 （無內容）服務器成功處理了請求，但沒有返回任何內容。
205 （重置內容）服務器成功處理了請求，但沒有返回任何內容。
206 （部分內容）服務器成功處理了部分 GET 請求。
3xx （重定向）表示要完成請求，需要進一步操作。通常，這些狀態代碼用來重定向。
300 （多種選擇）針對請求，服務器可執行多種操作。服務器可根據請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。
301 （永久移動）請求的網頁已永久移動到新位置。服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302 （臨時移動）服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
303 （查看其他位置）請求者應當對不同的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
304 （未修改）自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。
305 （使用代理）請求者只能使用代理訪問請求的網頁。如果服務器返回此響應，還表示請求者應使用代理。
307 （臨時重定向）服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
4xx（請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。
400 （錯誤請求）服務器不理解請求的語法。
401 （未授權）請求要求身份驗證。對於需要登錄的網頁，服務器可能返回此響應。
403 （禁止）服務器拒絕請求。
404 （未找到）服務器找不到請求的網頁。
405 （方法禁用）禁用請求中指定的方法。
406 （不接受）無法使用請求的內容特性響應請求的網頁。
407 （需要代理授權）此狀態代碼與 401（未授權）類似，但指定請求者應當授權使用代理。
408 （請求超時）服務器等候請求時發生超時。
409 （衝突）服務器在完成請求時發生衝突。服務器必須在響應中包含有關衝突的信息。
410 （已刪除）如果請求的資源已永久刪除，服務器就會返回此響應。
411 （需要有效長度）服務器不接受不含有效內容長度標頭字段的請求。
412 （未滿足前提條件）服務器未滿足請求者在請求中設置的其中一個前提條件。
413 （請求實體過大）服務器無法處理請求，因爲請求實體過大，超出服務器的處理能力。
414 （請求的 URI 過長）請求的 URI（通常爲網址）過長，服務器無法處理。
415 （不支持的媒體類型）請求的格式不受請求頁面的支持。
416 （請求範圍不符合要求）如果頁面無法提供請求的範圍，則服務器會返回此狀態代碼。
417 （未滿足期望值）服務器未滿足”期望”請求標頭字段的要求。
5xx（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。這些錯誤可能是服務器本身的錯誤，而不是請求出錯。
500 （服務器內部錯誤）服務器遇到錯誤，無法完成請求。
501 （尚未實施）服務器不具備完成請求的功能。例如，服務器無法識別請求方法時可能會返回此代碼。
502 （錯誤網關）服務器作爲網關或代理，從上游服務器收到無效響應。
503 （服務不可用）服務器目前無法使用（由於超載或停機維護）。通常，這只是暫時狀態。
504 （網關超時）服務器作爲網關或代理，但是沒有及時從上游服務器收到請求。
505 （HTTP 版本不受支持）服務器不支持請求中所用的 HTTP 協議版本。

4. 說一下html中的行內元素和塊級元素，及其區別

行內元素：a、b、span、img、input、select、strong、label
塊級元素：div、p、from、table、tr、td、th、ol(有序列表)、ul(無序列表)、li、h1-h6、hr、address
空元素：br、hr、img、input、link、meta

行內元素	塊級元素
總在新行開始，獨佔一行	和其他元素同一行
高度/行高以及內外邊距可控	寬高不可空（寬度只與內容有關）
可以容納其他塊級元素和內聯元素	只能容納純文本和其他行內元素
display:block	display:inline

5. 如何設置一個行內元素的高

height-line，和設置display:block-inline屬性

6. 水平垂直居中

題目：封裝一個模態框（內容寬度未知）

transform
flex

7. flex(需要詳細說明每個屬性)

// 容器屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
// 項目屬性
order
flex-grow
flex-shrink(着重問了這個)
flex-basis
flex
align-self

8. DOM操作&如何創建一個新標籤？如何獲取一個標籤？如何將某一標籤插入body中，使用兩種方式？

document.createElement(‘元素名’); 創建新的元素節點
document.getElementById(‘id屬性值’); 返回擁有指定id的第一個對象的引用
document/element.getElementsByClassName(‘class屬性值’); 返回擁有指定class的對象集合
document/element.getElementsByTagName(‘標籤名’); 返回擁有指定標籤名的對象集合
document.getElementsByName(‘name屬性值’); 返回擁有指定名稱的對象結合
parent.appendChild( element/txt/comment/fragment );向父節點的最後一個子節點後追加新節點
parent.insertBefore( newChild, existingChild );向父節點的某個特定子節點之前插入新節點

9. 知道querySelector()和querySelectorAll()嗎？

querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素。
querySelector() 方法只返回匹配指定選擇器的第一個元素。如果你要返回所有匹配元素，請使用 querySelectorAll() 方法替代。

11. 數組方法中會改變願數組的方法有哪些？

pop()
push()
splice()
shift()
unshift()
reverse()
sort()

12. typeof null undefined NaN依次返回什麼

typeof(null) // object
typeof(undefined) // undefined
typeof(NaN) // number

13. ES6聲明變量方式

let
const

14. Promise產生的初衷

promise對象代表了一個異步操作的結果（成功或失敗）；
誕生的緣由：
在沒有promise的時候，當我們處理異步操作時，會使用回調函數作爲參數來處理響應結果；如果存在連續多個且有依賴的異步操作時，比如後面的異步操作需要前面異步操作的響應數據作爲請求參數，那麼我們必須在前面異步操作的回調函數裏發送後續的異步操作，以此類推，就會出現“回調地獄”。導致函數過長，閱讀性差；因此promise產生了，它採用同步的寫法（鏈式調用）來處理異步回調。

15. 獲取瀏覽器的方式，知道Navigator嗎？

Navigator 對象包含有關瀏覽器的信息。
註釋：沒有應用於 navigator 對象的公開標準，不過所有瀏覽器都支持該對象

    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    //判斷是否Opera瀏覽器
    if (isOpera) {
        return "Opera"
    }; 
    //判斷是否Firefox瀏覽器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } 
    //判斷是否chorme瀏覽器
    if (userAgent.indexOf("Chrome") > -1){
		return "Chrome";
    }
    //判斷是否Safari瀏覽器
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } 
    //判斷是否IE瀏覽器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }
    //判斷是否Edge瀏覽器
    if (userAgent.indexOf("Trident") > -1) {
        return "Edge";
    }

16. 手撕兩道代碼題

15.1. 給定輸入數組arr = [‘a’,‘e’,‘r’,‘t’,‘a’,‘e’,‘a’,‘t’]，輸出一個對象obj={‘a’:3,‘e’:2.‘r’:1,‘t’:2}統計數組中字母出現的次數

function arrayToJson(arr) {
  var json = {}
  for (let key in arr) {
    let index = arr[key]
    if (!json.hasOwnProperty(index)) {
      json[index] = 1
    } else {
      json[index] = ++json[index]
    }
  }
  return json
}
var arr = ['a', 'e', 'r', 't', 'a', 'e', 'a', 't']
arrayToJson(arr)

15.2 封裝一個函數，實現獲取瀏覽器的url，eg.url = https://ww.baidu.com?name=xiaoming&age=18,從URL中獲取參數，並返回json格式，返回obj={name:‘xiaoming’,age:18}

function getUrlToJson(url) {
  var obj = {}
  var index = url.indexOf('?')
  var str = url.substring(index + 1)
  var strArr = str.split('&')
  for (var i = 0; i < strArr.length; i++) {
    var arr = strArr[i].split('=')
    obj[arr[0]] = arr[1]
  }
  return obj
}
var url = 'https://ww.baidu.com?name=xiaoming&age=18'
getUrlToJson(url)

17. react組件聲明方式

函數式定義的無狀態組件：這種組件只負責根據傳入的props來展示，不涉及到要state狀態的操作。
es5原生方式React.createClass定義的組件
es6形式的extends React.Component定義的組件

19. react的受控組件非受控組件

20. 純函數

簡單來說，一個函數的返回結果只依賴於它的參數，並且在執行過程裏面沒有副作用，我們就把這個函數叫做純函數。

const foo = (x, b) => x + b
foo(1, 2) // => 3

21. redux(action/store/reducer分別是幹嘛的)

store就是保存數據的地方，你可以把它看成一個數據，整個應用只能有一個store
state就是store裏面存儲的數據，store裏面可以擁有多個state，Redux規定一個state對應一個View,只要state相同，view就是一樣的，反過來也是一樣的，可以通過store.getState( )獲取

import {createStore} from 'redux'
const store=createStore(fn);
const state=store.getState()

Action是一個對象其中type屬性是必須的，表示Action的名稱，其他的可以根據需求自由設置。

const action={
 type:'ADD_TODO',
 payload:'redux原理'
}

store.dispatch是view發出Action的唯一辦法

store.dispatch({
  type:'ADD_TODO',
  payload:'redux原理'
})

Reducer是一個純函數，他接收Action和當前state作爲參數，返回一個新的state

const reducer =(state,action)=>{
  switch(action.type){
    case ADD_TODO:
        return newstate;
    default return state
  }
}

22. 兄弟組件間的通信（react&vue）

vue
利用總線方式可以平級組件進行通信
對於兄弟組件可以使用中央事件總線的方式來進行通信。新建一個Vue事件eventBus對象，然後通過eventBus. $emit觸發事件，eventBus.$ on監聽觸發的事件。

快手---效率部門---web前端開發---面經

1. 說一下瀏覽器緩存

2. 瀏覽器內核有哪些

3. 說一下你知道的狀態碼

4. 說一下html中的行內元素和塊級元素，及其區別

5. 如何設置一個行內元素的高

6. 水平垂直居中

7. flex(需要詳細說明每個屬性)

8. DOM操作&如何創建一個新標籤？如何獲取一個標籤？如何將某一標籤插入body中，使用兩種方式？

9. 知道querySelector()和querySelectorAll()嗎？

11. 數組方法中會改變願數組的方法有哪些？

12. typeof null undefined NaN依次返回什麼

13. ES6聲明變量方式

14. Promise產生的初衷

15. 獲取瀏覽器的方式，知道Navigator嗎？

16. 手撕兩道代碼題

17. react組件聲明方式

19. react的受控組件非受控組件

20. 純函數

21. redux(action/store/reducer分別是幹嘛的)

22. 兄弟組件間的通信（react&vue）

ES6箭頭函數詳解

快手---效率部門---web前端開發---面經

拼多多筆試題-編程

0.1+0.2 !== 0.3原因？解決辦法（前端）

JS事件循環中的宏任務和微任務執行順序

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

快手---效率部門---web前端開發---面經

1. 說一下瀏覽器緩存

2. 瀏覽器內核有哪些

3. 說一下你知道的狀態碼

4. 說一下html中的行內元素和塊級元素，及其區別

5. 如何設置一個行內元素的高

6. 水平垂直居中

7. flex(需要詳細說明每個屬性)

8. DOM操作&如何創建一個新標籤？如何獲取一個標籤？如何將某一標籤插入body中，使用兩種方式？

9. 知道querySelector()和querySelectorAll()嗎？

11. 數組方法中會改變願數組的方法有哪些？

12. typeof null undefined NaN依次返回什麼

13. ES6聲明變量方式

14. Promise產生的初衷

15. 獲取瀏覽器的方式，知道Navigator嗎？

16. 手撕兩道代碼題

17. react組件聲明方式

19. react的 受控組件非受控組件

20. 純函數

21. redux(action/store/reducer分別是幹嘛的)

22. 兄弟組件間的通信（react&vue）

19. react的受控組件非受控組件