js时间线：浏览器用来记录js执行的状态
loading: init -loading
创建document ,element text节点；生成domtree 结构
document.readyState = loading
---------------
interactive:loading-interactive
解析html结构
css
html
js
html 结构 解析完毕
document.readyState = interactive
DOMContentloaded:addEventlistenear()
异步加载的资源：
img src=
iframe src=
异步数据
complete:interactive-complete
document.readyState = complete
$(document).ready(function(){
DOMContentloaded:
})
js单线程
1、js 执行 会导致 页面html 解析 阻塞
异步处理方式：独立开辟线程（子线程）(间接让js实现了“多线程”)
setTimeout()
setInterval()
ajax
优化：
body
<script>
</script>
js的异步加载：
<script async="async"></script> 下载js异步执行->立即执行
<script defer="defer"></script>下载js异步执行->interactive后执行
原生ajax:异步通信
var xhr= new XMLHttpReqest();
//post 请求 、传值到服务器
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.open(method,url,true) // 设置请求的参数 false 同步
请求的状态码：
200 成功
300
400 服务器
401
500
xhr.onreadystatechange = function(){
if(this.status ==200 && this.readyState ==4 ){
this.response : 服务器响应的数据
}
}
// str ="key=value&key2=value2"
xhr.send(str)
异步：独立线程
get:数据 附着在地址栏上
post: 数据存储在requestHeader()
异步通信:与服务器做数据交互
无刷新请求： 页面的局部刷新
1、异步的表单提交
2、接口调用
3、部分无刷新请求数据的特效
