浏览器相关-BOM、DOM、ECMAScript

浏览器相关

一、认识浏览器运行状态下的 JS

包含：DOM BOM ECMAScript

((context, undefined) => {
  const _class = ["js", "broswer", "vue"];
  window.classArr = _class.map((item) => item);
  const _url = location.href;
  document.title = "xue xi";
  document.getElementById("app");
})(this, undefiend);
// 总结
// ECMAScript - 基础逻辑、数据处理
// DOM：对于浏览器视窗内HTML文本的相关操作
// BOM：对浏览器本身功能区域的处理

二、BOM 浏览器对象模型

1.location

location.href => "https://www.baidu.com/search?keyword=qianduan#comments"
        .origin => "https://www.baidu.com"
        .protocol => "https"
        .host => "www.baidu.com"
        .port => ''
        .pathname => "/search..."
        .search => "?keyword=qianduan"
        .hash => "#comments"
location.assign('url')  // 替换pathname，再定向到指定path
        .replace('url') // 效果同上，替换浏览历史 => 重定向  先出栈再入栈
        .reload()
        .toString()

2.history

history.state; // 存储当前页面的状态
history.pushState(); // 跳转到指定状态页
history.replaceState(); // 替换当前的状态

• 面试：路由方向- hash 和 history 对比？
• 展示形式不同
  1. history 形态更接近纯普通路由
  2. history 使用时，需要后台指向一个标准文件
  3. 原理不同

3.navigator - 浏览器系统导航信息大集合

navigator.userAgent = > 获取用户身份属性环境

三、DOM - 事件模型

<div id="app">
  <p id="dom">Click</p>
</div>
// 冒泡：p -> div -> body -> html -> document
// 捕获：document -> HTML -> body -> div -> p
el.addEventListener(event,function,useCatpure) // 默认false 冒泡
// 追问：
// 1. 如何阻止事件传播
event.stopPropagation()
// 2.如何阻止默认事件
event.preventDefault()
// 3.相同节点绑定了多个同类事件
event.stopImmediatePropagation()
// 4.性能 - 事件代理

四、网络 - 协议 - XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open();
xhr.send();
xhr.onreadyStateChange = function () {
  // 连接状态
};
xhr.status;
xhr.timeout;
xhr.ontimeout = function () {
  // 超时回调
};

• 面试方向：
  1. RESTFUL - 无状态 | get post put delete
  2. 跨域 - 反向代理 | JSONP | IFRAME
  3. 状态码 - 浏览器缓存 -> 强缓存 | 协商缓存