浏览器JS对象

浏览器相关

1.认识浏览器运行态下的JS

包含：ECMAScript，BOM，DOM

	(function(context, undefined){
		const _class = ['js', 'browser', 'vue']
		
		//向全局作用域中存储一个变量数组  - 写 - 在全局对象
		window.classArr = _class.map(item => item) 
		
		//获取了当前页面的地址 - 读 - 取路由
		const _url = location.href

		//设置了页面的标题 - 写 - ；浏览器tab
		document.title = 'test class'

		//获取了一个渲染节点 - 读 - 渲染元素
		document.getElememtById('app');
	})(this)

	//简述：
	//ECMAScript - 基础逻辑，数据处理
	//BOM - 支持对浏览器本身功能区域的读写处理
	//DOM - 支持对于浏览器视窗内的HTML文本的相关操作辅助

二，BOM

1.location

	location.href 	  => 'https://www.baidu.com/search?class=browser#comments'
			.origin   => 'https://www.baidu.com'
			.host 	  => 'www.baidu.com'
			.protocol => 'https:'
			.port 	  => '端口号'
			.pathname => '/search'
			.search   => '?class=browser'
			.hash     => '#comments'
			
	location.assign('url')  //跳转到指定的path，替换pathname
			.replace('url') //效果同时，同时替换浏览历史
			.reload()
			.toString()     // 产出当前页面地址字符串

		// URL - 统一组员定位符 - 标志需求文件的位置定位信息
		// URI - 统一资源标识符 - 单个文件身份id
		
		* 面试方向：
		1.location api 结合业务
		2.路由相关：在跳转，操作，参数 => 可返回，可刷新
		3.url处理 - 正则 or 手写

		encodeURL:全局的具体编译
		encodeURLComponent:局部
		decodeURL:
		decodeURLComponent:

2.history

	history.state				=> 存储当前页面的状态
	history.pushState()			=> 流转到指定的状态之上
	history.replaceState()		=> 替换当前状态

	面试方向：路由方向	history & hash 的区别？

3.navigator

• 浏览器系统信息的大集合

	navigator.userAgent  //获取当前用户环境信息

	面试方向：
	1.UA 	=> 浏览器兼容性
	2.剪切板，键盘输入

4. screen

标识页面元素区域信息的

	视窗  整体大小
	面试方向  - 判断区域
	全局入口：
	window.innerHeight
	window.innerWidth
	
	文本获取
	document.documentElement.clientHeight
	document.documentElement.clientWidth
	document.body.clientHeight
	document.body.clientWidth

	网页size  => offsetHeight  =  clientHeight  +  滚动条  + 边框
	document.documentElement.offsetHeight		
	document.documentElement.offsetWidth
	document.body.offsetHeight
	document.body.offsetWidth

	//定位问题
	scrollLeft / scrollTop  距离常规左/上滚动距离
	offsetLeft / offsetTop  距离常规左上的绝对距离

三.event 事件模型

	 <div id='app'>
	 	<p id='dom'>click</p>
	 </div>

	//冒泡 -  p => div => body => HTML => document
	//捕获 -  document => HTML => body => div => p

	追问
	1.如何阻止事件的传播
	event.stopPropagation()		阻止的是时间的传播，而不是默认时间的发生

	2.如何阻止默认事件
	event.preventDefault()

	3.相同节点绑定了多个同类型的事件，如何阻止
	event.stopImmedaitePropagation()

• 面试方向 => 兼容性 & 性能

//兼容性：
	addEventListener
	attachEvent
	//区别
	1.传参 attachEvent => onClick
	2.执行顺序 attachEvent 后绑定先执行：addEventListener - 先绑定先执行
	3.解绑 detachEvent； removeEventListener
	4.阻断传播 e.cancelBubble = true; e.stopPropagation()
	5.阻止默认值 e.returnValue = false; e.preventDefault()

//性能 - 代理
	<ul class='list'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	const list = document.querySelector('.list');
	const li = list.getElementsByTagName('li')
	const content = document.querySelector('.content')
	
	for(let n = 0; n < li.length; n++){
		li[n].addEventListener('click',function(){
			//点击后事件
		})
	}

	//代理
	function onClick(e){
		let e = e || window.event //兼容
		if(e.target.nodeName.toLowerCase() === 'li'){
			const liList = this.querySelector('li')
			index = Array.prototype.indexof.call(liList,e.target)
		} 
	}
	list.addEventListener('click',onClick,false)

四. 网络层

	//axios
	//实例化
	const xhr = new XMLHttpRequest();
	//初始化连接
	xhr.open(method,url,async)
	//发送请求
	xhr.send(data)
	//等待接收
	xhr.onreadystatechange = () =>{
		// readyStatus
		// 0 - 尚未调用open
		// 1 - 已经open
		// 2 - 已经发送请求
		// 3 - 已经接收到请求返回的数据了
		// 4 - 请求完成
		if(xhr.readyStatus === 4){
			if(xhr.status >= 200 && xhr.status <300 || xhr.status === 304){
				console.log('请求成功')
			}
		}
	}
	//设置超时时间
	xhr.timeout = 1000;
	
	//超时
	xhr.ontimeout = () => console.log('timeout!')

五.浏览器原理

1.url => 请求资源 - 网络请求 + 地址解析
2.解析器 => DOM + CSSOM => layout tree => 首次布局
3.阻塞的js执行
4.painting => 渲染 => 把内容绘制到屏幕上
5.后置重排 & 重绘