AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

  • 2022-04-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-04-21 15:214338

评论 1 条评论

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

跟随报文,开启一段奇妙之旅

华为云开发者联盟

报文 Windows主机 路由器 Linux主机 路由表

一文了解数据库资源管理技术

华为云开发者联盟

数据库 存储 GaussDB(DWS) 资源管理

字节跳动单点恢复功能及 Regional CheckPoint 优化实践

Apache Flink

flink

基于感染原理判断图的连通性算法

大奎

图算法 子图 连通性

LiteOS:剖析时间管理模块源代码

华为云开发者联盟

时间管理 时间 LiteOS huawei 任务

微信聊天记录里的文件又失效了?试试这个文件同步开源项目吧

HelloGitHub

开源 文件传输 Go 语言

ThreadLocal 慌不慌?

叫练

JVM ThreadLocal 引用 软引用

对于移动开发,人工智能的到来意味着什么?

故胤道长

人工智能 机器学习 ios开发 Android开发

【LeetCode】位1的个数Java题解

Albert

算法 LeetCode 3月日更

开发也要防“沉迷”?IDEA插件教程详解

京东科技开发者

Java 开发 IntelliJ IDEA

数据库周刊62丨央企2021年数据库成交公告,国产占90%;流数据库HStreamDB开源;MySQL主从双写导致数据丢失;Oracle 19c升级最佳实践;PG日常工作分享;MySQL MGR运维指南;SQL语法手册……

墨天轮

MySQL 数据库 sql postgre

Swagger增强神器:Knife4j!用它轻松实现接口搜索、Word下载、接口过滤...

王磊

Java swagger Knife4j

揭秘盒马鲜生,如何打破收益增长天花板!

博文视点Broadview

uni-app跨端开发H5、小程序、IOS、Android(六):uni-app事件绑定

黑马腾云

微信小程序 uni-app 大前端 iOS Developer 3月日更

书单|互联网企业面试案头书之架构师篇

博文视点Broadview

架构

EGG公链强势来袭!去中心化社交革命先驱EFTalk

币圈那点事

墨天轮精选:数据库问答集萃第一期-2021

墨天轮

MySQL 数据库 sql dba

力扣(LeetCode)刷题,简单题(第15期)

不脱发的程序猿

LeetCode 编程之路 28天写作 算法面经 3月日更

【Doris Weekly】2020.03.08~2021.03.21

ApacheDoris

【Doris Weekly】

分布式任务 + 消息队列框架 go-queue

万俊峰Kevin

微服务 分布式任务 消息队列 Go 语言

Flink SQL 在网易云音乐的产品化实践

Apache Flink

flink

Cobar SQL审计的设计与实现

捉虫大师

Disruptor Skywalking cobar 数据库中间件

力扣(LeetCode)刷题,简单题(第16期)

不脱发的程序猿

面试 LeetCode 28天写作 算法面经 3月日更

彩色图像的二值化,取经之旅第 6 天

梦想橡皮擦

28天写作 3月日更

技术实践丨Prometheus+Grafana搭建HBase监控仪表盘

华为云开发者联盟

开源 Grafana Prometheus HBase 开源数据库

【IstioCon 2021】最佳实践:从Spring Cloud 到 Istio

华为云原生团队

开源 Kubernetes 云原生 istio 服务网格

精选2021互联网大厂Java核心面试题库(金三银四面试必备)

比伯

Java 编程 架构 面试 程序人生

终于有阿里高工把SpringBoot+SpringCloud+Docker+MQ整合在一起了

Java架构追梦

Java 架构 微服务 springboot SpringCloud

基于NA公链(Nirvana)的应用和NAC公链社区共识探究公链的发展未来

区块链第一资讯

vivo 应用商店推荐系统探索与实践

vivo互联网技术

架构 推荐系统 服务器

java好还是嵌入式好?做IT开发该如何选择

cdhqyj

Java 编程 发展 开发 嵌入式

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