BOM相关知识

一、基础定义

其实，Javascript是从ECMAScript演变而来，记录着关于Web的一些Api，其可以通过DOM与BOM来展开。

下面将会对BOM进行阐述

首先  BOM（Browser Object Model）：简称——浏览器对象模型，其核心是Window对象

Window：浏览器窗口

histiry:  历史记录

screen：屏幕

navigator：浏览器信息

location：地址栏

网络请求

数据存储（区分缓存）

二、浏览器相关

1、浏览器内容加载

我们在访问网站其实就是在访问html文本，当浏览器加载 html 会遇到 css.js 和 js，那么浏览器将会怎样去加载处理呢？

通常情况下，html结构会正常解析，如果遇到外部的css文件，会下载css文件并执行，下载的同时会继续解析html，两者互不干扰

但是对于js会有不一样的执行效果

首先JS是单线程语言，只有在当前事件处理完成后才执行下一个事件，因此

我们在遇到外部的JS文件时，会暂停解析html，下载并执行JS文件，当JS执行结束后再对html结果进行解析。

【扩展——Script标签的两个属性】

-defer: 如果遇到外部 JS,下载当前 JS 文件，下载期间 html 继续解析，下载结束 JS html 解析结束后执行 JS 文件 (等同于写在下面)

-async: 如果遇到外部 JS,下载当前 JS 文件，下载期间 html 继续解析，下载结束，html 暂停解析， JS 立即执行 -> 无法保证文件执行顺序

2、浏览器页面渲染

浏览器如何将html进行页面显示？

过程：

1.  解析：html —> DOM  css —> CSSOM

2.  合成：DOM + CSSOM —> render tree (渲染树)

3.  布局（flow）：根据渲染树计算在页面的真正布局

4.  绘制：根据计算结果绘制到屏幕

JS  可以操作页面：可能导致页面发生变化，页面需要重新渲染，会影响上面的第三点和第四点

        - 如果页面受 JS 影响，需要重新计算布局，叫做重排或者回流（reflow）

        - 如果页面受 JS 影响，样式发生变化，需要查询绘制样式，叫做重绘

因此，重排一定会导致重绘

那么我们该如何减少重排呢？

1、减少直接操作dom元素，改用className用于控制
2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的
4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
5、如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

浏览器自身的优化
浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘

我们还可以了解其他的优化手段，以便提高代码的执行效率。

3、关于 window 的相关知识

        - 浏览器窗口

                - 打开&关闭窗口（ open() & close() opener closed）

                - 窗口移动（moveTo() moveBy）

                - 窗口大小修改（resizeTo resizeBy）

                - 窗口聚焦&失焦(失效)（focus() blur()）

                - 窗口滚动（scroll scrollTo scrollBy(x,y)）

//html{
//behavior:smooth;
//}

document.querySelector("button").onclick = function () {
        // var features = `height=50, width=50, top=100, left=100, toolbar=no,menubar=no,location=no, status=no`; //设置新窗口的特性
        // window.open("http://www.baidu.com", "baidu", features);

        window.scrollTo(0, 1500);
        // window.scrollTo({
        //   top: 1500,
        //   behavior:"smooth"
        // })
      };

        - 全局对象（开发者自己定义的属性方法）

        - 顶层对象（浏览器提供给开发者使用的属性方法）

                scrollHeight()  页面的高度

                - devicePixelRatio -> DPR *

               *  - alert()、confirm()和 prompt()

               *  - 定时器 -> 不会自动被回收,建议使用完就回收 *

               *    - setTimeout/clearTimeout

               *    - setInterval/clearInterval -> 在标签也处于后台情况也会执行

               *    - requestAnimationFrame(cb) -> 在重绘前执行

               *    - requestAnimationFrame(cb) -> 在浏览器空闲时执行

               *   - 滚动位置 &大小

               *    - 滚动位置 - scrollX,scrollY *

               *    - 窗口大小 - innerWidth,innerHeight ->                 document.documentElement.clientWidth

               *   - 子页面

    在初级 window 既做顶层对象，也做全局对象（使用var function 存入 window）

    而对于现代新的定义变量的方式定义的变量不存入 window (let const  将其存入 script)

4、screen：屏幕

- orientation.type

        - landscape-primary  横屏

        - portrait-primary  竖屏

// <div class="mask hide">
    //  <p>请切换至竖屏显示内容</p>
  //  </div>


//.mask{
       // position: fixed;
        //left: 0;
        //top: 0;
       // bottom: 0;
      // right: 0;
       // background-color: black;

       // display: flex;
      //  justify-content: center;
       // align-items: center;

      //  color: white;
      //}

    //  .hide{
        //display: none;
      //}



    window.addEventListener("orientationchange", checkOrientation);

      function checkOrientation() {
        if(screen.orientation.type == 'landscape-primary'){
          document.querySelector('.mask').classList.remove('hide')
        } else {
          document.querySelector('.mask').classList.add('hide')
        }
      }

4、history：历史记录

        - length  当前页面拥有的历史记录数量

（1）根据历史记录切换内容

history.back(）        历史记录后退

history.forward()        历史记录后退

history.go(-2)        历史记录后退两个

（2）创建历史记录

history.pushState({'abc':111},'abc','./abc.html')        //创建新的但页面不会跳转

history.replaceState()        //将原来的替换掉

（3）单页面应用：SPA 

点击一个元素时页面不会进行刷新，避免出现白屏的样式，但是也会有历史记录存在

hash  模式

history  模式

5、Navigator：浏览器相关的信息（杂项）

Navigator.clipboard        剪切板

Navigator.geolocation.getCurrentPosition(successCallback,errorCallback?)

Navigator.onLine        网络情况

Navigator.userAgent        浏览器标识符 （区别手机端还是PC端）

console.log(navigator);
      // navigator.geolocation.getCurrentPosition(function (res) {
      //   console.log(res);

      //   //       // coords 坐标信息
      //   //       // latitude: 30.597811933342445
      //   // ​​      // longitude: 104.06104511624082
      // });

6、location：地址栏

href        完整网址        通过设置href可以打开新的页面

protocol：网络协议

hostname：域名/IP

port：服务器端口

pathname：访问路径地址

search：请求字符串/查询参数

hash：hash  字符串    -->  #126472

host：hostname  +  port

origin：protocol  +  hostname  +  port  -->确定访问的网站（服务）地址  ——>源 

href  =  网络协议  +  域名/IP  +  服务器端口  +  访问路径地址  +  请求字符串/查询参数  +  hash  字符串

DNS  域名解析服务器

reload()  刷新页面

assign(url)  打开新页面  相当于location.herf="url"的作用

replace(url)  打开新页面   是替换原来的页面  原有的页面不存在历史记录

URL  构造函数

    对 url 格式的处理

    URLSearchParams 构造函数： 对 search 进行格式化

 let url='http://39.156.66.18/s?wd=geolocation&ie=utf-8&id=1653274#126427'
console.log(new URL(url));

url  编码  &  解码：

编码只会处理汉字部分

      - encodeURI 编码

      - decodeURI 解码

      - encodeURIComponent 完全编码

      - decodeURIComponent 完全解码

console.log(decodeURI('https://www.baidu.com/s?ie=utf-8&wd=%E5%89%8D%E7%AB%AF'));
console.log(decodeURIComponent('https://www.baidu.com/s?ie=utf-8&wd=%E5%89%8D%E7%AB%AF'));

三、网络相关

1、网络请求：ajax  -->  Asynchronous  JavaScript  and  XML

数据传输格式：

曾经：XML

现在：json

        JSON.parse()  将json字符串转换为对象

        JSON.stringify()  将对象转换为json字符串

发起请求的技术：

XMLhttpRequest

fetch

fetch("http://47.98.138.57:3000/banner",{})
        .then((res) => res.json())
        .then((data) => {
          for (let banner of data.banners) {
            let img = document.createElement("img");

            img.src = banner.imageUrl;

            document.body.append(img);
          }
        });

get & post  基于http请求

http 请求格式：请求行 请求头 请求体

 POST http://47.98.138.57:3000/personalized?limit=8 HTTP/1.1

    Content-Type: application/json;charset=utf8;

2、请求跨域

浏览器为安全考虑，部署一个同源策略限制，当请求双方处于非同源情况下，默认不允许访问。

【解决方案】

CORS：跨域资源共享策略  -->服务器

请求代理：

 JSONP

四、数据存储

1、主要存储内容相关

- 用户信息存储

- 登录凭证记录

- 未登录时的操作设置

- 网络离现时数据临时存储

2、存储方式

- cookie

        - 数据量极小（一般不超过4kb）

        -  存储在 cookie 中的数据会随着请求的发送被带到服务端

        - 服务端可以控制 cookie （服务器告诉浏览器要存一个什么值，浏览器帮服务端存在cookie 里面）

- indexed  DB

        - 数据量不限

        - 存储类型不限

        - 操作复杂

Localforage：是一个可以存储大量数据操作也容易的一个库（是对数据库进行操作）

- storage

        - 数据量可观（10mb）

        - 只能存储字符串

        - sessionStorage

                - 存在于页面打开期间

                

        - localStorage

                - 存在时间不限

                

// 添加数据

      localStorage.setItem('abc','123')
      localStorage.setItem('asd','123')
      localStorage.setItem('11223','123')
      localStorage.nickname = 'lpz'
// 获取数据
     let data = localStorage.getItem('abc')
      console.log(data);
      console.log(localStorage.asd);


//  删除数据
      localStorage.removeItem('abc')

// 清除数据
      localStorage.clear()


//也可以直接使用对象的方式去操作

存储 & 缓存

        - 存储：开发者自己去存储一些数据

        - 缓存：浏览器去缓存资源（服务器指定资源缓存多久）