1.typeof是用來干什么的?
typeof可以判斷所有的值類型
可以判斷函數(shù)
但是所有的引用類型返回的都是object
2.instaceof主要用來用來判斷該實(shí)例對(duì)象是否是通過對(duì)應(yīng)的構(gòu)造函數(shù)構(gòu)造出來的實(shí)例,比如可以用來判斷是否是數(shù)組
3.原型關(guān)系
每個(gè)class都有顯示原型prototype
每個(gè)實(shí)例都有隱式原型proto
實(shí)例的proto指向class的prototype
4.基于原型的執(zhí)行規(guī)則
獲取實(shí)例對(duì)象的屬性,或執(zhí)行實(shí)例對(duì)象的方法時(shí),先在自己身上找屬性和方法,如果沒有就自動(dòng)去
proto里面查找
5.閉包:
閉包的本質(zhì)是作用域應(yīng)用的特殊情況,常變現(xiàn)為,函數(shù)作為參數(shù)傳遞,或函數(shù)作為返回值
也就是函數(shù)定義的地方和執(zhí)行的地方不一樣
自由變量:不在當(dāng)前作用域定義的,卻在當(dāng)前作用域使用了的變量
自由變量的查找,是在函數(shù)定義的地方向上一級(jí)作用域進(jìn)行查找,而非在函數(shù)執(zhí)行的地方進(jìn)行查找
6.異步
異步的由來是JS是基于單線程的,
主要應(yīng)用場景是加載圖片,發(fā)送網(wǎng)絡(luò)請(qǐng)求,設(shè)置定時(shí)任務(wù)
promise主要是來消除回調(diào)地獄 callback hell,不易維護(hù)和可讀,嵌套太深
而promise是管道式的,可讀性更強(qiáng)
eventloop 事件輪詢
異步和dom事件都是基于回調(diào)來實(shí)現(xiàn)的,也就是eventloop機(jī)制
但是dom事件不是異步
事件輪詢分為5個(gè)部分
browser console
call stack
web APIs
eventloop
callback queue
例如執(zhí)行到定時(shí)器時(shí),會(huì)將該定時(shí)器放入web apis 然后等到同步代碼執(zhí)行完了,推入callback queue
eventloop會(huì)一直輪訓(xùn),直到callback queue里面隊(duì)列到該定時(shí)器的函數(shù),就執(zhí)行該函數(shù)到call stack
promise進(jìn)階
promise三個(gè)狀態(tài) pendding resolve(fulfilled) reject
狀態(tài)表現(xiàn)
pending狀態(tài)不會(huì)觸發(fā)then,catch
resolve會(huì)觸發(fā)后續(xù)的then回調(diào)函數(shù)
reject會(huì)觸發(fā)后續(xù)的catch函數(shù)
async 和await 主要是解決了異步的回調(diào),在async函數(shù)里面可以用同步的語法寫異步代碼
async函數(shù),里面的await 同行的執(zhí)行函數(shù),立馬執(zhí)行,下面行數(shù)的代碼歸為異步代碼,會(huì)在同步代碼執(zhí)行完之后再次執(zhí)行
執(zhí)行async函數(shù)返回的必定是一個(gè)promise對(duì)象
微任務(wù)microTask宏任務(wù)macroTask
宏任務(wù):setTimeout setInterval ajax dom事件(宏任務(wù)要在dom渲染后觸發(fā))
微任務(wù):async await /Promise(微任務(wù)在dom渲染前觸發(fā)) 他會(huì)把當(dāng)前執(zhí)行的微任務(wù)放入 micro task queue里面,依次推入 call stack
微任務(wù)比宏任務(wù)要先執(zhí)行
new promise 傳入的函數(shù)會(huì)立即執(zhí)行 后面的then會(huì)歸為微任務(wù),在所有的同步帶脈執(zhí)行完后再微任務(wù)的micro task queue中依次執(zhí)行
web-api-dom
property和attribute的區(qū)別
poperty可以修改對(duì)象的屬性,不會(huì)體現(xiàn)在html結(jié)構(gòu)中,相當(dāng)于默認(rèn)的一些屬性如width,height,默認(rèn)是不顯示的,但你通過對(duì)應(yīng)的
dom元素點(diǎn)width就可以拿到該dom元素的寬度
attribute時(shí)動(dòng)過set 和get來自定義屬性,會(huì)改變html的結(jié)構(gòu),會(huì)體現(xiàn)在html結(jié)構(gòu)中
property和attribute都會(huì)引起dom的重新渲染
如何優(yōu)化dom操作的性能
可以緩存查詢結(jié)果,比如先記錄
const pList = doucument.getElementsByTagName('p')
const length = pList.length
在通過循環(huán)遍歷該plist里面的p元素,而不是直接一個(gè)循環(huán)一次查詢每個(gè)p元素,并做操作
將頻繁操作改為一次性操作如:
插入多個(gè)li標(biāo)簽
可以縣創(chuàng)建個(gè)文檔片段,用循環(huán)把要加的li標(biāo)簽添加進(jìn)這個(gè)文檔片段里面
const fragment = doucument.createDocumentFragment()
再把循環(huán)完成的fragment appendChild到指定的父元素里面
Bom操作相關(guān)的問題
bom 有 navigator screen location history
可以通過 let ua = navigator.userAgent獲取當(dāng)前瀏覽器的信息
可以通過
let width = screen.width 獲取屏幕的寬度
let height = screen.height 獲取屏幕的寬度
location
location.herf 獲取當(dāng)前網(wǎng)頁的完整地址
location.protocol 是http還是https
location.pathName 獲取域名后的目錄
location.host 獲取域名
location.search 獲取查詢的參數(shù)
location.hash 取hash值,就是地址欄#后面的內(nèi)容
事件
添加事件監(jiān)聽addEventListener()
事件冒泡,例如一個(gè) p標(biāo)簽 他有父元素div1 ,并且p標(biāo)簽和div1都添加了一個(gè)點(diǎn)擊事件,如果點(diǎn)擊P標(biāo)簽,那么div1的點(diǎn)擊事件也會(huì)觸發(fā)
,事件冒泡是一層一層的往上冒.直到body
阻止事件默認(rèn)行為 preventDefault 例如A標(biāo)簽的跳轉(zhuǎn)行為去掉
阻止事件冒泡 event.stopPropagation
事件代理
優(yōu)點(diǎn):代碼簡潔 減少瀏覽器內(nèi)存使用 但是不要濫用 常用于加載更多這種的瀑布流
ajax
手寫ajax
const xhr = new XMLhttpRequest()
xhr.open('GET',url,true)
xhr.onreadystatechange = function (){
if(readystate ===4 && status ===200){
console.log(xhr.responseText)
}
}
xhr.send(null)
//如果是post請(qǐng)求的話,要在send方法里面加上請(qǐng)求的參數(shù)
跨域
同源策略
ajax請(qǐng)求時(shí),瀏覽器要求當(dāng)前網(wǎng)頁和server端必須同源(安全性考慮)
同源:協(xié)議,域名,端口三者必須一致
加載圖片 ,css ,js可無視同源策略
所有的跨域都必須經(jīng)過服務(wù)端的允許和配合
jsonp的原理
jsonp的原理是利用<script>標(biāo)簽不受同源策略的限制,通過與服務(wù)端溝通,在<script>的src屬性里面請(qǐng)求對(duì)應(yīng)的
地址,并且在后面加上動(dòng)態(tài)的參數(shù),讓后端調(diào)用掛載在window上的callback函數(shù),server段動(dòng)態(tài)拼接一些信息完成跨域返回值
解決跨域一個(gè)是jsonp一個(gè)cros(這個(gè)一般服務(wù)端來完成)
當(dāng)接受到一個(gè)代表錯(cuò)誤的狀態(tài)碼如404,500,從fetch()返回的promise不會(huì)被標(biāo)記為reject
存儲(chǔ)
cookie
本身適用于瀏覽器和服務(wù)端通訊(屬于http請(qǐng)求的一部分),被借用來做本地存儲(chǔ)的,
一般是通過字符串分割的形式
doucument.cookie
cookie會(huì)隨每次請(qǐng)求當(dāng)成數(shù)據(jù)發(fā)送在requestHeaders里面,而sessionStorage和localStorage則不會(huì)
sessionstroage是當(dāng)前會(huì)話,關(guān)閉瀏覽器就消失
locaStage是本地存儲(chǔ)和sessionStorage都是5M的存儲(chǔ)空間,但是關(guān)閉瀏覽器不會(huì)消失
htpp
狀態(tài)碼
1xx 服務(wù)器接收到請(qǐng)求
2xx 如200 請(qǐng)求成功
3xx 重定向 302 (臨時(shí)重定向,配合responseHeaders里面的location) 301(永久重定向,配合location,下次訪問改地址,瀏覽器自動(dòng)跳轉(zhuǎn)到重定向的地址) 304資源未修改,服務(wù)器不會(huì)再發(fā)送新的資源(用于緩存,性能優(yōu)化)
4xx 如404 客戶端錯(cuò)誤
5xx 如500 服務(wù)端錯(cuò)誤 504網(wǎng)關(guān)超時(shí)
restful-api
http 1.0 GET POST HEAD
hettp1.1 OPTIONS PUT PATCH DELETE TRACE CONNECT
傳統(tǒng)API是當(dāng)作功能,restful-api是當(dāng)做資源的標(biāo)識(shí)不要在url中傳參數(shù),要用method當(dāng)操作類型
http headers
常見的headers如 requestHeaders responseHeaders
requestHeaders
accept瀏覽器可以接受的數(shù)據(jù)格式
accept-encoding 瀏覽器可以接受的一些壓縮算法如gzip
accept-languange瀏覽器可接受的語言如 中文 CN
connecttion: keep-alive 一次tcp連接重復(fù)使用
cookie
host 域名
user-agent UA 瀏覽器信息
content-type 發(fā)送數(shù)據(jù)的格式 application/json
responseHeaders
content-type 返回的數(shù)據(jù)格式 application/json
content-length 返回?cái)?shù)據(jù)的大小,字節(jié)
content-coding 返回?cái)?shù)據(jù)的壓縮方法 如gzip
set-cookie
變量提升的原因是js引擎是先編譯再執(zhí)行,所有的申明都會(huì)先給object active對(duì)象上設(shè)置這個(gè)申明變量的key為
OA對(duì)象的屬性,并設(shè)置為undifined
http緩存:
什么是緩存?第二次進(jìn)入該網(wǎng)頁,沒必要把所有的資源訪問一遍,一些不需要重新獲取的東西,不讓他重新獲取
為什么需要緩存?減少網(wǎng)絡(luò)請(qǐng)求的數(shù)量和體積,變相的加快了頁面的加載和渲染,性能得到提升
哪些資源可以緩存?靜態(tài)資源:css js img
responseHeaders 里面的cache-control
max-age : 100000 意思是緩存最大日期為100000秒 單位是秒
no-cache:不需要緩存,正常請(qǐng)求 ,不用強(qiáng)制緩存,交給服務(wù)端來處理
no-store:不用服務(wù)端處理,直接強(qiáng)制獲取 不常見
private:作為用戶作為緩存
public:中間路由,中間代理也可以做緩存
關(guān)于expires
也是在response headers 也是控制緩存過期 但是已經(jīng)被 cache-control代替 (現(xiàn)在瀏覽器還是兼容expires,但是和cache-control一起存在的話,優(yōu)先cache-control)
http緩存策略 - 協(xié)商緩存
服務(wù)器端緩存策略
服務(wù)器判斷客戶端資源,是否和服務(wù)端資源一樣
一致則返回304,否則返回200和最新資源
資源標(biāo)識(shí):
在response headers里面有兩種
Last-modified資源的最后修改時(shí)間
etag資源的唯一標(biāo)識(shí)(一個(gè)字符串,類似人的指紋)
Last-modified和Etag
優(yōu)先使用Etag if-None-Match
Last-modified只能精確到秒級(jí) If-Modified-Since
如果資源被重復(fù)生成,資源不變,則Etag更精確
刷新頁面對(duì)http緩存的影響
不同刷新操作,不同的緩存策略
正常操作,強(qiáng)制緩存有效,協(xié)商緩存有效
手動(dòng)刷新,強(qiáng)制緩存無效,協(xié)商緩存有效
強(qiáng)制刷新,強(qiáng)制緩存無效,協(xié)商緩存無效
抓包
H5頁面,手機(jī)和電腦在同一個(gè)wifi環(huán)境,并且手機(jī)代理改成和電腦的地址一致,訪問電腦的頁面的地址
mac charles windows fiddler
es6模塊化
export default(不使用解構(gòu)賦值可以用defalut) {a,b}
import a from a
a.a a.b
export {a,b}
import {a,b} from a
a b
網(wǎng)頁是如何加載和渲染出來的?
加載過程
1.DNS解析:根據(jù)域名解析出對(duì)應(yīng)的ip
2.瀏覽器根據(jù)IP地址對(duì)服務(wù)器發(fā)起http請(qǐng)求
3.服務(wù)器處理http請(qǐng)求,并返回給瀏覽器
渲染過程
1.根據(jù)html代碼生成dom Tree
2.根據(jù)css代碼生成cssom
3,將DOMTree和CSS Tree整合成render Tree
4.根據(jù)render tree 進(jìn)行頁面渲染
5.遇到<Script>則暫停渲染,優(yōu)先加載并執(zhí)行 js代碼,再繼續(xù)
6.直到把render Tree完成
window.onload和DomContentLoaded
onload是頁面圖片視頻等等都加載完,才執(zhí)行
domContentLoaded是dom渲染完就執(zhí)行,也就是img和video都沒加載完的時(shí)候就會(huì)執(zhí)行(可以用來加載圖片)
性能優(yōu)化原則
1.多使用內(nèi)存緩存和其他方法
2.減少cpu計(jì)算量,減少網(wǎng)絡(luò)加載耗時(shí)
3.適用于所有的編程性能優(yōu)化,空間換時(shí)間
加載更快
減少資源體積:壓縮代碼
減少訪問次數(shù):合并代碼,ssr服務(wù)器渲染,緩存
使用更快的網(wǎng)絡(luò):CDN
讓渲染更快
css放在head里面,js放在body里面
盡早開始執(zhí)行JS,用domContentloaded觸發(fā)
懶加載(圖片懶加載,上滑加載更多)
對(duì)dom查詢進(jìn)行緩存
頻繁dom操作,合并到一起,如一起進(jìn)行插入dom結(jié)構(gòu)操作
防抖debounce
用戶輸入結(jié)束或暫停時(shí),才會(huì)觸發(fā)change事件
就是添加一個(gè)定時(shí)器,每次輸入超過定時(shí)器設(shè)置的時(shí)間就讓他把對(duì)應(yīng)輸入框的內(nèi)容展示出來
節(jié)流
預(yù)防xss攻擊
xss跨站腳本攻擊
將 < 改成 < > 改成>
可以在npm 上搜xss,有對(duì)應(yīng)的插件,可以把指定地方的<>改成字符串
預(yù)防xsrf攻擊
xsrf跨站請(qǐng)求偽造
使用post請(qǐng)求
添加短信驗(yàn)證,密碼,指紋驗(yàn)證等
性能優(yōu)化
讓加載更快
1.減少資源體積:壓縮代碼
2.減少訪問次數(shù):合并代碼,ssr服務(wù)端渲染,使用緩存
3.使用更快的網(wǎng)絡(luò):cdn
讓渲染更快
1.css放在head,js放在body最下面
2.盡早執(zhí)行js,用domContentLoaded觸發(fā)
3.懶加載,(圖片懶加載,上滑加載更多)
4.對(duì)dom查詢進(jìn)行緩存
5.頻繁操作dom,合并到一起插入dom結(jié)構(gòu)
6.節(jié)流throttle,防抖debounce
