浏览器内置JS对象

ConstantineKrysent
129 阅读5分钟

浏览器相关

浏览器运行下的JS包含：bom dom ecmascript

  • ECMAScript - 基础逻辑、数据处理
  • Dom - 对于浏览器视窗内HTML文本的相关处理和操作
  • BOM - 对浏览器本身功能区域的处理

BOM

BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象

  • document 对象
  • frames 对象
  • history 对象
  • location 对象
  • navigator 对象
  • screen 对象

window对象关系属性

  • parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame）
  • self ：指向当前的window对象，与window同意。 （window对象）
  • top ：如果当前窗口为frame，指向包含该frame的top-level的window对象
  • window ：指向当前的window对象，与self同意。
  • opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者）

1. location

  • location.href = 'wwww.baidu.com/search?id=1…'

  • location.origin 获取域名 www.baidu.com

  • location.host 获取主机地址 www.baidu.com

  • location.protocol 获取http协议类型 http

  • location.port 获取端口

  • location.pathname 获取路由 /search/

  • location.search 获取参数 ?id=123

  • location.hash 获取哈希地址

  • location.assign(url) 跳转到指定path，替换pathname的值

  • location.replace(url) 跳转地址，但是会替换浏览器浏览历史

  • location.reload() 重新加载刷新

  • location.toString() 字符串输出当前完整地址

注重问题

  • 1、location的api
  • 2、路由相关：跳转、参数、操作 场景：可返回history、是否刷新 hash
  • 3、url处理 - 正则 或者 手写js解析url

2. history

  • history.pushState() 跳转到指定状态页面上
  • history.replaceState() 替换当前状态

3. navigator

  • appCodeName 返回浏览器的代码名
  • appName 返回浏览器的名称
  • appVersion 返回浏览器的平台和版本信息
  • browserLanguage 返回当前浏览器的语言
  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
  • cpuClass 返回浏览器系统的 CPU 等级
  • onLine 返回指明系统是否处于脱机模式的布尔值
  • platform 返回运行浏览器的操作系统平台
  • systemLanguage 返回 OS 使用的默认语言
  • userAgent 返回由客户机发送服务器的 user-agent 头部的值
  • userLanguage 返回 OS 的自然语言设置

浏览器系统信息的集合

  • navigator.userAgent/userAgentData获取当前用户环境的信息（比如可以获取当前浏览器pc端的相关信息）

注重问题

  • 1、userAgent 可以读取环境信息，用来做浏览器兼容处理，判断浏览器版本、平台信息。比如需要知道用户在哪一台设备进行访问的时候
  • 2、剪切板复制功能、键盘按键功能

4. screen 表示显示区域的参数-屏幕信息

注重问题 *1、对于区域的判断：window视窗

全局入口处

window.innerWidth\innerHeight

文本处进行获取

document.documentElement.clientHeight/clientWidth

document.body.clientWidth/clientHeight

网页的size

offsetHeight = clientHeight + 滚动条 + 边框

document.documentElement.offsetHeight/offsetWidth

document.body.offsetHeight/offsetWidth

某个元素的位置定位

scrollLeft / scrollTop - 距离常规左、上 滚动距离

offsetLeft / offsetTop - 距离常规左、 上绝对距离

el.getBoundingClientRect() 提供某个元素所有位置信息集合 top\left\right\bottom 但存在浏览兼容性 - 在ie浏览器中会多出两个像素，要注意抹平

事件模型

分为冒泡和捕获

冒泡：从最内到外 。 p -> div -> body -> HTML -> document

捕获：从外到内 。 document HTML body div p

el.addEventListener(event,function,useCapure) // useCapture 是否使用捕获 默认false 为冒泡

追问

1、如何阻止事件传播？

event.stopPropagation();

注意：无论向上还是向下都可以阻止事件的传播，但是只能阻止自行添加事件行为的发生！不能阻止标签默认事件的发生，比如a标签默认的跳转

2、如何阻止默认事件的发生、传播？

event.preventDefault();

用来取消默认事件的发生

3、相同的节点绑定多个同类的事件，如何阻止事件的进行？比如同一个标签绑定了多个click事件

event.stopImmediatePropagation();

4、兼容性

一般都是addEventListener ,ie使用的是attachEvent。区别是

  • 传参不同，attachEvent对于所有的事件名都要加on
  • 执行顺序不同，attachEvent是后绑定先执行；addevntlistener是先绑定后执行
  • 解绑方法不一样，detachEvent 和 removeEventListener
  • 阻止事件传播方法不一样，e.cancelBubble = true; 和 e.stopPropagation()
  • 阻止默认事件 e.returnValue 和 e.preventDefault()

5、性能优化：事件代理

<ul class='list'>
    <li>1<li/>
    <li>1<li/>
    <li>1<li/>
    <li>1<li/>
    ....
</ul>

//如何实现给每一个li标签绑定事件？ 
方法一： 获取所有的li标签，然后循环数组，给每一个li添加addeventlistenner

方法二： 事件代理 - 利用冒泡的方法。

五、浏览器原理

  • 1.DOM
  • 2.CSSOM 浏览器将css解析成树形的数据结构
  • 3.Render Tree 合并后生成具有样式 + 元素 + 层级解析树
  • 4.ayout·计算出每个节点要渲染的位置
  • 5.Painting 渲染

重排 & 重绘

  • reflow 重排，元素几何尺寸发生了变化，我们需要重新计算layout tree
  • repaint 重绘，只是重新渲染，某个元素背景、颜色、边框颜色
  • display:none => reflow 是重排
  • visibility:hidden => repaint 是重绘

重排一定会导致重绘，但重绘不一定导致重排。所以要尽量减少重绘，一定要避免重排，动态的进行位置排列，重新技术layout tree会消耗性能

avatar
文章
阅读
粉丝