2022 OceanBase 年度发布会,点击了解详情 了解详情
写点什么

我对 Twitter 前 10 行源代码的理解

  • 2022 年 4 月 21 日
  • 本文字数:4175 字

    阅读完需:约 14 分钟

我对 Twitter 前10行源代码的理解

本文最初发布于 CSS-Tricks 博客,由 InfoQ 中文站翻译并分享。

 

过去几周,我一直在为我的家具租赁公司Pabio招聘一名高级全栈JavaScript 工程师。由于是一个远程团队,面试是在 Zoom 上进行的。根据我的观察,部分开发人员不擅长现场编码或白板面试,即使他们对这项工作很在行。所以取而代之,我们会进行一小时的技术讨论,我会问他们关于 Web Vitals、可访问性、浏览器战争以及其他类似 Web 话题的问题。我很喜欢问的一个问题是:“解释一下 Twitter 源代码的前十几行”。

 

我认为这是一个很简单的测试,可以借此了解应聘者对前端基础知识的掌握程度。本文列出了这个问题的最佳答案。

 

我打开 Twitter.com,点击查看源代码并分享我的屏幕,然后要求他们逐行进行解释,他们想说多少就说多少。我放大了文本,使其更加清晰,所以你看不到整行的内容,不过可以大概有个了解,如下所示:



注意,既然我们的技术讨论是一种谈话,所以我并不期望任何人能给出完美答案。只要听到一些正确的关键词,我就知道应聘者了解这个概念,我就会试着把他们引向正确的方向。

 

第 1 行:<!DOCTYPE html>

每个源代码文档的第一行都非常适合这个面试,因为应聘者对DOCTYPE声明的了解程度与他们的工作年限密切相关。我仍然记得,在 Dreamweaver 时代,XHTML DOCTYPE 行很长,就像 2009 年 Chris 在文章“常见DOCTYPE”中所写的那样。

 

最佳答案:这是文档类型(doc-type)声明,我们总是把它放在 HTML 文件的第一行。你可能认为这些信息是多余的,因为浏览器已经知道响应的 MIME 类型是text/html;但在Netscape/Internet Explorer时代,浏览器要从多个相互竞争的版本中找出要使用哪个 HTML 标准来渲染页面,这是一项困难的任务。

 

这一点尤其令人讨厌,因为每个标准都会产生不同的布局,所以采用这个标签是为了让浏览器更容易判断。以前,DOCTYPE标签很长,甚至包括规范链接(有点像现在的 SVG),但幸运的是,<!doctype html>在 HTML5 中得到了标准化,延续了下来。

 

也可接受:DOCTYPE标签告诉浏览器这是一个 HTML5 页面,应该这样渲染。

 

第 2 行:<html dir="ltr" lang="en">

这一行代码可以告诉我应聘者是否了解可访问性和本地化的问题。令人惊讶的是,在我的面试中,只有少数人知道dir属性,但这是讨论屏幕阅读器的一个很好的切入点。几乎每个人都能说清楚lang="en"属性,即使他们以前没有用过。

 

最佳答案:这是 HTML 文档的根元素,其他所有元素都包在这个元素里。它有两个属性:方向和语言。方向属性的值是从左到右,它告诉浏览器代理内容方向;另一个值是从右到左,适用于阿拉伯语等语言,或者是auto,让浏览器自己来决定。

 

语言属性告诉我们,这个标签里的所有内容都是英文的;你可以把这个值设置为任何语言,甚至可以区分en-usen-gb。这对屏幕阅读器来说也很有用,可以知道用哪种语言来播音。

 

第 3 行:<meta charset="utf-8">

最佳答案:源代码中的元标签用来提供关于这个文件的元数据。字符集(char-set)属性告诉浏览器要使用哪种字符编码,而 Twitter 使用的是标准的 UTF-8 编码。UTF-8 很好,因为它有很多字符代码点,所以你可以在源代码中使用各种符号和表情。把这个标签放在代码开头附近,这很重要,这样浏览器就不会在遇到这一行之前解析太多的文本;我觉得可以定个这样的规则,就是把它放在文档的前 1000 个字节里,但我认为最好的做法是把它放在<head>的正上方。

 

顺便提一下,Twitter 似乎是出于性能方面的考虑(加载的代码较少)省略了<head>标签,但我还是喜欢明确定义,因为它是所有元数据、样式等的大本营。

 

第 4 行:<meta name="viewport" content="width=device-...

最佳答案:源代码中的这个元标签是为了在小屏幕上(比如智能手机)可以适当调整网页的大小。如果你还记得最早的 iPhone 主题演讲,史蒂夫·乔布斯在那个 4.5 英寸的小屏幕上展示了整个《纽约时报》的网站;在那时,这是一个了不起的功能,你必须捏住放大才能阅读。

 

现在,网站的设计是响应式的,width=device-width告诉浏览器使用设备的整个宽度作为视口,所以没有水平滚动条,但你甚至可以使用具体的像素值指定宽度。通常,最佳的做法是将初始缩放比例设置为1,宽度设置为device-width,这让人们仍然可以根据自己的需要进行缩放。

 

还有些值源代码截图中没有显示出来,但你最好也了解下:Twitter 还应用了user-scalable=0,顾名思义,就是禁用了缩放功能。这对可访问性没什么好处,但使网页感觉更像一个本地应用程序。出于同样的原因,它还设置了maximum-scale=1(你可以使用最小和最大缩放比例,并使用两者之间的值限制缩放能力)。一般来说,设置全宽和初始缩放比例就足够了。

 

第 5 行:<meta property="og:site_name" 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 行:<meta name="apple-mobile-web-app-title" cont...

大多数应聘者都不知道这个,但有经验的开发者可以谈下如何针对苹果设备优化网站,比如apple-touch-icon和 Safari 固定标签 SVG。

 

最佳答案:你可以将网站固定在 iPhone 主屏幕上,让它感觉像一个原生应用程序。Safari 不支持渐进式 Web 应用,你也无法在 iOS 上使用其他浏览器引擎,所以如果你想要类似于原生的体验,真的没有其他选择,当然,Twitter 是喜欢这种体验的。所以他们添加了这个,告诉 Safari 这个应用的标题是 Twitter。下一行类似,控制应用程序启动后状态栏如何显示。

 

第 8 行:<meta name="theme-color" content="#ffffff"...

最佳答案:这是一个符合 Web 标准的、相当于苹果状态栏颜色元标签的标签。它告诉浏览器周边UI使用什么主题色。Chrome on Android 和 Brave on Desktop 在这方面都做得很好。你可以把任何 CSS 颜色放在内容中,甚至可以使用media属性,只为特定的媒体查询显示这种颜色,如支持深色主题。你也可以在 Web 应用清单中定义这个及其他属性。

 

第 9 行:<meta http-equiv="origin-trial" content="...

我面试过的人都不知道这个。我想,只有对标准化阶段发生的所有新鲜事都有深入的了解时,才会知道这个。

 

最佳答案:起源试验让我们可以在网站上使用实验性的新特性,跟踪用户代理反馈,并报告给 Web 标准社区,而无需用户选择加入一个特性标识。例如,Edge 有一个针对双屏和可折叠设备基元的起源试验,这非常酷,因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。

 

也可接受:这个我不知道。

 

第 10 行:html{-ms-text-size-adjust:100%;-webkit-text...

几乎没有人知道这一行;只有了解 CSS 的边缘情况和优化时,才能看懂这一行。

 

最佳答案:想象一下,如果没有一个移动端响应式站点,那么当你在一个小屏幕上打开时,浏览器可能会调大字体,以方便阅读。CSS 的text-size-adjust属性可以用none值禁用,也可以指定一个百分比,允许浏览器调大字体。

 

在这种情况下,Twitter 设置的最大比例是100%,所以文本不会大于实际尺寸;他们这样做是因为他们的网站已经是响应式的,他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 HTML 标签,所以它作用于根标签中的所有内容。由于这是一个实验性的 CSS 属性,所以需要供应商前缀。另外,这行 CSS 代码之前少了<style>,但我猜这是在前一行去掉的,所以我们没有看到。

 

也可接受:我不特别了解这个属性,但-ms-webkit-是非标准属性的供应商前缀,分别针对基于 Internet Explorer 和 WebKit 的浏览器。在 CSS3 刚推出时,我们需要这些前缀,但当属性从实验变为稳定或被采纳到标准中时,这些前缀就消失了,人们转而采用标准化的属性。

 

意外收获——第 11 行:body{margin:0;}

Twitter 源代码中的这一行特别有趣,因为你可以跟进一个问题,即网页重置和规范化之间有什么区别。几乎每个人都有一个版本的正确答案。

 

最佳答案:不同浏览器有不同的默认样式(用户代理样式表),而你希望通过重置属性来覆盖它们,使得网站在不同的设备上看起来都一样。在这种情况下,Twitter 就告诉浏览器删除body标签的默认边距。这只是为了降低浏览器的不一致性,但我更喜欢将样式规范化,而不是重置它们,也就是说,在不同的浏览器上应用相同的默认值,而不是完全删除它们。人们甚至曾经使用* { margin: 0 },这完全是矫枉过正,对性能并不好,但现在,常见的方式是导入normalize.cssreset.css之类的东西(甚至是更新的东西)并在此基础上进行设计。

 

更多有趣的代码

我一直很喜欢玩浏览器的检查器工具,看一看网站是如何制作的,我就是因为这个想出了这样的面试方法。尽管我自认为算是语义 HTML 方面的专家,但每次这样做时我都会学到一些新东西。

 

因为 Twitter 主要是一个客户端 React 应用,所以源代码只有几十行。即使这样还是有很多东西可以学!在 Twitter 的源代码中,还有一些更有趣的行,我留给读者做练习。你能在面试中解释其中的多少个?

 

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">
复制代码

…告诉浏览器用户可以将 Twitter 添加为一个搜索引擎。

 

<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />
复制代码

…有许多有趣的属性可供讨论,尤其是nonce

 

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

…针对国际登录页。

 

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

…在不使用键盘导航时移除焦点轮廓(这里的:focus-visible选择器是 CSS 增强插件)。

 

原文链接:

 

Explain the First 10 Lines of Twitter’s Source Code to Me

 

2022 年 4 月 21 日 15:213250

评论 1 条评论

发布
用户头像
twitter 只有展示层逻辑吗?
2022 年 05 月 07 日 15:49
回复
没有更多了
发现更多内容

架构师训练营0期11周

WW

Flink-状态后端作用-11

小知识点

scala 大数据 flink

初识Druid——实时OLAP系统

justskinny

大数据 Apache Druid

【Elasticsearch 技术分享】—— 十张图带大家看懂 ES 原理 !明白为什么说:ES 是准实时的!

程序员小航

Java elasticsearch 搜索 ES Lucene Elastic Search

学习Python真的能找到工作吗?

代码制造者

Python 程序员 编程语言 低代码 零代码

架构师训练营第 11周作业和感想

tuuezzy

极客大学架构师训练营

微前端在民生 APaaS/PSET 平台的探索与实践

亻尔可真木奉

大前端 探索与实践 案例分享

mPaaS 客户端证书错误避坑指南

阿里云金融线TAM SRE专家服务团队

涵盖多场景区块链与政务结合 应用前景广阔

CECBC

区块链 互联网 数字政务

【FCC前端教程】44关学习CSS与CSS3基础「二」

三钻

CSS 大前端 FCC

抗疫复产,CDN助企业破局发展

华为云开发者联盟

CDN 网络 华为云 CDN加速 企业应用

揭开数组的真面目

Java旅途

Java 数据结构 数组

屏幕共享接入指南

anyRTC开发者

WebRTC 在线教育 直播 RTC

oeasy教您玩转linux010107那啥在哪 whereis

o

最强云硬盘来了,让AI模型迭代从1周缩短到1天

华为云开发者联盟

SSD 云存储 All-Flash 云硬盘 擎天架构

面试官想知道都在这里

escray

学习 面试

菜市场和房屋中介

escray

学习 面试

甲方日常 3

句子

工作 随笔杂谈 日常

企业网络安全漏洞多,这些等保服务来填坑

华为云开发者联盟

Web 安全 防火墙 等保 DDoS

穿什么衣服去面试?

escray

学习 面试

Mysql探索之索引详解

不才陈某

MySQL

一篇文章搞懂前端学习方法与构建知识体系

三钻

学习 大前端

化妆品行业与区块链的融合可减少甚至消除假冒伪劣

CECBC

区块链 化妆品

数据挖掘学习指南(转载)

Jackchang234987

数据挖掘 产品经理

开发者的福音,LR.NET模块化代码生成器

Philips

敏捷开发 快速开发 模块化流程 代码质量 .net core

消息队列之推还是拉,RocketMQ 和 Kafka 是如何做的?

yes

kafka RocketMQ

建设开发者生态:6项华为API管理原则落地

华为云开发者联盟

开发者 API 华为云 API Explorer平台 应用技术

分享一个阿里云轻量级开源前端图编排,流程图js组件——butterfly-dag

InfoQ_39ba186c207f

Java 流程图 flow canvas html/css

有为而治:平衡吞噬世界的系统之熵

IT民工大叔

区块链 新基建定位下的新使命 2020新区势

CECBC

区块链 新基建

【写作群星榜】8.15~8.28 写作平台优秀作者 & 文章排名

InfoQ写作社区官方

写作平台 排行榜 热门活动

2022 阿里云飞天技术峰会 - 主论坛

2022 阿里云飞天技术峰会 - 主论坛

我对 Twitter 前10行源代码的理解_语言 & 开发_Anand Chowdhary_InfoQ精选文章