一、在Linux系統上搭建Cobalt運行環境
Cobalt是一款開源輕量級HTML5/CSS/JS瀏覽器，旨在於用最少的CPU、GPU、RAM等資源消耗提供豐富的應用程序開發。為了使前端開發者驗證自己開發的Web應用程序是否可以在Cobalt瀏覽器上正常的運行，下面我來介紹一下如何在Linux系統上安裝Cobalt運行環境。使用Windows系統的小伙伴建議在系統上安裝一個虛擬機體驗一下。
安裝步驟如下：
1.下載depot_tools。地址：https://cobalt.googlesource.com/depot_tools
選擇要放置depot_tools目錄的位置，使用git clone命令將該工具下載到本地。例如：
2.將depot_tool目錄添加的PATH環境變量中的末尾。
Cobalt建議將環境變量添加到 .bashrc文件或者.profile文件中。例如：
3.安裝相關依賴包。
為了在Linux上編譯和運行Cobalt，需要安裝以下依賴包。
4.安裝最新版本的標准C++頭文件（libstdc++）。
例如：
5.克隆Cobalt代碼庫到本地。地址：https://cobalt.googlesource.com/cobalt
選擇一個目錄用來放置Cobalt代碼倉庫，進入該目錄，執行下列命令將cobalt代碼克隆到本地。
6.將Cobalt代碼中的Clang版本添加到PATH環境變量中。
修改PATH環境變量，將下載的Cobalt代碼倉庫中的Clang版本添加到PATH環境變量中。如果不把Clang添加到PATH中，下一步構建代碼將會出錯。例如：
7.構建代碼。
進入cobalt/src/目錄，運行以下命令構建代碼。注意：運行以下命令時必須指定platform。在goobuntu上，platform是 linux-x64x11。
你還可以使用-C命令行標志來指定build_type。有效的生成類型debug，devel，qa，和gold。如果指定構建類型，則命令會更快完成。否則，所有類型都是構建的。
8.編譯代碼生成可執行程序。
運行以下命令，編譯代碼：
該命令中包含三個變量：
1. <platform>是 標識平台的平台配置。如右舷移植指南中所述，它包含一個family name（類似linux）和一個 binary variant（類似x64x11），用連字符分隔（linux-x64x11）。
2. <build_type>是您正在編譯的構建。可能的值是 debug，devel，qa，和gold。這些值也在Starboard移植指南中根據文件所需的文件修改進行了描述 gyp_configuration.gypi。
3. <target_name>是分配給已編譯代碼的名稱，它用於運行在此步驟中編譯的代碼。最常見的名字是 cobalt，nplb和all：
- cobalt 構建Cobalt應用程序。
- nplb 構建Starboard的平台驗證測試套件，以確保您的平台代碼通過運行Cobalt的所有測試。
- all 建立所有目標。
例如：
9.運行程序啟動Cobalt客戶端。
執行以下命令：
該命令經常用的標志：
例如：
$ out/linux-x64x11_debug/cobalt –allow_http --url=127.0.0.1/index.html
注意：--url指向你要測試的頁面。
二、基於Cobalt瀏覽器的Web開發注意事項
Cobalt瀏覽器削減了很多HTML標簽、CSS屬性、選擇器、多媒體格式的支持。但是在內存優化和動畫渲染上有了很大的提升。
-
HTML標簽支持
- <html>
-
<head>
- <link> (with type="text/css")
- <meta>
- <script>
- <style>
-
<body>
- <div>
- <span>
- <video>
- <br>
-
CSS屬性支持
- animation
- background, background-color, background-image
- border, border-top, border-bottom, border-left, border-right
- border-radius
- border-style
- border-width
- box-shadow
- color(unsupport value: hsla)
- content
- display
- font
- @font-face
- font-family
- font-size
- font-style
- font-weight
- line-height
- margin, margin-top, margin-bottom, margin-left, margin-right
- max-height, max-width
- @media
- opacity
- overflow
- padding, padding-top, padding-bottom, padding-left, padding-right
- position
- top, bottom, left, right
- transform
- transform-origin
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- text-align
- text-indent
- text-overflow
- text-shadow
- text-transform
- vertical-align (supported values: top, bottom, middle, baseline)
- visibility
- white-space
- z-index
-
CSS選擇器支持
- Simple selectors: '*', type, .class, #id, :empty, :focus, :not()
- Pseudo elements: :before, :after,
- Combinators: ' ', '>', '+', '~'
- Grouping with ','
-
Javascript Web APIs支持
- Crypto.getRandomValues
- CSSOM (partial)
- CSSOM View (no scrolling, moving, resizing)
- Console.log
- DOM4 (partial)
- EncryptedMedia Extensions v0.1b (unprefixed)
- Image (for preloading and caching only)
- Media Source Extensions, Editor's Draft 09 August 2012
- Typed Arrays (partial)
- URL (partial)
- Web Audio API (partial)
- Web Storage API
- XMLHttpRequest Level 1
-
多媒體格式支持
- Video：FLV，MKV (for WebM)，MP4/FMP4，WAV
- Image: JPEG，PNG，WebP (including animated)
- Encoding: AAC，AVC (H.264) at 1080p/60fps (Level 4.2)，VP8/Vorbis，VP9/Opus，16-bit stereo PCM audio (for sound effects)
三、開發特別注意
- 不支持float布局；
- 不支持flex布局；
- 不支持Jquery；
- 不支持vue.js 的Plugin相關API。
四、常見問題
1. 如何解決水平布局?
解決方案：使用行內塊布局：inline-block
2. 數據更新視圖卻沒有及時更新？
解決方案：
1. 在cobalt瀏覽器上不要使用{{}}語法，使用v-text指令代替。
2. 依然使用{{}}語法，使用需要改變的屬性作為:key，如：
<div :key="item.value">{{ item.value }}</div>
3. 連續改變data，視圖更新跳變？
解決方案：使用函數節流。
4. 在使用rgba定義顏色時，如果rgb三個值一樣，經過vue-cli編譯只有會變成hsla。然而cobalt是不支持hsla的。
解決方案：目前還沒找到好的解決方案，只能先將R、G、B三者的值改成不一樣的。
5. 通過npm run build的指令編譯之后的html，通過file協議執行報錯？
解決方案：檢查以下項目配置是否使用的是絕對路徑，如果是則會找不到編譯之后的js和css文件。修改vue.config.js（vue-cli3）文件的publicPath屬性，改為相對路徑表示"./"。vue-cli2同理修改配置文件。
參考文檔：
Cobalt官方安裝地址：https://cobalt.foo/development/setup-linux.html
Cobalt倉庫：https://cobalt.googlesource.com/cobalt/+/master/src/
Cobalt HTML/CSS/JS支持：https://cobalt.foo/development/reference/supported-features.html