動畫相關(guān)
//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/JulianLava...點(diǎn)擊預(yù)覽
案例可能會變,主要考察 transition / animation 動畫相關(guān)的知識點(diǎn)
瀏覽器內(nèi)核相關(guān)
trident / IE瀏覽器
gecko / firefox瀏覽器
webkit 內(nèi)核 / safari & Chorome
差異:渲染機(jī)制不同
參考:https://juejin.im/entry/5a05a...
搜索引擎找了一波,分享內(nèi)容不多,特別是針對差異的文章。。。
JS語言特性
1、 解釋型語言 - 不需要編譯,直接解釋運(yùn)行
2、弱類型 - 對變量沒有嚴(yán)格數(shù)據(jù)類型要求
3、跨平臺 - 只要有js解釋器 支持,能在任何地方運(yùn)行
4、 基于對象 - 不僅能創(chuàng)建對象,也能基于對象創(chuàng)建對象 (原型鏈)
http 協(xié)議 / 緩存機(jī)制
強(qiáng)緩存 / 優(yōu)先級最高,如果存在且未過期則直接返回緩存內(nèi)容
Expires / http1.0 缺陷:受限于本地時間,如果修改本地時間則會失效
Cache-Control / http1.1 作為對1.0的一個補(bǔ)強(qiáng)
協(xié)商緩存 / 緩存過期則會進(jìn)行協(xié)商緩存
Last-Modified 和 If-Modified-Since / http1.0
Last-Modified 表示本地文件最后修改日期,If-Modified-Since 會將 Last-Modified 的值發(fā)送給服務(wù)器,詢問服務(wù)器在該日期后資源是否有更新,有更新的話就會將新的資源發(fā)送回來。
但是如果在本地打開緩存文件,就會造成 Last-Modified 被修改,所以在 HTTP / 1.1 出現(xiàn)了 ETag
ETag 和 If-None-Match / http1.1
ETag 類似于文件指紋,If-None-Match 會將當(dāng)前 ETag 發(fā)送給服務(wù)器,詢問該資源 ETag 是否變動,有變動的話就將新的資源發(fā)送回來
參考: https://mp.weixin.qq.com/s/y-...
虛擬dom 算法
參閱: https://segmentfault.com/a/11...
瀏覽器渲染機(jī)制
渲染機(jī)制主要和瀏覽器內(nèi)核有關(guān),不同瀏覽器渲染流程不同
參考:https://juejin.im/entry/59e1d...
什么是骨架屏
參考:https://segmentfault.com/a/11...
lazyload 實(shí)現(xiàn)原理
核心概念: 滾動監(jiān)聽 / 元素位置 / 可視區(qū)域
深入學(xué)習(xí):看 GitHub 懶加載的庫源碼 -lazy load
箭頭函數(shù)和 普通函數(shù)的區(qū)別
由于this在詞法層面完成綁定,this指針無法被修改
沒有原型對象
var foo = () => {};
console.log(foo.prototype) //undefined
無法使用new操作符
var Foo = () => {};
var foo = new Foo(); //Foo is not a constructor
箭頭函數(shù)不綁定arguments,取而代之用rest參數(shù)…解決
function foo(...args) {
return args;
}
foo(1, 2, 3); // [1,2,3]
js遍歷對象
1、 for in 循環(huán) / 循環(huán)遍歷自身的和繼承的可枚舉屬性
2、Object.keys(obj) / 返回一個數(shù)組,包括對象自身的(不含繼承)所有可枚舉屬性
3、getOwnPropertyNames() / 用于返回對象所有屬性,包含可枚舉屬性和不可枚舉屬性,不包含Symbol屬性
4、 Object.getOwnPropertySymbols() / 用于返回對象所有屬性,包含可枚舉屬性和不可枚舉屬性,只包含Symbol屬性
computed 相關(guān)
1、計(jì)算屬性擁有緩存優(yōu)勢 / 緩存內(nèi)部實(shí)現(xiàn)原理
2、默認(rèn)只有g(shù)etter,可以手動設(shè)置setter,沒有設(shè)置情況下賦值會報(bào)錯
CORS 相關(guān)
簡單請求:
1、使用 get 、 head 、 post
2、content-type 必須為text/plain、multipart/form-data、application/x-www-form-urlencoded之一
3、沒有人為設(shè)置規(guī)范外header字段
不滿足以上要求均為復(fù)雜請求,發(fā)送請求之前會先進(jìn)行預(yù)檢請求
cors 攜帶 cookie 相關(guān)
cors中請求默認(rèn)不攜帶cookie,除非滿足以下條件:
1、請求配置了 withCredentials = true;
2、后端配置了 Access-Control-Allow-Credentials: true
3、Access-Control-Allow-Origin 設(shè)置不為 *