前端面试题（附答案）持续更新中……

前端面试笔记

• 前言
• 一、HTML篇
• • 1.语义话的目的是什么？?
  • 2.HTML5新特征???
  • 3.cookie与sessionStorage和localStorage的区别???
• 二、CSS篇
• • 1.css有哪些基本的选择器，执行先后顺序？?
  • 2.垂直居中DIV???
  • 3.两栏布局左边固定右边自适应??
  • 3.三栏布局左右固定中自适应??
  • 4.常用的块与行属性内标签有哪些？有什么特征??
  • 5.清除浮动???
  • 6.CSS3新特征???
  • 7.介绍一下盒模型??
  • 8.CSS中有哪些长度单位？??
  • 9.display:none和visibility:hidden的区别?
  • 10. 用CSS 实现长宽为浏览器窗口一半的正方形?
  • 11. 用CSS 实现高度为0.5像素的线条?
  • 12. 用CSS 实现三角形?
  • 13. 伪类和伪元素的区别??
  • 13. 重绘和重排是什么？如何避免？??
• 三、JS篇
• • 1.ES6新特性？???
  • 2.闭包的理解??
  • 3.call()、apply()、bind（）的区别?
  • 4.原型，原型链???
  • 5.JS基本数据类型??
  • 6.export和export default的区别?
  • 7.箭头函数和普通函数的区别??
  • 8.GET和POST的区别???
  • 9.forEach和map的区别?
  • 10.JS基本数据类型的比较??
  • 11.对象的继承?
  • 12.简述一下你理解的面向对象??
  • 13. == 和 ===的区别?
  • 14. 数组有哪些方法??
  • 15. 普通的数组去重（笔试一般都会有）??
  • 16. Promise???
  • 17.JS中new操作符有什么用？??
  • 18.JS获取HTML DOM元素的方法??
  • 19.事件捕获和事件冒泡??
  • 20.虚拟dom?
  • 21.排序方式?
  • 22.数组操作方法会改变原数组??
  • 23.JS有几种方法判断变量的类型？???
  • 24.如何判断一个对象是否存在？?
• 三、计算机网络与其他知识篇
• • 1.HTTP与HTTPS?
  • 2.TCP与UDP的区别?
  • 3.HTTP常见的状态码?
  • 4.如何解决跨域??
  • 5.网页从输入url到页面加载发生了什么??
  • 6.HTTP 传输过程?
  • 7.浏览器如何渲染页面的？?
  • 8.对MVC和MVVM的理解??
  • 9.深拷贝，浅拷贝???
  • 10.防抖与节流???
  • 11.性能优化??
  • 12.webpack是怎么打包的，babel又是什么?
  • 13.git 和 svn的区别?
  • 14.webSocket ?
  • 15.require和import区别?
  • 16.事件循环（Event Loop）???
  • 17.什么是单页面应用（SPA）?
  • 18.什么叫优雅降级和渐进增强？?
• 四、VUE篇
• • 1.数据双向绑定原理???
  • 2. vue生命周期???
  • 3.组件之间如何传值???
  • 4.路由之间如何传参??
  • 5.谈一谈VUEX??
  • 6.如何解决vuex页面刷新数据丢失问题？??
  • 7.computed和watch的区别？???
  • 8.如何封装axios？?
  • 9.Route和router的区别?
  • 10.v-show和v-if的区别?
  • 11.vue中数据变了但是视图不跟新怎么解决？?
  • 12.vue中data为什么是函数而不是对象？??
  • 13.vue中父子组件传值，父组件异步请求，子组件不能实时更新怎么解决？（vue中数据不能实时更新怎么解决？）???
  • 14.父子组件传参emit如何传多个参数？?
  • 15.Vue 路由跳转方式??
  • 16.条件渲染v-if 与 v-for 优先级?
  • 17.Vue 中 $nextTick 作用与原理？???
  • 18.Vue 中 for循环为什么加 key？??
• 五、REACT篇
• • 1.React的生命周期(版本17.0.2)???
  • 2.React如何获取组件对应的DOM元素？??
  • 3.React中可以在render访问refs吗？为什么？??
  • 4.React中什么是受控组件和非控组件？??
  • 5.谈一谈React的状态提升？??
  • 6.为什么要使用虚拟DOM？(什么是 Virtual DOM？)??
• 六、其它篇
• • 1.开发中遇到的bug？??
  • • 项目中或者地图中遇到引入如图片不显示。
    • 合并多个对象并去重
    • 移动端1px问题
    • 移动端点击穿透问题
    • 项目中遇到bug总结：
• 后言
• • 为什么离职？
  • 面试结尾—— 面试官问：还有什么要问的？
• 总结

前言

关于前端面试的题，这里整理了一些干货，经常被问到的一些问题，出现频率比较高的问题，如有不足之处，请大家指出，持续更新…（ps：一到三颗代表重要性,选择性了解，掌握，前端需要知道的知识）

一、HTML篇

1.语义话的目的是什么？

答：用正确的标签做正确的事。

提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验；有利于SEO ，便于搜索引擎爬虫爬取有效信息。

2.HTML5新特征

1. Canvas绘图以及SVG绘图。
2. 拖放（Drag and drop）API
3. 语义化标签（header、nav、footer、article、section）
4. 音频、视频（audio、video）API
5. 地理定位（Geolocation）
6. 本地离线存储（localStorage）,长期存储数据，关闭浏览器后不丢失。
7. 会话储存（sessionStorage）,数据在关闭浏览器后自动删除。
8. 表单控件（calendar、date、time、email、url、search）
9. 新技术如Web Worker、Web Socket。（关于Web Socket使用可以看这篇文章浅谈Web Socket。）

3.cookie与sessionStorage和localStorage的区别

1. 保存方式
   cookie存放在客户的浏览器上。
   session都在客户端中保存，不参与服务器通讯。

2. 生命周期
   cookie可设置失效时间
   localStorage除非手动清除否则永久保存
   sessionStorage关闭当前页面或浏览器后失效

3. 存储的大小
   cookie 4kb左右
   session 5M

4. 易用性
   cookie需自己封装
   session可以接受原生接口

因为cookie每次请求都会携带在http请求中,所以它的主要用来识别用户登录,localStorage可以用来跨页面传参,sessionStorage可以用来保留一些临时数据。

关于storage使用的方式可以查看storage传值

二、CSS篇

1.css有哪些基本的选择器，执行先后顺序？

类选择器（class）、标签选择器、ID选择器
!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

2.垂直居中DIV

请看这里前端CSS布局问题

3.两栏布局左边固定右边自适应

请看这里前端CSS布局问题

3.三栏布局左右固定中自适应

请看这里前端CSS布局问题

4.常用的块与行属性内标签有哪些？有什么特征

块标签：div、h1~h6、ul、li、table、p、br、form。
特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行
行标签：span、a、img、textarea、select、option、input。
特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。

5.清除浮动

1. 父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）
2. 给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）
3. 伪元素清除浮动：给浮动元素父级增加 .clea