WebKit Technology Insider

WebKit Technical Insider ( Browser Kernel | Rendering Engine | html5| Chromium Project committer blockbuster )

Ju Yongsheng

ISBN 978-7-121-22964-0

the published in the year June

Price: 79.00 RMB

456 page

- Open

Editor's recommendation

WebKit, as the mainstream rendering engine supporting HTML5, has attracted the attention of front-end developers in recent years. This book will reveal the overall architecture of WebKit, the principles of Web page rendering, its efficient use of hardware and the latest technologies, and high-performance web practices, covering all the important topics of the Web front end.

√ The author of this book is a chromium contributor, and an open source project crosswalk the founders.

√ Each topic covers basic definitions, internal principles and their implications for web front-end development practices.

√ Analyze how WebKit provides support for HTML5 technologies, including: Networking, CSS and layout, 2d/3d graphics, hardware accelerated rendering, JavaScript engine, multimedia, hybrid programming, security, and more.

√ A detailed description of the various performance bottlenecks involved in the Web front-end, as well as strategies for addressing the problem.

√ Combine the most popular mobile technologies to analyze WebKit's development in the Mobile world, as well as the opportunities that the mobile domain brings to the forefront of Web applications and web environments.

√ Explore possible future directions for the Web front end, including penetration into different application scenarios and application areas.

Content Summary

"WebKit Technology Insider" starting from the hot HTML5 basic knowledge, focusing on the most widely used rendering engine project--webkit. Not only does the system describe how the WebKit internally renders HTML pages, but based on the implementation of chromium, illustrates how the rendering engine uses hardware and the latest technology efficiently, and attempts to teach readers the valuable experience needed to achieve high-performance web front-end development through the analysis of the principles.

The WebKit Technology Insider first describes the WebKit architecture and composition in general, and then covers the Web front end and all the important technologies associated with it, including networking, resource loading, HTML and CSS parsing, rendering tree, layout, hardware acceleration, JavaScript engine, multimedia, mobile support, Plug-in mechanisms, security mechanisms, debugging, and the latest web platform. For each technology, in the introduction of the basic meaning, the detailed analysis of WebKit internal work principle, and then from the practical point of view of the Web front-end development of the Enlightenment.

Directory

1th browser and browser kernel 1

1.1 Browser 1

1.1.1 Browser Introduction 1

1.1.2 Browser Features 4

1.1.3 HTML 5

1.1.4 User agent and browser behavior 8

1.1.5 Practice: Browser User Agent 9

1.2 Browser kernel and features 11

1.2.1 Kernel and mainstream kernel 11

1.2.2 Kernel features 12

1.3 WebKit Core 15

1.3.1 WebKit Introduction 15

1.3.2 WebKit and WebKit2 16

1.3.3 Chromium Core: Blink 18

1.4 Book Structure 18

2nd HTML page and Structure 21

2.1 Page Composition 21

2.1.1 Basic elements and tree structure 21

2.1.2 HTML5 New features 23

2.2 Web page Structure 25

2.2.1 Frame Structure 25

2.2.2 Hierarchy 27

2.2.3 Practice: Understanding Web Page Structure 29

2.3 WebKit's Web page rendering process 31

2.3.1 Loading and rendering 31

2.3.2 WebKit Rendering Process 32

2.3.3 Practice: From Web pages to visualization results 35

3rd Chapter WebKit Architecture and Modules 39

3.1 WebKit architecture and modules 39

3.1.1 Get WebKit 39

3.1.2 WebKit Architecture 40

3.1.3 WebKit source code Structure 43

3.2 Chromium browser structure based on Blink 45

3.2.1 Chromium Browser architecture and modules 45

3.2.2 Practice: Understanding modern browsers from chromium code structure and running state 56

3.3 WebKit2 61

3.3.1 WebKit2 Architecture and modules 61

3.3.2 WebKit and WebKit2 embedded Interface 62

3.3.3 comparing WEBKIT2 and chromium with multi-process models and interfaces 63

4th. Resource load and network stack 65

4.1 WebKit resource Loading mechanism 65

4.1.1 Resources 65

4.1.2 Resource Cache 67

4.1.3 Resource Loader 68

4.1.4 Procedure 69

Life cycle of 4.1.5 Resources 70

4.1.6 Practice: Caching of resources 71

4.2 Chromium Multi-process resource load 74

4.2.1 Multi-Process 74

4.2.2 working methods and resource sharing 76

4.3 Network stacks 78

4.3.1 WebKit's network facilities 78

4.3.2 Chromium Network Stack 78

4.3.3 Disk Local Cache 84

4.3.4 Cookie Mechanism 88

4.3.5 Security Mechanism 90

4.3.6 High Performance Network stack 90

4.3.7 Practice: Chromium networking tools and information 97

4.4 Practice: Efficient Resource use strategies 99

4.4.1 DNS and TCP connections 99

Number of 4.4.2 Resources 99

Data volume of 4.4.3 Resources 100

5th Chapter HTML interpreter and DOM Model 101

5.1 DOM Model 101

5.1.1 DOM Standard 101

5.1.2 Dom Tree 104

5.2 HTML Interpreter 107

5.2.1 Explanation Process 107

5.2.2 Lexical Analysis 110

5.2.3 Xssauditor verified Words 111

5.2.4 Word to Node 111

5.2.5 node to Dom tree 113

5.2.6 Web Infrastructure 114

5.2.7 Threaded Interpreter 117

5.2.8 JavaScript Execution 119

5.2.9 Practice: Understanding the DOM tree 120

5.3 The DOM event mechanism 121

Working procedure of the 5.3.1 event 122

Event handling mechanism for 5.3.2 WebKit 123

5.3.3 Practice: The transfer mechanism of events 125

5.4 Shadow (Shadow) DOM 127

5.4.1 What is Shadow DOM 127

Support for 5.4.2 WebKit 128

5.4.3 Practice: Using Shadow DOM 129

6th Chapter CSS Interpreter and style layout 131

6.1 Basic CSS Features 131

6.1.1 Introduction 131

6.1.2 Style Rule 134

6.1.3 Selector 135

6.1.4 Box Model 136

6.1.5 containing block (containing block) model 139

6.1.6 CSS style Properties 139

6.1.7 CSSOM (CSS Object Model) 140

6.1.8 Practice: Understanding Cssom and Selectors 141

6.2 CSS interpreter and rule matching 143

6.2.1-style WebKit represents class 143

6.2.2 Explanation Process 146

6.2.3 Style Rule Match 148

6.2.4 Practice: Style matching 149

6.2.5 JavaScript Settings Style 151

6.3 WebKit Layout 152

6.3.1 Foundation 152

6.3.2 Layout Calculation 153

6.3.3 Layout Test 155

7th. Rendering Basics 157

7.1 RenderObject Tree 157

7.1.1 RenderObject Basic Class 157

7.1.2 RenderObject Tree 162

7.2 Page Hierarchy and Renderlayer tree 163

7.2.1 Levels and Renderlayer objects 163

7.2.2 Building Renderlayer Tree 165

7.3 Rendering Mode 167

7.3.1 Drawing Context (Graphicscontext) 167

7.3.2 Rendering Mode 169

7.4 WebKit software Rendering technology 172

7.4.1 Software Rendering Process 172

7.4.2 Chromium Multi-process software rendering technology 177

7.4.3 Practice: Software rendering process 180

8th Hardware Acceleration Mechanism 183

8.1 Hardware Acceleration Fundamentals 183

8.1.1 Concept 183

8.1.2 WebKit hardware acceleration Facilities 185

8.1.3 Hardware Rendering Process 189

8.1.4 3D Graphics Context 193

Hardware acceleration mechanism of 8.2 chromium 194

Support for 8.2.1 Graphicslayer 194

8.2.2 Frame 196

8.2.3 Command Buffer 200

8.2.4 Chromium Synthesizer (Chromium compositor) 202

8.2.5 Practice: Reduce redraw 213

8.3 Other Hardware acceleration Modules 216

8.3.1 hardware acceleration mechanism for 2D Graphics 216

8.3.2 WebGL 223

8.3.3 CSS 3D Warp 228

8.3.4 Other 229

8.3.5 Practice: Support for chromium 229

Chapter 9th JavaScript Engine 231

9.1 Overview 231

9.1.1 JavaScript Language 231

9.1.2 JavaScript engine 238

9.1.3 JavaScript engine and rendering engine 241

9.2 V8 Engine 242

9.2.1 Foundation 242

9.2.2 Working principle 246

9.2.3 Bindings and Extensions 258

9.3 JavaScriptCore Engine 259

9.3.1 Principle 259

9.3.2 Architecture and Modules 259

9.3.4 Memory Management 265

9.3.5 binding 266

9.3.6 Compare JavaScriptCore and V8 266

9.4 Practice-efficient JavaScript code 266

9.4.1 Programming Method 266

9.4.2 Example 268

9.4.3 Next 271

10th plugin and JavaScript Extensions 273

10.1 Npapi plug-in 274

10.1.1 NPAPI Introduction 274

Implementation of 10.1.2 WebKit and chromium 275

10.2 Chromium Ppapi Plug-in 284

10.2.1 principle 284

10.2.2 Structure and Interface 285

10.2.3 Working procedure 288

10.2.4 Native Client 294

10.3 JavaScript engine extension mechanism 297

10.3.1 Hybrid Programming 297

10.3.2 JavaScript extension Mechanism 299

10.4 Chromium extension Mechanism 303

10.4.1 Principle 303

10.4.2 Basic Facilities 306

10.4.3 Message Passing mechanism 309

The 11th Chapter Multimedia 311

Multimedia support for 11.1 HTML5 311

11.2 Video 313

11.2.1 HTML5 Video 313

11.2.2 WebKit Infrastructure 315

11.2.3 Chromium video Mechanism 317

11.2.4 Subtitles 328

11.2.5 Video Extensions 330

11.3 Audio 331

11.3.1 Audio Element 331

11.3.2 Web Audio 334

11.3.3 MIDI and Web midi 336

11.3.4 Web Speech 337

11.4 WebRTC 339

11.4.1 History 339

11.4.2 Principles and Specifications 341

11.4.3 Practice--a WEBRTC example 342

Implementation of 11.4.4 WebKit and chromium 345

12th. Security mechanism 353

12.1 Web Security Model 353

12.1.1 Security Model Basics 353

Implementation of 12.1.2 WebKit 363

12.2 Sandbox Model 366

12.2.1 principle 366

12.2.2 Implementation Mechanism 367

13th Chapter Mobile WebKit 373

13.1 Touch and Gesture Events 373

13.1.1 HTML5 Specification 373

13.1.2 Working principle 377

13.1.3 Revelation and Practice 381

13.2 Mobile User Interface 382

13.3 Other mechanisms 384

13.3.1 New rendering mechanism 384

13.3.2 Other mechanisms 387

14th Debugging mechanism 389

14.1 Web Inspector 389

14.1.1 Fundamentals 389

14.1.2 Protocol 391

14.1.3 WebKit Internal Mechanism 395

14.1.4 Chromium developer Tools 398

14.1.5 Remote Debugging 400

14.1.6 Chromium tracing Mechanism 402

14.2 Practice-Fundamentals and performance tuning 404

14.2.1 Basic Debug 404

14.2.2 Performance Tuning 408

15th the future of the Web front end 411

15.1 Trend 411

15.2 Embedded Application Mode 414

15.2.1 embedded Mode 414

15.2.2 CEF 414

15.2.3 Android WebView 417

15.3 Web application and Web environment 419

15.3.1 Web Application 419

15.3.2 Web Run Environment 421

15.4 Cordova Project 423

15.5 Crosswalk Project 425

15.6 Chromium OS and chrome Web Apps 429

15.6.1 Fundamentals 429

15.6.2 Other Web operating systems 431

Reference 435

About the author

Ju Yongsheng, chromium project committer,2006 after graduating from Nanjing University in Intel Asia Pacific Research and Development Co., Ltd., focusing on HTML5, webkit and chromium technology, participated in many browser and web running environment projects, and to the industry conferences and technology enthusiasts have done a number of technology sharing. The Open source project--crosswalk launched in 2013 to start a web-run environment on a startup Android system. Personal blog: Blog.csdn.net/milado_nju

Media Review

WebKit is a very successful project, it is not only the rendering engine, but also successfully promoted the development of the network.

The browser project chromium, based on the WebKit rendering engine, became the first benchmark to support HTML5 functionality and innovative functionality.

A complete understanding of a Web rendering engine and browser is not easy, and it contains many complex features.

WebKit projects and chromium projects (excluding the many third-party projects that the project relies on) have more than 5 million lines of code, and many of these codes are not well documented, and it is difficult to understand the work.

Objective

With the rapid development of HTML5 and the advent of the network era, the Web Access port-the browser is becoming more and more important, and as the browser of the kernel-rendering engine has become a hot topic. Since I contacted HTML5 technology and browser, I have been deeply attracted by this new field which contains many extraordinary technologies, and this has generated a lot of questions, so I began a long study and research on WebKit (and blink) rendering engine and Chromium browser's journey. Although the WebKit project itself is very complex, its simple code structure, clear logic gives me a deep impression, because behind these complex technologies, it is possible to use good design to solve the complexity of the technology. The chromium project, based on WebKit, is a refreshing introduction to the many bold new technologies that have been introduced into the browser world.

WebKit is a very successful project, it is not only a rendering engine, but also successfully promoted the development of the network. The browser project chromium based on the WebKit rendering engine has become the first benchmark to support HTML5 functionality and innovative new features. It is not easy to fully understand a Web rendering engine and browser, because they do contain many complex functions. According to the author's statistics, the WebKit project and the Chromium project (excluding the many third-party projects that the project relies on) have more than 5 million lines of code, and many of these codes are not well documented, so it is still very difficult to understand how these techniques work.

With the deepening of learning, the author found that the analysis and documentation of the entire rendering engine is still in a state of absence. At the same time, because the rendering engine and the browser contain too much technology, it is a bit overwhelming to feel. Although the WebKit project code structure is simple, but because of the lack of documentation, enthusiasts for each new technology, also often have no idea where to start the feeling. To this end, the author combined with their own understanding, through the book a systematic analysis of the many technologies in this field, hoping to help readers quickly through the confused period.

Readers of this book

This book is intended primarily for web enthusiasts, primarily for web front-end developers, browser developers, web platform developers, and all other readers interested in the workings of HTML5 technology, WebKit rendering engines, and chromium browsers. For web front-end developers, the author has always believed that if you use HTML5 technology to write Web pages or Web applications, understanding how it works is an effective shortcut to writing efficient code. Just as developers want to write efficient C + + code, they need to understand the principles behind the C + + compiler, because only then can developers write high-performance code. For browser developers, this book focuses on the very popular WebKit (and blink) rendering engine and the very advanced Chromium browser, explaining its internal workings and principles so that developers can quickly understand the causes and consequences of all this. For other enthusiasts, HTML5 technology has just begun, the future development will continue to understand this technology to help expand the field of vision, and understand the browser of various technologies and the application and design, for everyone to understand a lot of other areas of technology also has a strong inspiration.

Because the introduction of this book is based mainly on the interpretation of WebKit and chromium internal principles, and these projects are based on C + + code to write, so the reader is best to have some understanding of the language. However, if you do not understand it is not much of a relationship, as long as the idea of object-oriented programming to understand, reading this book is not too much obstacle. At the same time, this book is not an introduction to writing Html/javascript code books, so, HTML programming does not do too much detailed explanation, but in a simple way to describe some basic common sense.

The organization of the book

The basic way of writing this book is to try to introduce the HTML5 technology, through the interpretation of the norms developed by the world-class organization, to further understand how the WebKit rendering engine and chromium browser design an efficient architecture to support these HTML5 technical specifications, It focuses on the internal framework and working principle. In many cases, the author also tries to help understand the mechanisms and principles behind these frameworks and implementations through a number of development and work practices.

If you want to understand the principle of the entire rendering engine, the rendering engine alone is not enough to explain all the mechanisms, so this book from beginning to WebKit project and WebKit-based Chromium browser project to describe how it works, because the WebKit project itself is not a browser, And the Chromium browser design and architecture can help readers to understand the Web page rendering process and how modern HTML5 new technology to get support, this process is really wonderful.

To understand how HTML5 new technologies and browsers work, this book focuses on detailed analysis of HTML5 technical analysis, rendering engine and browser introduction, WebKit rendering engine framework, chromium framework and process architecture, Web page and page structure, rendering process, network stack, Popular technologies and cutting-edge topics such as HTML language, DOM, CSS styling, layout calculations, rendering basics, advanced hardware acceleration mechanisms, JavaScript engines, plugins and extensions, multimedia, mobile, security, debugging, trends, and web platforms. The author hopes that most of the important technologies in HTML5 will be shown, so that readers can have a general grasp of the many technologies in this field and have a deep understanding of the causes and consequences of the main technology.

The reference materials cited in this book are the object of my research for many years, for the author understand HTML5 technology, front-end development technology, rendering engine and browser technology plays a very important role, some topics may be introduced in this book is not perfect, readers can refer to these materials, to do further study and research.

This book is a book explaining the internal principles, involving a number of technologies, especially in-depth technical internal working mechanism, because these content is very complex, and is based on the author's own understanding of the analysis, so many times there may be understanding of the deviation or error. If there is anything wrong, also hope that the vast number of readers understand and give guidance, or send comments to my e-mail: [email protected].

Thanks

Thank the Electronics industry publishing house Chunyu, Wang Xinyu, still ice and snow editing, from beginning to the author's strong help and support. Special thanks to my colleagues at Intel Asia Pacific Research and Development Co., Ltd., including but not limited to Min Hongbo, Wang Xingan, Yu Jiqiang, Liu Shouqun, Zhu Junmin, Wang Weixian, Huninsin, Gao-chun, Yin Li, Guyan, Feng Haitao, Hohaitao, and so on, they have discussed with me a lot about HTML5, I benefited from the WebKit and chromium topics.

Finally, I would like to thank my wife, daughter and parents, in the writing of the large half of the time to give the author a lot of support. Because this book is done in the spare time of the busy work, I have no way to finish the book without the good environment provided by my family. In particular, my little daughter often comes to "patronize" and "Patrol" my writing, and give some special "surprise" and "gift", let me after writing a lot of fun.

Ju Yongsheng

February 1, 2014