浏览器模型

关于重流和重绘的优化技巧

读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
缓存 DOM 信息。
不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
使用documentFragment操作 DOM
动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
只在必要时才显示隐藏元素。
使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
使用虚拟 DOM（virtual DOM）库。

一.window 对象

window对象指当前的浏览器窗口。它也是当前页面的顶层对象，一个变量如果未声明，那么默认就是顶层对象的属性。

a = 1;
window.a // 1

1.window.name

window.name属性是一个字符串，表示当前浏览器窗口的名字。窗口不一定需要名字，这个属性主要配合超链接和表单的target属性使用。

window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"

2.位置大小属性

（1）window.screenX，window.screenY
返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。
（2） window.innerHeight，window.innerWidth
返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。
（3）window.outerHeight，window.outerWidth
属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。
（4）window.scrollX，window.scrollY
window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。

3.全局对象属性

window.document：指向document对象。注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
window.location：指向Location对象，用于获取当前窗口的 URL 信息。它等同于document.location属性。
window.navigator：指向Navigator对象，用于获取环境信息。
window.history：指向History对象，表示浏览器的浏览历史。
window.localStorage：指向本地储存的 localStorage 数据。
window.sessionStorage：指向本地储存的 sessionStorage 数据。
window.console：指向console对象，用于操作控制台。
window.screen：指向Screen对象，表示屏幕信息。

4.window对象的事件

load 事件和 onload 属性
load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。

5.iframe 元素

对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的 DOM 节点，然后使用contentWindow属性获得iframe节点包含的window对象。

var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;

上面代码中，frame.contentWindow可以拿到子窗口的window对象。然后，在满足同源限制的情况下，可以读取子窗口内部的属性。
// 获取子窗口的标题
frameWindow.title