作者 | Anand Chowdhary
譯者 | 平川
策劃 | 褚杏娟
本文最初發佈於 CSS-Tricks 部落格，由 InfoQ 中文站翻譯並分享。
過去幾周，我一直在為我的傢俱租賃公司 Pabio 招聘一名高階全棧 JavaScript 工程師。由於是一個遠端團隊，面試是在 Zoom 上進行的。根據我的觀察，部分開發人員不擅長現場編碼或白板面試，即使他們對這項工作很在行。所以取而代之，我們會進行一小時的技術討論，我會問他們關於 Web Vitals、可訪問性、瀏覽器戰爭以及其他類似 Web 話題的問題。我很喜歡問的一個問題是：“
解釋一下 Twitter 原始碼的前十幾行
”。
我認為這是一個很簡單的測試，可以藉此瞭解應聘者對前端基礎知識的掌握程度。本文列出了這個問題的最佳答案。
注意，既然我們的技術討論是一種談話，所以我並不期望任何人能給出完美答案。只要聽到一些正確的關鍵詞，我就知道應聘者瞭解這個概念，我就會試著把他們引向正確的方向。
1
第 1 行：
每個原始碼文件的第一行都非常適合這個面試，因為應聘者對DOCTYPE宣告的瞭解程度與他們的工作年限密切相關。我仍然記得，在 Dreamweaver 時代，XHTML DOCTYPE 行很長，就像 2009 年 Chris 在文章“常見 DOCTYPE”中所寫的那樣。
最佳答案：
這是文件型別（doc-type）宣告，我們總是把它放在 HTML 檔案的第一行。你可能認為這些資訊是多餘的，因為瀏覽器已經知道響應的 MIME 型別是text/html；但在 Netscape/Internet Explorer 時代，瀏覽器要從多個相互競爭的版本中找出要使用哪個 HTML 標準來渲染頁面，這是一項困難的任務。
這一點尤其令人討厭，因為每個標準都會產生不同的佈局，所以採用這個標籤是為了讓瀏覽器更容易判斷。以前，DOCTYPE標籤很長，甚至包括規範連結（有點像現在的 SVG），但幸運的是，在 HTML5 中得到了標準化，延續了下來。
也可接受：
DOCTYPE標籤告訴瀏覽器這是一個 HTML5 頁面，應該這樣渲染。
2
第 2 行：
這一行程式碼可以告訴我應聘者是否瞭解可訪問性和本地化的問題。令人驚訝的是，在我的面試中，只有少數人知道dir屬性，但這是討論螢幕閱讀器的一個很好的切入點。幾乎每個人都能說清楚lang=“en”屬性，即使他們以前沒有用過。
最佳答案：
這是 HTML 文件的根元素，其他所有元素都包在這個元素裡。它有兩個屬性：方向和語言。方向屬性的值是從左到右，它告訴瀏覽器代理內容方向；另一個值是從右到左，適用於阿拉伯語等語言，或者是auto，讓瀏覽器自己來決定。
語言屬性告訴我們，這個標籤裡的所有內容都是英文的；你可以把這個值設定為任何語言，甚至可以區分en-us和en-gb。這對螢幕閱讀器來說也很有用，可以知道用哪種語言來播音。
3
第 3 行：
最佳答案：
原始碼中的元標籤用來提供關於這個檔案的元資料。字符集（char-set）屬性告訴瀏覽器要使用哪種字元編碼，而 Twitter 使用的是標準的 UTF-8 編碼。UTF-8 很好，因為它有很多字元程式碼點，所以你可以在原始碼中使用各種符號和表情。把這個標籤放在程式碼開頭附近，這很重要，這樣瀏覽器就不會在遇到這一行之前解析太多的文字；我覺得可以定個這樣的規則，就是把它放在文件的前 1000 個位元組裡，但我認為最好的做法是把它放在的正上方。
順便提一下，Twitter 似乎是出於效能方面的考慮（載入的程式碼較少）省略了標籤，但我還是喜歡明確定義，因為它是所有元資料、樣式等的大本營。
4
第 4 行：meta name=“viewport”
content=“width=device-。。。
最佳答案：
原始碼中的這個元標籤是為了在小螢幕上（比如智慧手機）可以適當調整網頁的大小。如果你還記得最早的 iPhone 主題演講，史蒂夫·喬布斯在那個 4。5 英寸的小螢幕上展示了整個《紐約時報》的網站；在那時，這是一個了不起的功能，你必須捏住放大才能閱讀。
現在，網站的設計是響應式的，width=device-width告訴瀏覽器使用裝置的整個寬度作為視口，所以沒有水平捲軸，但你甚至可以使用具體的畫素值指定寬度。通常，最佳的做法是將初始縮放比例設定為1，寬度設定為device-width，這讓人們仍然可以根據自己的需要進行縮放。
還有些值原始碼截圖中沒有顯示出來，但你最好也瞭解下：Twitter 還應用了user-scalable=，顧名思義，就是禁用了縮放功能。這對可訪問性沒什麼好處，但使網頁感覺更像一個本地應用程式。出於同樣的原因，它還設定了maximum-scale=1（你可以使用最小和最大縮放比例，並使用兩者之間的值限制縮放能力）。一般來說，設定全寬和初始縮放比例就足夠了。
5
第 5 行：
content=”Twitt。。。
大約 50% 的應聘者知道 Open Graph 標籤，如果他們這個問題回答得比較好，就表明他們瞭解 SEO。
最佳答案：
這個標籤是網站名稱 Twitter 的 Open Graph（OG）元標籤。Open Graph 協議是由 Facebook 制定的，目的是使連結更容易開啟，並在一個漂亮的卡片佈局中顯示預覽；開發者可以新增各種著作權詳情和封面圖片，實現花式分享。而事實上，使用 Puppeteer 之類的東西自動生成 Open Graph 圖片，現在也很常見。（CSS-Tricks 使用了一個 WordPress 外掛來做到這一點。）
另外提一個比較有趣的點，元標籤通常具有name屬性，但 OG 使用非標準的property屬性。我猜這只是 Facebook 的特色。標題、URL 和描述 Open Graph 標籤有點多餘，因為我們已經有了這些常規的元標籤，人們新增它們只是為了安全。現在的大多數網站都搭配使用 Open Graph 和其他元標籤以及頁面上的內容來生成豐富多彩的預覽。
6
第 6 行：
cont。。。
大多數應聘者都不知道這個，但有經驗的開發者可以談下如何針對蘋果裝置最佳化網站，比如apple-touch-icon和 Safari 固定標籤 SVG。
最佳答案：
你可以將網站固定在 iPhone 主螢幕上，讓它感覺像一個原生應用程式。Safari 不支援漸進式 Web 應用，你也無法在 iOS 上使用其他瀏覽器引擎，所以如果你想要類似於原生的體驗，真的沒有其他選擇，當然，Twitter 是喜歡這種體驗的。所以他們添加了這個，告訴 Safari 這個應用的標題是 Twitter。下一行類似，控制應用程式啟動後狀態列如何顯示。
8
第 8 行：
content=“#ffffff”。。。
最佳答案：
這是一個符合 Web 標準的、相當於蘋果狀態列顏色元標籤的標籤。它告訴瀏覽器周邊 UI 使用什麼主題色。Chrome on Android 和 Brave on Desktop 在這方面都做得很好。你可以把任何 CSS 顏色放在內容中，甚至可以使用media屬性，只為特定的媒體查詢顯示這種顏色，如支援深色主題。你也可以在 Web 應用清單中定義這個及其他屬性。
9
第 9 行：
content=“。。。
我面試過的人都不知道這個。我想，只有對標準化階段發生的所有新鮮事都有深入的瞭解時，才會知道這個。
最佳答案：
起源試驗讓我們可以在網站上使用實驗性的新特性，跟蹤使用者代理反饋，並報告給 Web 標準社群，而無需使用者選擇加入一個特性標識。例如，Edge 有一個針對雙屏和可摺疊裝置基元的起源試驗，這非常酷，因為你可以根據可摺疊手機是開啟還是關閉來設定有趣的佈局。
也可接受：
這個我不知道。
10
第 10 行：html{-ms-text-size-adjust：100%；-webkit-text。。。
幾乎沒有人知道這一行；只有瞭解 CSS 的邊緣情況和最佳化時，才能看懂這一行。
最佳答案：
想象一下，如果沒有一個移動端響應式站點，那麼當你在一個小螢幕上開啟時，瀏覽器可能會調大字型，以方便閱讀。CSS 的text-size-adjust屬性可以用none值禁用，也可以指定一個百分比，允許瀏覽器調大字型。
在這種情況下，Twitter 設定的最大比例是100%，所以文字不會大於實際尺寸；他們這樣做是因為他們的網站已經是響應式的，他們不想冒因瀏覽器調大字型而破壞佈局的風險。它作用於根 HTML 標籤，所以它作用於根標籤中的所有內容。由於這是一個實驗性的 CSS 屬性，所以需要供應商字首。另外，這行 CSS 程式碼之前少了，但我猜這是在前一行去掉的，所以我們沒有看到。
也可接受：
我不特別瞭解這個屬性，但-ms和-webkit-是非標準屬性的供應商字首，分別針對基於 Internet Explorer 和 WebKit 的瀏覽器。在 CSS3 剛推出時，我們需要這些字首，但當屬性從實驗變為穩定或被採納到標準中時，這些字首就消失了，人們轉而採用標準化的屬性。
11
意外收穫——第 11 行：body
Twitter 原始碼中的這一行特別有趣，因為你可以跟進一個問題，即網頁重置和規範化之間有什麼區別。幾乎每個人都有一個版本的正確答案。
最佳答案：
不同瀏覽器有不同的預設樣式（使用者代理樣式表），而你希望透過重置屬性來覆蓋它們，使得網站在不同的裝置上看起來都一樣。在這種情況下，Twitter 就告訴瀏覽器刪除 body 標籤的預設邊距。這只是為了降低瀏覽器的不一致性，但我更喜歡將樣式規範化，而不是重置它們，也就是說，在不同的瀏覽器上應用相同的預設值，而不是完全刪除它們。人們甚至曾經使用* {margin：}，這完全是矯枉過正，對效能並不好，但現在，常見的方式是匯入normalize。css或reset。css之類的東西（甚至是更新的東西）並在此基礎上進行設計。
12
更多有趣的程式碼
我一直很喜歡玩瀏覽器的檢查器工具，看一看網站是如何製作的，我就是因為這個想出了這樣的面試方法。儘管我自認為算是語義 HTML 方面的專家，但每次這樣做時我都會學到一些新東西。
因為 Twitter 主要是一個客戶端 React 應用，所以原始碼只有幾十行。即使這樣還是有很多東西可以學！在 Twitter 的原始碼中，還有一些更有趣的行，我留給讀者做練習。你能在面試中解釋其中的多少個？
…告訴瀏覽器使用者可以將 Twitter 新增為一個搜尋引擎。
…有許多有趣的屬性可供討論，尤其是nonce。
…針對國際登入頁。
…在不使用鍵盤導航時移除焦點輪廓（這裡的：focus-visible選擇器是 CSS 增強外掛）。
https：//css-tricks。com/explain-the-first-10-lines-of-twitter-source-code/？