阿里前端攻城狮们又写了一份面试题答案，请查收

前言

话说两周前，我发了这样一条沸点：

因而我真的就建群收集了题目，和团队的同事一块儿写答案，咱们也不图什么，就是想作一件有意义的事情，如今我整理了下咱们的回答，有的不必定就是很是具体的回答，但也提供了思路和参考资料，你们看看是否还有什么补充的？

[字节跳动] 怎么与服务端保持链接

和服务端保持链接，最简单粗暴的方法就是经过请求轮询保持跟服务端的通讯，客户端不光要花成本维护定时轮询器，还会使得服务器压力变大，因此不推荐。

还有一种能够借助请求超时的设置，将超时时间设置一个足够大的值，客户端发起链接后，只要服务端不返回消息，整个链接阶段都会受到阻塞，因此这种方式也不推荐。

最后一种是WebSocket，当服务器完成协议从HTTP到WebSocket的升级后，服务端能够主动推送信息给客户端，解决了轮询形成的同步延迟问题。因为 WebSocket 只须要一次 HTTP 握手，服务端就能一直与客户端保持通讯，直到关闭链接，这样就解决了服务器须要反复解析 HTTP 协议，减小了资源的开销。

[字节跳动] 谈一下隐式类型转换

这个问题能够拓展讲成 JavaScript 中的类型转换，分为两类，显式类型转换和隐式类型转换，当咱们用 Number() 等函数的时候，就是显式类型转换，其转换规则是当是基本类型时，参照规范中的对应表进行转换，当不是基本类型的时候，先参照规范中的 ToPrimitive 方法转换为基本类型，再按照对应表转换，当执行 ToPrimitive 的时候，又会根据状况不一样，判断先执行对象的 valueOf 方法仍是 toString 方法进行准换，这个能够参照 JavaScript 深刻之头疼的类型转换(上)，而当咱们进行运算的时候，常常发生的就是隐式类型转换，好比 + 和 == 运算符，当 + 运算符的时候，更倾向于转成字符串，而当 == 的时候，更倾向于转为数字，这个在 [JavaScript 深刻之头疼的类型转换(下)]()中会讲到……可是我还在写……总之，回答类型转换的时候，最好是扯到规范中，代表你在研究这块内容的时候，还专门去看过规范。基本上回答了这里，对类型转换说明已经有不少的了解，但你能够再拓展讲一下，好比当时我在学习类型转换的时候，还专门去研究了如何花式表示 26 个字母，好比在控制台打印这样一句话：

[[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] == []][0] + []][0][2]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]]+[]][0][23]+[[][0] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[+[1 + [[][0] + []][0][3] +309][0] + []][0][7]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][0]

花式表示字母的原理你们也能够探索一下，虽然看起来很无聊，但能够做为一个小案例，代表下你对技术的钻研和兴趣。

[各类公司] 输入url后发生了什么

这个问题的核心是在问从输入URL到页面渲染经历了哪些过程。

从耗时过程来看，能够分为DNS解析、TCP链接、HTTP请求与响应、客户端浏览器解析渲染、链接结束。其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树创建、屏幕绘制。

下面针对几个较为重要的过程作下介绍。

DNS解析

当咱们在浏览器中输入如www.taobao.com的时候，DNS解析充当了一个翻译的角色，把网址「翻译」成了IP地址。DNS解析的过程就是域名到IP地址的转换的过程。域名解析也叫域名指向、服务器设置、域名配置以及反向IP登记等等。说得简单点就是将好记的域名解析成IP，服务由DNS服务器完成，把域名解析到一个IP地址，而后在此IP地址的主机上将一个子目录与域名绑定。

TCP链接

TCP链接的重要目的，是为了保证消息的有序和不丢包，为了创建可靠的数据传输，TCP通讯双方相互告知初始化序列号，并肯定对方已经收到ISN的，整个连接的过程就是咱们俗称的三次握手。

HTTP请求与响应

HTTP请求它主要发生在客户端，发送HTTP请求的过程就是构建HTTP请求报文并经过TCP协议发送到服务器指定端口的过程。

仍是用 https://www.taobao.com 举例子。

当在地址栏输入后，浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行(包括请求的方法，路径和协议版本)、请求头(包含了请求的一些附加的信息，通常是以键值的形式成对存在)、空行(协议中规定请求头和请求主体间必须用一个空行隔开)、请求主体(对于post请求，所须要的参数都不会放在url中，这时候就须要一个载体了，这个载体就是请求主体)。服务端收到这个请求后，会根据url匹配到的路径作相应的处理，最后返回浏览器须要的页面资源。处理后，浏览器会收到一个响应报文，而所须要的资源就就在报文主体上。与请求报文相同，响应报文也有与之对应的起始行(响应报文的起始行一样包含了协议版本，与请求的起始行不一样的是其包含的还有状态码和状态码的缘由短语)、响应头(对应请求报文中的请求头，格式一致，可是各自有不一样的首部)、空行、报文主体(请求所须要的资源)，不一样的地方在于包含的东西不同。

HTML词法、语法解析

对咱们来讲HTML实际上是一坨字符串，而实际上咱们要面对的是"字符流"。为了把字符流解析成正确的可被浏览器识别的结构，咱们须要作的事情分为两步：

词法分析：把字符流初步解析成咱们可理解的"词"，学名叫token。

语法分析：把开始结束标签配对、属性赋值好、父子关系链接好、构成dom树。

html结构其实不算太复杂，咱们平时见到的大部分都只是标签、属性、注释、CDATA节点。

屏幕绘制

DOM树的生成和渲染树创建比较好理解这个就不作展开。完成了这「两棵树」的构造后，就进入屏幕绘制阶段。

在绘制的过程当中，会遍历渲染树，调用由浏览器的UI组件的paint()方法在屏幕上显示对应的内容，并根据渲染树布局，计算CSS样式(即每一个节点在页面中的大小和位置等几何信息)。

HTML默认是从上到下流式布局的，CSS和JS的加入会打破这种布局，改变DOM的外观样式以及大小和位置。这就引出两个很是重要的概念：replaint重绘和reflow重排。

replaint重绘，屏幕的一部分从新绘制，不影响总体布局，好比某个CSS的背景色变了，但元素的几何尺寸和位置不变。eflow重排： 意味着元件的几何尺寸变了，咱们须要从新验证并计算渲染树。是渲染树的一部分或所有发生了变化。不管是重绘仍是重排，对浏览器而言都是一种「消耗」，因此咱们应该尽可能减小这两种状态的触发。

[百词斩] CDN的原理

CDN的基本原理是普遍采用各类缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工做正常的缓存服务器上，由缓存服务器直接响应用户请求。
最简单的CDN网络由一个DNS 服务器和几台缓存服务器就能够组成，当用户输入URL按下回车，通过本地DNS系统解析，DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器，而后将获得全局负载均衡设备的IP地址，用户向全局负载均衡设备发送内容访问请求，全局负载均衡设备将实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上，使用户可就近取得所需内容，解决 Internet网络拥挤的情况，提升用户访问网站的响应速度

[百词斩] 性能监控平台是如何捕获错误的

通常从以下两个方面考虑：

1.全局捕获：

经过全局的接口，将捕获代码集中写在一个地方，能够利用的接口有：

1. window.addEventListener(‘error’) / window.addEventListener(“unhandledrejection”) / document.addEventListener(‘click’) 等
2. 框架级别的全局监听，例如aixos中使用interceptor进行拦截，vue、react都有本身的错误采集接口
3. 经过对全局函数进行封装包裹，实如今在调用该函数时自动捕获异常
4. 对实例方法重写（Patch），在原有功能基础上包裹一层，例如对console.error进行重写，在使用方法不变的状况下也能够异常捕获

2.单点捕获：

在业务代码中对单个代码块进行包裹，或在逻辑流程中打点，实现有针对性的异常捕获：

1. try…catch
2. 专门写一个函数来收集异常信息，在异常发生时，调用该函数
3. 专门写一个函数来包裹其余函数，获得一个新函数，该新函数运行结果和原函数如出一辙，只是在发生异常时能够捕获异常

注：详情可参见Fundebug 发表的 《前端异常监控解决方案研究》

[腾讯一面] 性能优化从哪些方面入手？

• 分屏加载，当页面须要渲染的数据较多时，先渲染首屏，下滑时再加载第二屏的数据；
• 图片大小优化，在不影响视觉效果的前提下，把图片尺寸降到最小；
• 图片懒加载，on appear时再加载图片；
• Code splitting，或者拆包，应用下的某些组件不须要马上import，能够采用动态import的方式，打包时也能够将它们打到不一样的bundle里，给index bundle瘦身；
• Chrome Devtools - Trace & Timeline等一系列强大的分析工具能够去研究一下，它们能够深刻到内核分析应用的性能问题所在；

[腾讯二面] 如何加快首屏渲染，你有哪些方案?

• 下降请求量：合并资源，减小 HTTP 请求数，minify / gzip 压缩，webP，lazyload。
• 加快请求速度：预解析DNS，减小域名数，并行加载，CDN 分发。
• 增长缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage、PWA。
• 渲染优化：首屏内容最小化，JS/CSS优化，加载顺序，服务端渲染，pipeline。

[腾讯一面] webpack 针对模块化作的处理

这一块建议去读 webpack4 文档中对于 library，libraryTarget 的描述。当咱们开发一个 JS 库的时候，一般最终的 npm package 须要输出的是一些组件或 api，这个时候咱们须要了解webpack4所提供的模块化的打包能力。经过对libraryTarget的设置，咱们能够将咱们的工程打包成amd，umd，或commonJS模块。
https://webpack.js.org/config...

[腾讯一面] 概述一下 Node.js 中的进程与线程

Node.js 中的进程 Process 是一个全局对象，无需 require 直接使用，给咱们提供了当前进程中的相关信息。Node.js 中进程可使用 child_process 模块建立。

关系：

• 一个线程只能属于一个进程，而一个进程能够有多个线程，但至少有一个线程（一般说的主线程）。
• 同一进程的全部线程共享该进程的全部资源。
• 进程在执行过程当中，须要协做同步。不一样进程的线程间要利用消息通讯的办法实现同步。
• 处理机分给线程，即真正在处理机上运行的是线程。
• 线程是指进程内的一个执行单元，也是进程内的可调度实体。

区别：

• 调度：线程做为调度和分配的基本单位，进程做为拥有资源的基本单位。
• 拥有资源：进程是拥有资源的一个独立单位，线程不拥有系统资源，但能够访问隶属于进程的资源。

[字节跳动] 鼠标滚动的时候，会触发不少次事件，如何解决的？

这里选择的方法应该是节流，能够拓展讲到防抖和节流，防抖是指连续触发的时候只会执行一次，中止触发 N 秒后才能继续执行，而节流是指若是你持续触发事件，每隔一段时间，只执行一次事件。像防止按钮屡次点击就用防抖，像是监听滚动事件就用节流，函数实现均可以参照 underscore 代码中的实现，之前我写过 JavaScript专题之跟着underscore学防抖 和 JavaScript专题之跟着 underscore 学节流 两篇文章讲述了 underscore 中的实现方式