學(xué)習(xí)前端 Web 瀏覽器

Web瀏覽器 (通常被稱為瀏覽器)是一個在萬維網(wǎng)上檢索、呈現(xiàn)、遍歷信息資源的應(yīng)用軟件。信息資源是由統(tǒng)一資源標(biāo)識符 (URI/URL) 來標(biāo)識的，可以是網(wǎng)頁、圖片、視頻或其他內(nèi)容。資源中存在的超鏈接能夠使用戶輕松地將瀏覽器導(dǎo)航到相關(guān)資源。雖然瀏覽器主要目的是使用萬維網(wǎng)，它們同樣也可被用來獲得專用網(wǎng)絡(luò)中Web服務(wù)器所提供的信息，或者文件系統(tǒng)中的文件。

— 維基百科

最常用的瀏覽器 (任意設(shè)備上) 如下：

1. Chrome (引擎: Blink + V8)
2. Firefox (引擎: Gecko + SpiderMonkey)
3. Internet Explorer (引擎: Trident + Chakra)
4. Safari (引擎: Webkit + SquirrelFish)

圖片來源: http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201501-201601-bar

瀏覽器和Web技術(shù)的演進(jìn) （即API）：

• evolutionoftheweb.com [閱讀]
• Web瀏覽器的時間軸 [閱讀]

最常用的Headless(無GUI)瀏覽器：

• PhantomJS (引擎: Webkit + SquirrelFish)
• SlimerJS (引擎: Gecko + SpiderMonkey)
• TrifleJS (引擎: Trident + Chakra)

瀏覽器是如何工作的：

• 了解關(guān)于瀏覽器和 Web 的20件事情 [閱讀]
• 加速你的CSS：瀏覽器如何布局網(wǎng)頁 [閱讀]
• 瀏覽器如何工作：現(xiàn)代瀏覽器的幕后原理 [閱讀]
• 瀏覽器是如何真正渲染一個網(wǎng)站的？ [觀看]
• 什么會觸發(fā)布局和重排 [閱讀]
• 每位前端開發(fā)者必須知道的網(wǎng)頁渲染技能 [閱讀]

圖片來源: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

瀏覽器優(yōu)化

• 瀏覽器渲染優(yōu)化 [觀看]
• 網(wǎng)站性能優(yōu)化 [觀看]

對比瀏覽器

• Web瀏覽器的比較 [閱讀]

瀏覽器 Hacks

• browserhacks.com [閱讀]

瀏覽器開發(fā)

在過去，前端開發(fā)者要花費很多時間寫代碼來兼容幾種不同瀏覽器。 與現(xiàn)在相比，這曾是一個巨大的問題?，F(xiàn)在，第三方工具（例如：jQuery、React、 Post-CSS、Babel等等）結(jié)合現(xiàn)代瀏覽器使得瀏覽器開發(fā)相當(dāng)容易。新的挑戰(zhàn)不是用戶使用哪個瀏覽器，而是他們選擇哪種設(shè)備運行瀏覽器。

瀏覽器中的常青樹

大多數(shù)現(xiàn)代瀏覽器的最新版本被認(rèn)為是常青瀏覽器。也就是說，從理論上講他們應(yīng)該不需要用戶操作自動更新。自動更新瀏覽器的這一舉措已經(jīng)反過來淘汰了不自動更新的舊版瀏覽器。

選擇瀏覽器 [^1]

如今，大多數(shù)前端開發(fā)人員使用Chrome和“Chrome”開發(fā)工具”開發(fā)前端代碼。然而，最常用的現(xiàn)代瀏覽器都提供開發(fā)工具。使用哪個用于開發(fā)是一個主觀的選擇。最重要的問題是了解你必須支持哪個瀏覽器，哪個設(shè)備，然后適當(dāng)?shù)剡M(jìn)行測試。

建議：

[^1]我建議使用Chrome，因為它的開發(fā)者工具在持續(xù)改進(jìn)，并且包含了最強大的功能。