前端面试常问哪些问题？

傷城~ 2021-07-31 20:35 819阅读 0赞

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

作者 | 守望\_2019

链接 | jianshu.com/p/2fcf35f7f5c4

**CSS**

1、盒模型2、flex3、css单位4、css选择器5、bfc 清除浮动6、层叠上下文7、常见页面布局8、响应式布局9、css预处理，后处理10、css3新特性animation和transiton的相关属性animate和translate11、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、arguments5、数据类型判断6、作用域链、闭包、作用域7、Ajax的原生写法8、对象深拷贝、浅拷贝9、图片懒加载、预加载10、实现页面加载进度条11、this关键字12、函数式编程13、手动实现parseInt14、为什么会有同源策略15、怎么判断两个对象是否相等16、事件模型事件委托、代理如何让事件先冒泡后捕获17、window的onload事件和domcontentloaded18、for...in迭代和for...of有什么区别19、函数柯里化20、call apply区别，原生实现bindcall，apply，bind 三者用法和区别：角度可为参数、绑定规则（显示绑定和强绑定），运行效率、运行情况。21、async/await22、立即执行函数和使用场景23、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现24、iframe的缺点有哪些25、数组问题数组去重数组常用方法查找数组重复项扁平化数组按数组中各项和特定值差值排序26、BOM属性对象方法27、服务端渲染28、垃圾回收机制29、eventloop进程和线程任务队列30、如何快速让字符串变成已千为精度的数字

### **ES6** ###

1、声明 let、const2、解构赋值3、声明类与继承：class、extend4、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、localStorage5、浏览器内核

### **服务端与网络** ###

1、常见状态码2、缓存200 From cache和200 ok400,401,403状态码分别代表什么浏览器缓存3、cookie, session, token4、前端持久化的方式、区别5、DNS是怎么解析的6、cdn7、计算机网络的相关协议8、http/https/http2.09、get post区别10、ajax、 axios库11、tcp三次握手，四次挥手流程12、跨域13、前端安全XSS、CSRF14、websocket15、Http请求中的keep-alive有了解吗16、网络分层17、即时通信，除了Ajax和websocket18、模块化，commonJS，es6，cmd，amd

### **Vue** ###

1、vue解决了什么问题2、MVVM的理解3、如何实现一个自定义组件，不同组件之间如何通信的？4、nextTick5、生命周期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、pwa3、移动端手势