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

最新推荐文章于 2022-04-26 21:06:54 发布

「已注销」

最新推荐文章于 2022-04-26 21:06:54 发布

阅读量613

点赞数

文章标签： javascript css vue.js css3 reactjs

本文链接：https://blog.csdn.net/weixin_45992710/article/details/103991118

版权

本文整理了2020年大厂Web前端面试的精选题目，涵盖了浏览器、自动化工具、服务端和网络等多个方面。包括浏览器的事件循环、缓存策略、DOM操作、Webpack工作原理等内容，旨在帮助前端开发者准备面试，提升技能，顺利进入大厂。

摘要由CSDN通过智能技术生成

引言

元旦匆匆而过，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 执行完之后执行

参考地址：https://juejin.im/post/5c337ae06fb9a049bc4cd218

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）

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

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

强缓存 可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200。

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