摘要：異步編程，不同于同步編程的請(qǐng)求響應(yīng)模式，其是一種事件驅(qū)動(dòng)編程，請(qǐng)求調(diào)用函數(shù)或方法后，無需立即等待響應(yīng)，可以繼續(xù)執(zhí)行其他任務(wù)，而之前任務(wù)響應(yīng)返回后可以通過狀態(tài)通知和回調(diào)來通知調(diào)用者。

同步：一行一行按順序依次執(zhí)行代碼，當(dāng)前代碼任務(wù)耗時(shí)執(zhí)行會(huì)阻塞后續(xù)代碼的執(zhí)行。這是一種典型的請(qǐng)求-響應(yīng)模型，當(dāng)請(qǐng)求調(diào)用一個(gè)函數(shù)或方法后，需等待其響應(yīng)返回，然后執(zhí)行后續(xù)代碼。

異步：在等待當(dāng)前任務(wù)的響應(yīng)返回之前，可以繼續(xù)執(zhí)行后續(xù)代碼，即當(dāng)前執(zhí)行任務(wù)不會(huì)阻塞后續(xù)執(zhí)行。異步編程，不同于同步編程的請(qǐng)求-響應(yīng)模式，其是一種事件驅(qū)動(dòng)編程，請(qǐng)求調(diào)用函數(shù)或方法后，無需立即等待響應(yīng)，可以繼續(xù)執(zhí)行其他任務(wù)，而之前任務(wù)響應(yīng)返回后可以通過狀態(tài)、通知和回調(diào)來通知調(diào)用者。

一個(gè)瀏覽器進(jìn)程中只有一個(gè)JS的執(zhí)行線程，同一時(shí)刻內(nèi)只會(huì)有一段代碼在執(zhí)行

定時(shí)任務(wù)： setTimeout setInterval

網(wǎng)絡(luò)請(qǐng)求： ajax 動(dòng)態(tài)加載

事件綁定

//單線程就是一次只能做一件事 
//異步：不會(huì)阻塞
console.log(100)
setTimeout(function (){
  console.log(200)
},1000)
console.log(300)
//打印100 300 1秒后打印200


//同步：會(huì)阻塞
console.log(100)
alert(299)          //程序會(huì)卡在這里
console.log(300)


//ajax示例
console.log("start")
$.get("./data.json", function (data) {
  console.log(data)
})
console.log("end")
//先打印start 再打印end 最后get請(qǐng)求完成后打印data


//加載示例
console.log("start")
var img = document.createElement("img")
img.onload = function () {
  console.log("loaded")
}
img.src = "/xx.jpg"
console.log("end")
//start ==> end ==> img.src = "/xx.jpg" ==>loaded


//事件綁定示例
console.log("start")
document.getElementById("btn1").addEventListener("click", function () {
  alert("clicked")
})
console.log("end")
//start ==> end ==> alert("clicked")

同步異步的區(qū)別
同步會(huì)阻塞代碼執(zhí)行，異步不會(huì)(如alert是同步 setTimeout是異步)

setTimeout題目

console.log(1)
setTimeout(function () {
  console.log(2)
}, 0)
console.log(3)
setTimeout(function () {
  console.log(4)
}, 1000)
console.log(5)

1 3 5 2 一秒后4 遇到setTimeout就放在后面

DOM節(jié)點(diǎn)本質(zhì)上是可識(shí)別，可操作的js對(duì)象

獲取DOM節(jié)點(diǎn)

var div = document.getElementById("div")//元素
var divList = document.getElementByTagName("div")//集合
console.log(divList.length)
console.log(divList[0])
var div = document.getElementByClassName("div")//元素
var pList = document.querySelectorAll("p")//集合

Property js對(duì)象屬性

var pList = document.querySelectorAll("p)
var p = pList[0]
console.log(p.style.width) //獲取樣式
p.style.width = "100px"    //修改樣式
console.log(p.classNmae)   //獲取class
p.className = "p1"         //修改class
//獲取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)

Attribute html標(biāo)簽

var pList = document.querySelectorAll("p")
var p = pList[0]
p.getAttribute("data")
p.setAttribute("data", "data-json")
p.getAttribute("style")
p.setAttribute("style", "font-size: 30px")

新增節(jié)點(diǎn)

獲取父,子節(jié)點(diǎn)

刪除節(jié)點(diǎn)

navigator

var ua = navigator.userAgent
var isChrome = ua.indexOf("Chrome")
console.log(isChrome)

screen
screen.width

screen.height

location
location.href

location.protocol //http https
location.host
location.pathname
location.search
location.hash

history
history.back()

history.forWard()

DOM操作常用api
獲取DOM節(jié)點(diǎn) 節(jié)點(diǎn)的property attribute

獲取父，子節(jié)點(diǎn)
新增 刪除節(jié)點(diǎn)

DOM節(jié)點(diǎn)的attr和property區(qū)別
property是一個(gè)js對(duì)象的屬性

attribute是html標(biāo)簽的屬性

檢測(cè)瀏覽器類型
navigator.userAgent

//標(biāo)準(zhǔn)方法
var btn = document.getElementById("btn1")
btn.addEventListener("click", function (event) {
  console.log("clicked")
})


//封裝事件
function bindEvent(elem, type, fn) {
  elem.addEventListener(type, fn)
}

var a = document.getElementById("link")
bindEvent(a, "click", function(e) {
  e.preventDefault()    //阻止默認(rèn)行為
  alert("clicked")
})

點(diǎn)擊p1 alert激活 若沒有e.preventDefault，事件將繼續(xù)向上冒泡直到找到body中的alert取消

  
激活
  
取消
  
取消
  
取消


  
取消
  
取消

點(diǎn)擊每個(gè)a標(biāo)簽彈出相應(yīng)的內(nèi)容

  a1
  a2
  a3
  a4
  

編寫一個(gè)通用的事件監(jiān)聽函數(shù)

  
  
  
  



  

    baidu
    baidu
    baidu
    baidu
    
激活
    
取消
  
  

    
取消
    
取消
  
  

事件冒泡過程
DOM樹形結(jié)構(gòu) 事件冒泡 阻止冒泡

對(duì)于一個(gè)無限下拉加載圖片的頁面，如何給每個(gè)圖片綁定事件
事件代理

XMLHttpRequest

readyState狀態(tài)碼

未初始化 還沒有調(diào)用send()方法

1 載入 已經(jīng)調(diào)用send()方法 正在發(fā)送請(qǐng)求
2 載入完成 send()方法執(zhí)行完成 已經(jīng)接收到全部響應(yīng)內(nèi)容
3 交互 正在解析響應(yīng)內(nèi)容
4 完成 響應(yīng)內(nèi)容解析完成 可以在客戶端調(diào)用

status狀態(tài)碼

請(qǐng)求成功

3xx 需要重定向 瀏覽器直接跳轉(zhuǎn)
4xx 客戶端請(qǐng)求錯(cuò)誤
5xx 服務(wù)器端錯(cuò)誤

跨域
瀏覽器的同源策略不允許ajax訪問其他域的接口

協(xié)議(http)、域名(baidu.com)、端口(80)有一個(gè)不同就算跨域
可以跨域的三個(gè)標(biāo)簽 img script link
jsonp:利用src屬性引入其他域下的js，需要后端返回?cái)?shù)據(jù)是一個(gè)函數(shù)調(diào)用，處理后的數(shù)據(jù)作為函數(shù)的參數(shù)傳入,實(shí)現(xiàn)跨域訪問接口。
服務(wù)器端設(shè)置http header:
//注意：不同后端語言的寫法可能不一樣
//第二個(gè)參數(shù)填寫允許跨域的域名稱，不建議直接寫"*"
response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com");
response.setHeader("Access-Control-Allow-Headers","X-Request-With");
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true");

加載資源形式：
輸入url 加載html，加載html中的靜態(tài)資源 script link img

加載資源過程
瀏覽器根據(jù)dns服務(wù)器得到域名的ip地址

向這個(gè)地址發(fā)送http請(qǐng)求
服務(wù)器收到，處理，返回請(qǐng)求
瀏覽器得到返回內(nèi)容

瀏覽器渲染頁面過程
根據(jù) HTML 結(jié)構(gòu)生成 DOM Tree

根據(jù)css生成css節(jié)點(diǎn)
將dom和css節(jié)點(diǎn)整合成渲染樹
根據(jù)渲染樹開始渲染和展示
遇到script標(biāo)簽時(shí)會(huì)阻塞渲染

webpack打包、使用cdn、服務(wù)端渲染ssr、圖片懶加載、事件節(jié)流、事件代理

手寫ajax

var xhr = XMLHttpRequest()
xhr.open("GET","/api", false)
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.readyState == 200) {
      console.log(xhr.responseText)
    }
  }
}
xhr.send(null)

跨域方法

服務(wù)器端設(shè)置http header

請(qǐng)描述一下cookie，sessionStorage，和localStorage的區(qū)別
容量區(qū)別，cookie為4k，localStorage和sessionStorage為5M

cookie每次請(qǐng)求都會(huì)被攜帶在ajax中，local Storage和session Storage不會(huì)被攜帶只作為存儲(chǔ)使用

window.onload 和 DOMContentLoaded區(qū)別
前者在頁面全部資源加載完才會(huì)執(zhí)行 包括圖片視頻等

后者在dom渲染玩即可執(zhí)行 此時(shí)圖片視頻還未加載完