2019-08-26 17:56 已编辑门头沟学院前端工程师

关注

美团点评前端烤面筋汇总（已加答案）

扒了几个大佬的面筋汇总了一下，希望大伙踊跃给出答案~

# 美团面筋

## HTML

- meta的用法？

`<meta>` 元素可提供有关页面的元信息（meta-information），元数据不会显示在页面上，但是对于机器是可读的。

元数据（metadata）是关于数据的信息。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

参考：https://www.cnblogs.com/lihuijuan/p/9589978.html

- input标签的type有哪些类型？

值 | 描述

- | -

button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

checkbox | 定义复选框。

file | 定义输入字段和 "浏览"按钮，供文件上传。

hidden | 定义隐藏的输入字段。

image | 定义图像形式的提交按钮。

password | 定义密码字段。该字段中的字符被掩码。

radio | 定义单选按钮。

reset | 定义重置按钮。重置按钮会清除表单中的所有数据。

submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。

text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

参考：https://www.w3school.com.cn/tags/att_input_type.asp

- 说一些H5的语义化标签以及他们的作用和在浏览器的表现

标签 | 描述

- | -

`<header>` | 通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。

`<nav>` | 表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。

`<aside>` | 所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。

`<footer>` | 一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

`<article>` | 表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

`<section>` | 是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段

参考：https://www.jianshu.com/p/c41b88217834

## CSS

- 知道BFC和IFC吗

- margin坍塌

可以把 `BFC` 想象成页面内的迷你布局。一旦一个元素创建了一个 `BFC` ，所有的东西都包含在它里面。正如我们所看到的，包括浮动元素，它们不再从盒子的底部伸出。

在元素中使用 position: absolute 、 position: fixed 、 display: inline-block 、 display: table-cell 或 display: table- title 。

使用 column-span: all ，用于跨多列布局的列。 Flex 和 Grid 的项还创建了类似于 BFC 的东西，只不过它们分别被描述为 Flex格式化上下文(Flex Formatting Context, FFC) 和网格格式化上下文(Grid Formatting Context, GFC) 。

参考：https://juejin.im/post/5d4425266fb9a06afa326a2c

- less和scss用过吗？区别是啥？

参考：https://www.jianshu.com/p/61c793799cad

- 水平垂直居中

- 水平居中

- 行内元素的水平居中，块级父元素设置：text-align:center;

- 块状元素的水平居中，需要居中的元素设置margin:0 auto;

- 多个块状元素的水平居中，水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center

- 使用flexbox实现多个块状元素的水平居中，父容器设置justify-content:center; display:flex;

- 已知高度宽度元素的水平垂直居中

- 绝对定位与负边距实现，父元素使用相对定位，子元素利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。

- 绝对定位与margin，父元素使用相对定位，子元素利用绝对定位，设置margin为auto，距离top、right、bottom、left为0

- 未知高度和宽度元素的水平垂直居中

- 当要被居中的元素是inline或者inline-block元素，将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

- Css3，利用Css3的transform，设置父元素相对定位，子元素绝对定位，top: 50%;left: 50%;transform: translate(-50%, -50%);。

- flex布局，父元素设置display:flex;justify-content:center;align-items: center;

参考：https://www.cnblogs.com/coco1s/p/4444383.html

- css动画

参考：https://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

- grid的所有属性

参考：https://www.html.cn/archives/8510/

- 三栏布局

参考：https://zhuanlan.zhihu.com/p/25070186

- position定位

参考：https://www.jianshu.com/p/159dfd1f01ff

- rem以及如何实现移动端适配

参考：https://imweb.io/topic/5a523cc0a192c3b460fce3a5

- 实现一个上中下左右的经典布局

- 实现一个类似百度的搜索框，点击后下面出现一个div，我要怎么让我点到旁边的时候他消失

- 三个不同高度的div使其在一排垂直居中的方法

- 盒模型

- 层叠上下文

- flex了解吗？讲一下

- display属性有哪些？

- position属性有哪些？每一个属性的作用，使用？

- css中引入样式有哪几种方法，不考虑预处理和正常的三种方法，有没有其他的方法？

- css单位，详细说一下每一种的使用？

- css选择器优先级，说说有几种方法可以超过id选择器？

- position的几个属性？分别对应的使用场景（布局），如何去使用？

- 实现一个可以设置样式的弹框组件

- 栅格，CSS大概怎么分的

## Javascript

- promise如何取消？

参考：https://blog.csdn.net/l908825925/article/details/80619821

- co模块内部是如何运行的？

- await内部的原理？

- 异步的解决方案？async与await的使用？

协程：https://www.itcodemonkey.com/article/4620.html

参考：https://blog.rexskz.info/how-babel-transform-async-await-to-es5.html

- JS中substr与substring的区别？

- javascript中childNodes与children的区别？

children和childNodes最大的区别是，无论什么浏览器使用，都不会把空白节点算进去，也不需要nodeType来帮助判断，直接使用。

参考：https://www.jianshu.com/p/52461c53e02e

- map和foreach的区别，像foreach一样影响原数组的有哪些方法？

- getElementsByName和querySelectorAll的区别？

参考：https://www.zhihu.com/question/24702250/answer/28695133

- 实现一个on和emit

- 事件模型，捕获与冒泡，哪些事件没有冒泡，没有冒泡的原因是什么

- 事件***，中间一个不需要事件怎么办，***的元素内部还有元素怎么办

- addEventLinsener与普通事件绑定的区别

参考：https://www.cnblogs.com/bfgis/p/5460191.html

- 原型链

- ajax怎么请求数据的，reayState

参考：https://blog.csdn.net/Fabulous1111/article/details/78700922

- 防抖节流

- const

- 说一些常用array的api

- class interface function的区别

- 面向对象的三大特性

- stopPropagatio包括捕获吗

参考：https://www.cnblogs.com/zhuzhenwei918/p/6139880.html

- 在原型链上添加一个方法让他每隔两秒就打印一次name属性

- 一个数组怎么实现下标每隔3倒序输出一次

- Event loop是什么

- 箭头函数和普通函数区别

参考：https://juejin.im/post/5c979300e51d456f49110bf0#heading-1

- 原生dom,输出每一个li里的内容（手写）

- 用settimeout实现一个setinterval （在实现这个过程中，为什么settimeout不会发生栈溢出现象）

参考：http://qingbob.com/difference-between-settimeout-setinterval/

- 解释一下instanceOf的原理（手动实现一个instanceOf）

- 解释一下hasownproperty

- ES6新特性有哪些？

- 判断数据类型的方法

- typeof可以得到什么

- call，apply，bind bind怎么实现的

- 闭包

## Javascript框架

- 双向数据绑定

参考：https://github.com/DMQ/mvvm

- vue组件通信

参考：https://juejin.im/post/5bd18c72e51d455e3f6e4334

- spa应用，v-dom，diff算法，mvvm，组件化开发

- vue响应式原理，defineproperty，proxy，对比一下两者

- 抛开react的diff算法，怎么实现dom对比

参考：https://github.com/aooy/blog/issues/2

- eventBus跟vuex的区别

参考：https://juejin.im/post/5c09cb73518825159512778b

- vuex的有哪些作用和使用场景，实现原理是什么？

参考：https://tech.meituan.com/2017/04/27/vuex-code-analysis.html

- keep-alive

参考：https://ustbhuangyi.github.io/vue-analysis/extend/keep-alive.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

- computed watch

- 使用路由做前端拦截的具体实现是什么？

- vue-router实现的几种方式和原理？

参考：https://zhuanlan.zhihu.com/p/37730038

- axios的使用？原理简单讲一下？

## 浏览器

- 浏览器的同源策略？

- 跨域有哪些方法？document.domain的限制是啥？CORS的实现原理？

- 跨域问题。手写jsonp。说说***服务器具体那种。

参考：https://github.com/ljianshu/Blog/issues/55

- 回流重绘

- 实现页面多ajax请求完成后渲染页面

- CSS文件没下载完会影响CSS树吗？

- 浏览器机制

参考：https://github.com/ljianshu/Blog/issues/51

- 浏览器存储的几种方式？每一种存储方式的使用场景，有什么注意点？

- 浏览器安全上的几种问题？如何解决？（这里我觉得需要将安全问题的始末讲出来，最好不要解释概念，每一种措施实施的根据是什么？）

参考：https://github.com/ljianshu/Blog/issues/56

## 编译原理

- 词法分析变成抽象语法树的原因

- es6如何转换es5？babel的原理是啥？

polyfill参考：http://www.fly63.com/article/detial/847

Babel参考：http://www.fly63.com/article/detial/197

## 计算机网络

- http能取消吗？如何取消？

参考：https://www.cnblogs.com/laden666666/p/5485213.html

- http2与http1.1的区别？

参考：https://developers.google.com/web/fundamentals/performance/http2/

- url的定义，规范？

参考：http://www.ruanyifeng.com/blog/2014/05/restful_api.html

- tcp过程，http过程，两者啥关系

参考：https://blog.csdn.net/younglao/article/details/79453777

- http报文组成（比如cookie设置哪些，生命周期，http-only，又追问xss。connection取值。缓存机制相关的，哪些字段是游览器缓存哪些是***服务器缓存优先级如何）

- http状态码

- 强缓存和协商缓存

缓存参考：https://github.com/ljianshu/Blog/issues/23

- post传值都有哪些类型，如果请求参数错了会有什么提示

- ip层和网络层是干什么的

- http和https

参考：https://github.com/ljianshu/Blog/issues/50

## 操作系统

- 冯诺依曼计算机结构

计算机由控制器、运算器、存储器、输入设备、输出设备五部分组成

- 进程跟线程

参考：https://cyc2018.github.io/CS-Notes/#/notes/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%20-%20%E8%BF%9B%E7%A8%8B%E7%AE%A1%E7%90%86?id=_3-%e5%8c%ba%e5%88%ab

- 死锁

参考：https://cyc2018.github.io/CS-Notes/#/notes/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%20-%20%E6%AD%BB%E9%94%81

## 版本控制

- git工作流程，常用的git命令有哪些，rebase的原理？

参考：https://segmentfault.com/a/1190000005937408

- git合并，发生冲突之后怎么处理

参考：https://www.git-tower.com/learn/git/ebook/cn/command-line/advanced-topics/merge-conflicts

- 远程分支回退版本

参考：https://blog.csdn.net/fuchaosz/article/details/52170105

## 其他

- 长列表性能优化？

- 图片有哪些格式？哪些可以支持透明？

- cookie有哪些属性？如何拿到cookie？

- 前端性能优化的几个方面？

- 体验优化和性能优化的区别？白屏时间，首屏时间和可交互时间的定义？

- 页面白屏如何处理，想到的场景以及处理办法

性能优化参考：https://github.com/ljianshu/Blog/issues/9

- utf-8编码？为什么会出现乱码的情况？

- 从url输入到前端页面展示的过程？

参考：https://github.com/ljianshu/Blog/issues/24

- lru是啥？

- 网页上边出现广告的现象见没见过，什么原因。

- 工程化的理解

参考：https://github.com/fouber/blog/issues/10

- 设计模式还有哪些

- 如果打包的js文件过大如何进行优化

参考：https://blog.csdn.net/itKingOne/article/details/70145793

## Node

- node的Stream和Buffer区别

参考：https://segmentfault.com/q/1010000004017745

- node怎么创建子进程

参考：https://elemefe.github.io/node-interview/#/sections/zh-cn/process

## 数据结构和算法

- 快排

- 求1到N之间的素数，方法要求复杂度为O（n）

- 乱序输出一个数组，要求输出每个数字的概率相同

- O（n）方法找出有序数组第一个指定数字

- 实现一个乱序

- 实现一个函数，对一个已排序的且含有重复数字的数组，找到重复数字第一次出现的位置（二分查找）

#美团##校招##前端工程师##面经#

全部评论

推荐最新楼层

快来个offer吧~

Shopee_FSG_前端开发工程师

mark~

点赞回复分享

发布于 2019-08-24 10:56

被辞退待业中

西华大学前端工程师

这么夸张，这么多题，他不给你ssp老哥你觉得你回去嘛？😂

点赞回复分享

发布于 2019-08-24 11:34

被辞退待业中

西华大学前端工程师

问也问傻了啊，这么多题

点赞回复分享

发布于 2019-08-24 11:34

旺仔牛奶真甜

楼主

门头沟学院前端工程师

光收藏不点赞太过分了…整理答案ing…

点赞回复分享

发布于 2019-08-24 11:37

Callest

武汉大学前端工程师

楼主带好人！明天面，好好抱佛脚一波

点赞回复分享

发布于 2019-08-26 10:24

逆流而上的我们

华中科技大学前端工程师

楼主很👍，面试难吗？

点赞回复分享

发布于 2019-09-07 10:43

10-01 16:36

门头沟学院前端工程师

25届双非前端就业经验（实习转正）分享

前言：本人bg：ip地双非，绩点综测中上，大学期间有参与竞赛但都未获奖，项目玩具类型。下面主要分享我读大学的感受以及找实习的经历，希望能对26、27届的学弟学妹们有些帮助。OS：我真心觉得秋招前的暑期实习是一个非常关键的机会，尤其是对之前没有实习经历，学历不占优的同学来说。暑期实习相对秋招难度会低些，对待无实习经历的同学来说更宽容，同时提供的转正机会给了我们一次跳脱学历的表现机会，个人非常推荐，但也不能一概而论（好处和坏处我后面再详细分析）。文笔不好，写得又比较长，主要分享心路历程和经验，大家将就着看，觉得不错的可以点点赞大学经历：我从小是对计算机过分痴迷，经常是在网络上找自己喜欢的知...

小嘻米：感谢佬的分享

如果实习可以转正，你会不会放弃秋招想实习转正，又想准备秋招，我该怎么办

点赞评论收藏

10-12 11:38

北京交通大学前端工程师

背完这些前端面试题秋招面试赢麻了

只有参加过大厂面试的同学才懂这份web前端面试高频题的含金量吧！#前端##前端面试##前端开发##web前端#

点赞评论收藏

10-17 18:24

已编辑

门头沟学院 Web前端

自我介绍1.类似于百度的搜索功能怎么实现2.setTimeout和setIntevral区别，setIntevral(0)会怎样，一个函数放在里面和不放在里面的区别？3.父子组件的生命周期4.怎么优化首次加载时间，不能用减少请求和压缩图片的方式，要怎么排查5.webpack除了打包还能干什么6.vue文件是怎么解析的7.webpack怎么配置8.ref和reactive的区别？9.什么是复杂对象10.为什么ref有.value11.购物车场景怎么实现12.总价计算是前端实现的吗 回答了是13.前端实现时.如果计算价格时数据发生变化怎么办？14.怎么实现0点秒杀功能15.如果我把系统时间改成了0点怎么办16.怎么判断是数组还是对象？直接说代码实现17.null和undefined的区别18.事件循环的循环怎么理解19.防抖怎么实现

点赞评论收藏

10-06 18:13

重庆移通学院 Web前端

我想请问一下 为什么会投递失败呀，是被拉黑了吗 有没有友友有类似的问题

点赞评论收藏

10-14 16:55

电子科技大学前端工程师

招银前端时间线许愿一个oc

0902 笔试完成0927 一面1011 线下二面+hr1013 资料审核

点赞评论收藏

121

招聘动态

字节跳动

2025校园招聘

阿里云管培生

2025届校园招聘

快手Star

2025届招聘

快手

销售类投递专区

富士通（西安）

2025校园招聘

全站热榜

正在热议

# 25届秋招总结 #

377071次浏览 3742人参与

# 如果再来一次，你还会选择这个工作吗？ #

# 如果你有一天可以担任公司的CEO，你会做哪三件事？ #

# 听到哪句话就代表面试稳了or挂了？ #

# 如果有时光机，你最想去到哪个年纪？ #