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

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

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

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

定時任務： setTimeout setInterval

網(wǎng)絡請求： ajax 動態(tài)加載

事件綁定

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


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


//ajax示例
console.log("start")
$.get("./data.json", function (data) {
  console.log(data)
})
console.log("end")
//先打印start 再打印end 最后get請求完成后打印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ū)別
同步會阻塞代碼執(zhí)行，異步不會(如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é)點本質(zhì)上是可識別，可操作的js對象

獲取DOM節(jié)點

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對象屬性

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標簽

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é)點

獲取父,子節(jié)點

刪除節(jié)點

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é)點 節(jié)點的property attribute

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

DOM節(jié)點的attr和property區(qū)別
property是一個js對象的屬性

attribute是html標簽的屬性

檢測瀏覽器類型
navigator.userAgent

//標準方法
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()    //阻止默認行為
  alert("clicked")
})

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

  
激活
  
取消
  
取消
  
取消


  
取消
  
取消

點擊每個a標簽彈出相應的內(nèi)容

  a1
  a2
  a3
  a4
  

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

  
  
  
  



  

    baidu
    baidu
    baidu
    baidu
    
激活
    
取消
  
  

    
取消
    
取消
  
  

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

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

XMLHttpRequest

readyState狀態(tài)碼

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

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

status狀態(tài)碼

請求成功

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

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

協(xié)議(http)、域名(baidu.com)、端口(80)有一個不同就算跨域
可以跨域的三個標簽 img script link
jsonp:利用src屬性引入其他域下的js，需要后端返回數(shù)據(jù)是一個函數(shù)調(diào)用，處理后的數(shù)據(jù)作為函數(shù)的參數(shù)傳入,實現(xiàn)跨域訪問接口。
服務器端設置http header:
//注意：不同后端語言的寫法可能不一樣
//第二個參數(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服務器得到域名的ip地址

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

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

根據(jù)css生成css節(jié)點
將dom和css節(jié)點整合成渲染樹
根據(jù)渲染樹開始渲染和展示
遇到script標簽時會阻塞渲染

webpack打包、使用cdn、服務端渲染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)

跨域方法

服務器端設置http header

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

cookie每次請求都會被攜帶在ajax中，local Storage和session Storage不會被攜帶只作為存儲使用

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

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