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

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

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

一個瀏覽器進程中只有一個JS的執行線程，同一時刻內只會有一段代碼在執行

定時任務： setTimeout setInterval

網絡請求： ajax 動態加載

事件綁定

//單線程就是一次只能做一件事 
//異步：不會阻塞
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")

同步異步的區別
同步會阻塞代碼執行，異步不會(如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節點本質上是可識別，可操作的js對象

獲取DOM節點

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")

新增節點

獲取父,子節點

刪除節點

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節點 節點的property attribute

獲取父，子節點
新增 刪除節點

DOM節點的attr和property區別
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，事件將繼續向上冒泡直到找到body中的alert取消

  
激活
  
取消
  
取消
  
取消


  
取消
  
取消

點擊每個a標簽彈出相應的內容

  a1
  a2
  a3
  a4
  

編寫一個通用的事件監聽函數

  
  
  
  



  

    baidu
    baidu
    baidu
    baidu
    
激活
    
取消
  
  

    
取消
    
取消
  
  

事件冒泡過程
DOM樹形結構 事件冒泡 阻止冒泡

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

XMLHttpRequest

readyState狀態碼

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

1 載入 已經調用send()方法 正在發送請求
2 載入完成 send()方法執行完成 已經接收到全部響應內容
3 交互 正在解析響應內容
4 完成 響應內容解析完成 可以在客戶端調用

status狀態碼

請求成功

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

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

協議(http)、域名(baidu.com)、端口(80)有一個不同就算跨域
可以跨域的三個標簽 img script link
jsonp:利用src屬性引入其他域下的js，需要后端返回數據是一個函數調用，處理后的數據作為函數的參數傳入,實現跨域訪問接口。
服務器端設置http header:
//注意：不同后端語言的寫法可能不一樣
//第二個參數填寫允許跨域的域名稱，不建議直接寫"*"
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中的靜態資源 script link img

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

向這個地址發送http請求
服務器收到，處理，返回請求
瀏覽器得到返回內容

瀏覽器渲染頁面過程
根據 HTML 結構生成 DOM Tree

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

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

手寫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的區別
容量區別，cookie為4k，localStorage和sessionStorage為5M

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

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

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