作者| 阿南德翻譯 |

出品 | CSDN（ID：）

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

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

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

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

第一排：

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

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

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

接受的答案：這是讓瀏覽器知道這是一個 HTML 5 網(wǎng)頁并且應(yīng)該呈現(xiàn)為 HTML 5 的標簽。

第二行：

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

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

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

第三行：

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

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

第四行：

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

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

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

第五行：

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

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

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

第六行：

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

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

第八行：

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

第九行：

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

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

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

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

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

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

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

接受的答案：我不知道這個選項的細節(jié)，但是 -ms 和 -- 分別是非標準屬性的基于瀏覽器的供應(yīng)商前綴。 我們曾經(jīng)在 CSS3 出現(xiàn)時使用這些前綴，但隨著屬性從實驗性變?yōu)榉€(wěn)定，或被標準接受，不再需要這些前綴。

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

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

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

補充

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

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

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

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

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

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

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