Your SlideShare is downloading. ×
Compiling and Optimizing Your Own Browser with WebKit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Compiling and Optimizing Your Own Browser with WebKit

3,983
views

Published on

Webkit is the layout engine behind Safari, Chrome and almost every mobile browser. But did you ever wonder how to build WebKit yourself? In this session, you'll learn the simple steps, along with …

Webkit is the layout engine behind Safari, Chrome and almost every mobile browser. But did you ever wonder how to build WebKit yourself? In this session, you'll learn the simple steps, along with never-seen-before techniques, on how to experiment with WebKit on your own. You'll learn how to find the root of various performance problems, automate a wide array of regression tests, and see how WebKit works to produce the render tree, resolve complex styling, execute scripts, and more.

Published in: Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,983
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
121
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Monday, November 29, 2010
  • 2. Monday, November 29, 2010
  • 3. Compiling & Optimizing Your Own Browser with WebKit ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHAMonday, November 29, 2010
  • 4. whoamiMonday, November 29, 2010
  • 5. OverviewMonday, November 29, 2010
  • 6. WebKit Everywhere Browser Devices RuntimeMonday, November 29, 2010
  • 7. History 80000 70000 60000 50000 Revisions 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 YearsMonday, November 29, 2010
  • 8. History ~2000 commits/month 80000 70000 60000 50000 Revisions 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 YearsMonday, November 29, 2010
  • 9. Extensive Tests tests ≈ 20,000 tests 904 MB the rest 229 MBMonday, November 29, 2010
  • 10. Workflow 1 Every commit needs to be reviewed 2 Broken commit must be revertedMonday, November 29, 2010
  • 11. Workflow quality control 1 Every commit needs to be reviewed 2 Broken commit must be reverted zero-regression policyMonday, November 29, 2010
  • 12. Level of Involvement Contributor after 10-20 patches after 80 patches Committer ≈ 130 Reviewer checks in reviewed patches ≈ 80 accept or reject patchesMonday, November 29, 2010
  • 13. WebKit Reviewers Apple 39 Google 19 Misc 12 RIM Nokia 6 6Monday, November 29, 2010
  • 14. WebKit Reviewers Apple 39 Google 19 Misc 12 1 RIM Nokia 6 6Monday, November 29, 2010
  • 15. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit LibraryMonday, November 29, 2010
  • 16. Web Browsers WebCore + JavaScriptCore Safari Eclair WebCore + V8 Chrome FroyoMonday, November 29, 2010
  • 17. How Fresh? AIR 2.5 531.9 Chrome 7 534.7 Android 2.2 533.1 Safari 4 Safari 5 528.16 533.18 mid 2009 Spring 2010 Fall 2010Monday, November 29, 2010
  • 18. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation TimerMonday, November 29, 2010
  • 19. WebCore Di erent “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stackMonday, November 29, 2010
  • 20. Get + CompileMonday, November 29, 2010
  • 21. Requirements •Subversion or Git •C++ compiler •Perl •Python •Various SDKMonday, November 29, 2010
  • 22. Using Subversion svn checkout http://svn.webkit.org/repository/ webkit/trunk webkit cd webkitMonday, November 29, 2010
  • 23. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .gitMonday, November 29, 2010
  • 24. Build WebKitTools/Scripts/build-webkit --qt for Qt, --gtk for Gtk+ --debug for “Debug” modeMonday, November 29, 2010
  • 25. Launch WebKitTools/Scripts/run-launcher --qt for Qt, --gtk for Gtk+ --debug for “Debug” modeMonday, November 29, 2010
  • 26. Render Tree paragraph <html><body><p>Hello SenchaCon!</p></body></html> layer at (0,0) size 800x600 RenderView at (0,0) size 800x600 layer at (0,0) size 800x600 RenderBlock {HTML} at (0,0) size 800x600 RenderBody {BODY} at (8,8) size 784x576 RenderBlock {P} at (0,0) size 784x18 RenderText {#text} at (0,1) size 117x16 text run at (0,1) width 117: "Hello SenchaCon!"Monday, November 29, 2010
  • 27. Let’s Start the PARTYMonday, November 29, 2010
  • 28. Let’s Start the PARTYMonday, November 29, 2010
  • 29. Typical Scenario This is awesome!Monday, November 29, 2010
  • 30. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSIONMonday, November 29, 2010
  • 31. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSIONMonday, November 29, 2010
  • 32. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://www.sencha.com"));Monday, November 29, 2010
  • 33. Capture to Image QWebPage page; QImage image(size, QImage::Format_ARGB32_Premultiplied); image.fill(Qt::transparent); QPainter p(&image); page.mainFrame()->render(&p); p.end(); image.save(fileName);Monday, November 29, 2010
  • 34. Network Log 28: GET http://www.google.com/m/gp 292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp 311: GET data:image/gif;base64,R0lGODlhiA... 312: GET data:image/gif;base64,R0lGODlhJA... 312: GET data:image/gif;base64,R0lGODlhGA... 312: Response 0 image/gif 3611 bytes data:image/gif;base64,R0lGODlhiA... 312: Finish fail data:image/gif;base64,R0lGODlhiA... 312: Response 0 image/gif 284 bytes data:image/gif;base64,R0lGODlhJA... 312: Finish fail data:image/gif;base64,R0lGODlhJA... 312: Response 0 image/gif 178 bytes data:image/gif;base64,R0lGODlhGA... 312: Finish fail data:image/gif;base64,R0lGODlhGA... 317: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp 324: Finish fail http://www.google.com/m/gp 328: GET http://www.google.com/m/gn/user?... 329: Finish success http://www.google.com/m/gn/user?...Monday, November 29, 2010
  • 35. Test Runner specrunner SpecRunner.html 5 specs, 0 failures in 0.013s specrunner SpecRunner.html FAIL: 5 specs, 1 failure in 0.014sMonday, November 29, 2010
  • 36. Recorder & ReplayerMonday, November 29, 2010
  • 37. Remote Console for http://github.com/senchalabs/android-toolsMonday, November 29, 2010
  • 38. Remote Console for http://github.com/senchalabs/android-toolsMonday, November 29, 2010
  • 39. THANK YOU! ariya @ sencha.com ariya.blogspot.com ariyahidayatMonday, November 29, 2010
  • 40. THANK YOU! We’re hiring! ariya @ sencha.com ariya.blogspot.com ariyahidayatMonday, November 29, 2010