浏览器工作机理本资料介绍了现代浏览器的基本工作机理和基本概念。此文档可以帮助大家了解浏览器的学习流程

文件名称: 浏览器工作机理

所属分类: Web开发

开发工具:

文件大小: 10mb

下载次数: 0

上传时间: 2019-04-20

提供者: sunj*****

下载 (10mb)

不能下载？报告错误

详细说明：本资料介绍了现代浏览器的基本工作机理和基本概念。此文档可以帮助大家了解浏览器的学习流程。但此文档并不是整个学习浏览器的全部技术文档，是整个浏览器的技术大纲，切记！2. Firefox rule tree 1. Division into structs 2. Computing the style contexts using the rule tree 3. Manipulating the rules for an easy match 4. Applying the rules in the correct cascade order 1. Style sheet cascade order 2. Specificity 3. Sorting the rules 4. Gradual process 5. Layout 1. Dirty bit system 2. Global and incremental layout 3. Asynchronous and synchronous layout 4. Optimizations 5. The layout process 6. Width calculation 7. Line breaking 6. Painting Global and incrementa 2. The painting order 3. Firefox display list 4. WebKit rectangle storage 7. Dynamic changes 8. The rendering engines threads 1. Event loop 9. CSS2 visual mode 1. The canvas 2. CSs box model 3. Positioning scheme 4. Box types 5. Positioning 1. Relative 2. Floats 3. Absolute and fixed 6. Layered representation 10. Resources The browsers we will talk about There are five major browsers used on desktop today: Chrome, Internet Explorer, Firefox, Safari and Opera On mobile, the main browsers are Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers and Chrome-all of which, except for the Opera browsers, are based on WebKit. I will give examples from the open source browsers Firefox and Chrome, and Safari (which is partly open source). According to StatCounter statistics (as of June 2013) Chrome, Firefox and Safari make up around 71% of global desktop browser usage On mobile, Android Browser, iPhone and Chrome constitute around 54% of usage The browser's main functionality The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. The resource is usually an HTML document, but may also be a PDF, image, or some other type of content. The location of the resource is specified by the user using a URI(Uniform Resource Identifier) The way the browser interprets and displays htMl files is specified in the HTML and css specifications These specifications are maintained by the W3C (World Wide Web Consortium) organization, which is the standards organization for the web. For years browsers conformed to only a part of the specifications and developed their own extensions. That caused serious compatibility issues for web authors. Today most of the browsers more or less conform to the specifications Browser user interfaces have a lot in common with each other. among the common user interface elements are: Address bar for inserting a RI Back and forward buttons Bookmarking options Refresh and stop buttons for refreshing or stopping the loading of current documents lome button that takes you to your home page Strangely enough, the browser's user interface is not specified in any formal specification, it just comes from good practices shaped over years of experience and by browsers imitating each other. The HTML5 specification doesn't define Ul elements a browser must have, but lists some common elements. Among those are the address bar, status bar and tool bar. There are, of course, features unique to a specific browser like Firefox's downloads manager. The browser's high level structure The browser's main components are(1. 1) 1. The user interface: this includes the address bar, back/forward button, bookmarking menu, etc Every part of the browser display except the window where you see the requested page 2. The browser engine: marshals actions between the ui and the rendering engine 3. The rendering engine: responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and Css, and displays the parsed content on the screen 4. Networking: for network calls such as Httprequestsusingdifferentimplementationsfordifferent platform behind a platform-independent interface 5. Ul backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific Underneath it uses operating system user interface methods 6. JavaScript interpreter Used to parse and execute JavaScript code 7. Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as local Storage, IndexedDB WebsQL and File System User Interface Browser engine Rendering engine JavaScript Networking UI Backend Interpreter Figure: Browser components It is important to note that browsers such as Chrome run multiple instances of the rendering engine: one for each tab. Each tab runs in a separate process. The rendering engine The responsibility of the rendering engine is well... Rendering, that is display of the requested contents on the browser screen By default the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer plug in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using Css Rendering engines Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera( from version 15)use Blink, a fork of Webkit WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See webkit. org for more details The main flow The rendering engine will start getting the contents of the requested document from the networking layer This will usually be done in 8kB chunks After that, this is the basic flow of the rendering engine Parsing HTML Render tree Layout of the Painting the to construct construction render tree render tree the dom tree Figure Rendering engine basic flow The rendering engine will start parsing the HTML document and convert elements to dOM nodes in a tree called the"content tree". The engine will parse the style data, both in external css files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the render tree The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen After the construction of the render tree it goes through a layout process. This means giving each node the exact coordinates where it should appear on the screen. The next stage is painting-the render tree will be traversed and each node will be painted using the Ul backend layer It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network Main flow examples DOM HTML HTML DOM Layout arser Tree Attachment Render Painting Display Tr ree Style Style Parser Rules Sheets Figure WebKit main flow ADOM HTML Content Content Parser Reflow Sink Model frame frame Constructor Tree Painting H Display Style CSS Style Sheets P user Rule Figure Mozilla's Gecko rendering engine main flow(3.6) From figures 3 and 4 you can see that although WebKit and Gecko use slightly different terminology, the flow is basically the same Gecko calls the tree of visually formatted elements a" Frame tree". Each element is a frame. WebKit uses the term"Render Tree"and it consists of"Render Objects". WebKit uses the term "layout"for the placing of elements, while Gecko calls it"Reflow"."Attachment"is WebKit's term for connecting DOM nodes and visual information to create the render tree. a minor non-semantic difference is that gecko has an extra layer between the HTML and the doM tree. It is called the " content sink and is a factory for making dOM elements. We will talk about each part of the flow Parsing-general Since parsing is a very significant process within the rendering engine, we will go into it a little more deeply. Let's begin with a little introduction about parsing Parsing a document means translating it to a structure the code can use. The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree For example, parsing the expression 2+ 3- 1 could return this tree Expression Nodc l-) Expression Number Node(+) Node (1) Number Numher Node (21 Node (3) Figure; mathematical expression tree node Grammars Parsing is based on the syntax rules the document obeys: the language or format it was written in Every format you can parse must have deterministic grammar consisting of vocabulary and syntax rules. It is called a context free grammar. Human languages are not such languages and therefore cannot be parsed with conventional parsing techniques Parser-Lexer combination Parsing can be separated into two sub processes: lexical analysis and syntax analysis Lexical analysis is the process of breaking the input into tokens Tokens are the language vocabulary: the collection of valid building blocks. In human language it will consist of all the words that appear in the dictionary for that language Syntax analysis is the applying of the language syntax rules Parsers usually divide the work between two components: the lexer(sometimes called tokenizer) that is responsible for breaking the input into valid tokens, and the parser that is responsible for constructing the parse tree by analyzing the document structure according to the language syntax rules. The lexer knows how to strip irrelevant characters like white spaces and line breaks Document Lexical Analysis Syntax Analysis Parse Tree Figure: from source document to parse trees The parsing process is iterative. The parser will usually ask the lexer for a new token and try to match the token with one of the syntax rules. If a rule is matched, a node corresponding to the token will be added to the parse tree and the parser will ask for another token If no rule matches, the parser will store the token internally, and keep asking for tokens until a rule matching all the internally stored tokens is found. If no rule is found then the parser will raise an exception. This means the document was not valid and contained syntax errors Translation In many cases the parse tree is not the final product. Parsing is often used in translation: transforming the input document to another format. An example is compilation. The compiler that compiles source code into machine code first parses it into a parse tree and then translates the tree into a machine code document Source Code Parsing Parse Tree Translation Machine Code Figure compilation flow Parsing example In figure 5 we built a parse tree from a mathematical expression. Let's try to define a simple mathematical language and see the parse process. Vocabulary: Our language can include integers, plus signs and minus signs Syntax 1. The language syntax building blocks are expressions, terms and operations 2. Our language can include any number of expressions 3. An expression is defined as a"followed by an"operation"followed by another term 4. An operation is a plus token or a minus token 5. A term is an integer token or an expression Let's analyze the input 2+ 3-1 The first substring that matches a rule is 2: according to rule #5 it is a term. The second match is 2+ 3 this matches the third rule: a term followed by an operation followed by another term. The next match will only be hit at the end of the input 2+3- l is an expression because we already know that 2+ 3 is a term, so we have a term followed by an operation followed by another term 2++ will not match any rule and therefore is an invalid input Formal definitions for vocabulary and syntax Vocabulary is usually expressed by regular expressions For example our language will be defined as INTEGER:01-9[0-9]* PLUS: MINU As you see, integers are defined by a regular expression Syntax is usually defined in a format called BNE. Our language will be defined as expression term operation term operation PLUS MINUS term : INTEGER expression We said that a language can be parsed by regular parsers if its grammar is a context free grammar. Ar intuitive definition of a context free grammar is a grammar that can be entirely expressed in BNF. For a formal definition see Wikipedia's article on Context-free grammai Types of parsers There are two types of parsers: top down parsers and bottom up parsers. An intuitive explanation is that top down parsers examine the high level structure of the syntax and try to find a rule match. Bottom up parsers start with the input and gradually transform it into the syntax rules, starting from the low level rules until high level rules are met Let's see how the two types of parsers will parse our example The top down parser will start from the higher level rule: it will identify 2+ 3 as an expression It will then identify 2+ 3- I as an expression( the process of identifying the expression evolves, matching the other rules, but the start point is the highest level rule)

(系统自动生成,下载前可以参看下载内容)