前端面试题大汇总

HTML

  1. 什么是 HTML 语义化，有什么好处
  2. HTML5的新特性？
  3. 为什么要在html文件开头加上一个<!DOCTYPE html>
  4. DOCTYPE的作用，严格与混杂模式的区别，有何意义
  5. HTML5为什么只需要写<!DOCTYPE HTML>
  6. 请写出table标签下面会包含哪些标签元素
  7. 很多网站不常用table  iframe这两个元素，知道原因吗？
  8. jpg和png格式的图片有什么区别？
  9. 常用浏览器有哪些，内核都是什么？
  10. a标签在新窗口打开链接怎么加属性？
  11. form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？

css

  1. 元素水平垂直居中的方法
  2. flex布局介绍。
  3. css盒模型中，IE盒模型和标准盒模的区别。
  4. 选择器的优先级。
  5. css中link和@import的区别。
  6. position的属性。
  7. 介绍下和伪元素和伪类。
  8. 如何清除浮动。
  9. less 和 sass是什么？他们的区别。
  10. 如何实现页面适配 简写代码
  11. 原生复选框如何去点击改变里面的样式？比如把点击勾选的样式变成圆圈的样式？
  12. 了解过处理兼容性的问题吗？
  13. 标准的CSS的盒子模型？
  14. 说下盒模型?
  15. 与低版本IE的盒子模型有什么不同的？
  16. box-sizing属性？
  17. 盒子模型在不同浏览器上的区别
  18. 不定宽高水平垂直居中？
  19. 文字在垂直和水平方向重叠的两个属性分别是什么？
  20. 如何居中div
  21. 为什么margin: 0 auto会让div居中
  22. 对BFC的理解？
  23. 如何触发BFC？
  24. BFC解决了什么问题？
  25. 为什么overflow:hidden能触发bfc？
  26. Position定位值有哪些？
  27. absolute的containing block计算方式跟正常流有什么不同？
  28. display有哪些值？说明他们的作用?
  29. display:none与visibility：hidden的区别？
  30. display:inline-block 什么时候会显示间隙？
  31. overflow属性定义溢出元素内容区的内容会如何处理?
  32. visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
  33. position跟display、overflow、float这些特性相互叠加后会怎么样？
  34. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
  35. margin和padding分别适合什么场景使用？
  36. CSS常用选择器
  37. 哪些属性可以继承？
  38. CSS优先级算法如何计算？
  39. CSS3新增伪类有那些?
  40. ::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？
  41. Flex布局
  42. 请解释一下flexbox（弹性盒布局模型）,以及适用场景？
  43. 如何让DOM元素不显示在浏览器的可视范围内？
  44. 一个满屏品字布局如何设计?
  45. 常见的兼容性问题？
  46. 浏览器兼容性有哪些
  47. CSS 预处理器
  48. CSS 3的新增特性？
  49. CSS 创建一个三角形
  50. CSS 初始化样式是为什么？
  51. CSS 优化 提高性能的方法有哪些？
  52. CSS 选择器是怎样被浏览器解析的？
  53. CSS Sprites
  54. CSS Hack是什么?ie6,7,8的hack分别是什么？
  55. CSS 引入方式？
  56. 移动端的布局用过媒体查询吗
  57. 在网页中的应该使用奇数还是偶数的字体？为什么呢？
  58. 元素竖向的百分比设定是相对于容器的高度吗？
  59. 全屏滚动的原理是什么？用到了CSS的哪些属性？
  60. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
  61. 视差滚动效果？
  62. li与li之间不可见空白间隔引起原因？解决办法？
  63. width: auto 和 width: 100% 的区别
  64. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
  65. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
  66. style标签写在body后与body前有什么区别？
  67. 使用 base64 编码的优缺点
  68. 超链接访问过后hover样式就不出现的问题时什么？如何解决？
  69. rgba()和opacity的透明效果有什么区别？
  70. px和em的区别
  71. 描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?

vue  react

  1. vue的生命周期有哪些。
  2. 子组件和父组件如何传值的。
  3. v-if 和 v-show之间的区别。
  4. 介绍以下watch和computed  vue中watch的用法和讲解
  5. vue2是如何监听数据的
  6. 为啥不使用全局对象来管理数据，要用vuex
  7. 自定义指令哪些参数 自定义指令的生命周期 
  8. vue2x监听方面有什么缺点？所以才有了vue3.0
  9. 使用路由懒加载的时候，如何让点击加载A页面的时候，B页面也能加载？
  10. .react跟vue的区别？
  11. 不用v-model是怎样实现双向数据绑定的？比如我用的不是input输入框，而是下拉选择，是怎样实现的？
  12. react diff大致原理
  13. react setState什么时候同步什么时候异步为什么会这样
  14. 你们当前react版本多少，此版本做了哪些优化
  15. 跳转页面时如何去监听路由的变化？
  16. hook中setState原理
  17. 什么是vue生命周期？
  18. 详细说明生命周期
  19. vue生命周期的作用是什么？
  20. vue生命周期总共有几个阶段？
  21. 第一次页面加载会触发哪几个钩子？
  22. DOM 渲染在 哪个周期中就已经完成？
  23. Vue内置指令
  24. vue-cli如何新增自定义指令？
  25. v-if 和 v-show 区别
  26. Vue模板语法-插值
  27. vue几种常用的指令
  28. 事件修饰符
  29. 键值修饰符
  30. 计算属性computed
  31. 计算属性与methods的区别
  32. 计算属性与watch的区别
  33. 什么是vue的计算属性？
  34. 插槽slot
  35. Vue的双向绑定数据的原理
  36. 单向数据流和双向数据绑定
  37. 单向数据流
  38. 双向数据绑定
  39. Vue 如何去除url中的 #
  40. 组件通信
  41. 父组件向子组件通信
  42. 子组件向父组件通信
  43. vue-router相关
  44. vue-router是什么 它有哪些组件？
  45. vue-router 路由实现
  46. $route和$router的区别
  47. 怎么定义vue-router的动态路由？
  48. 怎么获取传过来的动态参数？
  49. Vue的路由实现：
  50. 前端怎么控制管理路由
  51. vue-router提供两种模式的原因？
  52. Hash基本介绍
  53. vue-router原理
  54. active-class是哪个组件的属性？嵌套路由怎么定义？
  55. 谈谈你对MVVM开发模式的理解
  56. 为什么会出现MVVM
  57. 虚拟dom的原理
  58. 说一下virtual Dom中key的作用
  59. 为什么要使用虚拟DOM？
  60. Vuex是什么？怎么使用？哪种功能场景使用它？
  61. Vue 3.0
  62. Vue 组件 data 为什么必须是函数
  63. Vue 中怎么自定义过滤器
  64. Vue 中 key 的作用
  65. 简述Vue的响应式原理
  66. Vue中如何监控某个属性值的变化？
  67. Vue组件间的参数传递
  68. css只在当前组件起作用
  69. vue.js的两个核心是什么？
  70. vue常用的修饰符？
  71. vue等单页面应用及其优缺点
  72. MVC
  73. vue.nextTick实现原理
  74. Emit事件怎么发，需要引入什么
  75. 使用import时，webpack对node_modules里的依赖会做什么
  76. vue怎么监听数组
  77. Proxy 相比于 defineProperty 的优势
  78. RESTful
  79. 架构优点
  80. 什么是RESTful API？怎么使用?
  81. RESTful架构设计原则（不同公司具体细节可能不同）：
  82. vue 组件的优点，以及注册使用的过程
  83. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

js

  1. this指向问题
  2. promise 说一下promise的原生实现  实现promise并指出为何能够实现.then连续调用
  3. 箭头函数  使用箭头函数应注意什么
  4. 解构赋值
  5. Ajax以及axios使用和二次封装  通过axios 请求拦截器
  6. 闭包
  7. 原型 原型链
  8. 作用域
  9. 钩子函数是什么
  10. 设计模式  设计模式用过吗？最熟悉的模式是什么？
  11. 事件冒泡 事件捕获
  12. 优雅降级和渐进增强
  13. 闭包
  14. 事件委托
  15. js延迟加载
  16. 深拷贝和浅拷贝
  17. 重排和重绘
  18. 跨域
  19. 写一个冒泡排序
  20. 构造函数，实例，原型之间的关系
  21. cookie sessionStorage localStorage区别及相关安全等
  22. Webpack打包性能优化 webpack大致运行流程
  23. 单例模式的实现原理是什么  手写一个
  24. 说一下输入URL到页面显示的过程，越详细越好
  25. 手写JS的继承
  26. 说一下宏任务和微任务有什么区别  那么promise和setTimeout会谁先执行
  27. 说一下vue双向绑定实现的原理
  28. es6了解过吗？模块化是怎么实现的？怎么做到变量名之间互不干扰就是模块之间如何保证互不影响，模块化是怎么做到的？
  29. ES5和ES6的区别？说一下你所知道的ES6
  30. class es6变为es5是怎么写的
  31. 防抖怎么写 
  32. 做过什么插件
  33. 大文件上传
  34. 断点续传怎么分包
  35. 数据一开始没定义，后面新增，不会变化，怎么修改
  36. import和require的区别
  37. 表单提交的时候的报文头
  38. 图片在线预览 new blob
  39. 事件循环(出了好几道)
  40. 深拷贝
  41. 静态资源缓存是怎样实现的？cdn加速又是怎样实现的
  42. 使用axios请求时 ，如何中断请求
  43. 存储数据在浏览器有哪些方法？如何设置一个时间让存储在浏览器里面的数据消失？
  44. 浏览器的缓存策略是怎样的？如何给强缓存设置过期时间？协商缓存发送了什么请求？
  45. 原型链相关
  46. 实现class中的extends
  47.  Proxy为什么不能被babel polyfill
  48. 如何压缩图片？
  49. 当git上传之后，发现代码有bug，该如何去做？
  50. object.definedproperty参数有哪些？分别是哪些？
  51. 了解过处理兼容性的问题吗？
  52. video如何实现自动播放？
  53. 发送请求要不要加密？是如何加密的？全部都能请求到后台数据吗？
  54. 怎样实现路由懒加载？不用懒加载有什么后果？
  55. 为什么不直接用mutaction去发送请求，请求之后直接修改数据。而要在action里面发送异步请求？
  56. ES6 怎么写class ，为何会出现 class？
  57. 实现compose函数
  58. 扩展运算符与rest运算符的区别？
  59. 解决异步的方式有哪些
  60. event loop简述原理
  61. ajax原理
  62. ajax到async的发展过程
  63. 什么是同源策略？
  64. 跨域的方式及原理？
  65. Axios的特点
  66. es5与es6继承方式？
  67. 处理数组用过哪些方法？
  68. 数组对象，变异和非变异方法？
  69. js判断是不是数组的方法？
  70. 数组去重有哪些方法？
  71. 利用set的唯一性来达到去重效果（es6中最常用）
  72. 利用双重for循环，然后splice去重（es5中最常用）
  73. 利用indexOf去重
  74. 利用sort（）排序方法来实现
  75. 利用es7中新增的includes方法
  76. 利用hasOwnProperty()方法和filter
  77. 处理字符串用过哪些方法？
  78. 处理对象用过哪些方法？
  79. Math对象常用的方法？
  80. js的数据类型有哪些？
  81. substr与substring的区别？
  82. 数组的map，filter，forEach的区别？
  83. 闭包？
  84. 闭包的适用场景？
  85. 什么是内存泄漏？
  86. 如何解决内存泄漏？
  87. 什么是垃圾回收机制？
  88. 说下原型链？
  89. js事件流？
  90. 深拷贝和浅拷贝？
  91. DOM操纵 增删改查？
  92. 如何做防止重复提交？
  93. 防抖和节流

 网络

  1. http常见状态码
  2. 跨域
  3. 表单请求的header
  4. http与https区别 https大致实现原理
  5. 服务端渲染与客户端渲染相比好处，减少多少首屏渲染时间
  6. 怎样解决跨域跨域时的请求头option请求什么时候发
  7. http1.1跟http2.0有什么区别？

算法

  1. 排序数组去重 要求不新建情况下返回去重后的新数组元素个数
  2. 二叉树镜象
  3. 数组输出翻转后的数组 要求空间复杂度为0（1）
  4. 根据最小位进行排序相同则根据进位排序例in: [1,20,33,31,50] out: [20,50,1,31,33]14.实现相同数字消除例如[1,3,2,2,2,3,5] => [1,3,3,5] => [1,5]
  5. 爬楼梯只能爬1梯或2梯求爬第n梯有几种跳法
  6. ast语法树都能干哪些事
  7. 实现柯里化函数
  8. 了解过diff算法吗？是如何计算的？

小程序

  1. 小程序中是否能实现后端可配置动态页面，是否能过微信审核
  2. 小程序渲染出页面整个流程
  3. 微信小程序生命周期？
  4. 微信小程序用哪种响应式方案？

 优化

  1. 怎样减少http请求？
  2.  项目部署时候，前端还有什么优化性能方案

安全

  1. 对web性能安全有什么了解吗？（主要说了xss和csrf）
  2. xss一般会过滤什么？（尖括号、斜杠）
  3. 为什么要过滤尖括号？（可以插入脚本，如)
  4. 了解过哪些web安全及防护原理？

  

 手写部分：

 1. 以下代码会不会报错，如何不报错输出什么，为什么?（备注，es6介绍下）
var y = 10;
if (!(x in window)) {
var x = 10;
} else {
++y;
}

2. 以下代码会不会报错，如何不报错输出什么，为什么?（备注，数据类型介绍）
var a = {n: 1};
var b = a;
a = {n: 2}
a.x = a;
console.log(a.x);
console.log(b.x);

3. 以下代码输出什么。（备注，闭包介绍）
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}

 

posted @ 2021-12-17 11:52  肥晨  阅读(357)  评论(0)  编辑  收藏  举报