Reprinted: http://blog.sina.com.cn/s/blog_46d0a3930100dgvi.html
[22] WebKit: The story triggered by the mouse
Figure 1. Javascript onclick event
Courtesy http://farm4.static.flickr.com/3302/3640149734_3268bf297f_o.jpg
First look at a simple HTML file. Open the file in the browser and you will see two photos. Move the mouse to the first photo and click the left mouse button. A window is automatically displayed, showing the book "world ". However, when you move the cursor to the second image or any other area, the mouse does not respond. Close the "world" window, and the second window will pop up automatically ".
<HTML>
<SCRIPT type = "text/JavaScript">
Function myfunction (V)
{
Alert (V)
}
</SCRIPT>
<BodyOnclick = "myfunction ('hello ')">
<P>
Onclick = "myfunction ('World ')"Height = "250" width = "290" src = "http://www.dirjournal.com/info/wp-content/uploads/2009/02/antarctica_mountain_mirrored.jpg">
<P>
</Body>
</Html>
There is nothing special about this HTML file. Anyone who knows a little bit about HTML will probably write it. However, it may not be a deep understanding. Ask yourself a few questions,
1. How does the browser know whether the mouse position is within the range of the first photo?
2. If you modify the HTML file and replace the first photo with another one, the size of the two pictures is different. Open the modified file in the browser, and we will find that the area that can trigger the window event will automatically change as the photo changes. In the browser, what kind of mechanism is used to automatically identify the event triggering area?
3. Is onclick an HTML element attribute or an event listener (eventlistener) of JavaScript )? In other words, after a user clicks the mouse, is WebKit or Javascript Engine responsible for handling onclick tasks?
4. Is alert () an HTML-defined method or a function provided by JavaScript? Who is responsible for generating the two pop-up windows, WebKit or JavaScript engine?
5. I noticed that there are two onclick = "myfunction (...)". Why do users pop up one by one when they click the mouse in the first photo, instead of at the same time?
6. Can the mobile phone complete the same event and response in addition to the browser on the PC? If there is no mouse but a touch screen on the phone, how can I define onclick as clicking the screen with my fingers?
7. Why do we need to know these questions in depth? In addition to satisfying curiosity, is there any other purpose?
Figure 2. Event Callback stacks
Courtesy http://farm4.static.flickr.com/3611/3640149728_bc64397f60_o.gif
When the user clicks the mouse, In the OS vocabulary, this is called an interruption (Interrupt ). For details about how the system kernel listens and processes interrupt, see Chapter 8. interrupts in programming embedded systems. I will not describe it here for two reasons: 1. These contents are complex and irrelevant to the topic of this article. 2. from the WebKit perspective, it does not need to care about the specific implementation of interrupt and interrupt handling, because WebKit is built on the GUI toolkit, and the GUI toolkit has tightly encapsulated the underlying interrupt handling. WebKit only needs to call the relevant APIs of the GUI toolkit to capture mouse clicks and movements, keyboard input, and many other events. Therefore, this article focuses on the WebKit and JavaScript on the top of Figure 2.
Different operating systems have corresponding GUI toolkit. GUI toolkit provides a series of APIs to facilitate applications to manage various windows and controls, as well as to intercept and respond to UI events such as mouse and keyboard.
1. the GUI toolkit on Microsoft's Windows operating system is MFC (Microsoft fundation classes ).
2. the GUI toolkit of the Linux operating system GNOME environment is GTK +.
3. In the Linux KDE environment, QT is used.
4. There are two Java GUI toolkit: one is Sun Microsystem's Java swing and the other is IBM eclipse's SWT.
Swing has little dependence on native. It relies on Java 2D to draw windows and controls. Java 2D's dependence on native is basically limited to native library painting and line coloring. SWT relies heavily on native. Many people regard SWT as Java's encapsulation of MFC, GTK +, and QT through JNI. Although this understanding is not accurate, it is also true.
With the GUI toolkit, applications can process UI events such as mouse and keyboard, which simplifies the process and requires only two things.
1. Bind the event source to the event processing logic (event listener.
2. parse and execute the event processing logic.
Figure 3 shows how WebKit binds event source and event listener. Figure 4 shows how WebKit calls JavaScript Engine, parses and executes event processing logic.
First, let's take a look at event source and note that there is such a sentence in the HTML file,
Onclick = "myfunction ('World ')"Height = "250" width = "290" src = ".../antarctica_mountain_mirrored.jpg">
In this sentence, the "
When WebKit parses the HTML file, it generates a DOM tree and a render tree based on the HTML file. Corresponding to this statement, there is an htmlelement node in the DOM tree. Correspondingly, there is a renderimage node in the render tree. After the layout () process is completed, the size and position of the renderimage are determined based on the height and width specified in the statement. The renderimage node of the render tree corresponds to the htmlelement node of the DOM tree, so the location and size of the htmlelement node are determined accordingly.
Because the onclick event is associated with the htmlelement node, after the location and size of the htmlelement node are determined, the trigger area of the click event is automatically determined. If the HTML file is modified and the photo is replaced, after the layout () process, the location and size of the htmlelement node corresponding to the new photo automatically change accordingly, the trigger area of the Click Event automatically changes accordingly.
In the value of The onclick attribute, the logic of how to handle this event is defined. There are two ways to handle events: 1. Directly calling html dom method and 2. Indirectly calling the scripts of peripherals. Onclick = "alert ('hello')" is the first method. Alert () is one of W3C standard HTML Dom methods. In addition, there are a slightly more complex methods. For example, you can change this sentence to . In this example, onclick = "myfunction ('World')" is the second method that indirectly calls the script of the peripherals.
There are many types of scripts for peripherals, the most common of which is Javascript. In addition, Microsoft VBScript and Adobe ActionScript can also be used in Some browsers. Even JavaScript has multiple versions. There are some syntax differences between different versions. To eliminate these differences and reduce the burden on JavaScript users and JavaScript Engine developers, ECMA tries to develop a set of standard JavaScript specifications called ecmascript.
Different browsers use different Javascript Engines.
1. in Microsoft's IE browser, the JavaScript engine is JScript engine and the rendering machine is trident.
2. In Firefox, the JavaScript engine is tracemonkey, the predecessor of tracemonkey is spidermonkey, and the rendering machine is gecko. Tracemonkey JavaScript Engine borrowed some of Adobe's Tamarin Code, especially the just-in-time instant compilation machine code. Tamarin is also used in the Action engine of Adobe Flash.
3. Opera browser uses the JavaScript engine futhark, whose predecessor is linear_ B, and the rendering machine is presto.
4. in Apple's Safari browser, the JavaScript engine is squirrelfish and the rendering machine is WebKit.
5. Google's Chrome browser uses V8 as the JavaScript engine and WebKit as the rendering machine.
6. The Konqueror browser can be used in the KDE and gnome environments of Linux. the JavaScript engine used in this browser is javascriptcore, formerly KJS, and the rendering machine is WebKit.
It is also a WebKit rendering machine that can call different Javascript Engines. The reason for this is that the WebKit architecture design, when setting the JavaScript engine, uses the proxy to adopt a loose call method.
Figure 3. The Listener binding of WebKit
Courtesy http://farm4.static.flickr.com/3659/3640149732_e55446f6b3_ B .jpg
Figure 3 details the whole process of setting JavaScript Engine in WebKit. When WebKit parses the HTML file and generates the DOM tree and render tree, when This sentence generates the htmlelement node in the DOM tree and the renderimage node in the render tree. As described above. During the generation of the htmlelement node, WebKit decided to bind an eventlistener to the htmlelement node because of The onclick attribute. For details, see step 7th in figure 3.
WebKit creates all eventlistener and submits it to the document for unified processing, similar to singleton in design patterns. That is to say, the document of the root node of the DOM tree controls all eventlisteners involved in this webpage. Interestingly, when a document receives a request, the agent (kjsproxy) will generate a jslazyeventlistener regardless of the type of event. This implementation method is interesting because there are several issues that need special attention,
1. An htmlelement node. If there are multiple event attributes similar to onclick, You need to bind multiple eventlistener object instances.
2. Each event attribute of each node corresponds to an independent eventlistener object instance. Different Nodes do not share the same eventlistener object instance. Different event attributes in the same node correspond to different eventlistener object instances.
This is a matter of discussion. Different events on different nodes correspond to different eventlistener object instances, which makes a great obstacle for information transmission between different nodes. In turn, imagine that if there is a mechanism for the same object instance to move between multiple htmlelement nodes, then the browser's performance will be greatly enhanced, there will be a lot of unprecedented incredible applications.
3. The root node and document of the DOM tree define the tools used to parse the event attribute values and execute the event processing logic defined by this attribute value. As described above, the event property values are divided into HTML Dom methods and JavaScript. However, no matter which type of event attribute value belongs to an htmlelement node, the document always uses the kjsproxy proxy to generate an eventlistener.
Look at the name of this proxy and you will know that the eventlistener generated by kjsproxy must rely on javascriptcore engine, that is, the previous KJS JavaScript Engine, to execute the event processing logic. Check the source code. This conjecture is true.
4. If you want to replace javascriptcore with other Javascript Engines, such as Google V8, you must modify some source code instead of simply changing the configuration file. Fortunately, the architecture design of WebKit is quite clear, so there are not many changes to it. The key part is the document. {H, CPP} and a few other components in the source code that involve kjsproxy can be changed to other proxies.
5. The eventlistener generated by kjsproxy is jslazyeventlistener. To explain the meaning of the name of jslazyeventlistener, JavaScript is easy to understand, meaning that the event processing logic is handed over to the JavaScript engine for responsibility. Lazy refers to the event processing logic specified by the event attribute values that JavaScript engine does not actively process unless you click the mouse in the photo display area.
In contrast to lazy's practice, JIT instant compilation is used. For example, some Javascript Engines pre-compile all the Javascript related to the webpage before the user triggers any event, when a user triggers a specific event and needs to call some JavaScript Functions, the running speed will be faster. Of course, pre-compilation may have a cost, and some JavaScript Functions may exist. Although compiled, it has never been actually executed.
Figure 4. The event handling of WebKit
Courtesy http://farm4.static.flickr.com/3390/3640149730_0c98f0218d_ B .jpg
After the HTML file is parsed and the complete DOM tree and render tree are generated, WebKit is ready to respond to and process user-triggered events. The entire process for responding to and processing events, as described in Figure 4. The entire process is divided into two phases,
1. Search for eventtargetnode.
When you trigger an event, such as clicking the mouse, you can search for the leaf node corresponding to the mouse position from the root node of the render tree. The root node of the render tree corresponds to the entire browser page, while the area of the leaf node is the smallest.
From the root node of the render tree to the leaf node, each render Tree node along the way corresponds to a DOM tree node. In this string of DOM tree nodes, some nodes respond to user-triggered events, while others do not. For example, in the example in this article, the DOM tree node corresponding to the <body> tag and the DOM tree node corresponding to the tag of the first photo all respond to The onclick event.
At the end of the first stage, WebKit obtains an eventtargetnode, which is a DOM tree node and a DOM tree node that responds to the event. If multiple DOM tree nodes have a response to the event, eventtargetnode is the intermediate node closest to the leaf.
2. Execute the event processing logic.
If there are multiple response nodes for the same event, the JavaScript engine processes the event processing logic defined by each node in sequence. Event processing logic, which is defined in the event attribute value in the form of a string. In this example, the HTML file package contains , and <body onclick = "myfunction ('hello')">, this means that there are two DOM tree nodes that have a response to the onclick event. Their event processing logic is myfunction ('World') and myfunction ('hello.
After the JavaScript engine obtains the string of the event processing logic, it parses the string into a tree structure, called the parse tree, according to the Javascript syntax rules. With this parse tree, JavaScript engine can understand the function names, variables, and variable values in this string. After understanding, the JavaScript engine can execute the event processing logic.
The event processing process in this example is shown in step 1 to step 2 in Figure 4.
In this example, the string "myfunction ('World')" does not define the event processing logic, but only provides the function name of a JavaScript function, and the parameter value of the function. After the JavaScript engine obtains the string, it parses and executes it. The execution result is the code of the function entity. In the code of function entities, the most important sentence is alert (V. The JavaScript engine parses this sentence into a parse tree and then executes it.
Note that in this example, two different DOM tree nodes have responses for the same event onclick. The order of processing the two nodes is either determined by the capture path or the bubbling path, as shown in Figure 5. (The corresponding HTML file in Figure 5 is not the example cited in this article ). You can specify the event. Bubbles attribute in an HTML file. If no rules are specified, the bubbling sequence is followed. Therefore, in this example, is executed first, and the "world" window is displayed. After the "world" window is closed, then run <body> to bring up the "hello" window.
Figure 5. the capture and bubbling of event by the DOM tree.
Courtesy http://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.png
This section is boring because it involves too many source code details. The reason why I am so tired of explaining the details is to solve how to handle events more efficiently and provide richer means to handle events. To be continued.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
