First, the browser kernel
Browser kernel can be divided into two parts, one, the rendering engine (Rendering Engine): He is responsible for taking web content, images and other HTML, CSS and organize information such as access to, and finally calculate the page is displayed, the last shown on the display on. 2, JS engine: javascript language parsing, dynamic effects javascript on the page. Different browser kernel limit will be different for grammar explanations pages, rendering the results will be different.
Browser currently has five major mainstream browsers, their kernels are as follows:
1, IE browser: Trident core, commonly known as the IE core.
2, Chrome browser: former webkit core, now Blink kernel.
3, Firefox kernel: Gecko kernel.
4, Safari kernel: webkit kernel.
5, Opera kernel: webkit kernel from the kernel to blink.
Second, the browser object
There browser object window object, navigator objects, screen objects, location objects, history objects, document objects.
The window object is an object browser window, there is the role of global scope, all global JavaScript objects, functions and variables automatically become a member of the window object. Global variables are the property of the window object, global function is window object.
innerWidth innerHeight the window object and property may be acquired internal width and height of the browser window. It refers to the internal width and height after removal of the menu bar, tool bar, borders, etc. occupying elements, for displaying a high clear width of the page. Another outerWidthand outerHeighthigh property, you can get the entire width of the browser window.
console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
console.log('window outer size:'+window.outerWidth+'x'+window.outerHeight);
The results are:
window inner size: 809 x 673
window outer size:1366 x 768
the navigator object represents the information about the browser, including common attributes
navigator.appName: Browser name;
navigator.appVersion: browser version;
navigator.language: language browser settings;
navigator.platform: operating system type;
navigator.userAgent: browser settings of the User -Agent string.
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
navigatorThe information can be easily modified by a user, the value read JavaScript is not necessarily correct.
screen objects represents the screen information, common attributes are:
- screen.width: screen width, in pixels;
- screen.height: screen height in pixels;
- screen.colorDepth: Returns the number of color bits, such as 8, 16,
console.log(screen.height); //768
console.log(screen.width); //1366
console.log(screen.colorDepth); //24
location object represents the current page url information. location.href can get a complete url of the current page. Such as:http://www.example.com:8080/path/index.html?a=1&b=2#TOP
The decomposition of the url get.
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'
The location object has three methods:
assign (): load the new document
reload (): reload the current document.
replace (): Replaces the current document with a new document.
history object represents the history of the browser, the browser forward and backward to achieve similar navigation functions.
back (): represents a back page.
forward (): represents a forward page.