動畫相關
//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語言特性
1、 解釋型語言 - 不需要編譯，直接解釋運行
2、弱類型 - 對變量沒有嚴格數據類型要求
3、跨平台 - 只要有js解釋器 支持，能在任何地方運行
4、 基於對象 - 不僅能創建對象，也能基於對象創建對象 （原型鏈）
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 算法
參閱： https://segmentfault.com/a/1190000016129036
瀏覽器渲染機制
渲染機制主要和瀏覽器內核有關，不同瀏覽器渲染流程不同
參考：https://juejin.im/entry/59e1d31f51882578c3411c77
什么是骨架屏
參考：https://segmentfault.com/a/1190000014832185
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遍歷對象
1、 for in 循環 / 循環遍歷自身的和繼承的可枚舉屬性
2、Object.keys(obj) / 返回一個數組，包括對象自身的（不含繼承）所有可枚舉屬性
3、getOwnPropertyNames() / 用於返回對象所有屬性，包含可枚舉屬性和不可枚舉屬性，不包含Symbol屬性
4、 Object.getOwnPropertySymbols() / 用於返回對象所有屬性，包含可枚舉屬性和不可枚舉屬性，只包含Symbol屬性
computed 相關
1、計算屬性擁有緩存優勢 / 緩存內部實現原理
2、默認只有getter，可以手動設置setter，沒有設置情況下賦值會報錯
CORS 相關
簡單請求：
1、使用 get 、 head 、 post
2、content-type 必須為text/plain、multipart/form-data、application/x-www-form-urlencoded之一
3、沒有人為設置規范外header字段
不滿足以上要求均為復雜請求，發送請求之前會先進行預檢請求
cors 攜帶 cookie 相關
cors中請求默認不攜帶cookie，除非滿足以下條件：
1、請求配置了 withCredentials = true;
2、后端配置了 Access-Control-Allow-Credentials: true
3、Access-Control-Allow-Origin 設置不為 *
參考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
后記
難度偏中，前端技術扎實，想拿到offer應該不難
如果覺得本文對你有所幫助，就star一下吧～大傳送之術！ 我的博客Github