SlideShare ist ein Scribd-Unternehmen logo
1 von 128
Downloaden Sie, um offline zu lesen
瀏覽器開發
與開源經驗
劉劉安⿑齊
1
關於我
• 劉劉安⿑齊

• 微中⼦子、tigercosmos

• 國立臺灣⼤大學⽣生物機電⼯工程學系

• 開源貢獻者

• 瀏覽器相關研究

• ⼯工作經驗

*台達電

*台灣⾦金金融科技公司

*台⼤大⼤大氣研究助理理
2
這份簡報在哪?
https://github.com/tigercosmos/SITCON2018
3
⼤大綱
• 介紹 Servo

• 瀏覽器原理理

• 開發流程
4
開源
5
故事從這裡開始
最早(被Merge)的PR
• ContributorCovenant/contributor_covenant
6
最廣為⼈人知的開發者公約
收集各種 API 的專案
我覺得加入開源很困難
7
我覺得加入開源很困難
7
我覺得加入開源很困難
7
我覺得加入開源很困難
7
Servo
• 由 Mozilla 開發的平⾏行行化瀏覽器

• ⽤用 Rust 語⾔言

• GPU WebRender

• Firefox 的⼀一部分(量量⼦子專案)

• https://servo.org/zh-TW/
8
9
9
10
10
10
為什什麼要開發瀏覽器?
11
為什什麼要開發瀏覽器?
11
為什什麼要開發瀏覽器?
11
12
但
12
更更快
12
更更省電
更更快
來來點簡單的數學
13
能源⽅方⾯面
• ⼿手機消耗 20 J/網⾴頁

• 10 J × 100 次/天 × 1 億⼈人 = 1000 億J/天

• ⼀一度電 = 360萬 J 

• 27777 度電 = 277 ⼾戶家庭 / 每個⽉月
14
時間⽅方⾯面
• 開啟時間 3 秒/⾴頁

• 0.1 秒 × 100 ⾴頁/天 × 1 年年 = 3650 秒
15
–劉劉安⿑齊
「只有真正懂瀏覽器,才能真正駕馭網⾴頁開發」
16
認識瀏覽器
17
18
18
18
18
使⽤用者介⾯面
19
使⽤用者介⾯面
瀏覽器引擎
19
網站架構
20
網站架構
20
客⼾戶端
網站架構
20
伺服器客⼾戶端
網站架構
20
伺服器客⼾戶端
HTML
index.html
網站架構
20
伺服器客⼾戶端
HTML
index.html
網站架構
20
伺服器客⼾戶端
HTML
index.html
網站架構
20
伺服器客⼾戶端
HTML
index.html
網站架構
20
伺服器客⼾戶端
HTML
index.html
網站架構
20
伺服器客⼾戶端
HTML
CSS
JavaScript
多媒體
index.html
網站架構
20
伺服器客⼾戶端
HTML
CSS
JavaScript
多媒體
index.html
網⾴頁原始碼
21
HTML
22
CSS
23
邊界空 10 畫素
字體為黃⾊色
背景為⿊黑⾊色
指定⽬目標
Javascript
24
從這份原始碼 找到 ID 叫做“text” CSS 的 color 變成⽩白⾊色
25
25
25
25
25
25
25
25
25
26
HTML
27
28
<div>
….
</div>
DOM
• ⽂文件物件模型(Document Object Model, DOM)
29
物件
Tag: Div
Text: A Div
Attributes: null
30
CSS
31
Selector
declaration
Rule
{
}
32
Style Tree
33
DOM Tree Style Tree
Rules
34
Layout
35
每個元素都是⼀一個 Box
• Margin 邊外的空⽩白
• Border 邊框
• Padding 邊內的空⽩白
• Content 內容
36
37
Layout Tree
38
在進入開發之前
39
版本控制
40
版本控制
40
初始狀狀態
版本控制
40
加入A功能初始狀狀態
版本控制
40
加入A功能 加入B功能初始狀狀態
版本控制
40
加入A功能 加入B功能初始狀狀態
Master
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Master
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Lucky
Branch
Master
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Lucky
Branch
Master
很多改動
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Lucky
Branch
Master
加入C功能
很多改動
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Lucky
Branch
Master
加入C功能
很多改動 Merge
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Lucky
Branch
Master
加入C功能
加入D功能
很多改動 Merge
版本控制
40
加入A功能 加入B功能初始狀狀態
Tom
Branch
Lucky
Branch
Master
加入C功能
加入D功能
很多改動 Merge Merge
Git
41
Github
Github
42
Github
42
Github
42
Github
42
Github
42
持續
43
整合
Continuous integration
持續
43
整合
Continuous integration
不斷地、頻繁地、有事沒事就做⼀一下
持續
43
整合
Continuous integration
把⼤大家寫的 Code 放在⼀一起看看有沒有問題!
編譯、測試、檢查服務
了了解專案
• Description

• README

• Code of conduct

• Contributing

• License

• Pull request template
44
了了解專案
• Description

• README

• Code of conduct

• Contributing

• License

• Pull request template
44
專案⽂文化
開發流程
解決⽬目標
如何開始?
46
如何開始?
46
如何開始?
46
解決⽬目標
47
Input element
48
Input element
48
Input element
48
開發流程
49
解決⽬目標 參參考⽂文件
⽂文件
• 規範⽂文件(SPEC)

• https://html.spec.whatwg.org/

• https://www.w3.org/TR/
50
網⾴超⽂字應⽤技術⼯作⼩組
• 例例如 value sanitizations 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
51
– html.spec.whatwg.org
「The value sanitization algorithm is as follows: If
the value of the element is not a valid week string,
then set it to the empty string instead.」
52
「數值清除演算法:假設元素數值不是合法的Week字
串串,就把數值改成空字串串。」
詳細步驟
53
開發流程
54
解決⽬目標 參參考⽂文件 開發
55
56
開發流程
57
解決⽬目標 參參考⽂文件 開發
單機測試
測試
58
Cross-browser Web Platform Tests (WPT)
測試
58
開發流程
59
解決⽬目標 參參考⽂文件 開發
單機測試送出審查
發 Pull Request
60
發 Pull Request
60
發 Pull Request
60
發 Pull Request
60
發 Pull Request
60
61
61
開發流程
62
解決⽬目標 參參考⽂文件 開發
單機測試送出審查⾃自動化測試
63
63
63
開發流程
64
解決⽬目標 參參考⽂文件 開發
單機測試送出審查⾃自動化測試
⾃自動化彙整 進入主幹
加入貢獻者⾏行行列列
• 好玩

• 學習軟體開發

• 練習寫程式

• 做⼀一件偉⼤大的事:下個世代的瀏覽器
65
參參考資料&延伸閱讀
• 《來來做個網路路瀏覽器吧!》

• How Browsers Work

• 寫給⼤大家的 Git 教學

• 軟體品質與持續整合
66
謝謝⼤大家
67
phy.tiger@gmail.com

Weitere ähnliche Inhalte

Ähnlich wie 瀏覽器開發與開源經驗 SITCON 2018

Ready Programmer One
Ready Programmer OneReady Programmer One
Ready Programmer Oneflywindy
 
大獅子與小獅子的分享
大獅子與小獅子的分享大獅子與小獅子的分享
大獅子與小獅子的分享jo lin
 
Inner source introduction
Inner source introductionInner source introduction
Inner source introductionLi Jiansheng
 
高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)
高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)
高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)Irvin Chen
 
網站製作基礎概念
網站製作基礎概念網站製作基礎概念
網站製作基礎概念Shengyou Fan
 
如何,高效利用搜索引擎+构建网络工具箱
如何,高效利用搜索引擎+构建网络工具箱如何,高效利用搜索引擎+构建网络工具箱
如何,高效利用搜索引擎+构建网络工具箱84zhu
 
01.python.开发最佳实践
01.python.开发最佳实践01.python.开发最佳实践
01.python.开发最佳实践Na Lee
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程Souyi Yang
 
Kamigo reviews 20191127
Kamigo reviews 20191127Kamigo reviews 20191127
Kamigo reviews 20191127Jia Yu Lin
 
外掛中文化自己做 如何自訂網站翻譯
外掛中文化自己做 如何自訂網站翻譯外掛中文化自己做 如何自訂網站翻譯
外掛中文化自己做 如何自訂網站翻譯Yen-Wen Chen
 
重整工具箱-从开源软件到开放服务
重整工具箱-从开源软件到开放服务重整工具箱-从开源软件到开放服务
重整工具箱-从开源软件到开放服务LI Daobing
 
为什么比特币是靠谱的?
为什么比特币是靠谱的?为什么比特币是靠谱的?
为什么比特币是靠谱的?bit_kevin
 
GitHub 开源指南深度解读
GitHub 开源指南深度解读GitHub 开源指南深度解读
GitHub 开源指南深度解读Li Jiansheng
 
該怎麼樣(認真的)部署你的 Python Web 應用程式?
該怎麼樣(認真的)部署你的 Python Web 應用程式?該怎麼樣(認真的)部署你的 Python Web 應用程式?
該怎麼樣(認真的)部署你的 Python Web 應用程式?Andy Dai
 
Agile Taichung sharing Robot Framework 2018/05/19
Agile Taichung sharing Robot Framework 2018/05/19Agile Taichung sharing Robot Framework 2018/05/19
Agile Taichung sharing Robot Framework 2018/05/19Leo Tseng
 
DevOps的神鬼奇航
DevOps的神鬼奇航DevOps的神鬼奇航
DevOps的神鬼奇航Edward Kuo
 
01 DevOps and Azure DevOps overview
01 DevOps and Azure DevOps overview01 DevOps and Azure DevOps overview
01 DevOps and Azure DevOps overviewAlan Tsai
 
How to choose web framework
How to choose web frameworkHow to choose web framework
How to choose web frameworkBo-Yi Wu
 
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程Souyi Yang
 
开源社区生生不息的创新土壤
开源社区生生不息的创新土壤开源社区生生不息的创新土壤
开源社区生生不息的创新土壤Steven Cheng
 

Ähnlich wie 瀏覽器開發與開源經驗 SITCON 2018 (20)

Ready Programmer One
Ready Programmer OneReady Programmer One
Ready Programmer One
 
大獅子與小獅子的分享
大獅子與小獅子的分享大獅子與小獅子的分享
大獅子與小獅子的分享
 
Inner source introduction
Inner source introductionInner source introduction
Inner source introduction
 
高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)
高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)
高雄市職業總工會 網路應用課程 06 搜索:搜索引擎、維基百科 (10/6)
 
網站製作基礎概念
網站製作基礎概念網站製作基礎概念
網站製作基礎概念
 
如何,高效利用搜索引擎+构建网络工具箱
如何,高效利用搜索引擎+构建网络工具箱如何,高效利用搜索引擎+构建网络工具箱
如何,高效利用搜索引擎+构建网络工具箱
 
01.python.开发最佳实践
01.python.开发最佳实践01.python.开发最佳实践
01.python.开发最佳实践
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
 
Kamigo reviews 20191127
Kamigo reviews 20191127Kamigo reviews 20191127
Kamigo reviews 20191127
 
外掛中文化自己做 如何自訂網站翻譯
外掛中文化自己做 如何自訂網站翻譯外掛中文化自己做 如何自訂網站翻譯
外掛中文化自己做 如何自訂網站翻譯
 
重整工具箱-从开源软件到开放服务
重整工具箱-从开源软件到开放服务重整工具箱-从开源软件到开放服务
重整工具箱-从开源软件到开放服务
 
为什么比特币是靠谱的?
为什么比特币是靠谱的?为什么比特币是靠谱的?
为什么比特币是靠谱的?
 
GitHub 开源指南深度解读
GitHub 开源指南深度解读GitHub 开源指南深度解读
GitHub 开源指南深度解读
 
該怎麼樣(認真的)部署你的 Python Web 應用程式?
該怎麼樣(認真的)部署你的 Python Web 應用程式?該怎麼樣(認真的)部署你的 Python Web 應用程式?
該怎麼樣(認真的)部署你的 Python Web 應用程式?
 
Agile Taichung sharing Robot Framework 2018/05/19
Agile Taichung sharing Robot Framework 2018/05/19Agile Taichung sharing Robot Framework 2018/05/19
Agile Taichung sharing Robot Framework 2018/05/19
 
DevOps的神鬼奇航
DevOps的神鬼奇航DevOps的神鬼奇航
DevOps的神鬼奇航
 
01 DevOps and Azure DevOps overview
01 DevOps and Azure DevOps overview01 DevOps and Azure DevOps overview
01 DevOps and Azure DevOps overview
 
How to choose web framework
How to choose web frameworkHow to choose web framework
How to choose web framework
 
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程
 
开源社区生生不息的创新土壤
开源社区生生不息的创新土壤开源社区生生不息的创新土壤
开源社区生生不息的创新土壤
 

瀏覽器開發與開源經驗 SITCON 2018