美团点评前端烤面筋汇总(已加答案)

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

# 美团面筋

## HTML

- meta的用法?

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

元数据(metadata)是关于数据的信息。

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

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


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

值 | 描述
- | -
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox | 定义复选框。
file | 定义输入字段和 "浏览"按钮,供文件上传。
hidden | 定义隐藏的输入字段。
image | 定义图像形式的提交按钮。
password | 定义密码字段。该字段中的字符被掩码。
radio | 定义单选按钮。
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。


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

标签 | 描述
- | -
`<header>` | 通常被放置在页面或者页面中某个区块元素的顶部,包含整个页面或者区块的标题、简介等信息,起到引导与导航的作用。
`<nav>` | 表示页面的导航,可以通过导航连接到网站的其他页面,或者当前页面的其它部分。
`<aside>` | 所包含的内容不是页面的主要内容、具有独立性,是对页面的补充。
`<footer>` | 一般被放置在页面或者页面中某个区块的底部,包含版权信息、联系方式等信息。
`<article>` | 表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,可以被独立的发布或者重新使用文章标记标签。
`<section>` | 是一个主题性的内容分组,通常用于对页面进行分块或者对文章等进行分段


## 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) 。


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


- 水平垂直居中

- 水平居中
- 行内元素的水平居中,块级父元素设置: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;


- css动画


- grid的所有属性


- 三栏布局


- position定位


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


- 实现一个上中下左右的经典布局
- 实现一个类似百度的搜索框,点击后下面出现一个div,我要怎么让我点到旁边的时候他消失
- 三个不同高度的div使其在一排垂直居中的方法
- 盒模型
- 层叠上下文
- flex了解吗?讲一下
- display属性有哪些?
- position属性有哪些?每一个属性的作用,使用?
- css中引入样式有哪几种方法,不考虑预处理和正常的三种方法,有没有其他的方法?
- css单位,详细说一下每一种的使用?
- css选择器优先级,说说有几种方法可以超过id选择器?
- position的几个属性?分别对应的使用场景(布局),如何去使用?
- 实现一个可以设置样式的弹框组件
- 栅格,CSS大概怎么分的

## Javascript

- promise如何取消?


- co模块内部是如何运行的?
- await内部的原理?
- 异步的解决方案?async与await的使用?


- JS中substr与substring的区别?
- javascript中childNodes与children的区别?

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

- map和foreach的区别,像foreach一样影响原数组的有哪些方法?
- getElementsByName和querySelectorAll的区别?


- 实现一个on和emit
- 事件模型,捕获与冒泡,哪些事件没有冒泡,没有冒泡的原因是什么
- 事件***,中间一个不需要事件怎么办,***的元素内部还有元素怎么办
- addEventLinsener与普通事件绑定的区别


- 原型链
- ajax怎么请求数据的,reayState


- 防抖节流
- const
- 说一些常用array的api
- class interface function的区别
- 面向对象的三大特性
- stopPropagatio包括捕获吗


- 在原型链上添加一个方法让他每隔两秒就打印一次name属性
- 一个数组怎么实现下标每隔3倒序输出一次
- Event loop是什么
- 箭头函数和普通函数区别


- 原生dom,输出每一个li里的内容(手写)
- 用settimeout实现一个setinterval (在实现这个过程中,为什么settimeout不会发生栈溢出现象)


- 解释一下instanceOf的原理(手动实现一个instanceOf)
- 解释一下hasownproperty
- ES6新特性有哪些?
- 判断数据类型的方法
- typeof可以得到什么
- call,apply,bind bind怎么实现的
- 闭包

## Javascript框架

- 双向数据绑定


- vue组件通信


- spa应用,v-dom,diff算法,mvvm,组件化开发
- vue响应式原理,defineproperty,proxy,对比一下两者
- 抛开react的diff算法,怎么实现dom对比


- eventBus跟vuex的区别


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


- keep-alive


- computed watch
- 使用路由做前端拦截的具体实现是什么?
- vue-router实现的几种方式和原理?


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

## 浏览器

- 浏览器的同源策略?
- 跨域有哪些方法?document.domain的限制是啥?CORS的实现原理?
- 跨域问题。手写jsonp。说说***服务器具体那种。


- 回流重绘
- 实现页面多ajax请求完成后渲染页面
- CSS文件没下载完会影响CSS树吗?
- 浏览器机制


- 浏览器存储的几种方式?每一种存储方式的使用场景,有什么注意点?
- 浏览器安全上的几种问题?如何解决?(这里我觉得需要将安全问题的始末讲出来,最好不要解释概念,每一种措施实施的根据是什么?)


## 编译原理

- 词法分析变成抽象语法树的原因
- es6如何转换es5?babel的原理是啥?


## 计算机网络

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


- http2与http1.1的区别?


- url的定义,规范?


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


- http报文组成(比如cookie设置哪些,生命周期,http-only,又追问xss。connection取值。缓存机制相关的,哪些字段是游览器缓存哪些是***服务器缓存优先级如何)
- http状态码
- 强缓存和协商缓存


- post传值都有哪些类型,如果请求参数错了会有什么提示
- ip层和网络层是干什么的
- http和https


## 操作系统

- 冯诺依曼计算机结构

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

- 进程跟线程


- 死锁


## 版本控制

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


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


- 远程分支回退版本


## 其他

- 长列表性能优化?
- 图片有哪些格式?哪些可以支持透明?
- cookie有哪些属性?如何拿到cookie?

- 前端性能优化的几个方面?
- 体验优化和性能优化的区别?白屏时间,首屏时间和可交互时间的定义?
- 页面白屏如何处理,想到的场景以及处理办法


- utf-8编码?为什么会出现乱码的情况?
- 从url输入到前端页面展示的过程?


- lru是啥?
- 网页上边出现广告的现象见没见过,什么原因。
- 工程化的理解


- 设计模式还有哪些
- 如果打包的js文件过大如何进行优化


## Node

- node的Stream和Buffer区别


- node怎么创建子进程


## 数据结构和算法

- 快排
- 求1到N之间的素数,方法要求复杂度为O(n)
- 乱序输出一个数组,要求输出每个数字的概率相同
- O(n)方法找出有序数组第一个指定数字
- 实现一个乱序
- 实现一个函数,对一个已排序的且含有重复数字的数组,找到重复数字第一次出现的位置(二分查找)



#美团##校招##前端工程师##面经#
全部评论
mark~
点赞 回复
分享
发布于 2019-08-24 10:56
这么夸张,这么多题,他不给你ssp老哥你觉得你回去嘛?😂
点赞 回复
分享
发布于 2019-08-24 11:34
百信银行
校招火热招聘中
官网直投
问也问傻了啊,这么多题
点赞 回复
分享
发布于 2019-08-24 11:34
光收藏不点赞太过分了…整理答案ing…
点赞 回复
分享
发布于 2019-08-24 11:37
楼主带好人!明天面,好好抱佛脚一波
点赞 回复
分享
发布于 2019-08-26 10:24
楼主很👍,面试难吗?
点赞 回复
分享
发布于 2019-09-07 10:43

相关推荐

32 121 评论
分享
牛客网
牛客企业服务