P5 005-JS高頻面試題-1

1、JS的內(nèi)置對(duì)象（就是JS中的封裝函數(shù)）

數(shù)據(jù)封裝類對(duì)象：Object，Array，Boolean，Number，String

其他對(duì)象：Function，Arguments，Math，Date，RegExp，Error

ES6新增對(duì)象：symbol（標(biāo)識(shí)唯一ID），Map，Set，Promise，Proxy，Reflect

2、最小化重繪和回流

需要對(duì)元素進(jìn)行復(fù)雜的操作時(shí)，可以先隱藏(display：“none”)，操作完成后再顯示

需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)時(shí)，使用DocumentFargment創(chuàng)建完成后一次性加入document

緩存Layout屬性值，如：var left= elem.offsetLeft

這樣，多次使用left只會(huì)產(chǎn)生一次回流

盡量避免使用table布局(table元素一旦觸發(fā)回流就會(huì)導(dǎo)致table里的所有元素回流)

3、JavaScript作用域鏈

全局函數(shù)無法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但是局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)

如果當(dāng)前作用域沒有找到屬性或方法，會(huì)向上層作用域[[Scoped]]查找，直至全局函數(shù)，這種形式就是作用域鏈

4、數(shù)據(jù)請(qǐng)求

XHR：

var xhr = new XMLHttpRequest();

xhr.open('get',"www.aaa.com",true);

xhr.send();

xhr.onreadystatechange = function(){

//readstate 4

//status 200 - 300

//200 成功(有可能強(qiáng)緩存策略，cache-control，expired)

//301 302 redirect

}

xhr 可以被取消，使用 .abort() 終止請(qǐng)求

xhr.abort();//終止請(qǐng)求

fetch(w3c提出，為了解決xhr請(qǐng)求混亂，對(duì)異步處理不友好的問題)：

fetch("url",{method:"post",body:"",credencial:"include"})

.then(res=>res.json())

.then(res=>{console.log(res)})

//兼容性問題

//發(fā)出的請(qǐng)求，默認(rèn)是不帶cookie.credencial：“include”

jsonp(解決跨域問題)

動(dòng)態(tài)創(chuàng)建script src指向沒有跨域限制， onload

后端返回的數(shù)據(jù)格式一定是，test('["111","222","333"]');

前端提前定義好test這個(gè)方法，通過形參就拿到數(shù)據(jù)了

jsonp可以做get請(qǐng)求，無法做post請(qǐng)求(缺點(diǎn))

jsonp可以取消嗎？不能取消

5、跨域和同源策略

同源策略其實(shí)就是瀏覽器的一種機(jī)制，只允許在同源，也就是同協(xié)議，同域名，同端口的情況下才能進(jìn)行數(shù)據(jù)交互，但是在開發(fā)過程中，往往一個(gè)項(xiàng)目的接口不止一個(gè)域，所以就需要做跨域的處理，常用的跨域方式有以下幾種：

1）jsonp，主要依賴script標(biāo)簽不受同源策略影響，src指向某一個(gè)接口的地址，同步需要傳遞callback回調(diào)函數(shù)名字，這樣當(dāng)接口調(diào)用成功后，本地創(chuàng)建的全局回調(diào)函數(shù)就會(huì)執(zhí)行，并且接收到數(shù)據(jù)，不使用img標(biāo)簽的原因是因?yàn)閕mg 標(biāo)簽無法執(zhí)行js語(yǔ)句

2）cors，依賴服務(wù)器對(duì)前端的請(qǐng)求頭信息進(jìn)行放行，不做限制

Access-Control-Allow-origin配置成*

3）代理訪問，前端訪問不存在跨域問題的代理服務(wù)器，代理服務(wù)器再去訪問目標(biāo)服務(wù)器（服務(wù)器之間沒有跨域限制）