金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）中

金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）中

引言

元旦匆匆而过，2020年的春节又接踵而来，你们除了忙的提着裤子加班、年末冲冲冲外，还有着对于明年的迷茫和期待！2019年有多少苦涩心酸，2020年就有更多幸福美好，加油，奥利给！怀着一颗积极向上的心，来面对将来每一天的挑战！

所谓“兵马未动，粮草先行”，咱们打响明天的战役也须要精神食粮来作后勤保障才是。在此我整理了多位从业者和我在2019年末至2020年初的一厂面试精选题，但愿对磨砺锋芒、奋发向上的小伙伴有所帮助，祝你早日剑指大厂，扬帆起航，奥利给！

浏览器

1.实现一个postMessage跨域 （快手一面 2019.08）

// 发送消息端
window.parent.postMessage('message', 'http://test.com')
// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
  var origin = event.origin || event.originalEvent.origin
  if (origin === 'http://test.com') {
    console.log('验证经过')
  }
})

2.node和浏览器的事件循环机制区别 （京东到家二面 2019.04）

浏览器环境下，microtask 的任务队列是每一个 macrotask 执行完以后执行。而在 Node.js 中，microtask 会在事件循环的各个阶段之间执行，也就是一个阶段执行完毕，就会去执行 microtask 队列的任务。

浏览器和 Node 环境下，microtask 任务队列的执行时机不一样

• Node 端，microtask 在事件循环的各个阶段之间执行
• 浏览器端，microtask 在事件循环的 macrotask 执行完以后执行

参考地址：http://www.javashuo.com/article/p-nwpynnbs-z.html

3. cookie，localStorage，sessionStorage，indexDB的区别（网易互娱 2019.11）

• cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
• 存储大小限制不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
• 数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。
• 做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

特性	cookie	localStorage	sessionStorage	indexDB
数据生命周期	通常由服务器生成，能够设置过时时间	除非被清理，不然一直存在	页面关闭就清理	除非被清理，不然一直存在
数据存储大小	4k	5M	5M	无限
与服务端通讯	header中，对于请求性能影响	不参与	不参与	不参与

4. cookie某些属性的做用？

属性	做用
value	若是用于保存用户登陆态，应该将该值加密，不能使用明文的用户标识
http-only	不能经过JS访问Cookie，减小XSS攻击
secure	只能在协议为HTTPS的请求中携带
same-site	规定浏览器不能在跨域请求中携带Cookie，减小CSRF攻击

4.输入URL发生什么？（蚂蚁金服一面 2019.03）

1. DNS 域名解析（域名解析成ip地址，走UTP协议，所以不会有握手过程）：浏览器将 URL 解析出相对应的服务器的 IP 地址（1. 本地浏览器的 DNS 缓存中查找 2. 再向系统DNS缓存发送查询请求 3. 再向路由器DNS缓存 4. 网络运营商DNS缓存 5. 递归搜索），并从 url 中解析出端口号
2. 浏览器与目标服务器创建一条 TCP 链接（三次握手）
3. 浏览器向服务器发送一条 HTTP 请求报文
4. 服务器返回给浏览器一条 HTTP 响应报文
5. 浏览器进行渲染
6. 关闭 TCP 链接（四次挥手）

5. 强缓存和协商缓存（蚂蚁金服一面 2019.03）

• 强缓存 能够经过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不须要请求，state code 为 200。

1. Expires 是 HTTP/1 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过时，须要再次请求。而且 Expires 受限于本地时间，若是修改了本地时间，可能会形成缓存失效。
2. Cache-Control 出现于 HTTP/1.1，优先级高于 Expires 。该属性值表示资源会在 30 秒后过时，须要再次请求。

指令	做用
public	表示响应能够被客户端和代理服务器缓存
private	表示响应只能够被客户端缓存
max-age=30	缓存30秒后就过时，须要从新请求
s-maxage=30	覆盖max-age,做用同样，只在代理服务器中生效
no-store	不缓存任何响应
no-cache	资源被缓存，可是当即失效，下次会发起请求验证资源是否过时
max-stale=30	30秒内，即便缓存过时，也使用该缓存
min-fresh=30	但愿在30秒内获取最新的响应

• 协商缓存 若是缓存过时了，就须要发起请求验证资源是否有更新。协商缓存能够经过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。当浏览器发起请求验证资源时，若是资源没有作改变，那么服务端就会返回 304 状态码，而且更新浏览器缓存有效期。

1. Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，不然返回 304 状态码。可是 Last-Modified 存在一些弊端：1.若是本地打开缓存文件，即便没有对文件进行修改，但仍是会形成 Last-Modified 被修改，服务端不能命中缓存致使发送相同的资源；2.由于 Last-Modified 只能以秒计时，若是在不可感知的时间内修改完成文件，那么服务端会认为资源仍是命中了，不会返回正确的资源
2. ETag 相似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变更，有变更的话就将新的资源发送回来。而且 ETag 优先级比 Last-Modified 高。

• 启发式缓存 若是什么缓存策略都没设置，那么浏览器会怎么处理？对于这种状况，浏览器会采用一个启发式的算法，一般会取响应头中的 Date 减去 Last-Modified 值的 10% 做为缓存时间。

6. 实际场景应用缓存策略举例

• 频繁变更的资源 对于频繁变更的资源，首先须要使用 Cache-Control: no-cache 使浏览器每次都请求服务器，而后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的作法虽然不能节省请求数量，可是能显著减小响应数据大小。
• 代码文件 这里特指除了 HTML 外的代码文件，由于 HTML 文件通常不缓存或者缓存时间很短。通常来讲，如今都会使用工具来打包代码，那么咱们就能够对文件名进行哈希处理，只有当代码修改后才会生成新的文件名。基于此，咱们就能够给代码文件设置缓存有效期一年 Cache-Control: max-age=31536000，这样只有当 HTML 文件中引入的文件名发生了改变才会去下载最新的代码文件，不然就一直使用缓存。

7. 重绘（Repaint）和回流（Reflow）是啥？如何优化？（快手一面 2019.08）

• 重绘是当节点须要更改外观而不会影响布局的，好比改变 color 就叫称为重绘。
• 回流是布局或者几何属性须要改变就称为回流。
  回流一定会发生重绘，重绘不必定会引起回流。回流所需的成本比重绘高的多，改变父节点里的子节点极可能会致使父节点的一系列回流。
• 优化方案：

1. 使用 transform 替代 top
2. 使用 visibility 替换 display: none ，由于前者只会引发重绘，后者会引起回流（改变了布局）
3. 不要把节点的属性值放在一个循环里当成循环里的变量
4. 不要使用 table 布局，可能很小的一个小改动会形成整个 table 的从新布局
5. 动画实现的速度的选择，动画速度越快，回流次数越多，也能够选择使用requestAnimationFrame
6. CSS 选择符从右往左匹配查找，避免节点层级过多
7. 将频繁重绘或者回流的节点设置为图层，图层可以阻止该节点的渲染行为影响别的节点。好比对于 video 标签来讲，浏览器会自动将该节点变为图层。

8. 同源策略是什么？（网易互娱 2019.11）

同源策略是指只有具备相同源的页面才可以共享数据，好比cookie，同源是指页面具备相同的协议、域名、端口号，有一项不一样就不是同源。 有同源策略可以保证web网页的安全性。

DOM 同源策略：禁止对不一样源页面 DOM 进行操做。这里主要场景是 iframe 跨域的状况，不一样域名的 iframe 是限制互相访问的。

XMLHttpRequest 同源策略：禁止使用 XHR 对象向不一样源的服务器地址发起 HTTP 请求。

跨域解决方法： 1. CORS（跨域资源共享）； 2. JSONP跨域； 3. 图像ping跨域； 4. 服务器代理； 5. document.domain 跨域； 6. window.name 跨域； 7. location.hash 跨域； 8. postMessage 跨域；

9.DOM Tree是如何构建的？

1. 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
2. 生成Tokens: 以后开始parser，浏览器会将HTML字符串解析成Tokens
3. 构建Nodes: 对Node添加特定的属性，经过指针肯定 Node 的父、子、兄弟关系和所属 treeScope
4. 生成DOM Tree: 经过node包含的指针肯定的关系构建出DOM
   Tree

10.前端须要注意哪些seo(搜索引擎优化)？（拼多多 2019.11）

• 合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
  重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提升网站速度：网站速度是搜索引擎排序的一个重要指标

11.什么是会话跟踪，有哪几种方法？（拼多多 2019.11）

• 对同一个用户对服务器的连续的请求和接受响应的监视。经常使用的方法有：

1. URL重写 的技术就是在URL结尾添加一个附加数据以标识该会话,把会话ID经过URL的信息传递过去，以便在服务器端进行识别不一样的用户 。
2. 隐藏表单域 将会话ID添加到HTML表单元素中提交到服务器,此表单元素并不在客户端显示。
3. Cookie Cookie是Web服务器发送给客户端的一小段信息，客户端请求时能够读取该信息发送到服务器端，进而进行用户的识别。对于客户端的每次请求，服务器都会将Cookie发送到客户端,在客户端能够进行保存,以便下次使用。
4. session 每个用户都有一个不一样的session，各个用户之间是不能共享的，是每一个用户所独享的，在session中能够存放信息。在服务器端会建立一个session对象，产生一个sessionID来标识这个session对象，而后将这个sessionID放入到Cookie中发送到客户端，下一次访问时，sessionID会发送到服务器，在服务器端进行识别不一样的用户。

12.Doctype做用?严格模式与混杂模式如何区分？它们有何意义?（快手一面 2019.08）

• Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
• 严格模式 的排版和JS 运做模式是 以该浏览器支持的最高标准运行。
• 混杂模式，向后兼容，模拟老式浏览器，防止浏览器没法兼容页面。

自动化工具

1. 什么是webpack，webpack的运行原理，如何打包 （字节跳动）

webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，经过loader转换文件，经过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专一构建模块化项目。
WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

二、webpack如何配置？

参考 ：https://www.webpackjs.com/configuration/

3. webpack与grunt、gulp的不一样？（招行信用卡中心）

• Grunt、Gulp是基于任务运行的工具： 它们会自动执行指定的任务，就像流水线，把资源放上去而后经过不一样插件进行加工，它们包含活跃的社区，丰富的插件，能方便的打造各类工做流。
• Webpack是基于模块化打包的工具: 自动化处理模块,webpack把一切当成模块，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。
• 所以这是彻底不一样的两类工具,而如今主流的方式是用npm script代替Grunt、Gulp,npm script一样能够打造任务流。

4.什么是bundle,什么是chunk，什么是module?

• bundle：是由webpack打包出来的文件

• chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割

• module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出全部依赖的模块

5.什么是Loader?什么是Plugin?

1）Loaders是用来告诉webpack如何转化处理某一类型的文件，而且引入到打包出的文件中
2）Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，经过这个方法能够参与到整个webpack打包的各个流程(生命周期)。

6. 有哪些常见的Loader？他们是解决什么问题的？

• file-loader：把文件输出到一个文件夹中，在代码中经过相对 URL 去引用输出的文件

• url-loader：和 file-loader 相似，可是能在文件很小的状况下以 base64 的方式把文件内容注入到代码中去

• source-map-loader：加载额外的 Source Map 文件，以方便断点调试

• image-loader：加载而且压缩图片文件

• babel-loader：把 ES6 转换成 ES5

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

• style-loader：把 CSS 代码注入到 JavaScript 中，经过 DOM 操做去加载 CSS。

• eslint-loader：经过 ESLint 检查 JavaScript 代码

7. 有哪些常见的Plugin？

• define-plugin：定义环境变量

• html-webpack-plugin：简化html文件建立

• uglifyjs-webpack-plugin：经过UglifyES压缩ES6代码

• webpack-parallel-uglify-plugin: 多核压缩,提升压缩速度

• webpack-bundle-analyzer: 可视化webpack输出文件的体积

• mini-css-extract-plugin: CSS提取到单独的文件中,支持按需加载

8.webpack中loader和plugin的区别 （字节跳动 搜狐）

• Loader直译为"加载器"。Webpack将一切文件视为模块，可是webpack原生是只能解析js文件，若是想将其余文件也打包的话，就会用到loader。 因此Loader的做用是让webpack拥有了加载和解析_非JavaScript文件_的能力。
• Plugin直译为"插件"。Plugin能够扩展webpack的功能，让webpack具备更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 能够监听这些事件，在合适的时机经过 Webpack 提供的 API 改变输出结果。
• Loader在module.rules中配置，也就是说他做为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都经过构造函数传入。

9.webpack的构建流程是什么?从读取配置到输出文件这个过程尽可能说全

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行如下流程：

• 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

• 开始编译：用上一步获得的参数初始化 Compiler 对象，加载全部配置的插件，执行对象的 run 方法开始执行编译；

• 肯定入口：根据配置中的 entry 找出全部的入口文件；

• 编译模块：从入口文件出发，调用全部配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到全部入口依赖的文件都通过了本步骤的处理；

• 完成模块编译：在通过第4步使用 Loader 翻译完全部模块后，获得了每一个模块被翻译后的最终内容以及它们之间的依赖关系；

• 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每一个 Chunk 转换成一个单独的文件加入到输出列表，这步是能够修改输出内容的最后机会；

• 输出完成：在肯定好输出内容后，根据配置肯定输出的路径和文件名，把文件内容写入到文件系统。

10. webpack的plugins和loaders的实现原理？ （达达京东到家 2019.04）

• Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，而且每一个Loader经过链式操做，将源文件一步步翻译成想要的样子。

• 编写Loader时要遵循单一原则，每一个Loader只作一种"转义"工做。 每一个Loader的拿到的是源文件内容（source），能够经过返回值的方式将处理后的内容输出，也能够调用this.callback()方法，将内容返回给webpack。 还能够经过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。

• 相对于Loader而言，Plugin的编写就灵活了许多。webpack在运行的生命周期中会广播出许多事件，Plugin 能够监听这些事件，在合适的时机经过 Webpack 提供的 API 改变输出结果。

11.如何利用webpack来优化前端性能？（达达京东到家 2019.04）

• 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。能够利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css

• 利用CDN加速。在构建过程当中，将引用的静态资源路径修改成CDN上对应的路径。能够利用webpack对于output参数和各loader的publicPath参数来修改资源路径

• 删除死代码（Tree Shaking）。将代码中永远不会走到的片断删除掉。能够经过在启动webpack时追加参数--optimize-minimize来实现

• 提取公共代码。

12. webpack、rollup、parcel优劣？

• webpack适用于大型复杂的前端站点构建: webpack有强大的loader和插件生态,打包后的文件实际上就是一个当即执行函数，这个当即执行函数接收一个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。当即执行函数内部则处理模块之间的引用，执行模块等,这种状况更适合文件依赖复杂的应用开发.

• rollup适用于基础库的打包，如vue、d3等: Rollup 就是将各个模块打包进一个文件中，而且经过 Tree-shaking 来删除无用的代码,能够最大程度上下降代码体积,可是rollup没有webpack如此多的的如代码分割、按需加载等高级功能，其更聚焦于库的打包，所以更适合库的开发.

• parcel适用于简单的实验性项目: 他能够知足低门槛的快速看到效果,可是生态差、报错信息不够全面都是他的硬伤，除了一些玩具项目或者实验项目不建议使用

13. 如何提升webpack的打包速度?

• happypack: 利用进程并行编译loader,利用缓存来使得 rebuild 更快,遗憾的是做者表示已经不会继续开发此项目,相似的替代者是thread-loader

• 外部扩展(externals): 将不怎么须要更新的第三方库脱离webpack打包，不被打入bundle中，从而减小打包时间,好比jQuery用script标签引入。

• dll: 采用webpack的 DllPlugin 和 DllReferencePlugin 引入dll，让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间

• 利用缓存: webpack.cache、babel-loader.cacheDirectory、HappyPack.cache均可以利用缓存提升rebuild效率

• 缩小文件搜索范围: 好比babel-loader插件,若是你的文件仅存在于src中,那么能够include: path.resolve(__dirname, 'src'),固然绝大多数状况下这种操做的提高有限,除非不当心build了node_modules文件

14. 如何提升webpack的构建速度？（天壤智能）

1. 多入口状况下，使用CommonsChunkPlugin来提取公共代码

2. 经过externals配置来提取经常使用库

3. 利用DllPlugin和DllReferencePlugin预编译资源模块 经过DllPlugin来对那些咱们引用可是绝对不会修改的npm包来进行预编译，再经过4. DllReferencePlugin将预编译的模块加载进来。

4. 使用Happypack 实现多线程加速编译

5. 使用webpack-uglify-parallel来提高uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提高压缩速度

6. 使用Tree-shaking和Scope Hoisting来剔除多余代码

15. AMD和CMD的区别？

• 最明显的区别就是在模块定义时对依赖的处理不一样
• AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
• CMD推崇就近依赖，只有在用到某个模块的时候再去require

参考：前端模块化，AMD与CMD的区别

16. 介绍模块化发展历程

• 模块化主要是用来抽离公共代码，隔离做用域，避免变量冲突等。

1. IIFE： 使用自执行函数来编写模块化，特色：在一个单独的函数做用域中执行代码，避免变量冲突。
2. AMD： 使用requireJS 来编写模块化，特色：依赖必须提早声明好。
3. CMD： 使用seaJS 来编写模块化，特色：支持动态引入依赖文件。
4. CommonJS： nodejs 中自带的模块化。
5. UMD：兼容AMD，CommonJS 模块化语法。
6. webpack(require.ensure)：webpack 2.x 版本中的代码分割。
7. ES Modules： ES6 引入的模块化，支持import 来引入另外一个 js 。

17.webpack 热更新原理

参考 ：http://www.javashuo.com/article/p-bwoptull-ke.html

服务端和网络

1.进程与线程的区别（字节跳动一面 2019.08）

• 地址空间：同一进程的线程共享本进程的地址空间，而进程之间是独立的地址空间。

• 资源拥有：同一进程内的线程共享本进程的资源如内存、I/O、cpu等，可是进程之间的资源是独立的。

• 一个进程崩溃后，在保护模式下不会对其余进程产生影响，可是一个线程崩溃整个进程都会死掉，因此多进程要比多线程健壮。

• 线程执行开销小，可是不利于资源的管理和保护。线程适合在SMP机器（双CPU系统）上运行。进程执行开销大，可是可以很好的进行资源管理和保护。进程能够跨机器前移。

• 对资源的管理和保护要求高，不限制开销和效率时，使用多进程。要求效率高，频繁切换时，资源的保护管理要求不是很高时，使用多线程。

2.什么是会话跟踪，有哪几种方法？（字节跳动 一面 2019.08）

• 对同一个用户对服务器的连续的请求和接受响应的监视。经常使用的方法有：

1. URL重写 的技术就是在URL结尾添加一个附加数据以标识该会话,把会话ID经过URL的信息传递过去，以便在服务器端进行识别不一样的用户 。
2. 隐藏表单域 将会话ID添加到HTML表单元素中提交到服务器,此表单元素并不在客户端显示。
3. Cookie Cookie是Web服务器发送给客户端的一小段信息，客户端请求时能够读取该信息发送到服务器端，进而进行用户的识别。对于客户端的每次请求，服务器都会将Cookie发送到客户端,在客户端能够进行保存,以便下次使用。
4. session 每个用户都有一个不一样的session，各个用户之间是不能共享的，是每一个用户所独享的，在session中能够存放信息。在服务器端会建立一个session对象，产生一个sessionID来标识这个session对象，而后将这个sessionID放入到Cookie中发送到客户端，下一次访问时，sessionID会发送到服务器，在服务器端进行识别不一样的用户。

3.ssl加密使用了哪一种算法，如何加密 （阿里巴巴 2019.08）

1. 在客户端与服务器间传输的数据是经过使用对称算法（如 DES 或 RC4）进行加密的。

2. 公用密钥算法（一般为 RSA）是用来得到加密密钥交换和数字签名的，此算法使用服务器的SSL数字证书中的公用密钥。

4.TCP三次握手的过程，为何是三次而不是两次或者四次？（阿里巴巴 2019.08）

• 第一次握手：客户端A发送一个syn（同步）包（syn=x）给服务器B，进入SYN_SEND状态，等待服务器确认
• 第二次握手：服务端B收到客户端A发送的同步包，确认客户端的同步请求（ack=x+1）,同时也发送一个同步包， 也就是一个ACK包+SYN包服务器进入SYN_RECV状态
• 第三次握手：客户端A收到服务器B的SYN+ACK包，向服务器B发送一个确认包，此包发送完毕，客户端和服务器进入 ESTABLISHED状态，完成三次握手
• 三次握手的缘由是为了防止已失效的链接请求报文段忽然又传送到了服务端，于是产生错误

5.讲一下TCP的四次挥手（快手二面 2019.10）

• 第一次：主动关闭方发送一个FIN包，用来关闭主动关闭方到被动关闭方的数据传送，也就是告诉另外一方我再也不发送数据了，但此时仍能够接收数据

• 第二次：被动关闭方收到FIN包以后，发送一个确认（ACK）包给对方

• 第三次：被动关闭方发送一个FIN包，告诉对方不带发送数据

• 第四次：主动关闭方收到FIN包以后，发送一个ACK包给对方，至此完成四次挥手

6.用户登录过程的简要说明，如何判断用户是否登陆？（快手二面 2019.10）

• 用户输入用户名和密码，经过post请求将密码和用户名发送给服务器，服务器比对收到的用户名、密码和数据库中的数据进行比对，不一致则作出响应，反馈信息给客户端，若是比对一致则服务端生成一个session，这个session能够存储在内存、文件、数据库中，同时生成一个与之一一对应的sessionID做为cookie发送给客户端，比对成功以后反馈信息，这时通常会进行一次重定向，重定向至登录以后的默认页面。判断用户登陆则是根据这个sessionID，每次请求会先检查有没有此次相似sessionID的cookie发送过来，没有则认为没有登陆，有则是否有相应的session，这个session是否过时等，来判断用户是否登陆，登陆是否过时。

7. Get和Post的区别 （字节跳动 一面 2019.08）

• Get 请求能缓存，Post 不能

• Post 相对 Get 安全一点点，由于 Get 请求都包含在 URL 里，且会被浏览器保存历史纪录。Post 不会，可是在抓包的状况下都是同样的。

• URL有长度限制，会影响 Get 请求，可是这个长度限制是浏览器规定的，不是 RFC 规定的。

• Post 能够经过 request body来传输比 Get 更多的数据，Get 没有这个技术。

• Post 支持更多的编码类型且不对数据类型限制。

• Get 多用于无反作用，幂等的场景，例如搜索关键字。Post 多用于反作用，不幂等的场景，例如注册。

• 备注：反作用指对服务器上的资源作改变，搜索是无反作用的，注册是反作用的。幂等指发送 M 和 N 次请求（二者不相同且都大于 1），服务器上资源的状态一致，好比注册 10 个和 11 个账号是不幂等的，对文章进行更改 10 次和 11 次是幂等的。由于前者是多了一个帐号（资源），后者只是更新同一个资源。

8.介绍一下DNS的查找过程？（网易互娱一面 2019.11）

递归查询

第一步：在hosts静态文件、DNS解析器缓存中查找某主机的ip地址

第二步：上一步没法找到，去DNS本地服务器（即域服务器）查找，其本质是去区域服务器、服务器缓存中查找

第三步：本地DNS服务器查不到就根据‘根提示文件’向负责顶级域‘.com’的DNS服务器查询

第四步：‘根DNS服务器’根据查询域名中的‘xyz.com’，再向xyz.com的区域服务器查询

第五步：DNS服务器直接解析该域名，将查询到的ip再原路返回给请求查询的主机

9. 强制缓存和协商缓存 （网易互娱一面 2019.11）

• 强制缓存： 浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通讯；
• 协商缓存： 若是没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，可是并不返回资源内容，它会告知浏览器能够直接从缓存获取；不然返回最新的资源内容
• 关于缓存是从磁盘中获取仍是从内存中获取，查找了不少资料，得出了一个较为可信的结论：Chrome会根据本地内存的使用率来决定缓存存放在哪，若是内存使用率很高，放在磁盘里面，内存的使用率很高会暂时放在内存里面。

10.写一个jsonp的实现 （搜狐一面 2019.12 ）

• 利用了 script 标签没有跨域限制这一“漏洞”来达到与第三方通信的目的。简单地说，该协议就是，容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名包裹json数据，这样客户端就能够随意定制本身的函数自动处理返回的数据了。

var flightHandler = data=>{
      console.log(data);
    }
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script);

结语

还有2件事拜托你们
一：求赞 求收藏 求分享 求留言，让更多的人看到这篇内容
二：欢迎添加个人我的微信
备注“资料”， 300多篇原创技术文章，海量的视频资料便可得到
备注“加群”，我会拉你进技术交流群，群里大牛学霸具在，哪怕您作个潜水鱼也会学到不少东西

相关连接

金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）中
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下

参考资料

11道浏览器原理面试题

这儿有20道大厂面试题等你查收

2020 前端面试 | “HTML + CSS + JS”专题

图解浏览器的工做原理（史上最全）

BAT前端经典面试问题：史上最最最详细的手写Promise教程

webpack 中文网