19 年目睹之前端怪现状

张嘴闭嘴语义化，其实全是低矮微

什么是标签语义化？就是 div 套 div。这肯定不是标准答案，你要是这么回答了，儒雅随和的面试官还能忍住和你多聊几分钟；修养不好的，可能直接喊保安了。

不是正确答案，但确实是通用实践。不信的话，你可以统计一下国内各大网站中使用过的标签。“统计网页当中使用了多少个标签？每个标签出现的次数是多少？怎样过滤掉头部标签？按标签次数出现多少，对数据进行排序。”我个人认为，这样一道题，考察的知识点，要比张嘴就来的语义化，实际得多。如果前面的问题都回答出来了，再讨论一下为什么语义化说了这么多年，实践起来还是 div。

function getTagsMap() {
  return [...document.querySelectorAll('*')].reduce((a, c) => {
    let tagName = c.tagName.toLowerCase();
    if(a[tagName]) {
      a[tagName] += 1;
    } else {
      a[tagName] = 1;
    }
    return a;
  }, {})
}
复制代码

这里要给掘金点个赞，如果你尝试去统计了，应该也会点赞，应该也会和我产生一样的疑惑：对语义化理解是不是错了？为什么在某些网站上，连 header，footer，nav 都看不到，放眼过去，全是 div 和 span。再看一下 GitHub 的自定义标签。很多网站不知道出于何种考虑，会把绝对时间显示为相对时间，即 2019-3-8 会显示为 几天前，通常情况下，这个时间就是用 span 包起来了事，GitHub 使用了自定义标签 relative-time 来包裹相对时间。

俺想问一下这些大厂员工，你们的标签写成这样，是你们原本就对自己要求不高，还是早就习惯了逆来顺受？（哪天去大厂找工作，这句记得删）

大谈特谈国际化，老外能用才叫怪

这里首先要吐槽一下某些大厂的开源项目： Readme 一半英文一半中文，一看源码注释全是中文，最最让我不能理解的是，留下的交流方式是微信群/QQ 群。也要称赞一下阿里的开源项目，给人的感觉就非常规范（虽然产品不一定好用就是了）。

以下开始吐槽国内产品所谓的国际化：

半中文半英文。图片没有国际化，全是中国字，可以理解；可是 placeholder 以及部分首页入口都是中文，就说不过去了吧？
表面上是国际化，实际上是给“洋大人”提供的特殊服务。比如某个购买火车票的窗口中，中文系统的话，默认勾选购买保险服务；再比如，系统换成英文，或者真的去下载一个国际版，广告少了一大堆。

以上是我将手机系统语言设置为英文后，不负责任的瞎测。看来国际化不仅仅是一个技术上的问题，更是一个业务上的难题。希望能够有大厂的员工，分享一下是如何解决以及如何看待这些问题的。

面试先问 TCP，其实自己屁不知

面试中问到三次握手，基本就是在对暗号。因为前端的主要工作都是在和 HTTP 打交道，什么时候轮到 TCP 了？包括一些缓存消息头的设置，有多少公司是真的需要前端来干这些事情的？面试中问到这些问题的时候，是不是因为没有其他问题要问的了？前端前端，就是发请求，关于发请求的问题，我倒是有几个：

Http 1.x 协议下，不同的浏览器对同时发起请求的数目做了限制（具体的数字，很多文章里都说了，这里就不引用了）。那么，在 Http 2 的协议下，浏览器有对请求数目做限制么？限制是多少？怎么测算的？
301，302 重定向的区别是什么（对 SEO 的影响）？用这俩进行重定向，会丢失请求方法和请求体，有没有方式避免（不知道也没有关系）？
有没有上报过网页的性能？怎么实现的？

手写 ajax？啥是 ajax？

2019 年了，有的面试题中，还是会让面试者手写一遍 ajax。其实，也就一行代码的事：

function ajax(url, options = {}) {
    return fetch(url, options);
}
复制代码

这段代码简短优雅，没有 bug，看着牛逼，但大概率不是面试官想要的代码。面试官想要的 ajax，一般是 jQuery 的 ajax；有可能还会让你封装成 Promise。这就涉及到一个问题，到底什么是 ajax？

传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。维基百科 AJAX

从来都不看 npm 到底干了啥

这个问题，目前来说我实在想不到什么解决方案；我们只能相信包的作者不会在代码里下毒。不过，当有人指出问题的时候，在座的各位有没有真的去看看自己的 node_modules ？比如，npm 安装包的问题第一次引起大量关注，应该是当年的 left-pad 事件。这事发生后，就有人写了篇文章，大致就是说一些流行的包中，存在着各种各样的问题，例如废代码，盗取用户信息等等；在 babel 的源码中，甚至还引用了某人的一张照片。当然，这些问题都是作者瞎说的；就算不是瞎说的，也很少有人会去查证。有趣的是，babel 在这篇文章之后，真的在代码里加了张照片，之前长这样，之后长这样。

总而言之，前端面试的这些套路，更像是一种暗号。对上了，我遇见对的人；对不出，那我很抱歉。为了节约大家宝贵的时间，我建议，之后面试的时候，大家的问答改为：“一派西山千古秀”，“三合河水万年流”。只要两秒，就可以确定对方到底是你的同志，还是来浪费时间的新手。

希望大家在以后，不管是去面试别人，还是被人面试，都能够言之有物。知之为知之，不知为不知。要不然，真成了前端娱乐圈。