load/unload事件
load事件
当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件
使用方法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25//方法一
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
}
}
EventUtil.addHandler(window,"load",function(event){
alert("loaded!");
});
//方法二
<!DOCTYPE html>
<html>
<head>
<title>load Event Example</title>
</head>
<body onload = "alert("Loaded!")">
</body>
</html>
document.ready 监控dom是否加载完毕，dom加载完毕时及资源加载之前触发
DOMContentLoaded 当页面的DOM树解析好并且需要等待js执行完才触发
unload事件
在文档被完全卸载后触发,只要用户切换到另一个页面，就会发生unload事件。
利用这个事件最多的情况是清除引用，以避免内存泄漏
使用方法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26//方法一
var EventUtil = {
getEvent: function (event) {
return event ? event : window.event;
},
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(window, "unload", function (event) {
alert("Unloaded");
})
//方法二
<html>
<head>
<tilte>卸载（unload）事件</tile>
</head>
<body onunload="alert('Unload')">
</body>
</html>
Performance API
Performance 接口会给出某个页面的与时间相关的性能信息
使用方法为 window.performance.属性/方法
Performance API用于精确度量、控制、增强浏览器的性能表现。这个API为测量网站性能，提供以前没有办法做到的精度
目前，所有主要浏览器都已经支持performance对象，包括Chrome 20+、Firefox 15+、IE 10+、Opera 15+。
performance.timing
包含各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时
- navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。即浏览器处理当前网页的启动时间
- unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。
- unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。
- redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。
- redirectEnd：返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。
- fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
- domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。
- domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。
- connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。
- connectEnd：返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
- secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。
- requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
- responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
- responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。
- domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
- domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
- domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。
- domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
- domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。
- loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生，返回0。
- loadEventEnd：返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生，返回0。
unloadEventStart 不等于navigationStart，navigationStart比unloadEventStart早
domComplete 等于 loadEventStart
performance.now()
performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）。
performance.mark()
mark方法用于为相应的视点做标记。
window.performance.mark(‘mark_fully_loaded’);
clearMarks方法用于清除标记，如果不加参数，就表示清除所有标记。
window.peformance.clearMarks(‘mark_fully_loaded’);
window.performance.clearMarks();
performance.getEntries()
浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。performance.getEntries方法以数组形式，返回这些请求的时间统计信息，有多少个请求，返回数组就会有多少个成员.
由于该方法与浏览器处理网页的过程相关，所以只能在浏览器中使用。
window.performance.getEntries()[0] //获取第一个HTTP请求（即网页的HTML源码）的时间统计信息
performance.navigation对象
1、performance.navigation.type
该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况：
- 0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATENEXT。
- 1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
- 2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
- 255：任何其他来源的加载，相当于常数performance.navigation.TYPE_UNDEFINED。
2、performance.navigation.redirectCount
该属性表示当前网页经过了多少次重定向跳转.
参考资料
页面请求加载过程
var t = performance.timing;
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
var dns = t.domainLookupEnd - t.domainLookupStart; //域名解析时间
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
var tcp = t.connectEnd - t.connectStart;//浏览器与服务器之间的连接建立时间
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
t.requestStart 浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
var ttfb = t.responseStart - t.navigationStart;//读取页面第一个字节之前的耗时
8、读取页面内容，浏览器渲染，解析html源码
var getdata = t.responseEnd-t.responseStart;//接收数据时间
9、生成Dom树、解析css样式、js交互
var dom = t.domInteractive-t.domLoading; //从构建DOM到页面与用户可以开始交互的时间
var script= t.domContentLoadedEventEnd-t.domContentLoadedEventStart;//脚本运行时间
var load = t.loadEventEnd-t.loadEventStart;//load事件处理时间
10、客户端和服务器交互
11、ajax查询
步骤二详细步骤
- 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
- 操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
- 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
- ISP缓存：若上述均失败，继续向ISP搜索。
浏览器渲染步骤
- 解析html以构建dom树 分词器器、解析器
- 构建render树
- 布局render树
- 绘制render树
渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点
Navigator 对象
包含有关浏览器的信息。
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26js 获取操作系统
function detectOS() {
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
if (isMac) return "Mac";
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
if (isUnix) return "Unix";
var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
if (isLinux) return "Linux";
if (isWin) {
var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
if (isWin2K) return "Win2000";
var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
if (isWinXP) return "WinXP";
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
if (isWin2003) return "Win2003";
var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
if (isWinVista) return "WinVista";
var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
if (isWin7) return "Win7";
}
return "other";
}
document.writeln("您的操作系统是：" + detectOS());
