2019前端面试题

最近总结了有关前端面试的相关试题，废话不多说，大家对照着把每个点的相关知识理解下，面试基本没问题：

CSS

盒模型

1. flex布局
2. CSS单位
3. CSS选择器
4. bfc清除浮动
5. 层叠上下文
6. 常见页面布局
7. 响应式布局
8. CSS预处理，后处理
9. CSS3新特性（animation和transition的相关属性，animate和translate）
10. display有哪些取值
11. 相邻的两个inline-block节点为什么会出现间隔，该如何解决？
12. meta viewport移动端适配
13. CSS实现宽度自适应100%，宽高比16：9的比例的矩形？
14. rem布局的优缺点
15. 画三角形
16. 1像素边框问题
17. 让一个div垂直左右居中的方法有哪些？

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事件和documentloaded
18. 函数柯里化
19. call、apply、bind三者用法和区别：角度可为参数、绑定规则（显示绑定和强绑定）、运行效率、运行情况
20. async/await
21. 立即执行函数和使用场景
22. for...in和for..of有什么区别
23. 设计模式（要求说出如何实现，应用，优缺点，）/单例模式实现
24. iframe的缺点有哪些
25. 数组问题（数组去重，数组常用方法，查找数组重复项，扁平化数组，按数组中各项和特定值差值排序）
26. BOM属性对象和方法
27. 服务端渲染
28. 垃圾回收机制
29. eventloop（进程和线程，任务队列）
30. 如恶化快速让字符串变成以千为精度的数字
31. Javascript单线程的理解

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. 重绘与回流

           重绘（repeat）：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少；

           回流（reflow）：当元素的尺寸、解、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需重新页面布局，因此是较重的操作。会触发回流的操作：

                    页面初次渲染；

                    浏览器冲口大小改变；

                    元素尺寸、位置、内容发生改变；

                    元素字体大小变化；

                    添加或者删除可见的dom元素；

                    激活CSS伪类；

                    查询某些属性或调用某些方法；

                    clientWidth,clientHeight,clientTop,clientLeft;

                    offsetWidth,offsetHeight,offsetTop,offsetLeft;

                    scrollWidth,scrollHeight,scrollTop,scrollLeft;

                    getComputedStyle();

                    getBoundingClientRect();

                    scrollTo();

       回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价比较高。

1. 3.防抖与节流
2. cookies、session、sessionStorage、localStorage
3. 浏览器内核

服务端与网络

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的理解

前端性能优化

1. 页面DOM节点太多，会出现什么问题？如何优化
2. 如何做性能监测

微小程序和H5的差异

打包工具webpack

1. 打包原理
2. 打包插件
3. webpack热更新原理
4. 优化构建速度

算法

1. 排序算法
2. 动态规划，参见背包问题
3. 二叉树
4. 加油站问题（贪心算法）
5. 二分法
6. 二叉树遍历
7. 单链表反转
8. 取1000个数字里面的质数
9. 找出数组中和为给定值的两个元素，如（[1，2，3，4，5，6]中找出和为6的两个元素）
10. 线性顺序存储结构和链式存储结构有什么区别？及其优缺点

移动端

1. 自适应
2. pwa
3. 移动端手势