https://github.com/tigercosmos/COSCUP2018

1. COSCUP 2018
瀏覽器開發與開源經驗
劉劉安⿑齊 Liu, An-Chi
!1
Web Browser Developing and Open Source Experience
2018/8/12

2. COSCUP 2018
About
• 劉劉安⿑齊 Liu, An-Chi
• ID：微中⼦子、@tigercosmos
• 國立臺灣⼤大學⽣生物機電⼯工程學系
• 熱愛開源、瀏覽器、打網球、寫
⽂文章、動漫
• RD Intern at CloudMosa, Inc.
2

3. COSCUP 2018
這份簡報在哪？
https://github.com/tigercosmos/COSCUP2018
!3

4. COSCUP 2018
⼤大綱
• 介紹 Servo
• 瀏覽器原理理
• 開發流程
!4

5. COSCUP 2018
緣起
故事從這裡開始
!5

6. COSCUP 2018
最早(被Merge)的PR
• ContributorCovenant/contributor_covenant
最廣為⼈人知的開發者公約
收集各種 API 的專案
!6

7. COSCUP 2018
我覺得加入開源很困難
!7

8. COSCUP 2018
我覺得加入開源很困難
!7

9. COSCUP 2018
我覺得加入開源很困難
!7

10. COSCUP 2018
我覺得加入開源很困難
!7

11. COSCUP 2018
⼀一發不可收拾拾
!8
在 CloudMosa
開發 Puffin 瀏覽器

12. COSCUP 2018
Firefox Quantum
!9

13. COSCUP 2018
Servo
• 由 Mozilla 開發的平⾏行行化瀏覽器
• ⽤用 Rust 語⾔言
• GPU WebRender
• The Firefox Quantum
• https://servo.org/zh-TW/
!10

14. COSCUP 2018
!11

15. COSCUP 2018
!11

16. COSCUP 2018
!12

17. COSCUP 2018
!12

18. COSCUP 2018
!12

19. COSCUP 2018
Memory Leak
!13

20. COSCUP 2018
Rust Demo
!14

21. COSCUP 2018
為什什麼要開發瀏覽器？
!15

22. COSCUP 2018
能源⽅方⾯面
• ⼿手機消耗 20 J/網⾴頁
• 10 J × 100 次/天 × 1 億⼈人 = 1000 億Ｊ/天
• ⼀一度電 ＝ 360萬 J
• 27777 度電 ＝ 277 ⼾戶家庭 / 每個⽉月
!16

23. COSCUP 2018
時間⽅方⾯面
• 開啟時間 3 秒/⾴頁
• 0.1 秒 × 100 ⾴頁/天 × 1 年年 = 3650 秒
!17

24. COSCUP 2018
安全⽅方⾯面
• 惡惡意網站、惡惡意廣告、惡惡意檔案
• 假廣告，真挖礦
• 反隱私追蹤
• 讓安全性更更好
!18

25. COSCUP 2018
了了解瀏覽器的原理理
才能真正駕馭網⾴頁開發
!19

26. COSCUP 2018
認識瀏覽器
!20

27. COSCUP 2018
!21

28. COSCUP 2018
!21

29. COSCUP 2018
!21

30. COSCUP 2018
!21

31. COSCUP 2018
!21

32. COSCUP 2018
網⾴頁是怎麼寫？
!22

33. COSCUP 2018
HTML
!23

34. COSCUP 2018
CSS
邊界空 10 畫素
字體為黃⾊色
背景為⿊黑⾊色
指定⽬目標
!24

35. COSCUP 2018
Javascript
從這份原始碼 找到 ID 叫做“text” CSS 的 color 變成⽩白⾊色
!25
經過 JS 處理理後
JS 程式碼

36. COSCUP 2018
網站架構
!26

37. COSCUP 2018
網站架構
客⼾戶端
!26

38. COSCUP 2018
網站架構
伺服器客⼾戶端
!26

39. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
index.html
!26

40. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
index.html
!26

41. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
index.html
!26

42. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
index.html
!26

43. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
index.html
!26

44. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
CSS
JavaScript
多媒體
index.html
!26

45. COSCUP 2018
網站架構
伺服器客⼾戶端
HTML
CSS
JavaScript
多媒體
index.html
!26

46. COSCUP 2018
瀏覽器架構
!27

47. COSCUP 2018
使⽤用者介⾯面
!28

48. COSCUP 2018
使⽤用者介⾯面
瀏覽器引擎
!28
渲染 JS

49. COSCUP 2018
使⽤用者介⾯面
!29
GUI 應⽤用程式開發框架
•GTK
•React Native
•QT

50. COSCUP 2018
功能
!30

51. COSCUP 2018
功能
!30

52. COSCUP 2018
功能
!30

53. COSCUP 2018
搜尋
!31

54. COSCUP 2018
搜尋
!31
http://www.allnewsandreports.com

55. COSCUP 2018
個⼈人化、隱私、同步
!32

56. COSCUP 2018
個⼈人化、隱私、同步
!32

57. COSCUP 2018
個⼈人化、隱私、同步
!32

58. COSCUP 2018
瀏覽器引擎
!33

59. COSCUP 2018
!34

60. COSCUP 2018
HTML
!35

61. COSCUP 2018
DOM
• ⽂文件物件模型（Document Object Model, DOM）
物件
Tag: Div
Text: A Div
Attributes: null
!36

62. COSCUP 2018
DOM Tree
!37
Body
Div Div
Div Div Div

63. COSCUP 2018
<div>
….
</div>
!38

64. COSCUP 2018
!39

65. COSCUP 2018
CSS
Selector
declaration
Rule
{
}
!40

66. COSCUP 2018
!41

67. COSCUP 2018
Style Tree
DOM Tree Style Tree
Rules
!42

68. COSCUP 2018
!43

69. COSCUP 2018
Layout
每個元素都是⼀一個 Box
• Margin 邊外的空⽩白
• Border 邊框
• Padding 邊內的空⽩白
• Content 內容
!44

70. COSCUP 2018
!45

71. COSCUP 2018
Layout Tree
!46
Block
Block
Block
Block
Inline Inline
Inline Inline
Block
Block
Block
Block

72. COSCUP 2018
!47

73. COSCUP 2018
渲染
!48
Block
Block Block
Inline InlineBlock
繪圖引擎

74. COSCUP 2018
圖形處理理引擎
!49
Skia

75. COSCUP 2018
顯⽰示在應⽤用程式上
!50

76. COSCUP 2018
JS 呢？
!51

77. COSCUP 2018
瀏覽器⾯面臨臨的挑戰
!52

78. COSCUP 2018
!53
網路路頻寬與延遲
解析速度、渲染速度
能源消耗

79. COSCUP 2018
網路路問題
!54
頻寬來來回通訊延遲
論⽂文：Why are Web Browsers Slow on Smartphones?
Latency overhead of a single HTTP request
3G 4G
Control plane 200–2500 ms 50–100 ms
DNS look up 200 ms 100 ms
TCP handshake 200 ms 100 ms
TLS handshake 200–400 ms 100–200 ms
HTTP request 200 ms 100 ms
Total latency 200–3500 ms 100–600 ms
Data rates for active mobile
Generation Data rate
2G 100–400 Kbit/s
3G 0.5–5 Mbit/s
4G 1–50 Mbit/s

80. COSCUP 2018
解決⽅方式
!55
增加快取命中率
後端預處理理
20% → ???
壓縮圖片、影片
格式轉換
後端渲染
Opera Mini 瀏覽器

81. COSCUP 2018
增加運算速度
!56
平⾏行行化處理理
改變架構
論⽂文：Fast and parallel webpage layout
Servo 瀏覽器
Webrender 改⽤用 GPU 來來做渲染
Remote Browser

82. COSCUP 2018
Remote Browser
!57
Data Center Browser
Puffin Browser 架構
客⼾戶端省電
算得更更快 安全性佳
後端預處理理

83. COSCUP 2018
開發の先備知識
!58

84. COSCUP 2018
版本控制
!59

85. COSCUP 2018
版本控制
初始狀狀態
!59

86. COSCUP 2018
版本控制
加入Ａ功能初始狀狀態
!59

87. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
!59

88. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
分⽀支
!59

89. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
分⽀支
!59

90. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
!59

91. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
很多改動
!59

92. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
加入C功能
很多改動
!59

93. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
加入C功能
很多改動 Merge
!59

94. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
加入C功能
加入Ｄ功能
很多改動 Merge
!59

95. COSCUP 2018
版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
加入C功能
加入Ｄ功能
很多改動 Merge Merge
!59

96. COSCUP 2018
版本控制
!60
產品 7.5 開發
產品 7.7 穩定
產品 7.7 開發
產品 7.5 穩定

97. COSCUP 2018
Git Github
!61

98. COSCUP 2018
Github
!62

99. COSCUP 2018
Github
!62

100. COSCUP 2018
Github
!62

101. COSCUP 2018
Github
!62

102. COSCUP 2018
Github
!62

103. COSCUP 2018
持續整合
Continuous integration
!63

104. COSCUP 2018
持續整合
Continuous integration
不斷地、頻繁地、有事沒事就做⼀一下
!63

105. COSCUP 2018
持續整合
Continuous integration
把⼤大家寫的 Code 放在⼀一起看看有沒有問題！
編譯、測試、檢查服務
!63

106. COSCUP 2018
了了解專案
• Description
• README
• Code of conduct
• Contributing
• License
• Pull request template
!64

107. COSCUP 2018
了了解專案
• Description
• README
• Code of conduct
• Contributing
• License
• Pull request template
專案⽂文化
!64

108. COSCUP 2018
開源專案的⾓角⾊色
• Member
• Commiter
• Contributor
!65
• Member / Commiter
• Contributor
⼤大部分專案 Servo 專案

109. COSCUP 2018
規範瀏覽器與網⾴頁開發者的組織
網⾴頁超⽂文字應⽤用技術⼯工作⼩小組
!66

110. COSCUP 2018
開源專案の開發流程
以 Servo 為例例
!67

111. COSCUP 2018
開發流程
找到⽬目標
!68

112. COSCUP 2018
⽬目標
• 新功能（介⾯面）：改進介⾯面和功能
• 新功能（引擎）：將最新標準納入引擎
• 除錯（介⾯面）：修正回預期⾏行行為
• 除錯（引擎）：根據規範⽂文件進⾏行行修正
!69

113. COSCUP 2018
!70

114. COSCUP 2018
⽬目標
!71

115. COSCUP 2018
如何開始？
!72

116. COSCUP 2018
如何開始？
!72

117. COSCUP 2018
如何開始？
!72

118. COSCUP 2018
Input element
!73

119. COSCUP 2018
Input element
!73

120. COSCUP 2018
Input element
!73

121. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件
!74

122. COSCUP 2018
實作
• 例例如 value sanitization for input week type：
• https://html.spec.whatwg.org/multipage/
input.html#week-state-(type=week):value-sanitization-
algorithm
• https://html.spec.whatwg.org/multipage/common-
microsyntaxes.html#parse-a-week-string
!75

123. COSCUP 2018
數值清除演算法：
假設元素數值不是合法的Week字串串，就
把數值改成空字串串。
!76

124. COSCUP 2018
詳細步驟
!77

125. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
!78

126. COSCUP 2018
!79

127. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
單機測試
!80

128. COSCUP 2018
測試
Cross-browser Web Platform Tests (WPT)
!81

129. COSCUP 2018
測試
!81

130. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
單機測試送出審查
!82

131. COSCUP 2018
發 Pull Request
!83

132. COSCUP 2018
發 Pull Request
!83

133. COSCUP 2018
發 Pull Request
!83

134. COSCUP 2018
發 Pull Request
!83

135. COSCUP 2018
發 Pull Request
!83

136. COSCUP 2018
!84

137. COSCUP 2018
!84

138. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
單機測試送出審查⾃自動化測試
!85

139. COSCUP 2018
!86

140. COSCUP 2018
!86

141. COSCUP 2018
!86

142. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
單機測試送出審查⾃自動化測試
⾃自動化彙整
進入主幹

143. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
單機測試送出審查⾃自動化測試
⾃自動化彙整
進入主幹
!88

144. COSCUP 2018
開發流程
解決⽬目標 參參考⽂文件 開發
單機測試送出審查⾃自動化測試
⾃自動化彙整
進入主幹
QA 測試
!88
發布穩定版
What Servo not have, but would have in other browsers

145. COSCUP 2018
加入貢獻者⾏行行列列
!89
• Servo
• Firefox/Gecko
• Chromium/Blink
• Safari/Webkit

146. COSCUP 2018
社群⽀支援
• Rust Taiwan
• Mozilla Taiwan
!90
不懂儘管問

147. COSCUP 2018
參參考資料＆延伸閱讀
• 《來來做個網路路瀏覽器吧！》
• How Browsers Work
• 寫給⼤大家的 Git 教學
• 軟體品質與持續整合
• The whole web at maximum FPS: How WebRender gets rid
of jank
• Inside a super fast CSS engine: Quantum CSS (aka Stylo)
!91

148. COSCUP 2018
謝謝⼤大家
phy.tiger@gmail.com
!92