在過去的幾周中，我一直在我的租賃家具公司Pabio招聘高級(jí)全棧JavaScript工程師。由於我們是一支遙遠(yuǎn)的團(tuán)隊(duì)，因此我們?cè)赯oom上進(jìn)行採(cǎi)訪，並且我觀察到有些開發(fā)人員在現(xiàn)場(chǎng)編碼或白板採(cǎi)訪方面並不擅長(zhǎng)，即使他們擅長(zhǎng)工作。因此，相反，我們進(jìn)行了一個(gè)一個(gè)小時(shí)的技術(shù)討論，我向他們?cè)儐栍嘘P(guān)網(wǎng)絡(luò)生命力，可訪問性，瀏覽器戰(zhàn)爭(zhēng)以及有關(guān)網(wǎng)絡(luò)的其他類似主題的問題。我一直想問的問題之一是： “向我解釋Twitter源代碼的前十行。”

我認(rèn)為這是一個(gè)簡(jiǎn)單的測(cè)試，可以告訴我很多關(guān)於他們擁有的基本前端知識(shí)深度的信息，本文列出了最佳答案。

對(duì)於上下文，我共享屏幕，打開Twitter.com，然後單擊“查看源” 。然後，我要求他們逐條排隊(duì)，以幫助我理解HTML，他們可以說他們喜歡的話。我還放大了文本更清晰的文字，因此您看不到完整的行，但您會(huì)想到一個(gè)主意。這就是它的樣子：

請(qǐng)注意，由於我們的技術(shù)討論是對(duì)話。我不希望任何人得到完美的答案。如果我聽到一些正確的關(guān)鍵字，我知道候選人知道這個(gè)概念，並且我試圖將它們推向正確的方向。

第1行：

每個(gè)文檔的源代碼的第一行非常適合這次採(cǎi)訪，因?yàn)楹蜻x人對(duì)Doctype聲明的了解非常類似於他們擁有的經(jīng)驗(yàn)。我仍然記得我在XHTML長(zhǎng)期Doctype系列中的Dreamweaver時(shí)代，就像Chris在2009年的文章“ Common Doctypes”中所列出的那樣。

完美答案：這是我們始終將其作為HTML文件中的第一行的文檔類型（DOC-TYPE）聲明。您可能會(huì)認(rèn)為此信息是多餘的，因?yàn)闉g覽器已經(jīng)知道響應(yīng)的MIME類型是文本/HTML。但是，在Netscape/Internet Explorer Days中，瀏覽器的艱鉅任務(wù)是弄清楚使用哪種HTML標(biāo)準(zhǔn)來從多個(gè)競(jìng)爭(zhēng)版本中呈現(xiàn)頁(yè)面。

這尤其令人討厭，因?yàn)槊總€(gè)標(biāo)準(zhǔn)都會(huì)產(chǎn)生不同的佈局，因此採(cǎi)用此標(biāo)籤以使瀏覽器變得容易。 Previously, DOCTYPE tags were long and even included the specification link (kinda like SVGs have today), but luckily the simple was standardized in HTML5 and still lives on.

也接受：這是Doctype標(biāo)籤，讓瀏覽器知道這是一個(gè)HTML5頁(yè)面，應(yīng)該這樣呈現(xiàn)。

第2行：

源代碼中的這一行告訴我候選人是否知道可訪問性和本地化。令人驚訝的是，只有少數(shù)人知道我的採(cǎi)訪中的DIR屬性，但這是一個(gè)關(guān)於屏幕讀者的討論的好問題。即使以前從未使用過它，幾乎每個(gè)人都可以弄清楚lang =“ en”屬性。

完美的答案：這是HTML文檔的根元素，並且所有其他元素都在此中。在這裡，它具有兩個(gè)屬性，方向和語(yǔ)言。方向?qū)傩跃哂袕淖蟮接业闹祦砀嬖V用戶代理內(nèi)容所在的方向；對(duì)於阿拉伯語(yǔ)等語(yǔ)言，其他值是左轉(zhuǎn)權(quán)，或者只是自動(dòng)將其留在瀏覽器上以找出。

語(yǔ)言屬性告訴我們，此標(biāo)籤中的所有內(nèi)容均以英語(yǔ)為單位。例如，您可以將此值設(shè)置為任何語(yǔ)言標(biāo)籤，甚至可以區(qū)分EN-US和EN-GB。這對(duì)於屏幕閱讀器知道要宣布哪種語(yǔ)言也很有用。

第3行：

完美答案：源代碼中的元標(biāo)記是為了提供有關(guān)此文檔的元數(shù)據(jù)。字符集（char-set）屬性告訴瀏覽器要使用的字符編碼，Twitter使用標(biāo)準(zhǔn)的UTF-8編碼。 UTF-8很棒，因?yàn)樗哂性S多字符點(diǎn)，因此您可以在源代碼中使用各種符號(hào)和表情符號(hào)。 It's important to put this tag near the beginning of your code so the browser hasn't already started parsing too much text when it comes across this line;我認(rèn)為規(guī)則是將其放在文檔的第一個(gè)千字節(jié)中，但我想說最好的做法是將其放在

的頂部。

As a side note, it looks like Twitter omits the

tag for performance reasons (less code to load), but I still like to make it explicit as it's a clear home for all metadata, styles, etc.

第4行：

完美的答案：源代碼中的此元標(biāo)記是為了在小屏幕上（例如智能手機(jī)）上適當(dāng)?shù)爻叽?。如果您還記得原始的iPhone主題演講，史蒂夫·喬布斯（Steve Jobs）在那個(gè)小的4.5英寸屏幕上展示了整個(gè)《紐約時(shí)報(bào)》網(wǎng)站；那時(shí)，這是一個(gè)了不起的功能，您必須捏住才能真正閱讀。

Now that websites are responsive by design, width=device-width tells the browser to use 100% of the device's width as the viewport so there's no horizontal scrolling, but you can even specify specific pixel values for width.標(biāo)準(zhǔn)的最佳實(shí)踐是將初始比例設(shè)置為1，將寬度設(shè)置為設(shè)備寬度，以便人們?nèi)匀豢梢苑糯蟆?/p>

The screenshot of the source code doesn't show these values but it's good to know: Twitter also applies user-scalable=0 which, as the name suggests, disables the ability to zoom.這對(duì)可訪問性不利，但使網(wǎng)頁(yè)感覺更像是本機(jī)應(yīng)用程序。它還出於相同的原因還設(shè)置了最大尺度= 1（您可以使用最小和最大比例來限制這些值之間的縮放度）。通常，設(shè)置完整的寬度和初始規(guī)模就足夠了。

第5行：

所有候選人中約有50％知道開放的圖形標(biāo)籤，並且對(duì)這個(gè)問題的一個(gè)很好的答案表明，他們對(duì)SEO了解。

完美答案：此標(biāo)籤是網(wǎng)站名稱Twitter的開放圖（OG）元標(biāo)記。 Facebook製作了打開的圖形協(xié)議，以使其更容易解開鏈接並在不錯(cuò)的卡片佈局中顯示其預(yù)覽；開發(fā)人員可以添加各種作者資格詳細(xì)信息，並涵蓋用於花式共享的圖像。實(shí)際上，如今，使用像木偶器之類的東西自動(dòng)生成開放式圖像也很常見。 （CSS-Tricks使用可以執(zhí)行此操作的WordPress插件。）

另一個(gè)有趣的旁注是，元標(biāo)記通常具有名稱屬性，但是OG使用了非標(biāo)準(zhǔn)屬性屬性。我想那隻是Facebook是Facebook嗎？ The title, URL, and description Open Graph tags are kinda redundant because we already have regular meta tags for these, but people add them just to be safe.如今，大多數(shù)站點(diǎn)都使用開放圖和其他元數(shù)據(jù)以及頁(yè)面上的內(nèi)容來生成豐富的預(yù)覽。

第6行：

Most candidates didn't know about this one, but experienced developers can talk about how to optimize a website for Apple devices, like apple-touch-icons and Safari pinned tab SVGs.

完美的答案：您可以將網(wǎng)站固定在iPhone的HomeScreen上，以使其感覺像是本地應(yīng)用程序。 Safari doesn't support progressive web apps and you can't really use other browser engines on iOS, so you don't really have other options if you want that native-like experience, which Twitter, of course, likes.因此，他們補(bǔ)充說，告訴Safari這個(gè)應(yīng)用程序的標(biāo)題是Twitter。下一行是相似的，並且控制了應(yīng)用程序啟動(dòng)時(shí)的狀態(tài)欄的外觀。

第8行：

完美答案：這是適當(dāng)?shù)木W(wǎng)絡(luò)標(biāo)準(zhǔn)式等效的蘋果狀態(tài)棒彩色元標(biāo)籤。它告訴瀏覽器主題為周圍的UI。 Chrome on Android上的Chrome and Brave on Desktop都做得很好。 You can put any CSS color in the content, and can even use the media attribute to only show this color for a specific media query like, for example, to support a dark theme.您還可以在Web應(yīng)用程序清單中定義此和其他屬性。

第9行：

我採(cǎi)訪的人沒有人知道這一點(diǎn)。我認(rèn)為，只有在您對(duì)標(biāo)準(zhǔn)軌道上發(fā)生的所有新事物有深入的了解時(shí)，您才知道這一點(diǎn)。

Perfect answer: Origin trials let us use new and experimental features on our site and the feedback is tracked by the user agent and reported to the web standards community without users having to opt-in to a feature flag. For example, Edge has an origin trial for dual-screen and foldable device primitives, which is pretty cool as you can make interesting layouts based on whether a foldable phone is opened or closed.

也接受：我不知道這個(gè)。

第10行：html {-ms-text-size-udjust：100％; - webkit-text ...

幾乎沒有人也知道這一點(diǎn)。只有您了解CSS邊緣案例和優(yōu)化，您才能弄清楚這一行。

Perfect answer: Imagine that you don't have a mobile responsive site and you open it on a small screen, so the browser might resize the text to make it bigger so it's easier to read. CSS文本大小調(diào)整屬性可以使用無值禁用此功能，也可以指定允許瀏覽器使文本更大的百分比。

在這種情況下，Twitter表示最大值為100％，因此文本不應(yīng)大於實(shí)際尺寸。他們之所以這樣做，是因?yàn)樗麄兊木W(wǎng)站已經(jīng)響應(yīng)迅速，他們不想冒險(xiǎn)打破較大字體大小的佈局。它應(yīng)用於根HTML標(biāo)籤，因此它適用於其中的所有內(nèi)容。由於這是實(shí)驗(yàn)性CSS屬性，因此需要前綴。另外，在此CSS之前，還有一個(gè)缺少的

也接受：我不知道該屬性的特定內(nèi)容，但是-ms和-webkit-分別是Internet Explorer和基於WebKit的瀏覽器所需的供應(yīng)商前綴，分別是非標(biāo)準(zhǔn)屬性的。 CSS3出來時(shí)，我們?cè)?jīng)需要這些前綴，但是由於屬性從實(shí)驗(yàn)到穩(wěn)定或被採(cǎi)用到標(biāo)準(zhǔn)軌道時(shí)，這些前綴就消失了，而有利於標(biāo)準(zhǔn)化的屬性。

獎(jiǎng)勵(lì) - 第11行：身體{Margin：0;}

Twitter源代碼的這一行特別有趣，因?yàn)槟梢愿M(jìn)有關(guān)重置和標(biāo)準(zhǔn)化網(wǎng)頁(yè)之間差異的問題。幾乎每個(gè)人都知道正確答案的版本。

完美的答案：由於不同的瀏覽器具有不同的默認(rèn)樣式（用戶代理樣式表），因此您想通過重置屬性來覆蓋它們，以使您的網(wǎng)站在設(shè)備之間看起來相同。在這種情況下，Twitter告訴瀏覽器刪除車身標(biāo)籤的默認(rèn)邊距。這只是為了減少瀏覽器的不一致，但是我更喜歡將樣式歸一化而不是重置它們，即，在瀏覽器上應(yīng)用相同的默認(rèn)值，而不是完全刪除它們。人們甚至曾經(jīng)使用 * {margin：0}，這完全是過分的且不適合性能，但是現(xiàn)在導(dǎo)入andary.css或reset.css.css（甚至更新的東西）之類的東西是常見的，然後從那裡開始。

更多行！

我總是喜歡使用瀏覽器檢查員工具來查看網(wǎng)站的製作方式，這就是我想出這個(gè)想法的方式。 Even though I consider myself sort of an expert on semantic HTML, I learn something new every time I do this exercise.

Since Twitter is mostly a client-side React app, there's only a few dozen lines in the source code. Even with that, there's so much to learn! There are a few more interesting lines in the Twitter source code that I leave as an exercise for you, the reader. How many of them could you explain in an interview?

 <link rel="search" type="application/opensearchdescription xml" href="/opensearch.xml" title="Twitter">

…tells browsers that users can add Twitter as a search engine.

 <link rel="“" preload as="“" script crossorigin="“匿名”" href="%E2%80%9C" https:>

…h(huán)as many interesting attributes that can be discussed, especially nonce.

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

…for international landing pages.

 :focus:not([data-focusvisible-polyfill]){outline: none;}

…for removing the focus outline when not using keyboard navigation (the CSS :focus-visible selector is polyfilled here).

以上是向我解釋Twitter源代碼的前10行的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！