Any get online user's browser is all too familiar. But users see just the browser itself, but rarely see the core part of the browser - the browser kernel. From the first libwww (Library WorldWideWeb) browser development has already experienced numerous competition and eliminated. Now domestic common browsers: IE, Firefox, QQ browser, Safari, Opera, Google Chrome, the browser Baidu, Sogou browser, cheetah browser, 360 browser, UC browser, surf browser, Window of the World browsers.
But most mainstream browsers there are five models, namely, IE, Firefox, Google Chrome, Safari , Opera.
The most important part of the browser is the browser kernel. Browser kernel is the core browser, also known as "rendering engine", used to explain the syntax and page rendering to the web page. Browser kernel determines the browser how to format information and the web content page is displayed. Different browsers have different core grammar explanation pages so Web developers need to test the effect of rendering pages in different kernel browser.
- Syntax different interpretations of the page
- Rendering is not the same
- Performance is not the same, the execution speed of scripts, which do not support the same, and support local (hidden elements, etc.) the situation is more complex repaint and reflow not the same as 1, IE browser:
IE is Microsoft's browser, is the largest project the amount of domestic users browser. IE was born in 1994, when Microsoft for market share against Netscape Netscape Navigator occupy nearly 90 percent, then developed its own browser, Internet Explorer on Windows, since then also triggered the first browser war. Predictably, Microsoft's victory, Netscape had to sell itself to AOL company. But in fact things did not end, Netscape and later developed the rage of Firefox Firefox, Firefox has also become one of the world's top five browser.
In 1996, Microsoft got the source code and licensed Spyglass Mosaic from the hands of Spyglass, began to develop its own browser, IE. Later, Microsoft bundled IE and Windows mode to continue to expand market share, IE has become the absolute mainstream. Now installed Windows-based PCs simply can not uninstall IE.
2, Opera browser:
Opera is a Norwegian company Opera Software ASA's browser. In 1995, opera company released the first version of Opera browser, using their own research and development of Presto kernel. At that time opera company's core development team continue to improve Presto, the Opera browser was to become the top browser. Until 2016, Qihoo 360 and Kunlun World Wide Web browser bought Oprea, also dropped from the powerful Presto kernel, then switch to Google's open-source webkit core. Later, the Opera browser will follow Google browser kernel instead Blink kernel. Since then Presto kernel also fade out of the Internet market.
3, Safari browser:
The second browser war is released Safari browser from Apple began. In 2003, Apple developed Safari browser on the iPhone, using their own unique mobile phone market share in the Safari browser is rapidly becoming the world's major browsers. Safari was the first browser to use webkit core Apple is now the default browser.
4, Firefox browser:
Firefox browser allows Mozilla company's browser, Netscape is just mentioned later browsers. After being acquired Netscape, Netscape who founded the Mozilla Foundation, a non-profit organization, launched their own browser, Firefox in 2004. Firefox uses Gecko as a kernel. Gecko is an open source project, the code is completely open, so are a lot of people of all ages. The advent of Firefox to speed up the start of the second browser wars. Second browser war with the first two yuan for their situation is different this time is characterized by contending, has since broken the IE browser from Netscape was acquired after 98 years of unrivaled browser market situation.
5, Chrome browser:
Chrome browser is google's browser. Since Chrome browser has been released to pay attention to simple, fast and safe, so Chrome browser to now has been sought after by others. Most start using Chrome as your browser webkit core, until 2013, google announced that no longer use Apple's webkit core, began to use the Blink webkit kernel branch.
These are the introduction of the five browsers, followed by the four cores. In the introduction of the five browsers also have been introduced in passing four cores. Four cores are: Trident (also known as IE core), webkit, Blink, Gecko. Five browsers are used in single-core, but with the development of the browser now there have been dual-core. Like 360 browser, QQ browser are dual-core.
As a front-end development, familiar with the four cores is very necessary. Four different analytical core of the more diversified web page rendering. The following summarize the core of each common browser you are using.
1, IE browser kernel: Trident kernel, also commonly known as the IE core;
2, Chrome browser kernel: collectively referred to as Chromium kernel or Chrome kernel, a former Webkit core, now Blink kernel;
3, Firefox browser kernel: Gecko kernel , commonly known as Firefox kernel;
4, Safari browser kernel: Webkit kernel;
5, Opera browser kernel: originally own Presto kernel, and later Webkit, is now Blink kernel;
6,360 browser, cheetah browser kernel: IE + Chrome dual-core;
7, search dogs, travel, QQ browser kernel: Trident (compatibility mode) + Webkit (high speed mode);
8, Baidu browser, Window kernel: IE kernel;
9,2345 browser kernel: before is IE kernel, IE + Chrome is now dual-core; the browser to render the principle of
Web pages run in a variety of browser among the browsers loaded the page rendering speed of a direct impact on the user experience simply put, is the page rendering the browser will display the html code for this process in a browser window according to the rules defined in the CSS. First to find out roughly how to work the browser is:
1. Users enter the URL (assumed to be a html page, and is the first visit), the browser sends a request to the server, the server returns html file;
2. The browser start Loading html code, found <head> tag has within a <link> tag references external CSS file;
3. the browser requesting and CSS file, the CSS file server returns;
4. Loading html browser to continue the <body > section of the code, and CSS files already get our hands on, you can begin to render a page;
The browser sees a <img> tag references a picture request to the server code. In this case the browser does not wait until the picture is downloaded, but continue to render the code behind;
6. Return to image file server, because the picture takes up a certain area, affecting the back of the paragraph arrangement, the browser needs to go back and re-rendering this part of the code;
7. the browser found the <script> tag contains a line of Javascript code, run it quickly;
8. Javascript script execution of this statement, it instructs the browser to hide out in the code of a
(style.display = "none"). Cup ah, suddenly less so an element, the browser has to re-render this part of the code;
9. until finally </ html> soon, browser tears ......
10 and so on, not end users point a bit interface "skinning" button, Javascript allows the browser changed my path CSS <link> tag;
11. browser convened all of you <span> <ul> <li > who "everybody pack to pack, you have to start over ...... "and the browser to the server, please
request a new CSS file, re-rendering the page.
Browser so ran to and fro every day, to know different people write out html and css code quality varies, maybe someday Paozhaopaozhe hung up. Fortunately, there are a group of people in this world - page reconstruction engineer, usually very humble, will help visual designers earnest map to change to change the word ah, in fact, secretly still did a lot of practical things.
Speaking of the page will slow Why? That's because the browser will take time and spend the energy to render, especially when it finds a point of change occurred in part influenced the layout, you need to go back and re-rendering, experts say the rollback process is called reflow.
reflow is almost inevitable. Now popular on the screen some of the effects, such as folding tree, expand (essentially show elements and hidden), etc., will cause reflow browser. Mouse over, click on ...... as long as these acts caused a change in the properties of certain elements of the footprint, positioning way, margins and other page, it will cause internal, and even around the re-rendering the entire page. Usually we are unable to estimate the browser in the end what part of the code will reflow, they all affect each other.
reflow problems can be optimized, we can minimize unnecessary reflow. For example, in the example at the beginning of the <img> loaded question, which is actually a preventable reflow-- to set the width and height of the picture on it. So the browser knows the footprint of the picture, the picture before loading set aside a good position.
In addition, there is a similar-looking terminology and reflow: repaint, Chinese is called redraw. If you just change the background color of an element, text color, border color, and so does not affect the properties around it or inside layout will only cause the browser to repaint. repaint speed is significantly faster than reflow (IE require a change in the statement, reflow slower than repaint).
Third, the principle stresses CSS rendering performance from the browser (http://hi.baidu.com/zhoumm1008/blog/item/03fa88f97fe5ddebfd037f4b.html)
Usually we almost all browsers and deal with every day, write out the page is likely to show is not the same in different browsers. Hard to force the front end of the siege masters for compatibility with various browsers continue to test and debug, the brain is still noted in a variety of BUG encountered and solutions, and we do not seem to take the initiative to understand the concerns and lower browsing the device works. If we do this better understanding, I think in the course of the project will be based on it effectively avoids some of the problems and make the appropriate improvements to the performance of the page. Today, we are mainly based on the principle of rendering browser to do a bit of writing CSS performance improvements (of course JS not consider this article, the article will do later description), let us work together to uncover the browser to render the principles of this a veil of mystery of it:
the final decision browser differences demonstrated by the results page is: rendering engine rendering engine (also known as layout engine), which is what we usually call "browser kernel", is responsible for parsing the page syntax (such as HTML , JavaScript) and rendering, display web pages. The same code is not the same in different browsers presentation of the results, then it is likely that different browser kernel caused.
We look at the page is loaded specific workflow browser (Figure I):
(Figure I)
1, parsing HTML DOM tree to rebuild (Parsing HTML to construct the DOM tree ): rendering engine start parsing the HTML document conversion tree tag to the DOM node, it is called "content tree."
2, constructed render tree (Render tree construction): parsing CSS (including external CSS files and style elements), the pattern is calculated according to the CSS selector node, create another tree - the render tree.
3, the render tree layout (Layout of the render tree): recursive call from the root node, the calculation of an element size, position, etc., each node should appear on the screen of the exact coordinates.
4, plotted render tree (Painting the render tree): render tree traversal, each node will be drawn using the UI backend layers.
The main process is: to build a dom tree, each element on the page to be displayed to the dom tree is created which, whenever a new element added to the dom tree among the browser will pass through css css stylesheets search engine to find style rules in line with that element applied to this element.
Attention: css stylesheets engines to find, for each rule from right to left to match. See the following rules:
1 #nav li {}
looks very fast, in fact, very slow, although it was a bit difficult to understand # _ #. Most of us, especially those who read left to right, the browser might guess from left to right match is the implementation of the rules, and therefore speculated that this rule is not high overhead. In my mind, we imagine that the browser would work like this: Find a unique ID for the element nav, and then apply this style to the li elements direct child elements. We know there is a element with the ID nav, and it is only a few Li sub-elements, so this should be quite efficient CSS selectors.
In fact, CSS selectors from right to left to match. After understanding this knowledge, we know that this seemingly efficient rules before the actual cost is very high, the browser must traverse each li elements on the page and determine whether the parent element id nav.
* {1}
forehead, I just wrote this approach CSS also wrote, not knowing that this efficiency is the extreme poor practice because the * wildcard will match all the elements, the browser must go through each element, such calculations the number may be thousands of times!
1 ul # nav {} ul.nav { }
a specified ID in the page corresponds to only one element, it is not necessary to add additional qualifiers, and this will make it less efficient. While not specifically use the labels defining the class selectors, but be extended to the class name according to the actual situation. For example the ul.nav into .main_nav better.
1 ul li li li .nav_item {}
For such selectors, also written before, and finally himself to count how many descendant selector, and why not a class label associated with the final elements such as .extra_navitem, so only need to match class elements extra_navitem, efficiency significantly enhance the
contrast, in the process of writing CSS summarized as follows performance scheme:
avoid using wildcard rules * {} is calculated as the number of staggering! Only need to use the elements are selected
as little as possible to the selected tag, but with the class, such as: #nav li {}, nav_item class name may be added, as follows .nav_item {} li select
not to use the tag or ID defined as class selector: ul # nav, #nav should be reduced to
as little as possible to use selectors descendant, offspring reduce the overhead of the weight value selector selector right is the highest, as far as possible to minimize the depth of the selector , the maximum should not exceed three more classes to use a label associated with each element
considered inherited learn which properties are inherited by, and then specify the rule to avoid repetition of these properties
render the choice of efficient selectors can reduce page time, so as to effectively enhance the user experience (page sooner, of course, the more the user likes ^ _ ^), you can look at the CSS selectors test, the focus of this experiment was to evaluate the cost and complexity of simple selectors selectors. Perhaps when you want the most efficient rendering speed, you could have a configuration of each individual tag ID, and then write the style with these ID. That will indeed be super fast, and super ridiculous! This results in very poor semantics, post-maintenance difficult to the extreme.
But in the end, CSS properties of this stuff for a small project in terms of what may really be minimal, upgrade may not be obvious, but for large projects is certainly helpful. CSS and a good writing habits and how we can help even more stringent demands on themselves.