挖財 /有贊電話面試 題目分享

動畫相關

//html
<div class="btn">
  <div class="change"></div>
</div>

//css

 .btn  {
      width: 100px;
      height: 20px;
      background: coral;
      border: 1px solid #5e6d82;
    }
    .change {
      width: 0;
      height: 20px;
      background: #2D93CA;
      transition: all 2s;
    }
    .btn:hover .change {
      width: 100px;
    }

參考：https://codepen.io/JulianLaval/pen/KpLXOO

案例可能會變，主要考察 transition / animation 動畫相關的知識點

瀏覽器內核相關

trident / IE瀏覽器

gecko / firefox瀏覽器

webkit 內核 / safari & Chorome

差別：渲染機制不一樣

參考：https://juejin.im/entry/5a05a25c51882535cd4a4c6b

搜索引擎找了一波，分享內容很少，特別是針對差別的文章。。。

JS語言特性

一、 解釋型語言 - 不須要編譯，直接解釋運行

二、弱類型 - 對變量沒有嚴格數據類型要求

三、跨平臺 - 只要有js解釋器 支持，能在任何地方運行

四、 基於對象 - 不只能建立對象，也能基於對象建立對象 （原型鏈）

http 協議 / 緩存機制

強緩存 / 優先級最高，若是存在且未過時則直接返回緩存內容

Expires / http1.0 缺陷：受限於本地時間，若是修改本地時間則會失效

Cache-Control / http1.1 做爲對1.0的一個補強

協商緩存 / 緩存過時則會進行協商緩存

Last-Modified 和 If-Modified-Since / http1.0

Last-Modified 表示本地文件最後修改日期，If-Modified-Since 會將 Last-Modified 的值發送給服務器，詢問服務器在該日期後資源是否有更新，有更新的話就會將新的資源發送回來。

可是若是在本地打開緩存文件，就會形成 Last-Modified 被修改，因此在 HTTP / 1.1 出現了 ETag

ETag 和 If-None-Match / http1.1

ETag 相似於文件指紋，If-None-Match 會將當前 ETag 發送給服務器，詢問該資源 ETag 是否變更，有變更的話就將新的資源發送回來

參考： https://mp.weixin.qq.com/s/y-yajw1GaWLKUdOJo3cbew

虛擬dom 算法

參閱： http://www.javashuo.com/article/p-ednhudxw-gr.html

瀏覽器渲染機制

渲染機制主要和瀏覽器內核有關，不一樣瀏覽器渲染流程不一樣

參考：https://juejin.im/entry/59e1d31f51882578c3411c77

什麼是骨架屏

參考：http://www.javashuo.com/article/p-swtqdqzo-hc.html

lazyload 實現原理

核心概念： 滾動監聽 / 元素位置 / 可視區域

深刻學習：看 GitHub 懶加載的庫源碼 -lazy load

箭頭函數和 普通函數的區別

因爲this在詞法層面完成綁定，this指針沒法被修改

沒有原型對象
var foo = () => {};
console.log(foo.prototype) //undefined

沒法使用new操做符
var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

箭頭函數不綁定arguments,取而代之用rest參數…解決
function foo(...args) {
  return args;
}
foo(1, 2, 3);  // [1,2,3]

js遍歷對象

一、 for in 循環 / 循環遍歷自身的和繼承的可枚舉屬性

二、Object.keys(obj) / 返回一個數組，包括對象自身的（不含繼承）全部可枚舉屬性

三、getOwnPropertyNames() / 用於返回對象全部屬性，包含可枚舉屬性和不可枚舉屬性，不包含Symbol屬性

四、 Object.getOwnPropertySymbols() / 用於返回對象全部屬性，包含可枚舉屬性和不可枚舉屬性，只包含Symbol屬性

computed 相關

一、計算屬性擁有緩存優點 / 緩存內部實現原理

二、默認只有getter，能夠手動設置setter，沒有設置狀況下賦值會報錯

CORS 相關

簡單請求：

一、使用 get 、 head 、 post

二、content-type 必須爲text/plain、multipart/form-data、application/x-www-form-urlencoded之一

三、沒有人爲設置規範外header字段

不知足以上要求均爲複雜請求，發送請求以前會先進行預檢請求

cors 攜帶 cookie 相關

cors中請求默認不攜帶cookie，除非知足如下條件：

一、請求配置了 withCredentials = true;

二、後端配置了 Access-Control-Allow-Credentials: true

三、Access-Control-Allow-Origin 設置不爲 *

參考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

後記

難度偏中，前端技術紮實，想拿到offer應該不難

若是以爲本文對你有所幫助，就star一下吧～大傳送之術！ 個人博客Github