浏览器原理和BOM

浏览器：多线程
1. js 引擎
2. UI 渲染
3. 事件线程
4. 发起请求的线程
5. 定时器的线程

js -> 单线程的 -> 编程方便
js 时间线
- 第一阶段：载入阶段 loading 默认：同步
1. 获取页面内容 html -> 解析
2. DOM 树
3. 同步：下载
4. DOM 树
5. 解析完成
6. 渲染 文件下载，图片
7. 载入阶段结束

• 第二阶段：事件阶段 异步

window 对象

var age = 29;
function sayAge() {
    alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29

全局作用域中定义了一个变量 age 和一个函数 sayAge()，它们被自动归在了window 对象名下。
于是，可以通过 window.age 访问变量 age，可以通过 window.sayAge() 访问函数 sayAge()。
由于 sayAge() 存在于全局作用域中，因此 this.age 被映射到 window.age，最终显示的仍然是正确的结果。

弹窗

• alert 同步 阻断 alert("alert 弹窗")
• confirm

var bcf = confirm("confirm 弹窗");
console.log("点击："+bcf);

• prompt

var strpt = prompt("prompt 输入", "默认值");
console.log("填了:" + strpt);

导航栏 location 对象

• window.location 对象
  • host 属性：返回服务器名称和端口号（如果有）
  • hostname：放回不带端口号的服务器名称
  • href：返回当前加载页面的完整 URL。而 location 对象的 toString() 方法也返回这个值
  • location.reload() 刷新页面
  • location.replace("http://www.baidu.com") 打开新的页面

history 对象 浏览器的历史 前进 后退

• history.back() 后退一步
• history.forward() 前进一步
• history.go(-1) 后退一页
• history.go(2) 前进两页

navigator 对象

• userAgent 属性：浏览器的用户代理字符串
  userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko)

screen 对象

显示分辨率

计时器

循环执行：var sil = setInterval(函数名, 时间);

var num = 0;
function add() {
    console.log("num = " + ++num);
}
var sil = setInterval(add, 1000);

停掉：clearInterval(sil);

一次执行：var sil = setTimeout(函数名, 时间);
clearTimeout(sil);

var num = 0;
function add() {
    console.log("num = " + ++num);
}
var sil = setInterval(add, 1000);
function end() {
    console.log("set Timeout clearInterval");
    clearInterval(sil);
}
setTimeout(end, 5000);