js（十七）---js加载时间线和BOM

js加载时间线

为什么要谈一下js加载时间线呢？咱们得知道js是如何实现的吧，整个js引擎在解析页面的步骤是如何实现的呀，那么，咱们就看一下，它是如何实现的。好好的去理解一下吧，今天我也做进一步的了解。

1.创建Document对象，开始解析web页面。解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = "loading".（这个时候页面的状态处于loading）

2.遇到link外部引入的css时，创建新线程加载，并继续解析文档。

3.遇到script外部引入js，并没有设置defer、async，浏览器加载并阻塞页面，等js加载完成并执行脚本，然后继续解析文档。

4.若遇到script标签，但是有defer、async，创建新线程继续加载。但是async异步加载完事之后，以及执行脚本。跟defer有所不同，defer是等所有东西加载结束之后，在加载js.(异步过程不能使用document.write ="....."，这个会将文档重写，导致异步不了)

5.遇到img等，先正常解析dom结构，在异步加载src，并继续解析文档。

6.文档解析完成之后，这个时候document.readyState = "interaction"。

7.完成解析文档之后，所有设置defer的脚本按顺序执行。

8.document对象触发DOMContentLoad事件，这也就说明这程序执行脚本阶段到事件驱动阶段了。

9.当所有的async的脚本加载完成之后，并且也执行了。img等加载完成后，document.readyState = "complete".window对象触发onload事件。

10.以后等待着处理用户的输入数据了，等一些网络事件了。。。

 <script>
          console.log(document.readyState)
          var timer = setInterval(function(){
              console.log(document.readyState)
              clearInterval(timer)
          },50)
  </script>

这种情况会打印两种状态，第一个是loading，第二个是complete。因为script是一个标签，它会处于加载标签的文档中。做一个延迟是，当所有文档都结束了，之后，状态改为complete。

BOM

     BOM（Browser Object Document）即浏览器对象模型。

     BOM提供了独立于内容 而与浏览器窗口进行交互的对象；

     由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

     BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

     BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

那么接下就大致说一下浏览器上的一些属性吧。

Navigator

这张图片上显示了，navigator的一些属性，也标出了，这个重要的属性。用的浏览器类型，是pc端还是移动端，用的什么样的版本，都很清晰的显示出来了。

Screen

screen.availHeight/availWidth 可以查看除了window任务栏之外的屏幕的高度和宽度。

screen.height/width 返回显示器的屏幕的高度和宽度。不过这个兼容的较少。

Location

 在异步加载的文章里就接触到了这个location.protocol，这个是协议名字，具体做什么用的，等到了http协议的时候在具体说明吧。

location.host 可以返回当前的主机名和当前的URL端口号。比如百度就返回www.baidu.com

location.search 设置或返回从问好开始的URL（查询部分）

location.hash 可以跳转到相应的id的元素的位置，和a标签的锚点功能差不多。

location.reload() 方法可以重新加载当前页面

History

用的主要就是__proto__上的方法，这些方法也是在原型链上就行封装的。

history.length 可以返回当前窗口查看过的网页记录的数量，即浏览历史的长度。

history.back() 可以让浏览器进入到下一个历史页面。

history.forward()  可以让浏览器返回到上一个历史页面。

history.go(number) 这个方法有一个参数，当参数是正数的时候，前进到下一个历史页面，当是负数的时候，回退到上一个历史页面。即前两个的综合方法。

这个BOM不同的浏览器上可能有着不同的属性，经常用的到了，大家基本都有。因为没有具体的标准，这里也不能说的太多了。以上是Google浏览器打印的一些结果。望可以做一下参考吧，这个也不用做太多的具体了解了。希望对大家有所帮助吧。