當你翻開一個網頁的時刻，閱讀器在幹甚麼？

文章作者：凡是夫畏果 “號：給產物司理講技巧（ID:pm_teacher）

這是一個很典范的題目，我到如今還記得，很多年前找事情的時刻，口試官曾如許問起我。

那是一個悶熱下晝，我展轉十幾站地鐵才來到口試的處所。口試官一開端問瞭幾個簡略的題目，都記沒有起來瞭。人的影象就是這麼功利，隻要那些讓你特殊爽或特殊沒有爽的工作，才會被記下來。

當你輸入瞭一個網址，敲下回車，直到你看到網頁為止，閱讀器都幹瞭甚麼？厥後口試官好像很有自負的問。

我擦，這算甚麼題目，《法式員口試寶典》上沒講啊，隻能試試看瞭。我摸索性的說，一開端嘛，閱讀器確定要檢討你的網址對紕謬，合分歧法啊，好比你把敲成瞭，它確定認為你是傻逼，不睬你吧。

嗯，然後呢？

然後啊，然後它就銜接到瞭網站的辦事器，把網頁下載下來，就ok瞭。

沒瞭？

沒瞭。

好，下一名。

哎等等，我想起來瞭，閱讀器是否是要把網頁給轉換一下啊，究竟我們下載下來網頁文件是如許的:

而看到的倒是如許的：

是要轉換一下。何轉換呢，這才是重點。口試官有點沒有大耐心。 這個。。。

我支枝梧吾瞭半天，也沒說出個以是然。厥後口試成果若何，我也記沒有清瞭，大概是被小看瞭，也大概是委曲過瞭，這沒有主要。主要的是，我們本日必定要弄清晰這個題目。

設想一下，假如你來做一個閱讀器，你預備若何處置下載下來的網頁和其他資本呢？

我們曉得，網頁是由HTML說話寫的，一樣平常會有CSS來描寫網頁的模樣，有的另有JavaScript來完成一些龐雜的功效。這三者各司其職，個中HTML賣力構建網頁的框架，它劃定瞭那裡是題目地區，那裡是內容地區，那裡是導航地區。

CSS賣力美化網頁的表面，它重要關懷這個題目該用多大的字體，用甚麼色彩之類的題目。

JavaScript是一門正兒八經的編程說話，用它來做一些高等的功效，好比對用戶的操縱做出響應，再好比背景上傳一個文件。

對應的，閱讀器也要具有轉換息爭析這三個傢夥的才能。

對付HTML和CSS，分歧的閱讀器有分歧的剖析引擎，好比IE用的是自傢的Trident內核，Safari和初期的Chrome用的是蘋果開源的webkit內核（厥後chrome換成瞭谷歌的blink內核）。沒有管用甚麼內核，其功效都是一樣的，就是把下載下來的網頁代碼繪制出來。

對付JavaScript，webkit有默許的JavaScript剖析引擎，然則chrome調換成瞭V8。我們之前講過，像這類劇本說話，須要有個器械把它翻譯成盤算性能懂得的機械說話。對應到閱讀器裡，則是把JavaScript翻譯成閱讀器能懂得的代碼。

湊齊瞭傢夥以後，便可以完工瞭。重要有三個階段：

1、天生DOM樹。

你細心看上面的HTML代碼，他們是有層級之分的，最外層的是內裡是內容，再內裡是段落

，就似乎我們蓋樓，先搭最表面的架子，然後是樓梯和一層又一層，每層有許多戶，每戶又有廚房、客堂、寢室。DOM樹也是如斯。樹是數據構造的一種，我們改天具體講，你隻須要曉得它是用來幫助處置HTML的層級構造的，就好瞭。

2、天生襯著樹。有瞭DOM樹，我們曉得瞭網頁裡節點和節點之間的層級幹系。再加上CSS對這些節點的款式描寫，我們便可以天生別的一棵樹，襯著樹。望文生義，襯著樹就是用來襯著和表現的。離我們的目的又近瞭一步，沒有是嗎？

3、丈量、排版、繪制。還記得《甚麼是襯著？》嗎？這篇文章講的是操縱體系襯著的進程，跟閱讀器是千篇一律的。可見技巧是相通的。你本日在做前端，來日誥日派你去做Android，你會發明除編程說話紛歧樣，常識照樣那些常識，辦法照樣那些辦法。

看起來很簡略是沒有？實在否則。一樣平常閱讀器代碼量異常宏大，由於它須要處置的工作其實是太多瞭。銜接辦事器下載網頁須要異常靠得住的收集模塊；剖析HTML、CSS、JavaScript要用法式員最頭疼的編譯道理；有的網頁異常龐雜，殊效、裝潢、掛件滿天飛（沒錯，你曉得我在說甚麼網站），閱讀器要異常當心的處置襯著的機能題目。

那末題目來瞭，既然閱讀器如斯宏大、如斯龐雜、如斯吃機能，若何能力包管手機上的閱讀器流利運轉呢？

改天再告知你。這個"號，我但是要預備寫一年的呢。

PS：口試那段是假造的，像本人這類自誇為「有點兒小牛逼」的法式員，怎樣大概會被這類題目難倒呢，哇哈哈。

迎接增加微信"號：給產物司理講技巧

註：相幹網站扶植技能瀏覽請移步到建站教程頻道。

>> 檢察更多類似文章