前端一到三年最全面试题（一）

本文链接： https://blog.csdn.net/weixin_43606158/article/details/89811189

今天给朋友们分享一到三年前端最全的面试题（其中包括HTML，CSS，JS，React，Vue，NodeJS，版本仓库的使用，互联网基础知识）。

面试流程，以及电话面试，HR面试的模拟问题以及面试礼仪：

请看此链接：面试流程以及面试技巧全分析(不管你有几年经验看了以后都会提高你的面试成功几率)

HTML,CSS面试题：

请讲一下HTML5的特点。
你知道的语义化的标签有哪些？
CSS3新增了哪些特性？
请讲一下CSS3动画的优点，你是怎么使用的？
请讲一下圣杯布局和双飞翼布局。你还知道哪些布局？
如何写宽高自适应的APP？
答案：请访问：前端项目自适应屏幕的技巧
如何更改input的样式？
答案：请访问：更改input的样式
div+css的布局较table布局有什么优点？
grid布局有过了解么？
答案：CSS新布局之display: grid;详细介绍
img的alt与title有何异同？strong与em的异同？
请描述一下渐进增强与优雅降级。
知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式么？
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验。
答案：使用精灵图，将小规格的图片整合为一张精灵图，减少浏览器请求次数。
CSS有哪些选择器？
答案：最全CSS知识整理
CSS中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？
行内元素和块级元素的区别是什么？行内元素的padding和margin可设置么？
什么是外边距重叠？重叠的结果是什么？
rgba()和opacity的透明效果有什么不同？
答案：opacity透明子元素会跟着透明（继承），rgba()的透明子元素则不会继承。
请描述display:none；visibility:hidden；opacity:0;三者的区别；
答案：最全CSS知识整理
超链接访问过后hover样式就不出现的问题是什么？怎么解决？
你知道的css让元素垂直水平居中的方法有哪些？
答案：请访问：元素垂直水平居中的方法
如何垂直居中一个浮动元素？
答案：用定位，计算top与left，可以用CSS的函数calc()计算。
请讲一下px，em的区别。
答案：最全CSS知识整理
SASS和LESS是什么？为什么要使用它们？
答案：CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。
CSS的link和import的区别是什么？
答案：最全CSS知识整理
请讲一下盒模型。
BFC是什么？
html常见兼容性问题。
对WEB标准以及W3C的理解与认识。
前端页面有哪三层构成？分别是什么？作用是什么？
答案：结构层(HTML - - 设置页面的基本结构)、样式层(CSS - - 修改页面展示给用户的样式加一些小交互)、行为层(JS - - 使用户与页面完美交互)
CSS选择符有哪些？块级元素有哪些？空元素有哪些？
答案：最全CSS知识整理
CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS新增伪类有哪些？
答案链接同上。
请说出position的属性值有哪些。每个值的特点作用。
答案链接同上。
position和display、margin、collapse、overflow、float这些特性叠加以后会怎么样？
浏览器标准模式和怪异模式之间的区别是什么？
display的属性值有哪些？可以做什么？
答案链接：最全CSS知识整理
哪些CSS属性可以继承？
你开发过程中遇到过最棘手的html与css问题是什么？
参考答案：笔者遇到最棘手的是做左侧sidebar导航，具体可看：左侧sidebar和整体分开滚动，并在X轴正常显示二级菜单

JS基础题：

JS的数据类型有哪些？
答案：请访问：JS数据类型详解
如何判断JS变量的数据类型？
1. typeof()
2. instanceof
3. constructor
4. toString
5. Object.prototype.toString
  关于最重要的Object.prototype.toString请观看：https://blog.csdn.net/weixin_43606158/article/details/93380867
typeof求解的可能值有哪些？
1. “number”
2. “string”
3. “boolean”
4. “undefined”
5. “object”
6. “symbol”
7. “function”
数据类型的自动转换和隐式转换你知道哪些？
- 隐式类型转换：
  - 1 == ‘1’
  - ‘1’ + 1
  - ‘1’ - 1
- 显示类型转换：
  - parseInt(str,radix)/parseFloat(str,radix)/Number()转变成数字。
  - Boolean(param)转变成布尔值
  - subString()转变成字符串

详细关于JS数据类型转换的内容请观看：一篇文章搞懂JS转换规则
5. “ == ” 和 “ === ” 还有 “ != ” 和 “ !== ”的区别？
- “ == ” 和 “ != ”会做数据隐式类型转换，转换完数据类型在做比较。而“ === ” 和 “ !== ”会先判断数据类型，如果俩者的数据类型不一致直接返回false就不会再去做值的比较了。
6. 讲一讲“ || ” 和 “ && ”。
答案：请访问：彻底了解"||“和”&&"
7. “ i++ ” 和 “ ++i ”的区别。
i++是先引用i的值而后将i递增1。
++i是先将i的值加1而后引用它的值。
8. break，renturn，continue三者的区别
答案：return、break与continue的区别
9. 请讲一讲递归。
函数自身调用自身。详细请看：递归
 用递归实现遍历迭代
10. 你知道哪些算法？
答案：请访问：JS算法小总结
11. 你一般如何调试bug？
答案：请访问：前端调试bug的方法
12. 数组的常用API你知道哪些？
答案：请访问：数组的常用API详解
13. 请讲将数组与伪数组的区别。
答案：请访问：伪数组是什么？伪数组与数组的区别
14. 请讲讲你对面向对象编程的理解。
答案：请访问：面向对象编程(OOP)的概念
15. 请讲讲原型链。
答案：JS原型知识整理
16. 请讲讲继承的方法。
答案：JS继承的六种方法
17. 请讲讲JavaScript作用域。
答案：JS作用域与声名提升
18. 请讲讲变量的声明提升
答案：JS作用域与声名提升
19. 创建对象的方法有哪些？
答案：https://blog.csdn.net/weixin_43606158/article/details/94912023
20. 请讲讲ECMAScript的内置对象。
答案：https://blog.csdn.net/weixin_43606158/article/details/94912023
21. Array在ES5新增遍历的API它们每个的用法，返回值，参数。
答案：数组ES5新增遍历迭代的方法及其区别
22. 请讲讲字符串的常用API。
23. ES5/ES6新增的哪些东西是你平时开发中常用到的？
答案：ES5/6新特性
24. 列举浏览器对象模型BOM里常用的至少四个对象，并列举window对象的常用方法至少五个。
答案：BOM内容的小整理
25. 请讲一下你知道的性能优化的方法。
答案：提高JS性能的12个技巧
26. 事件绑定和普通事件有什么区别？
答案：事件绑定和普通事件的区别
27. IE和其他浏览器事件流的区别。
答案：IE浏览器是事件冒泡，其他浏览器是事件捕获（标准DOM事件流）。
28. IE的标准下有哪些兼容性的写法？
29. 请讲一下this的指向问题。
答案：this的指向
30. 更改this指向的方法有哪些？
答案：更改this指向的方法及其区别
31. 请讲一下bind(),call(),apply()三者的区别。
答案链接同上
32. 请讲一下JavaScript的闭包。有什么特点？对页面有什么影响？
答案：JS闭包的理解
33. 事件委派/事件委托是什么？
答案：事件委派的使用及作用
34. 如何阻止事件冒泡和浏览器默认事件？
答案：浏览器事件默认行为介绍与阻止的方法
 JS事件流介绍与阻止事件冒泡
35. 添加，删除，替换，插入到某个节点的方法。
DOM知识详细整理
36. document.load和document.ready的区别。
37. 请讲一下JavaScript的同源策略。
答案：JavaScript的同源策略
38. 请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
答案：前端跨域的六种解决方法
39. JavaScript是一门什么样的语言？它有哪些特点？
答案：弱类型语言，类型会做隐式转换，作用域，声名提升。。。
40. 希望获取到页面中所有的checkbox怎么做？（不使用第三方框架）
答案：方法很多，笔者随便写一个朋友们可进行参考：document.getElementsByTagName('input').filter(item => //根据getAttribute('type'))的结果去筛选checkbox
41. 正则表达式构造函数var reg = new RegExp(‘xxx’)与正则表达式字面量var reg = /xxx/有什么不同？
42. JavaScript中callee和caller的作用？
43. 简述JavaScript的DOM里document获取节点的方法，并说出对应作用。
44. 简述创建函数的几种方式。
答案：JS函数介绍
45. 把script标签放在body结束标签之前和结束标签之后有什么区别？浏览器会怎么解析它们？
46. 请描述iframe的优缺点。
47. 请谈谈cookie的弊端。
48. 请谈谈localStorage和SessionStorage的区别和特点。
49. JS延迟加载的方式有哪些？
50. 哪些操作会造成内存泄漏？
51. 请说一下JavaScript中的垃圾回收机制。
52. 在js中0.1+0.2等于多少？如何让它得到正确答案？
53. 你用过axios么？
答案：axios的使用
54. async，promise，settimeout的执行顺序
答案：一篇文章彻底搞懂异步，同步，setTimeout，Promise，async
55. 前端开发这么久了你知道哪些常用的网站？
答案：前端开发应知网站
56. 你写过哪些前端工具（功能）函数？
答案：前端开发常用功能函数总结
57.

React面试题：

由于内容过多，于是笔者单独整理了一篇文章，请点击链接： React一到三年面试题总结以及进阶题

PS：对不起朋友们，之前放错链接了，放的vue的

Vue面试题整理：

由于内容过多，于是笔者单独整理了一篇文章，请点击链接： Vue一到三年面试题总结

版本仓库的使用：

你了解Git么？
答案：Git版本仓库介绍
你了解SVN么？
答案：SVN简介及使用方法
Git的常用命令你知道哪些？
答案：Git常用命令介绍
Git你是怎么解决代码冲突的？
答案：git解决代码冲突
Git你是怎么回退版本的？
答案：git回退版本
命令行的命令你知道哪些？
答案：命令行常用命令

电脑相关知识：

TCP/IP三次握手与四次挥手你了解过么？
答案：一篇文章搞懂TCP/IP三次握手与四次挥手，用过手机的都能看懂
常见状态码及其代表的意义你知道哪些？
答案：开发过程中常见状态码
实际开发移动端项目的过程中，你如何使用真机调试呢？
答案：开发移动端项目在真机上面的调试方法
请讲讲长连接与短连接。
答案：https://www.cnblogs.com/gotodsp/p/6366163.html

前端三到五年进阶题：

请看：前端三年到五年面试题分享（实例）

持续更新中。。。