浏览器内核及浏览器对象

　　一、浏览器内核

　　浏览器内核可以分为两个部分，1、渲染引擎(Rendering Engine):他负责取得网页的内容，图像HTML等，然后整理信息如获得CSS等，最后计算网页的显示方式，最后显示在显示屏上。2、JS引擎：解析javascript语言，实现javascript对网页的动态效果。浏览器内核额度不同对于网页的语法解释也会不同，渲染的结果也会不同。

浏览器目前主流的有五大浏览器，他们的内核对应如下：

1、IE浏览器：Trident内核，俗称IE内核。
2、Chrome浏览器：以前是webkit内核，现在是Blink内核。
3、Firefox内核：Gecko内核。
4、Safari内核：webkit内核。
5、Opera内核：从webkit内核到blink内核。

　　二、浏览器对象

　　浏览器对象有window对象、navigator对象、screen对象、location对象、history对象、document对象。

　　window对象是浏览器窗口对象，有全局作用域的作用，所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性，全局函数是 window 对象的方法。

　　window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
console.log('window outer size:'+window.outerWidth+'x'+window.outerHeight);

结果为:

　　window inner size: 809 x 673
　　window outer size:1366 x 768

　　navigator对象表示浏览器的信息，常用的属性包括

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

console.log(navigator.appName);   //Netscape
console.log(navigator.appVersion);  //5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
console.log(navigator.language);  //zh-CN
console.log(navigator.platform);   //Win32
console.log(navigator.userAgent);  //Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

　　navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。

　　screen对象表示屏幕信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24

console.log(screen.height);   //768
console.log(screen.width);   //1366
console.log(screen.colorDepth);  //24

　　location对象表示当前页面的url信息。location.href可以获取一个完整的当前页面的url。如：http://www.example.com:8080/path/index.html?a=1&b=2#TOP

对这个url进行分解获取。

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

location对象有三个方法：

　　assign()：加载新的文档

　　reload():重新加载当前文档。

　　replace():用新的文档替换当前文档。

　　history对象表示浏览器的历史纪录，实现浏览器前进与后退相似导航的功能。

　　back():表示后退一个页面。

　　forward():表示前进一个页面。