2019前端面试题

Stella981
• 阅读 264

2019前端面试题

前言

为了吸引大家点进来,起了一个刚(sao)气的标题。其实我觉得我这个文章挺值得看看的,看看又不长肉呀😄。
我是上周开始投简历,一周结束面试,在家等offer啦。坐标杭州,杭州的公司其实投来投去都是那几家,小厂不想去,大厂进不去[抠鼻ing],加上互联网寒冬,其实找工作确实不好找啊。
面试其实是实力和运气并存的事情,所以一方面我们要做好知识的准备,另一方面也要抓住时机,该出手就出手,毕竟现在好多公司hc都缩减。


css

  • 1、盒模型

  • 2、flex

  • 3、css单位

  • 4、css选择器

  • 5、bfc 清除浮动

  • 6、层叠上下文

  • 7、常见页面布局

  • 8、响应式布局

  • 9、css预处理,后处理

  • 10、css3新特性

  • animation和transiton的相关属性

  • animate和translate

  • 11、display哪些取值

  • 12、相邻的两个inline-block节点为什么会出现间隔,该如何解决

  • 13、meta viewport 移动端适配

  • 14、CSS实现宽度自适应100%,宽高16:9的比例的矩形

  • 15、rem布局的优缺点

  • 16、画三角形

  • 17、1像素边框问题

html

  • 1、语义化

  • 2、新标签新特性

  • 3、input和textarea的区别

  • 4、用一个div模拟textarea的实现

  • 5、移动设备忽略将页面中的数字识别为电话号码的方法

JS

  • 1、原型/原型链/构造函数/实例/继承

  • 2、有几种方式可以实现继承

  • 3、用原型实现继承有什么缺点,怎么解决

  • 4、arguments

  • 5、数据类型判断

  • 6、作用域链、闭包、作用域

  • 7、Ajax的原生写法

  • 8、对象深拷贝、浅拷贝

  • 9、图片懒加载、预加载

  • 10、实现页面加载进度条

  • 11、this关键字

  • 12、函数式编程

  • 13、手动实现parseInt

  • 14、为什么会有同源策略

  • 15、怎么判断两个对象是否相等

  • 16、事件模型

  • 事件委托、代理

  • 如何让事件先冒泡后捕获

  • 17、window的onload事件和domcontentloaded

  • 18、for...in迭代和for...of有什么区别

  • 19、函数柯里化

  • 20、call apply区别,原生实现bind

  • call,apply,bind 三者用法和区别:角度可为参数、绑定规则(显示绑定和强绑定),运行效率、运行情况。

  • 21、async/await

  • 22、立即执行函数和使用场景

  • 23、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现

  • 24、iframe的缺点有哪些

  • 25、数组问题

  • 数组去重

  • 数组常用方法

  • 查找数组重复项

  • 扁平化数组

  • 按数组中各项和特定值差值排序

  • 26、BOM属性对象方法

  • 27、服务端渲染

  • 28、垃圾回收机制

  • 29、eventloop

  • 进程和线程

  • 任务队列

  • 30、如何快速让字符串变成已千为精度的数字

ES6

  • 1、声明 let、const

  • 2、解构赋值

  • 3、声明类与继承:class、extend

  • 4、Promise的使用与实现

  • 5、generator(异步编程、yield、next()、await 、async)

  • 6、箭头函数this指向问题、拓展运算符

  • 7、map和set有没有用过,如何实现一个数组去重,map数据结构有什么优点?

  • 8、ES6怎么编译成ES5,css-loader原理,过程

  • 9、ES6转成ES5的常见例子

  • 使用es5实现es6的class

浏览器

  • 1、输入url到展示页面过程发生了什么?

  • 2、重绘与回流

  • 重绘(repaint): 当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此 损耗较少

  • 回流(reflow): 当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。会触发回流的操作:
    * 页面初次渲染
    * 浏览器窗口大小改变
    * 元素尺寸、位置、内容发生改变
    * 元素字体大小变化
    * 添加或者删除可见的 dom 元素
    * 激活 CSS 伪类(例如::hover)
    * 查询某些属性或调用某些方法
    * clientWidth、clientHeight、clientTop、clientLeft
    * offsetWidth、offsetHeight、offsetTop、offsetLeft
    * scrollWidth、scrollHeight、scrollTop、scrollLeft
    * getComputedStyle()
    * getBoundingClientRect()
    * scrollTo()
    回流必定触发重绘,重绘不一定触发回流。重绘的开销较小,回流的代价较高。

  • 3、防抖与节流

  • 4、cookies、session、sessionStorage、localStorage

  • 5、浏览器内核

服务端与网络

  • 1、常见状态码

  • 2、缓存

  • 200 From cache和200 ok

  • 400,401,403状态码分别代表什么

  • 浏览器缓存

  • 3、cookie, session, token

  • 4、前端持久化的方式、区别

  • 5、DNS是怎么解析的

  • 6、cdn

  • 7、计算机网络的相关协议

  • 8、http/https/http2.0

  • 9、get post区别

  • 10、ajax、 axios库

  • 11、tcp三次握手,四次挥手流程

  • 12、跨域

  • 13、前端安全XSS、CSRF

  • 14、websocket

  • 15、Http请求中的keep-alive有了解吗

  • 16、网络分层

  • 17、即时通信,除了Ajax和websocket

  • 18、模块化,commonJS,es6,cmd,amd

Vue

  • 1、vue解决了什么问题

  • 2、MVVM的理解

  • 3、如何实现一个自定义组件,不同组件之间如何通信的?

  • 4、nextTick

  • 5、生命周期

  • 6、虚拟dom的原理

  • 7、双向绑定的原理?数据劫持?

  • 8、组件通信

  • 父->子

  • 子->父

  • 非父子组件

  • 9、Proxy 相比于 defineProperty 的优势

  • 10、watch computed区别

  • 11、virtual dom 原理实现

  • 12、vue-router(hash, HTML5 新增的 pushState

  • 单页应用,如何实现其路由功能---路由原理

  • vue-router如何做用户登录权限等

  • 你在项目中怎么实现路由的嵌套

  • 13、vuex的理解

前端性能优化

  • 页面DOM节点太多,会出现什么问题?如何优化?

  • 如何做性能监测

SEO和语义化

这个没被问过

微信小程序

微信小程序和h5差异,如果有开发weex的经验,可能会加上weex

git

一些基本命令

打包工具webpack

  • 1、打包原理

  • 2、打包插件

  • 3、webpack热更新原理

  • 4、优化构建速度

算法

  • 1、排序算法

  • 2、动态规划,参见背包问题

  • 3、二叉树

  • 4、加油站问题(贪心算法)

  • 5、二分法

  • 6、二叉树遍历

  • 7、单链表反转

  • 8、取1000个数字里面的质数

  • 9、找出数组中和为给定值的两个元素,如:[1, 2, 3, 4, 5]中找出和为6的两个元素。

  • 10、线性顺序存储结构和链式存储结构有什么区别?以及优缺点

移动端

  • 1、自适应

  • 2、pwa

  • 3、移动端手势

附加题

  • 1、无限滚动方案

  • 2、如何处理兼容性问题

  • 3、你遇到过最难的问题是什么

  • 4、ES6 class与ES5 function区别及联系

  • 5、vue怎么监听数组

  • 6、写过webpack loader吗

  • 7、微信网页版登录机制思考

后记

如果你刷到这里,你的内心os是不是:前端知识点好多啊,我记不住啊!大兄弟,我和你一样,我也记不住,经常学了就忘,没事,继续学就好了。。。
我也是一边面试一边增加的,所以可能有的知识点分类不合适,请包涵哈。
之前做这些知识点罗列的时候,也没想发出来,只是单纯的做点笔记。这些知识点有的来自于其他前端小伙伴写的面经,有的是我自己去面试的时候被问到的。刚准备面试的时候,内心慌的不行啊!但是后来发现,"多面面就好了"这句话简直太正确了,越面越顺,而且自己心情也会比较放松了。 为什么扯这么多呢,其实就想告诉正在找工作的同学们,坚持✊

源自:https://juejin.im/post/5cbff661e51d456e693f48ec

声明:文章著作权归作者所有,如有侵权,请联系小编删除。

感谢 · 转发欢迎大家留言

2019前端面试题

本文分享自微信公众号 - web前端学习圈(web-xxq)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
Stella981 Stella981
1年前
2021 最顶级 React 组件库推荐
点上方蓝字关注公众号「 `前端从进阶到入院` 」 作者丨Max Rozen 译者丨王强 策划丨小智 Ant Design ![](https://oscimg.oschina.net/oscnet/a85c35f2-3bd0-4e5d-a6a1-e5e68a24119b.png) 项目链接: * Ant Design * h
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
AssemblyScript 入门指南[每日前端夜话0xEB]
**每日前端夜话****0xEB** **每日前端夜话,陪你聊前端。** **每天晚上18:00准时推送。** 正文共:2459 字 预计阅读时间:10 分钟 作者:Danny Guo 翻译:疯狂的技术宅 来源:logrocket ![](https://oscimg.oschina.net/oscnet/b880277c594152a503
Stella981 Stella981
1年前
Node.js 12中的ES模块[每日前端夜话0x9E]
**每日前端夜话****0x9E** **每日前端夜话,陪你聊前端。** **每天晚上18:00准时推送。** 正文共:2552 字 预计阅读时间:10 分钟 作者:Brian De Sousa 翻译:疯狂的技术宅 来源:logrocket ![](https://oscimg.oschina.net/oscnet/2ccaf94c-ecd3
Wesley13 Wesley13
1年前
CSS 奇思妙想:超级酷炫的边框动画
点上方蓝字关注公众号「`前端从进阶到入院`」 精选原创好文助你进入大厂 文章转载自公众号「iCSS前端趣闻」 今天逛**博客网站 -- shoptalkshow**\[1\],看到这样一个界面,非常有意思: ![](https://oscimg.oschina.net/oscnet/9655b35a-f5a0-4599-9ff5-5c144a3f7c
可莉 可莉
1年前
2019前端面试题
![](https://oscimg.oschina.net/oscnet/33e35b2f-042f-4463-b854-5a6f2f7ab2fe.jpg) ------------------------------------------------------------------------------- **前言** ------ 为了吸引
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue