從今天起，我們重新認(rèn)識(shí)瀏覽器（下）

編者按：當(dāng)今世界，信息技術(shù)日新月異，互聯(lián)網(wǎng)正在改變社會(huì)和生活的方方面面，引領(lǐng)了社會(huì)產(chǎn)生新變革，創(chuàng)造了人類生活新空間。上網(wǎng)，已經(jīng)像吃飯一樣，成為人們每天不可或缺的“必修課”。當(dāng)我們已經(jīng)習(xí)慣了打開瀏覽器，輸入網(wǎng)址就能輕松連接世界的時(shí)候，是否有過疑惑：這個(gè)小小的瀏覽器是如何將我們“帶”到世界的各個(gè)角落？瀏覽器的運(yùn)行機(jī)制是什么？瀏覽器還有哪些新玩法？相信會(huì)有很多讀者也會(huì)對此感興趣，本期我們繼續(xù)帶領(lǐng)大家重新認(rèn)識(shí)瀏覽器。

主持人：

倪俊杰 浙江省桐鄉(xiāng)市鳳鳴高級中學(xué)

嘉 賓：

劉宗凡 廣東省肇慶市四會(huì)中學(xué)

邱元陽 河南省安陽縣職業(yè)中專

楊 磊 天津市第五中學(xué)

虞穎健 浙江省海寧市第一中學(xué)

徐小波 浙江省玉環(huán)市環(huán)山小學(xué)

在上一期中，我們介紹了瀏覽器的發(fā)展歷史以及內(nèi)核、緩存、開發(fā)語言等內(nèi)容，讓讀者對瀏覽器有了更多的認(rèn)識(shí)。本期，我們將繼續(xù)深度揭秘。

瀏覽器的工作原理

倪俊杰：上期我們介紹了瀏覽器的組成結(jié)構(gòu)，但未對瀏覽器的工作原理展開說明，先請各位嘉賓就此為讀者做個(gè)介紹。

徐小波：瀏覽器的主要工作是與Web服務(wù)器溝通，從Web服務(wù)器上不僅獲取網(wǎng)頁和各種類型的資源（文本、圖片或其他類型的資源），最后還要在瀏覽器中顯示。比如，當(dāng)你要訪問百度網(wǎng)站，需要在瀏覽器地址欄中輸入網(wǎng)址（www.baidu.com），瀏覽器先從DNS服務(wù)器（是進(jìn)行域名和與之相對應(yīng)的IP地址轉(zhuǎn)換的服務(wù)器）上查詢到百度網(wǎng)站的IP地址（115.239.211.112），有了IP地址，你的瀏覽器會(huì)打開一個(gè)TCP連接到百度服務(wù)器，服務(wù)器返回IP地址對應(yīng)的網(wǎng)頁，最后瀏覽器會(huì)將網(wǎng)頁渲染到屏幕上（如圖1）。

劉宗凡：現(xiàn)今網(wǎng)頁設(shè)計(jì)思路是把網(wǎng)頁分成三個(gè)層次：結(jié)構(gòu)層（HTML超文本標(biāo)記語言）、表示層（CSS層疊樣式表）、行為層（JavaScript腳本語言）。瀏覽器從服務(wù)器上獲取的文件包括HTML文件、CSS文件、JavaScript文件以及各種類型的媒體資源（圖片、視頻、音頻等）。其中，HTML決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS設(shè)定網(wǎng)頁的表現(xiàn)樣式，JavaScript控制網(wǎng)頁的行為。其實(shí)瀏覽器先會(huì)渲染不含內(nèi)容的HTML基本框架；然后會(huì)檢查HTML標(biāo)簽，發(fā)出GET請求以獲取頁面上的額外元素，如圖片、CSS樣式表、JavaScript文件等，這些靜態(tài)文件會(huì)被瀏覽器緩存，因而當(dāng)你下次訪問這個(gè)頁面時(shí)，瀏覽器不需要再次請求；最終，網(wǎng)頁出現(xiàn)在你的瀏覽器里。

邱元陽：既然談到了瀏覽器的工作原理，我們也不妨了解一下瀏覽器的開發(fā)者工具。每一款現(xiàn)代網(wǎng)絡(luò)瀏覽器都包含一套強(qiáng)大的開發(fā)者工具套件。開發(fā)者工具是一套內(nèi)置在瀏覽器中的Web開發(fā)和調(diào)試工具。使用開發(fā)者工具可以重演、調(diào)試和剖析網(wǎng)站。這套工具可以檢查當(dāng)前加載的HTML、CSS和JavaScript，顯示每個(gè)資源頁面的請求以及載入所花費(fèi)的時(shí)間。它不僅是Web前端工程師用來調(diào)試網(wǎng)頁代碼的利器，也是我們獲取網(wǎng)頁資源的“瑞士軍刀”。

開發(fā)者工具內(nèi)置在瀏覽器的子窗口中，在Chrome瀏覽器中有三種方式可以打開它：一是快捷鍵，F(xiàn)12；二是右鍵菜單，在網(wǎng)頁中“右鍵單擊”，并從彈出的菜單中選擇“檢查”；三是菜單欄，“菜單”“更多工具”“開發(fā)者工具”（如圖2）。在打開的開發(fā)者工具中包含以下標(biāo)簽：Elements（元素面板）、Console（控制臺(tái)面板）、Sources（源代碼面板）、Network（網(wǎng)絡(luò)面板）、Timeline（時(shí)間軸面板）、Profiles（分析面板）、Application（資源面板）、Security（安全面板）、Audits（監(jiān)察面板）。

倪俊杰：看樣子開發(fā)者工具的功能是很強(qiáng)大的，那我們可以如何使用呢？

徐小波：確實(shí)，利用好開發(fā)者工具，可以獲取很多有價(jià)值的信息。接下來，我以Sources和Network這兩個(gè)面板為例做個(gè)介紹。

1.利用“Sources”面板，禁用JavaScript，獲取文本信息

JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。網(wǎng)站開發(fā)者編寫JavaScript腳本，給用戶獲取網(wǎng)頁上的文本信息造成障礙，集中體現(xiàn)在以下兩個(gè)方面：①禁止復(fù)制文本信息。比如，百度文庫禁止用戶直接復(fù)制網(wǎng)頁文本，可以通過開發(fā)者工具“Sources”面板，禁用網(wǎng)頁JavaScript事件，就可以復(fù)制自己想要的文本信息。②復(fù)制文本追加文字。比如，CSDN博客會(huì)在用戶復(fù)制網(wǎng)頁文本后追加“作者、來源、原文鏈接、版權(quán)聲明”等文本信息，你只要在開發(fā)者工具“Sources”面板禁用網(wǎng)頁JavaScript事件，就可以自由復(fù)制文本信息。禁用網(wǎng)頁JavaScript事件的具體方法如下：首先，在瀏覽器中打開開發(fā)者工具（F12），在“Sources”面板中找到“Settings”選項(xiàng)，在“Preferences”找到“Debugger”，最后在“Disable JavaScript”選項(xiàng)前打上勾，刷新頁面后就可以復(fù)制文本信息（如圖3）。

2.使用“Network”面板，獲取多媒體資源

除了文本信息，網(wǎng)頁上的音頻、視頻等資源也可以用開發(fā)者工具“Network”面板獲取。比如，音視頻資源獲取的具體方法如下：首先，在瀏覽器中打開開發(fā)者工具（F12），打開“Network”面板，重新刷新頁面后，在“Requests Table”（請求列表）就會(huì)列出頁面上所有的資源信息（等到音視頻完整緩存后），在“Filters”（過濾器）中選擇“Media”，在“Requests Table”中只列出音頻和視頻等媒體資源，雙擊“Name”列的文件名，在新標(biāo)簽網(wǎng)頁中預(yù)覽媒體文件，確認(rèn)無誤后“右鍵”“另存為”即可保存（如圖4）。（注：有些網(wǎng)站做了加密，用此方法無效。）

瀏覽器插件

倪俊杰：在網(wǎng)絡(luò)上下載音視頻是很多一線老師的需求，通過開發(fā)者工具面板的確能達(dá)到目的，但方法未免有些煩瑣。各位嘉賓還有其他方法嗎？

劉宗凡：使用瀏覽器插件也可以很方便地下載音視頻。Chrome作為市場占有率很高的瀏覽器，以極速啟動(dòng)、簡潔大方、瀏覽速度快、穩(wěn)定性好、功能強(qiáng)大等優(yōu)點(diǎn)深受大眾喜愛。不過第一次打開瀏覽器時(shí)，更多的人是一臉茫然：幾乎一片空白的頁面，讓人無所適從。其實(shí)，Chrome瀏覽器最大的優(yōu)勢，在于它的海量插件。為了擴(kuò)展它的功能，很多公司或個(gè)人開發(fā)了很多插件，來實(shí)現(xiàn)普通瀏覽器實(shí)現(xiàn)不了的功能。單擊Chrome右上角三個(gè)點(diǎn)按鈕，選擇“設(shè)置”，然后在左上角單擊三個(gè)短橫線按鈕，找到“擴(kuò)展程序”，就可以在上邊的“搜索擴(kuò)展程序”欄中輸入想要實(shí)現(xiàn)的功能，找到相應(yīng)插件。打開擴(kuò)展程序頁面的第二個(gè)方法是在瀏覽器地址欄輸入“chrome：//extensions”，然后回車就可以了。如果我們無法訪問谷歌服務(wù)器，還可以在國內(nèi)網(wǎng)站下載、離線安裝。目前國內(nèi)很多網(wǎng)站都提供了大量插件。

第一種安裝方法：下載好的插件擴(kuò)展名是“crx”。我們先打開Chrome“擴(kuò)展程序”頁面，從資源管理器將crx文件直接拖到這個(gè)頁面，左下角將出現(xiàn)一個(gè)警告窗口（如圖5）。單擊“繼續(xù)”，一般來說就可以正常安裝好了。

但是，也有些插件在安裝時(shí)出現(xiàn)如上頁圖6的提示，說明用這種辦法安裝是失敗了。

第二種安裝方法：如果第一種安裝方法失敗了，我們可以通過修改參數(shù)來安裝。打開“chrome：//flags/#extensions-on-chrome-urls”頁面，將最上面的“Extensions on chrome：//URLs”項(xiàng)后面的“Disabled”改為“Enabled”，重啟瀏覽器，再用第一種方法來安裝，如著名的“油猴”插件，只要點(diǎn)擊“添加擴(kuò)展程序”按鈕（如圖7），就可以正常安裝了。但是用這種方法安裝的插件有可能不能正常使用，如廣告攔截插件“Adblock Plus”。

第三種安裝方法：如果第二種方法仍然失敗了，那我們還可以嘗試一下開發(fā)者模式來安裝。下載的插件擴(kuò)展名為.crx，我們將其改為.zip。如果看不到擴(kuò)展名，在資料管理器的“組織-文件夾”和“搜索選項(xiàng)-查看”中，將“隱藏已知文件類型的擴(kuò)展名”前選項(xiàng)去掉就可以修改了。修改后將有一個(gè)警告窗口，點(diǎn)擊“是”，再用解壓縮軟件將其解壓縮到某個(gè)文件夾中。

打開“擴(kuò)展程序”頁面，單擊右上角“開發(fā)者模式”開關(guān)，左上角將出現(xiàn)三個(gè)選項(xiàng)（如圖8）。點(diǎn)擊“加載已解壓的擴(kuò)展程序”，選中剛才解壓縮的文件夾，再單擊“確定”，一般插件都可以安裝好了。

楊磊：Chrome瀏覽器有很多有用的插件，比較典型的有廣告攔截類、多媒體下載類、超級插件類。

廣告攔截類。Adblock Plus（用第三種方法安裝）是一款著名的廣告攔截插件，效果非常好。正常安裝以后就能幫你攔截廣告了。當(dāng)然，我們單擊“Adblock Plus”圖標(biāo)再單擊“設(shè)置”，可以讓“Adblock Plus”更好地為我們服務(wù)（如圖9）。類似插件還有uBlock Origin、AdBlock（和Adblock Plus不是同一個(gè)插件）等。

多媒體下載類?，F(xiàn)在因?yàn)閲鴥?nèi)版權(quán)意識(shí)覺醒，想在網(wǎng)上下載一首歌變得不是那么容易了?！耙粢曨l下載”是國內(nèi)開發(fā)的一款下載插件，當(dāng)我們在網(wǎng)上聽一首歌時(shí)，只要點(diǎn)擊它的圖標(biāo)，就可以自動(dòng)將其下載好，目前支持主流的音樂網(wǎng)站，如QQ音樂、網(wǎng)易云音樂、酷狗音樂等。除了可以下載音樂，這個(gè)插件也能下載大多數(shù)網(wǎng)站的視頻，是我們下載音視頻的利器。類似的插件還有貓抓（視頻下載神器）、Video download helper等。

超級插件類。油猴（Tampermonkey）不是一個(gè)普通插件，它是一個(gè)用戶腳本管理器，更像是一個(gè)容器。安裝了油猴以后，它并沒有什么功能，必須有相應(yīng)的腳本才能起作用。我們下載相應(yīng)的油猴腳本，點(diǎn)擊瀏覽器上的油猴按鈕，然后再打開“實(shí)用工具”頁面，根據(jù)下載的腳本類型，在“壓縮包”或“文件”下選擇“導(dǎo)入”后面的“選擇文件”按鈕，將其導(dǎo)入，這個(gè)腳本就開始起作用了（如上頁圖10），如百度網(wǎng)盤直接下載、破解VIP會(huì)員視頻限制直接播放、解除網(wǎng)頁限制、百度廣告徹底清除、網(wǎng)易云音樂高音質(zhì)支持、下載、斗魚熊貓工具箱等，它極大地方便了我們獲取網(wǎng)絡(luò)上的資源。

邱元陽：Chrome瀏覽器之所以在全球最受人們追捧，市場占有率一直在60%左右，最關(guān)鍵的就是它有良好的生態(tài)圈，豐富的插件滿足了絕大多數(shù)人的需要，從抓圖、翻譯、PDF格式轉(zhuǎn)換、網(wǎng)盤加速、在線視頻去廣告、購物比價(jià)、看圖搜片等，只有我們想不到的，沒有插件辦不到的事。以上幾個(gè)插件只是讓我們了解了插件的強(qiáng)悍功能，要完成更多的任務(wù)，可以去找相應(yīng)的插件。

當(dāng)然，如果你嫌Chrome插件離線安裝麻煩，也可以使用國內(nèi)Chrome核心的瀏覽器，如360極速瀏覽器、獵豹瀏覽器、搜狗高速瀏覽器等，它們均可以像Chrome那樣離線安裝所有Chrome插件，更重要的是它們都提供了插件市場，可以在線安裝，操作非常簡便，更有一些符合國情的功能，當(dāng)然豐富性和Chrome是不能相提并論的。作為另一個(gè)市場占有率非常高的瀏覽器Firefox，插件同樣琳瑯滿目。瀏覽器作為一個(gè)平臺(tái)，甚至可以起到操作系統(tǒng)的作用，曾經(jīng)有廠商就出產(chǎn)了基于Firefox的手機(jī)，可見瀏覽器廠商的野心。

用Python開發(fā)瀏覽器

倪俊杰：瀏覽器的技術(shù)雖然復(fù)雜，但并不是高不可攀。我們自己也可以開發(fā)一個(gè)簡易瀏覽器。

虞穎?。篜yQt是跨平臺(tái)的C++圖形用戶界面應(yīng)用程序開發(fā)框架Qt的Python封裝，通過PyQt能夠編寫Python代碼來開發(fā)基于Qt的圖形化用戶界面應(yīng)用程序。在PyQt5的QtWebEngineWidgets名稱空間下有一個(gè)QwebEngineView組件，使用它可以用來瀏覽網(wǎng)頁。QwebEngineView組件基于Google的Chromium項(xiàng)目，其采用的瀏覽器引擎是WebKit。

如果僅僅是想使用QWebEngineView組件來瀏覽網(wǎng)頁，可以使用如下的代碼：

from PyQt5.QtWebEngineWidgets import QWebEngineView

browser = QWebEngineView（）

browser.load（QUrl（"https：//www.baidu.com"））

browser.show（）

第1行代碼從QtWebEngineWidgets名稱空間導(dǎo)入QWebEngineView，第2行代碼初始化一個(gè)QWebEngineView的實(shí)例，第3行代碼使用QWebEngineView實(shí)例上的load方法加載百度首頁，第4行代碼顯示QWebEngineView的瀏覽器。

運(yùn)行界面如上頁圖11所示。

這種方式可以查看網(wǎng)頁，但是只能采用編碼的方式來打開指定地址的網(wǎng)頁，沒有一般瀏覽器的地址欄輸入網(wǎng)址瀏覽網(wǎng)頁功能，也沒有前進(jìn)、后退、刷新等功能。接下來我們使用QwebEngineView來實(shí)現(xiàn)一個(gè)簡單的瀏覽器。PyQt5的布局代碼如下：

btn_prev = QPushButton（'前進(jìn)'） #前進(jìn)按鈕

btn_next = QPushButton（'后退'） #后退按鈕

btn_reload = QPushButton（'刷新'） #刷新按鈕

btn_go = QPushButton（'轉(zhuǎn)到'） #轉(zhuǎn)到按鈕

url_address = QLineEdit（） #地址欄

hbox = QHBoxLayout（） #水平布局添加上面的控件

hbox.addWidget（btn_prev）

hbox.addWidget（btn_next）

hbox.addWidget（btn_reload）

hbox.addWidget（url_address）

hbox.addWidget（btn_go）

vbox = QVBoxLayout（） #垂直布局

vbox.addLayout（hbox） #上面是按鈕和地址欄

browser = QWebEngineView（）

vbox.addWidget（browser） #下面是瀏覽器

main_win = QWidget（）

main_win.setLayout（vbox）

main_win.show（）

運(yùn)行程序，可以看到如上頁圖12所示的界面，瀏覽器已經(jīng)嵌入到應(yīng)用程序中，但目前這些按鈕還是無效的。下面我們?yōu)闉g覽器加入轉(zhuǎn)到地址欄輸入的代碼：

def goto（）：

browser.load（QUrl（url_address.text（）））

btn_go.clicked.connect（goto）

我們定義了一個(gè)函數(shù)goto，這個(gè)函數(shù)調(diào)用了QwebEngineView的load方法，然后“轉(zhuǎn)到”按鈕的點(diǎn)擊信號綁定到了goto函數(shù)上。這樣，當(dāng)點(diǎn)擊這個(gè)“轉(zhuǎn)到”按鈕時(shí)，就會(huì)打開地址欄中的網(wǎng)址。

我們再依次添加前進(jìn)、后退、刷新的代碼：

def reload（）：

browser.reload（）

btn_prev.clicked.connect（goto）

def prev（）：

browser.forward（）

btn_reload.clicked.connect（prev）

def next（）：

browser.back（）

btn_next.clicked.connect（next）

QwebEngineView上的reload、forward、back方法分別實(shí)現(xiàn)了瀏覽器的刷新、前進(jìn)、后退的功能。最后我們再加上這一句：

url_address.returnPressed.connect（goto）

當(dāng)?shù)刂窓谳斎刖W(wǎng)址以后按回車，就能直接訪問地址欄中的頁面，大功告成！我們的簡易瀏覽器已經(jīng)能夠使用了。

展望未來

倪俊杰：在我們剛剛接觸互聯(lián)網(wǎng)的時(shí)候，使用的瀏覽器是微軟的IE。但現(xiàn)在IE瀏覽器經(jīng)常被人們嫌棄，很少人會(huì)用了。時(shí)過境遷，互聯(lián)網(wǎng)發(fā)展的速度已經(jīng)超過我們的想象。那么，以后的瀏覽器會(huì)怎么樣呢？我們可以暢想一下。

楊磊：我覺得未來瀏覽器將更加關(guān)注安全性能，更多主打網(wǎng)絡(luò)安全的瀏覽器品牌將不斷涌現(xiàn)。AI工具箱將成為未來瀏覽器的重要組成部分，如騰訊QQ瀏覽器，加入了識(shí)別植物花草、汽車、紅球等功能，擴(kuò)展了傳統(tǒng)瀏覽器的瀏覽功能，為用戶帶來很好的上網(wǎng)體驗(yàn)。除了基本的瀏覽功能，更大的發(fā)展空間是游戲平臺(tái)，未來游戲的主流平臺(tái)將會(huì)以瀏覽器為基礎(chǔ)，并且它的運(yùn)行和加載速度比你想象的還要快。其實(shí)通過瀏覽器玩游戲并不是什么新鮮的概念。在最早期的時(shí)候，在互聯(lián)網(wǎng)上就已經(jīng)出現(xiàn)了簡單的網(wǎng)頁版Flash游戲。通過Flash技術(shù)我們可以實(shí)現(xiàn)那些經(jīng)典的老街機(jī)游戲，像吃豆人、Pong、Tron等。后來，騰訊社交元素的加入增加了此類游戲?qū)οr(shí)間的作用，像開心農(nóng)場、搶車位這樣的游戲雖然簡單，但也是風(fēng)靡一時(shí)。谷歌公司也在積極地推動(dòng)基于Chrome新技術(shù)的各種實(shí)驗(yàn)計(jì)劃。

邱元陽：瀏覽器和Web應(yīng)用發(fā)展迅速，它們或?qū)⒊蔀橐苿?dòng)操作系統(tǒng)的未來，而原生應(yīng)用程序逐步消亡，Web應(yīng)用和瀏覽器可以輕易地實(shí)現(xiàn)幾乎所有我們想要完成的功能。隨著中國移動(dòng)互聯(lián)網(wǎng)的蓬勃發(fā)展，本土的手機(jī)瀏覽器已經(jīng)實(shí)現(xiàn)了彎道超車，在這方面，QQ手機(jī)瀏覽器正在逐步完善自身的生態(tài)閉環(huán)，將資訊、閱讀、游戲、視頻、微信熱文、生活服務(wù)等幾乎所有主流領(lǐng)域內(nèi)容進(jìn)行全部覆蓋，從而將自身打造成為一個(gè)優(yōu)質(zhì)的內(nèi)容聚合平臺(tái)和內(nèi)容消費(fèi)的超級入口。UC瀏覽器則以“阿里大文娛”板塊為依托，在應(yīng)用分發(fā)、搜索、游戲、小說等方面形成了完整的布局，并趁勢做起內(nèi)容分發(fā)。布局更廣的是搜狗手機(jī)瀏覽器。搜狗手機(jī)瀏覽器不僅整合了搜索、新聞資訊、小說、影視、直播等內(nèi)容，還推出了智能翻譯功能，以期成為內(nèi)容消費(fèi)和功能服務(wù)的超級入口。在其最近的“智能翻譯”宣傳稿件里，搜狗手機(jī)瀏覽器反復(fù)提及一句話：“無需額外下載其他APP，就可滿足生活中的英文使用、小說閱讀、娛樂休閑等各種需求?！蹦壳皝砜?，手機(jī)瀏覽器一定程度上已經(jīng)擔(dān)負(fù)起人工智能孵化器的角色。需要指出的是，這樣的結(jié)合還停留在初級階段，手機(jī)瀏覽器并不會(huì)因此發(fā)生質(zhì)的改變。但我們也應(yīng)該意識(shí)到，萬里長征總需要邁出第一步。盡管手機(jī)瀏覽器距離“超級入口”還有一定的距離，但人工智能技術(shù)的發(fā)展已經(jīng)實(shí)現(xiàn)了以流媒體形式在手機(jī)上直接瀏覽內(nèi)容，搜狗手機(jī)瀏覽器的探索更是標(biāo)志著手機(jī)瀏覽器與APP趨向融合……

或許，我們已經(jīng)站在了未來的新起點(diǎn)上：未來的手機(jī)上或許只有一個(gè)瀏覽器，但卻更精彩！