作者| 阿南德翻譯 |

出品 | CSDN（ID：）

最近，我在為我的公司招聘一名高級全棧工程師。 由于我們是遠程工作，所以面試是通過 Zoom 進行的，我注意到一些非常適合這份工作的開發人員并不擅長在白板上編寫程序。 所以我們進行了一個小時的技術談話，我詢問了網絡指標、可訪問性、瀏覽器大戰和其他與網絡相關的問題。 我經常問的一個問題是：“請解釋網頁源代碼的前 10 行”。

在我看來，這是一個非常簡單的測試，但是卻可以測試應聘者對前端基礎知識掌握的深度。

在采訪期間，我會分享我的屏幕，打開它并單擊“查看源代碼”。 然后我要求他們逐行解釋 HTML 代碼，盡可能深入。 我還放大了屏幕，讓候選人看不到完整的代碼行，但可以大致了解代碼的含義。 如下：

請注意，我們的技術討論只是一次對話，所以我不期待完美的答案。 如果我聽到一些正確的關鍵詞，我就知道候選人理解這個概念，我可以引導他們朝著正確的方向前進。

第一排：

網頁源代碼的第一行很適合這種類型的面試，因為候選人對網頁的了解在很大程度上反映了他們的經驗。 還記得當年流行的時候，需要像Chris在2009年的文章《The》中列舉的那樣，寫一串XHTML()。

最佳答案: 這一行是文檔類型定義，所有HTML文件的第一行都必須這樣寫。 可能有人會認為這行代碼是多余的，因為瀏覽器已經知道響應的MIME類型是text/html，但是在 和 時代，有很多不同的HTML標準，所以瀏覽器很難來判斷渲染頁面應該遵循什么標準。

這很煩人，因為每個標準都會生成不同的布局，這就是為什么需要這個標簽來幫助瀏覽器渲染它。 它曾經很長并且包含標準鏈接（就像今天的 SVG 文件一樣），但幸運的是這種簡潔成為 HTML 5 中的標準并一直延續到今天。

接受的答案：這是讓瀏覽器知道這是一個 HTML 5 網頁并且應該呈現為 HTML 5 的標簽。

第二行：

這條線可以判斷候選人是否了解可訪問性和本地化。 令人驚訝的是，我采訪的人中很少有人知道 dir 屬性，但這個屬性可以引發關于屏幕閱讀器的討論。 幾乎每個人都能理解 lang="en" 屬性的含義，即使他們從未使用過它。

最佳答案：這是 HTML 文檔的根元素，其他元素位于其中。 它有兩個屬性：方向和語言。 屬性的值為“left-to-right”，告訴用戶代理內容的方向； 這個值也可以是“從右到左”，比如阿拉伯語； 或“自動”，它允許瀏覽器自行確定方向。

lang（語言）屬性表示此標記中的所有代碼都是英文的。 您可以將此值設置為任何語言標記，甚至可以區分 en-us 和 en-gb。 它還可以幫助屏幕閱讀器確定使用哪種語言閱讀文本。

第三行：

最佳答案：源代碼中的元標記為文檔提供元數據。 set()屬性告訴瀏覽器使用哪種字符編碼，使用標準的UTF-8編碼。 UTF-8 很棒，因為它包含許多字符點，因此您可以在源代碼中使用各種符號，甚至是表情符號。 將此標記放在文檔的開頭很重要，這樣瀏覽器在遇到它時就不會開始解析過多的文本。 我記得規則是將它放在文檔開頭的 1k 字節以內，但我認為最好的做法是將它放在第一行。

另外，似乎出于性能原因省略了標簽（以減少加載的代碼量），但我仍然認為應該顯式編寫，因為它是元信息、樣式等的容器。

第四行：

最佳答案：源碼中的這個meta標簽是用來在小屏幕（比如手機）上指定正確尺寸的。 如果您還記得最初的幻燈片，喬布斯在一個 4.5 英寸的小屏幕上展示了整個紐約時報網站。 能夠用兩根手指放大以清楚地看到文本，這是一個非常有用的功能。

但是現在，網頁被設計成響應式的，width=-width 會告訴瀏覽器使用設備寬度的 100% 作為視口大小以避免水平滾動條，但你甚至可以指定一個像素寬度。 標準的最佳做法是將初始比例設置為 1，將寬度設置為 -width，以便人們在需要時仍然可以放大。

這些值在源代碼的截圖中沒有顯示，但最好知道：還使用了user-=0，顧名思義，禁止用戶放大和縮小。 它在可訪問性方面不是很好，但它使網頁更像本機應用程序。 同樣的道理，也設置-scale=1（可以用最小和最大的scale來限制縮放的范圍）。 通常，只需設置全屏寬度和初始縮放就足夠了。

第五行：

大約 50% 的候選人知道 Open Graph 標簽，回答這個問題很好地證明他們了解 SEO。

最佳答案：這個標簽是一個Open Graph (OG) 標簽，用于設置網站名稱。 Open Graph協議由Open Graph提出，旨在方便獲取鏈接內容，并以卡片的形式展示鏈接。 開發者可以在網頁中添加各種細節和封面圖片，然后在分享鏈接時生成漂亮的卡片。 事實上，現在使用諸如自動生成開放圖圖像之類的工具更為普遍。

另一個有趣的地方是，meta 標簽通常使用 name 屬性，但 OG 使用非標準屬性。 我想這只是我的偏好？ 標題、url和這幾個Open Graph標簽有點多余，因為這些信息可以從普通的meta標簽中獲取，但人們仍然設置這些標簽是安全的。 今天的大多數網站都會使用 Open Graph 和其他原始標簽的組合來組合網頁內容以生成內容豐富的預覽。

第六行：

大多數候選人不知道這個，但有經驗的開發人員可以討論如何針對 Apple 設備優化站點，例如 apple-touch-icons 和在中間錨定選項卡上顯示的 SVG 等。

最佳答案：您可以將網站錨定到主屏幕，使其看起來像本機應用程序。 不支持 Web Apps，你不能在 iOS 上真正使用其他瀏覽器引擎，所以如果你想要一個類似原生的體驗，你別無選擇。 對于本機效果，此行用于告知應用程序的名稱。 下一行類似，控制應用程序啟動時狀態欄的顯示方式。

第八行：

最佳答案：這個 meta 標簽定義了 Apple 設備上的狀態欄顏色，現在幾乎是一個網絡標準。 它指定瀏覽器應如何為周圍的 UI 設置主題。 和桌面上的 Brave 瀏覽器都可以很好地處理它。 可以在 中設置任何 CSS 顏色，甚至可以通過 media 屬性設置僅在滿足特定媒體查詢（例如暗模式）時才顯示顏色。 您還可以在 Web 應用程序中定義此屬性和其他屬性。

第九行：

我采訪過的候選人都不知道這一點。 我想只有對最新的技術趨勢有深刻理解的人才知道這個。

最佳答案: 試用可以使用網站上最新的實驗性功能，基于用戶代理跟蹤反饋并報告給網絡標準社區，而不需要用戶同意參與功能標記。 例如，Edge 有一個雙屏和可折疊設備的試用版，這是一個很酷的功能，你可以根據折疊手機是打開還是關閉來實現不同的布局。

接受的答案：不知道這個選項。

第十行：html{-ms-text-size-:100%;--text...

幾乎沒有人知道這個選項，只有那些特別了解 CSS cases 和優化的人才知道。

最佳答案：假設您的網站不支持移動設備，并且您在屏幕較小的設備上打開該網站。 瀏覽器可能會放大字體以便于閱讀。 將 CSS 的 text-size- 設置為 none 以禁用此功能，或將其設置為百分比以告訴瀏覽器它可以放大多少。

這里，最大值設置為 100%，這意味著文本不會超過其實際大小。 這樣做的原因是該站點已經是響應式的，因此他們不想冒因允許大字體而破壞布局的風險。 此標記應用于根 HTML 標記，因此它適用于所有內容。 由于這是一個實驗性 CSS，因此需要供應商前綴。 另外，這個css之前少了一個，不過應該是最小化到上一行，我們就是沒看到。

接受的答案：我不知道這個選項的細節，但是 -ms 和 -- 分別是非標準屬性的基于瀏覽器的供應商前綴。 我們曾經在 CSS3 出現時使用這些前綴，但隨著屬性從實驗性變為穩定，或被標準接受，不再需要這些前綴。

獎勵：第 11 行：body{:0;}

這行代碼很有意思，因為可以順便問一下頁面重置和歸一化的區別。 幾乎每個人都知道正確答案的某個版本。

最佳答案: 因為不同的瀏覽器有不同的默認樣式(user-agent style )，所以應該通過重新設置屬性來覆蓋默認樣式，使網站在不同設備上有相同的外觀。 在這里，告訴瀏覽器去掉 body 標簽的默認值。 這減少了瀏覽器之間的不一致，但我更喜歡使用正則化樣式，即在所有瀏覽器中應用相同的默認樣式，而不是通過重置簡單地刪除它們。 有些人甚至使用 * {:0 }，這是壓倒性的并且會影響性??能，但現在更常見的是導入樣式表，如 .css 或 reset.css。

補充

我喜歡通過我的瀏覽器工具查看網站的制作，所以我想到了這次采訪的想法。 盡管我認為我很了解語義 HTML，但每次我這樣做時我都會學到一些新東西。

由于它主要是一個客戶端 React 應用程序，因此源代碼中只有幾行。 即便如此，還有很多東西要學！ 還有一些很有意思的代碼，留給讀者作為練習。 面試能解釋多少行代碼？

"search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">

告訴瀏覽器用戶可以設置搜索引擎。

"preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />

這個有很多要討論的，尤其是隨機數。

<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />