本文转载自博客园的小火柴的蓝色理想。

对话框

  window对象提供几种弹出框。

alert()
　　alert()方法接受一个字符串，并将其显示给用户并等待用户关闭对话框。

confirm()
　　confirm()方法同样接收一个字符串，并将其显示给用户。返回的布尔值若是true表示单击OK，false表示单击Cancel或者右上角的关闭按钮。

prompt()
  prompt()方法接收两个参数，要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)。如果用户单击了OK按钮，则返回文本输入域的值；如果用户单击了Cancel或者右上角的关闭按钮，则该方法返回null。

var isReady = window.prompt("Can you tell me what's your name?","zyb")
console.log(isReady)

print()
  window.print()方法可以用来显示打印对话框。

BOM

  window提供了BOM(brower object model)，用于管理窗口及窗口间的通讯，有的浏览器窗口可能包含多个标签页，每个标签页都有自己的window对象，通过window下的BOM相关API可以轻易地获取窗口位置、窗口大小，管理窗口的打开与关闭。

location

  location提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location是一个很特别的对象，因为它既是window对象的属性，也是document对象的属性，而且还可以单独使用。

var URL = 'http://localhost:8080/index.html?q=test#text'
console.log(location.hash) // #text
console.log(location.search) // ?q=test

  使用location对象可以通过很多方式来改变浏览器的位置。

assign()
　　使用assign()方法并为其传递一个URL，可以立即打开新URL并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location设置为一个URL值，相当于调用assign()方法。

location.assign("http://baidu.com"); 
window.location = "http://baidu.com"; 
document.location = "http://baidu.com";
location.href = "http://baidu.com";//最常用

  每当修改location的属性(hash除外)，页面都会以新URL重新加载。

location.hash = "#section1";  //修改hash值
location.search = "?q=javascript"; //修改查询字符串
location.hostname = "www.baidu.com" //修改主机名
location.pathname = "mydir" //修改路径
location.port = "8080" //修改端口号

  通过上述任意一种方式修改URL后，浏览器的历史记录都会生成一条新记录，因此用户通过单击后退按钮会导航到前一个页面。

replace()
　　　通过上述任意一种方式修改URL后，浏览器的历史记录都会生成一条新记录，因此用户通过单击后退按钮会导航到前一个页面。
　　而要禁用这种行为，可以使用replace()方法，该方法接收一个参数即要导航到的URL，结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录，也就是说用户不能回到前一个页面。

location.replace("http://baidu.com")

reload()
　　reload()方法用于重新加载当前显示的页面。如果调用reload()方法时不传递任何参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要传递参数true
　　位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素，为此，最好将reload()放在代码的最后一行。

//有可能从缓存中加载
location.reload();

//从服务器重新加载
location.reload(true);

  [注意]千万不要在页面中直接使用location.reload()方法，此方法会造成页面的无限刷新。因为页面刚加载完成，遇到该方法，则重新加载页面，又遇到该方法，则又加载页面，从而造成页面的无限刷新。

hashchange
　　HTML5新增了hashchange事件，以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员。之所以新增这个事件，是因为在Ajax应用中，开发人员经常要利用URL参数列来保存状态或导航信息。
  必须要把hashchange事件监听函数添加给window对象，URL参数的hash值变化就会调用它，此时浏览器传入的事件对象e应该额外包含两个属性：oldURL和newURL。这两个属性分别保存着参数列表变化前后的完整URL。

window.onhashchange = function(e){
    console.log(e.oldURL,e.newURL);
}

  [注意]所有的IE浏览器都不支持oldURL和newURL这两个属性，让我们来做兼容性处理。

(function(window) {
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location;
  var oldURL = location.href;
  var oldHash = location.hash;

  // 每隔100毫秒检查一下URL的hash
  setInterval(function() {
    var newURL = location.href;
    var newHash = location.hash;

    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);

})(window);

history

  history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。由于安全方面的考虑，开发人员无法得到用户历史记录的URL，但可以在利用history提供的API在不知道实际URL的情况下实现后退和前进。

length
　　history.length属性保存着历史记录的URL数量。初始时，该值为1。如果当前窗口先后访问了三个网址，history.length属性等于3。

go
　　使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)。

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);

back
　　back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)。

forward()
　　forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)。

  如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败 。
　　[注意]使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

pushState()
  history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址。

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null。
title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url —— 这个参数提供了新历史纪录的地址。新url必须和当前url在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前url。
  假定当前网址是example.com/1.html，使用pushState方法在浏览记录(history对象)中添加一个新记录。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

  添加上面这个新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。假如这时访问了google.com，然后点击了倒退按钮，页面的url将显示2.html，但是内容还是原来的1.html。再点击一次倒退按钮，url将显示1.html，内容不变。
　　总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化。
　　如果pushState的url参数，设置了一个新的锚点值(即hash)，并不会触发hashchange事件，即使新的URL和旧的只在hash上有区别。
  如果设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上。

// 报错
history.pushState(null, null, 'https://twitter.com/hello');

replaceState()
　　history.replaceState()方法的参数与pushState方法一模一样，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
  假定当前网页是example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');

history.back()
// url显示为http://example.com/example.html?page=1

history.back()
// url显示为http://example.com/example.html

history.go(2)
// url显示为http://example.com/example.html?page=3

state
　　history.state属性返回当前页面的state对象，

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

popstate事件
　　每当同一个文档的浏览历史(即history对象)出现变化时，就会触发popstate事件。
　　需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JS调用back()、forward()、go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
　　使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象(即这两个方法的第一个参数)。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

screen

  screen对象用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素高度和宽度等。

属性              说明

height            屏幕的像素高度
width             屏幕的像素宽度
availHeight       屏幕的像素高度减去系统部件高度之后的值(只读)
availWidth        屏幕的像素宽度减去系统部件宽度之后的值(只读)

left              当前屏幕距左边的像素距离[firefox返回0，chrome和IE不支持]
top               当前屏幕距上方的像素距离[firefox返回0，chrome和IE不支持]
availLeft         未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0，IE不支持]
availTop          未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0，IE不支持]

bufferDepth       读、写用于呈现屏外位图的位数[IE返回0，chrome和firefox不支持]
colorDepth        用于表现颜色的位数(只读)[IE8-返回32，其他浏览器返回24]
pixelDepth        屏幕的位深(只读)[IE8-不支持，其他浏览器返回24]

deviceXDPI        屏幕实际的水平DPI(只读)[IE返回96，chrome和firefox不支持]
deviceYDPI        屏幕实际的垂直DPI(只读)[IE返回96，chrome和firefox不支持]
logicalXDPI       屏幕逻辑的水平DPI(只读)[IE返回96，chrome和firefox不支持]
logicalYDPI       屏幕逻辑的垂直DPI(只读)[IE返回96，chrome和firefox不支持]

updateInterval      读、写以毫秒表示的屏幕刷新时间间隔[IE返回0，chrome和firefox不支持]
fontSmoothingEnabled     是否启用了字体平滑(只读)[IE返回true，chrome和firefox不支持]

navigator

  navigator对象现在已经成为识别客户端浏览器的事实标准，navigator对象是所有支持JS的浏览器所共有的。

属性                    说明

appCodeName             浏览器名称[所有浏览器都返回Mozilla]
userAgent               浏览器的用户代理字符串
appVersion              浏览器版本
appMinorVersion         次版本信息[IE返回0，chrome和firefox不支持]
platform                浏览器所在的系统平台[所有浏览器都返回Win32]
plugins                 浏览器中安装的插件信息的数组
mimeTypes               在浏览器中注册的MIME类型数组

language                浏览器主语言[IE10-不支持，其他浏览器返回zh-CN]
systemLanguage          操作系统语言[IE返回zh-CN，chrome和firefox不支持]
userLanguage            操作系统默认语言[IE返回zh-CN，chrome和firefox不支持]
product                 产品名称[IE10-不支持，其他浏览器返回Gecko]
productSub              产品次要信息[IE不支持，chrome返回20030107，firefox返回20100101]
vendor                  浏览器品牌[chrome返回Google Inc.，IE和firefox不支持]
onLine                  是否连接因特网[IE根据实际情况返回true或false，chrome和firefox始终返回true]

cookieEnabled           表示cookie是否启用[所有浏览器都返回true]
javaEnabled             是否启用java[IE8-浏览器返回{}，其他浏览器返回function javaEnabled()]
buildID                 浏览器编译版本[firefox返回20170125094131，chrome和IE不支持]
cpuClass                计算机使用的CPU类型[IE返回x86，chrome和firefox不支持]
oscpu                   操作系统或使用的CPU[firefox返回Windows NT 10.0; WOW64，chrome和IE不支持]

检测插件

name:插件的名字　
description:插件的描述
filename:插件的文件名
length:插件所处理的MIME类型数量

页面性能

  页面性能一直都是Web开发人员比较关注的领域。但在实际应用中，度量页面性能的指标，之前都是通过JS的Date对象的。Web Timing API的出现改变了这个局面，让开发人员通过JS就能使用浏览器内部的度量结果，给出了页面加载和渲染过程的很多信息，对性能优化非常有价值。
  Web计时机制的核心是window.performance对象。对页面的所有度量信息，包括那些规范中已经定义的和将来才能确定的，都包含在这个对象里面。performance对象包括navigation和timing对象，以及chrome扩展的memory对象，还包括getEntries()和now()两个方法。

memory

  memory属性是chrome扩展的对象，只有chrome浏览器支持，包含以下三个属性：
　　jsHeapSizeLimit表示内存大小限制
　　totalJSHeapSize表示可使用的内存
　　usedJSHeapSize表示JS对象占用的内存

navigation

  performance.navigation属性是一个对象，包含着与页面导航有关的redirectCount和type这两个属性。
　　其中redirectCount表示页面加载前的重定向次数；而type是一个数值常量，表示刚刚发生的导航类型。

timing

  performance.timing属性也是一个对象，但这个对象的属性都是时间戳，不同的事件会产生不同的时间值。
  通过timing属性的这些时间值，就可以全面了解页面在被加载到浏览器的过程中都经历了哪些阶段，而哪些阶段可能是影响性能的瓶颈。

times.redirect = timing.redirectEnd - timing.redirectStart;
console.log(times.redirect);//0

【DNS查询时间】

times.lookupDomain = timing.domainLookupEnd - timing.domainLookupStart;
console.log(times.lookupDomain);//1

【TCP握手时间】

times.connect = timing.connectEnd - timing.connectStart;
console.log(times.connect);//48

【HTTP响应时间】
　　通过浏览器发出HTTP请求，到浏览器接受完HTTP响应的时间。

times.request = timing.responseEnd - timing.requestStart;
console.log(times.request);//182

getEntries()

  getEntries()方法将返回一个数组，包含了页面中所有的HTTP资源请求。

now()

  now()方法返回从页面初始化到调用该方法时的毫秒数。
  performance.now()与Date.now()不同的是，返回了以微秒为单位的时间，更加精准。
　　Date.now()会受系统程序执行阻塞的影响不同，performance.now()的时间是以恒定速率递增的，不受系统时间的影响(系统时间可被人为或软件调整)。
　　Date.now()输出的是UNIX时间，即距离1970年1月1日0点的时间，而performance.now()输出的是相对于performance.timing.navigationStart(页面初始化)的时间。

定时器

定时器的应用

  使用定时器来调整事件发生顺序。
  【1】网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，我们先让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
    alert(0);
}
document.onclick = function(){
    alert(1);
}
</script>

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
    setTimeout(function(){
        alert(0);
    })
}
document.onclick = function(){
    alert(1);
}
</script>

  【2】用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
  this.value = this.value.toUpperCase();
}
</script>

  上面代码想在用户输入文本后，立即将字符转为大写。但是实际上，它只能将上一个字符转为大写，因为浏览器此时还没接收到文本，所以this.value取不到最新输入的那个字符。

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
    setTimeout(function(){
        myInput.value = myInput.value.toUpperCase();
    });
}
</script>

requestAnimationFrame

  setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。
  requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

特点

  【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
　　【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量。
　　【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

使用

  requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行。
  cancelAnimationFrame方法用于取消定时器。

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
    myDiv.style.width = '0';
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        if(parseInt(myDiv.style.width) < 500){
            myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
            myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

精确倒计时

  由定时器的运行机制，我们知道每间隔1000ms去改变时间的作法并不可靠。更精确地做法，应该是与系统的运行时间作为参照，倒计时的时间变化与系统的时间变化同步，达到精确倒计时的效果。

<div id="myDiv">
    <label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />时</label>
    <label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />分</label>
    <label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />秒</label>
    <button id="btn">确定</button>
    <button id="reset">重置</button>
</div>
<script>
var timer;
//输入限制
hour.onchange = function(){
    if(Number(this.value) !== Number(this.value)) this.value = 0;
    if(this.value > 23) this.value = 23;
    if(this.value < 0) this.value = 0;
}
second.onchange = minute.onchange = function(){
    if(Number(this.value) !== Number(this.value)) this.value = 0;
    if(this.value > 59) this.value = 59;
    if(this.value < 0) this.value = 0;
}
reset.onclick = function(){
    history.go();
}
btn.onclick = function(){
    if(timer) return;
    for(var i = 0; i < 3; i++){
        myDiv.getElementsByTagName('input')[i].setAttribute('disabled','disabled');
    }
    //原始储存值
    var setOri = hour.value*3600 + minute.value*60 + second.value*1;
    //原始系统时间值
    var timeOri = (new Date()).getTime();
    //现在所剩时间值
    var setNow;
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        //当前系统时间值
        var timeNow = (new Date()).getTime();
        //使系统时间的差值与设置时间的差值相等，来获得正常的时间变化
        setNow = setOri - Math.floor((timeNow - timeOri)/1000);
        hour.value = Math.floor((setNow%86400)/3600);
        minute.value = Math.floor((setNow%3600)/60);
        second.value = Math.floor(setNow%60);
        timer = requestAnimationFrame(fn);
        if(setNow==0){
            cancelAnimationFrame(timer);
            timer = 0;
            btn.innerHTML = '计时结束';
            for(var i = 0; i < 3; i++){
                myDiv.getElementsByTagName('input')[i].removeAttribute('disabled');
            }
            setTimeout(function(){
                btn.innerHTML = '确定';
            },1000)            
        }

    })
}
</script>

web worker

  web worker是HTML5为JS提供的多线程解决方案，可以将一些大计算量的代码交由web worker运行从而避免阻塞用户界面，在执行复杂计算和数据处理时，这个API非常有用。

  使用Web Worker有以下几点限制：

• 同域限制。子线程加载的脚本文件，必须与主线程的脚本文件在同一个域。
• DOM限制。子线程所在的全局对象，与主进程不一样，它无法读取网页的DOM对象，即document、window、parent这些对象，子线程都无法得到。(但是，navigator对象和location对象可以获得。)
• 脚本限制。子线程无法读取网页的全局变量和函数，也不能执行alert和confirm方法，不过可以执行setInterval和setTimeout，以及使用XMLHttpRequest对象发出AJAX请求
• 文件限制。子线程无法读取本地文件，即子线程无法打开本机的文件系统(file://)，它所加载的脚本，必须来自网络。

  从以上限制可以看出，web worker的设计目的是能够执行处理器密集型的运算而不会阻塞UI线程，计算可以在独立的子线程中进行，只是在计算完成之后将结果发回主线程，并不会影响到主线程的代码执行。因此，利用web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的展示。