前端面试题（2019篇）

版权声明：本文为博主原创文章，随便转载，出处注明一哈 https://blog.csdn.net/u012551928/article/details/88523968

display:none 和 visibility:hidden的区别

都是元素隐藏，在文档流中，display:none不占位置。visibility:hidden占位置。
性能上，display比visibility差。display控制显示隐藏时，页面会产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）

什么是回流和重绘

重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流。
回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算。

div+css 和 table相比有哪些优势

Table： 结构 table tr td 属性border width align… 在同一个页面中，页面代码冗长，不利于维护，不利于百度搜索引擎优化
div+css：符合新型的web设计标准，页面结构和表现分离。精简代码便于维护，搜索引擎友好，提升页面加载时速度（用户体验）

说你对rem的理解

相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。简单来说，就是一个相对单位，相对根元素子体大小的倍数。
例如：html的font-size:12px；那么使用rem作为单位的，1rem等价于12px，2rem等价于24px；
按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，完美自适应大屏小屏。

px，em，rem的联系和区别

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。特点：

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
   em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前未设置，则相对于浏览器的默认字体尺寸。特点：
4. em的值并不是固定的；
5. em会继承父级元素的字体大小；
   rem：相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。

浏览器的内核分别是什么

1、Trident内核：IE最先开发或使用的，也称IE内核 ，360浏览器使用的也是IE内核；
2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核 ，枫树浏览器、太阳花使用的也是谷歌内核；
3、Gecko内核： Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核；
4、Presto内核：目前只有Opera浏览器采用该内核

CSS3那些新增属性

1. 边框：圆角border-radius，阴影box-shadow，边框图片border-image
2. 背景：背景定位区域background-origin，背景大小支持百分比background-size
3. 文字效果：文字阴影text-shadow，长单词拆分word-wrap
4. 2D转换：transform:对元素进行移动translate()，缩放scale()，转动rotate()，拉伸skew()
5. 3D转换：transform:对元素进行x轴旋转rotateX()，y轴旋转rotateY()
6. 过渡，动画， 多列等等

HTML5那些新增属性

html5新增：canvas绘画，本地离线存储localStorage，sessionStorage，video和audio元素，语义化元素，表单类型（date，time，email等），地理定位等等
移除元素：，

， 等

cookies , sessionStorage和localStorage区别

cookies：数据大小不超过4k，cookies过期之前一直有效，会自动传递到服务器
sessionStorage：存储大小相对cookies大得多（5M或更大），关闭浏览器窗口后自动删除，仅存本地
localStorage：存储大小相对cookies大得多（5M或更大），除非手动删除，关浏览器后不会删除，仅存本地

跨域问题如何解决

1、 通过jsonp跨域
2、 postMessage跨域
3、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
4、 nginx代理跨域：nginx配置解决iconfont跨域 ，nginx反向代理接口跨域
5、 nodejs中间件代理跨域： vue框架的跨域webpack.config.js部分配置
6、 WebSocket协议跨域
详解：https://segmentfault.com/a/1190000011145364

如何优化网页加载速度

get和post的区别

为什么要用多个域名来存储资源

优雅降级和渐进增强？

谈谈垃圾回收机制方式及内存管理

js的基本数据类型

事件代理和普通事件有什么区别

编写一个数组去重的例子。

var arr = [1,2,3,4,5,6,7,8,9,4,3,2,5,2,5,2,10]

编写一个统计字符出现最多的字符，及最多的次数。

var str = ‘asdfssaaasasasasaa’;

闭包

定义：访问另一个函数作用域中变量的函数。即在函数的内部创建另一个函数。

闭包的作用

闭包的优缺点

js继承的几种方式，并解释

ES6的新增那些东西（特性）

ES6的promise的理解和使用

vue的生命周期

Vuex的作用及用途

Vue数据绑定的原理

---

答案及新增面试题，待更新。。。 未完待续。。。