介紹瀏覽器與網頁原理 Introduce to principles of browsers and webpages

1. 瀏覽器與網⾴頁原理理
劉劉安⿑齊 Liu, An-Chi
!1
Principles of Browsers and Webpages
2018/8/122019/4/4 @ 六⾓角學院

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

3. ⼤大綱
• 講點故事
• 瀏覽器原理理
• 開發流程
• 導讀「來來做個瀏覽器」
• ⾃自由提問
!3

4. 緣起
故事從這裡開始
!4

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

6. 我覺得加入開源很困難
!6

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

8. 我覺得加入開源很困難
!6

9. 我覺得加入開源很困難
!6

10. ⼀一發不可收拾拾
!7
在 CloudMosa
開發 Puffin 瀏覽器

11. Firefox Quantum
!8

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

13. !10

14. !10

15. !11

16. !11

17. !11

18. Memory Leak
!12

19. Rust Demo
!13

20. 為什什麼要開發瀏覽器？
!14

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

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

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

24. 了了解瀏覽器的原理理
才能真正駕馭網⾴頁開發
!18

25. 來來看看瀏覽器長相吧
!19

26. !20

27. !20

28. !20

29. !20

30. !20

31. 為什什麼網⾴頁能在瀏覽器
上順利利跑？
!21

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

33. !23
https://github.com/whatwg

34. !24

35. !25
https://www.reddit.com/r/javascript/comments/5swe9b/
what_is_the_difference_between_the_w3c_and_the/
他們差在哪？
TL;DR
WHATWG is the newest.

36. 網⾴頁是怎麼寫？
!26

37. HTML
!27

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

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

40. 網站架構
!30

41. 網站架構
客⼾戶端
!30

42. 網站架構
伺服器客⼾戶端
!30

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

44. 網站架構
伺服器客⼾戶端
HTML
index.html
!30

45. 網站架構
伺服器客⼾戶端
HTML
index.html
!30

46. 網站架構
伺服器客⼾戶端
HTML
index.html
!30

47. 網站架構
伺服器客⼾戶端
HTML
index.html
!30

48. 網站架構
伺服器客⼾戶端
HTML
CSS
JavaScript
多媒體
index.html
!30

49. 網站架構
伺服器客⼾戶端
HTML
CSS
JavaScript
多媒體
index.html
!30

50. 瀏覽器架構
!31

51. 使⽤用者介⾯面
!32

52. 使⽤用者介⾯面
瀏覽器引擎
!32
渲染 JS

53. 使⽤用者介⾯面
!33
GUI 應⽤用程式開發框架
•GTK
•React Native
•QT

54. 功能
!34

55. 功能
!34

56. 功能
!34

57. 搜尋
!35

58. 搜尋
!35
http://www.allnewsandreports.com

59. Search Bar 原理理？
!36

60. 個⼈人化、隱私、同步
!37

61. 個⼈人化、隱私、同步
!37

62. 個⼈人化、隱私、同步
!37

63. 瀏覽器渲染引擎
!38

64. !39

65. HTML
!40

66. DOM
• ⽂文件物件模型（Document Object Model, DOM）
物件
Tag: Div
Text: A Div
Attributes: null
!41

67. DOM Tree
!42
Body
Div Div
Div Div Div

68. <div>
….
</div>
!43

69. !44

70. CSS
Selector
declaration
Rule
{
}
!45

71. !46

72. Style Tree
DOM Tree Style Tree
Rules
!47

73. !48

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

75. !50

76. Layout Tree
!51
Block
Block
Block
Block
Inline Inline
Inline Inline
Block
Block
Block
Block

77. !52

78. 渲染
!53
Block
Block Block
Inline InlineBlock
繪圖引擎

79. 圖形處理理引擎
!54
Skia

80. 顯⽰示在應⽤用程式上
!55

81. JS 呢？
!56

82. Javascript Engine
!57

83. WASM
!58
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
Story

84. 瀏覽器⾯面臨臨的挑戰
!59

85. !60
網路路頻寬與延遲
解析速度、渲染速度
能源消耗

86. 網路路問題
!61
頻寬來來回通訊延遲
論⽂文：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

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

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

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

90. 淺談產業現狀狀
!65

91. 開發の先備知識
!66

92. 版本控制
!67

93. 版本控制
初始狀狀態
!67

94. 版本控制
加入Ａ功能初始狀狀態
!67

95. 版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
!67

96. 版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
分⽀支
!67

97. 版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
分⽀支
!67

98. 版本控制
加入Ａ功能 加入Ｂ功能初始狀狀態
Tom
Branch
Lucky
Branch
分⽀支
!67

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

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

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

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

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

104. 版本控制
!68
產品 7.5 開發
產品 7.7 穩定
產品 7.7 開發
產品 7.5 穩定

105. Git Github
!69

106. Github
!70

107. Github
!70

108. Github
!70

109. Github
!70

110. Github
!70

111. 持續整合
Continuous integration
!71

112. 持續整合
Continuous integration
不斷地、頻繁地、有事沒事就做⼀一下
!71

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

114. 了了解專案
• Description
• README
• Code of conduct
• Contributing
• License
• Pull request template
!72

115. 了了解專案
• Description
• README
• Code of conduct
• Contributing
• License
• Pull request template
專案⽂文化
!72

116. 開源專案的⾓角⾊色
• Member
• Commiter
• Contributor
!73
• Member / Commiter
• Contributor
⼤大部分專案 Servo 專案

117. 開源專案の開發流程
以 Servo 為例例
!74

118. 開發流程
找到⽬目標
!75

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

120. !77

121. ⽬目標
!78

122. 如何開始？
!79

123. 如何開始？
!79

124. 如何開始？
!79

125. Input element
!80

126. Input element
!80

127. Input element
!80

128. 開發流程
解決⽬目標 參參考⽂文件
!81

129. 實作
• 例例如 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
!82

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

131. 詳細步驟
!84

132. 開發流程
解決⽬目標 參參考⽂文件 開發
!85

133. !86

134. 開發流程
解決⽬目標 參參考⽂文件 開發
單機測試
!87

135. 測試
Cross-browser Web Platform Tests (WPT)
!88

136. 測試
!88

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

138. 發 Pull Request
!90

139. 發 Pull Request
!90

140. 發 Pull Request
!90

141. 發 Pull Request
!90

142. 發 Pull Request
!90

143. !91

144. !91

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

146. !93

147. !93

148. !93

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

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

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

152. 加入貢獻者⾏行行列列
!96
• Servo
• Firefox/Gecko
• Chromium/Blink
• Safari/Webkit

153. 社群⽀支援
• Rust Taiwan
• Mozilla Taiwan
!97
不懂儘管問

154. 參參考資料＆延伸閱讀
• 《來來做個網路路瀏覽器吧！》
• 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)
!98

155. 謝謝⼤大家
phy.tiger@gmail.com
!99