浏览器内置对象
window
window对象充当全局作用域，同时也代表浏览器窗口：
属性：
innerWidth/innerHeight 浏览器窗口的内部宽度/内部高度
outerWidth/outerHeight 浏览器窗口的整体宽度/整体高度
navigator
navigator对象内部包含浏览器的信息，最常用的属性包括：
navigator.appName
navigator..appVersion
navigator..language
navigator..platform
navigator..userAgent
screen
screen对象表示屏幕的信息，常用的属性有：
screen.width 屏幕宽度，以像素为单位
screen.height 屏幕高度，以像素为单位
screen.colorDepth 返回颜色位数，如8，16，32
location
location对象表示当前页面的URL信息，一个完整的URL
location.protocol 返回URL协议
location.host 返回主机名
location.port 端口号
location.pathname 路径名
location.search url查询条件
location.hash URL锚点部分
location.href 设置或者返回当前显示文档的完整URL
document
document对象表示当前页面。犹豫HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
除此之外：
docment.title可以设置或者获取页面标题
docment.cookie用于获取cookie对象
history
history对象可以查询历史记录
history.back() 返回上级页面
history.forward() 加载记录中的下个页面
go()跳转到记录中的某个页面
浏览器事件
事件传播的三个阶段：捕获，目标对象，冒泡。
1.其中捕获（Capture）是 事件对象(event object) 从 window 派发到 目标对象父级的过程。
2.目标（Target）阶段是 事件对象派发到目标元素时的阶段，如果事件类型指示其不冒泡，那事件传播将在此阶段终止。
3.冒泡（Bubbling）阶段 和捕获相反，是以目标对象父级到 window 的过程。
在任一阶段调用 stopPropagation 都将终止本次事件的传播。
浏览器窗口事件
load 页面加载完成时触发
beforeunload 窗口关闭之前触发
unload 窗口关闭时触发
focus 窗口得到焦点时触发
blur 窗口失去焦点时触发
error 页面上有脚本报错时触发
resize 窗口大小改变时触发
contextmenu 弹出右键菜单时触发
鼠标事件
mousedown 当在元素上按下鼠标按钮时触发
mouseover 当鼠标指针移动到元素上时触发
mousemove 当鼠标指针在元素上移动时触发
mouseout 当鼠标指针移出元素时触发
mouseup 当在元素上释放鼠标按钮时触发
mousewheel 当在元素上滚动鼠标滚轮时触发
键盘事件
keydown 用户按下按键触发
keypress 用户按下按键触发 晚于keydown
keyup 用户释放按键时触发
表单事件
focus 表单元素获取焦点时触发
blur 表单元素失去焦点时触发
change 表单元素值被改变时触发
input 表单元素获得用户输入时触发
select 素内容被选中时触发
submit 提交表单时触发
拖放事件
drag 元素被拖动时触发
dragstart 拖动操作开始时触发
dragover 当元素在有效拖放目标上正在被拖动时触发
dragenter 当元素已被拖动到目标区域时触发
dragleave 当元素离开有效目标时触发
dragend 在拖动操作末端触发
drop 当被拖动元素放置在目标区域时触发
浏览器工作原理
https://www.cnblogs.com/xiaohuochai/p/9174471.html
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是所看到的除了用来显示所请求页面的主窗口之外的其他部分
2. 浏览器引擎 － 用来查询及操作渲染引擎的接口
3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
【Loader】
Loader模块负责处理所有的HTTP请求以及网络资源的缓存，相当于是从URL输入到Page Resource输出的变换过程
【Parser】
1、解析HTML
2、解析CSS
3、解析Javascript
【layout】
Layout过程就是排版
1、创建渲染树
2、计算布局
【Paint】
Paint模块负责将Render树映射成可视的图形，它会遍历Render树调用每个Render节点的绘制方法将其内容显示在一块画布或者位图上，并最终呈现在浏览器应用窗口中成为用户看到的实际页面
网页绘制
【DOM树构建】
将HTML字符编码编译成DOM结构的过程
【Render树构建】
Render树用于表示文档的可视信息，记录了文档中每个可视元素的布局及渲染方式。Render树与DOM树是同时创建的
【Render Layer树构建】
RenderLayer树以层为节点组织文档的可视信息，网页上的每一层对应一个RenderLayer对象。RenderLayer树可以看作Render树的稀疏表示，每个RenderLayer树的节点都对应着一棵Render树的子树，这棵子树上所有Render节点都在网页的同一层显示
RenderLayer树是基于RenderObject树构建的，满足一定条件的RenderObject才会建立对应的RenderLayer节点。下面是RenderLayer节点的创建条件：
1、网页的root节点
2、有显式的CSS position属性（relative，absolute，fixed）
3、元素设置了transform
4、元素是透明的，即opacity不等于1
5、节点有溢出（overflow）、alpha mask或者反射（reflection）效果。
6、元素有CSS filter（滤镜）属性
7、2D Canvas或者WebGL
8、Video元素
回流&重绘
【回流】
回流是指窗口尺寸被修改、发生滚动操作，或者元素位置相关属性被更新时会触发布局过程，在布局过程中要计算所有元素的位置信息。由于HTML使用的是流式布局，如果页面中的一个元素的尺寸发生了变化，则其后续的元素位置都要跟着发生变化，也就是重新进行流式布局的过程，所以被称之为回流
触发回流包括如下操作：
1、DOM元素的几何属性变化
2、DOM树的结构变化
4、改变元素的一些样式
5、调整浏览器窗口大小
触发回流一定会触发后续的重绘操作，而且对一个元素的回流，可能会影响到父级元素。比如子元素浮动后，父元素会出现高度塌陷的情况。所以，性能优化的重点在于尽量只触发小规模的重绘，尽量不触发回流
【重绘】
重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观
由于元素的重绘repaint只发生在渲染层 render layer上。所以，如果要改变元素的视觉属性，最好让该元素成为一个独立的渲染层
display: none/block，会引起回流，从而引起重绘，性能较差
visibility: visibile/hidden，只引起重绘，但由于没有成为一个独立的渲染层，会引起整个页面（或当前渲染层）的重绘，性能较好
opacity: 0/1，opacity小于1时，会产生render layer。所以opacity在0、1的变化中，引起了render layer的生成和销毁，因此，也会引起回流，从而引起重绘，性能较差。如果opacity: 0/0.9，则只会引起重绘
如果对一个元素使用硬件加速渲染，如具有CSS 3D属性，则不会进行重绘和回流。但如果使用硬件渲染的元素过多，会造成GPU的传输压力
【性能优化】
下面列举一些减少回流次数的方法
1、不要一条一条地修改DOM样式，而是修改className或者修改style.cssText
2、在内存中多次操作节点，完成后再添加到文档中去
3、对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示
4、在需要经常获取那些引起浏览器回流的属性值时，要缓存到变量中
5、不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间