前端web面试题 补充更新ing

面试题

一、html+css

1. 页面布局问题（html+css），考点在position

2. 清除浮动问题：重点在BFC

   ①给父类设置高度 ②添加overflow：hidden ③最后加一个空div标签 clear：both ④给父类设置浮动 ⑤伪类after： content clear：both

3. CSS盒子模型
   IE盒模型 w3c给出的盒模型

标准盒模型： margin padding border width 可视宽度： width+margin+padding+border

怪异盒模型：可视宽度=margin+ width (width=margin+padding+内容宽度)

4. 标签语义问题

5. DTD、BFC介绍

   BFC ：块级格式化上下文 是一个独立的渲染区域，它规定内部如何布局，并且与他之外的区域毫不相干

   DTD：

6. HTML5的语义化

7. 响应式布局+流式布局

8. get请求和post请求的区别？

   get请求会显示在路径上 是从服务器上获取数据，get传送的数据量较小，安全性非常低

   post请求不会显示在路径，是向服务器传送数据 ，post传送的数据量较大，post安全性较高。

9. css hack（浏览器内核）

   chorm 内核： blink

   IE 内核 ：Trident

   Firefox内核：Gecko

   opera内核：blink

   safari内核：Webkit

10. 像素问题

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

    em：根相对单位 1. em的值并不是固定的；

    ​ 2. em会继承父级元素的字体大小。``

11. 弹性布局问题

12. 元素属性继承问题

13. margin的问题

14. 精灵图问题
    二、js

15. 变量的声明问题

16. 数据类型的隐式转换问题，重点在隐式转换*

17. ++ – == === != !==的问题

18. break和continue的区别

    break：break 的作用是跳出代码块,

    continue ：作用是进入下一个迭代, 所以 continue 只能用于循环的代码块。

    ``var x="",i=0;for (i=0;i<10;i++){if (i3){continue;} //0 1 2 4 5 6 7 8 9 10var x="",i=0;for (i=0;i<10;i++){if (i3){break;}//0 1 2

19. 排序问题：冒泡、快速、插入

20. let const的作用

    let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

    const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

21. 递归、循环问题

22. 创建函数、对象的方式

23. this指针问题

24. 解释你对面向对象的理解（可能会涉及到面向过程）？

25. 封装、继承、多态

26. 对象的分类，即内置对象的方法

27. break和continue的区别

28. 数组去重（准备三种方法）

29. 随机数问题

30. split join的区别？

    split() 方法用于把一个字符串分割成字符串数组。

    join() 方法用于把数组中的所有元素放入一个字符串。

31. call 和apply的区别？

    都是改变指针指向

    apply：

    最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

    call：

    则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

32. 数组合并、删除数组元素问题

33. 截取字符串问题（字符串的API），查找某个字符的出现次数问题

34. DOM中添加、移除、替换、创建、插入和查找节点

35. 事件绑定

36. DOM事件流

37. 冒泡问题

38. DOM中获取元素方法的拼写问题

39. 编写代码实现页面中某个元素样式的改变

40. 定时器问题

41. promise问题（能手写，说优点和缺点）

42. 作用域和作用域链问题，一般会同this指针出题

43. 原型和原型链（概述题+代码题）

44. 正则常用的几个规则（邮箱、手机号、密码强度等…）可能会结合空白字符

45. js的优缺点

46. 语言的注释形式

47. clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeigh区别

48. 对闭包的理解

49. 对象合并

50. 对象的深拷贝和浅拷贝

51. 死锁问题

52. js异步加载机制

53. 节流和防抖问题

54. typeof、instanceof等（检测数据类型）

55. es5、es6的新特性，es7能加就加

56. for in 和 for of可能出现

57. 懒加载问题（可能会考虑到）

    图片懒加载：

    ①在页面上的未可视区域，添加一个事件，判断图片的位置与浏览器顶端的距离与，与页面的距离，如果前者小于后者优先加载

58. 前端性能优化问题

59. 变量声明提前问题(函数声明提前)
    三、vue

60. 什么是MVVM/MVC，他们的区别?

61. 是一种设计思想，model代表的数据模型，可以在model中定义数据修改和操作业务逻辑；view代表ui组件，负责将数据模型转化为ui展现出来，viedmodel是一个同步view和model的对象

    在MVVM架构下，view和model之间并没有直接的关系，而是通过VM进行交互，V和M之间的交互也是双向的，因此view的数据变化会同步到model中。而model的数据变化也会立即反应到view上

62. vue常见错误

63. v-show和v-if的区别？

    都能控制元素的隐藏和显示

    v-show指令是通过修改元素display的css属性让其隐藏，只会编译一次

    v-if指令是动态的向DOM树里删除和添加DOM达到显示隐藏的效果

64. v-for为什么一定要加key？

    需要使用key给每一个节点做一个唯一标识，Diff算法就可以正确识别此节点

65. keepalive作用是什么？

    是vue的一个内置组件，可以是被包含的组件保留状态，避免重新渲染

66. 为什么避免v-if和v-for一起使用？

    v-for优先级更高，通过v-if移动到容器元素，不会再重复遍历列表中的每个值，取而代之的是，我们只检查他一次，而且不会在v-if为否的时候运算v-for

67. vue的双向绑定（解释原理）

    采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

68. 列举出vue的生命周期以及几个关键的钩子函数？

69. 手写一个vue父子互相通讯的例子(写出关键步骤即可)

70. 虚拟DOM树问题

71. 什么是vue？什么时候使用？为什么使用？

    是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，vue采用的是自底向上增量开发设计，vue的核心库只关注图层，它不仅容易上手，还便于与第三方库或已有项目整合，另一方面，当与单文件组件，和vue生态系统支持的库综合使用时，vue也完全能够复杂的单页面应用程序提供驱动

72. vue的父传子，子传父（传值问题）

    父传子：通过props

    子传父：$emit

73. vue.js的核心思想

74. vue的优缺点

75. 组件之间的传值问题

76. vue的路由跳转问题

77. vue-cli怎样自定义组件？会有哪些问题？

78. vuex是什么？如何使用？什么时候使用？

79. v-show 和 v-if 的相同点和不同点？

80. keep-alive的作用？

81. vue中使用插件的步骤？

82. vue-router怎么定义动态路由？写出怎么获取传过来的动态参数？

83. DOM渲染在哪个周期完成？

84. 详尽介绍vue的各个生命周期？

    总共8个阶段 创建前/创建后 载入前/载入后 更新前/更新后 销毁前/销毁后

    beforeCreate
    这是我们遇到的第一个生命周期函数，表示实例完全被创建出来，，会执行它
    此时data 和methods还没有初始化
    created
    在created中 data和methods都已经被初始化好了

    beforeMount
    这是遇到的第三个生命周期，表示模板已经在内存中编辑完成，但是尚未把模板渲染在页面中 mounted
    这是遇到的第四个生命周期函数，表示，内存的模板，已经真是的挂载到了页面中，用户已经可以看到渲染好的页面了

    beforeUpdate()
    此时，表示我们界面还没有更新， 数据肯定更新了

    updated()
    updated 事件执行时，页面和data数据已经同步，都是最新的

    beforeDestroy
    执行时实例就已经从运行阶段进入到销毁阶段

    destroyed
    此时组件中所有数据方法都被销毁

85. vue-loader是什么？有什么用？

86. 为什么避免 v-if 和 v-for 用在一起？

    v-for优先级更高，这意味着v-if将分别重复运行与每个v-for的循环中，，所以不推荐一起使用

    如果v-if和v-for一起使用，vue会自动提示v-if放到外层去

87. VNode 是什么？

88. vue常用修饰符

    .stop 等于js中event.stopPropagation(),防止事件冒泡

    .prevent 等于js中event.preventDefault();防止 默认行为

    .capture:与事件冒泡方向相反，事件捕获由外向内

    .self 只会出发自己范围内的事件，不包含子元素

    .once 只触发一次

89. vue 首屏加载过慢如何解决？

90. vue 中的单项数据流和双向数据绑定是什意思？

91. 为什么 vue 组件中的 data 必须是函数？

92. $route 和 router 的区别？