面试

shiyzhang
115 阅读7分钟

面试题

前言：最近需要给客户这边面试一个前端开发工程师，所以抽时间整理了面试题

  1. 自我介绍

  2. 介绍项目，针对项目提出几个问题

    • 在项目开发过程中遇到过什么难点，如何解决的？
    • 在项目中遇到bug如何解决？
    • 在设计中出现了一个很难实现的功能，可能需要三四天时间，但项目又是很急，你是如何解决的？
    • 平时自己有逛什么社区？

  3. html知识

    • 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
    行内元素  span、b、em、strong、a、input、label等
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行

块级元素  div、h1-h6、p、ul、ol、li、blockquote、address等
1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行

空元素
空元素一般指的是无须闭合的标签
<br/>、<hr/>、<input/>、<img/>、<link/>、<meta/>等
    • html5有哪些新特性、移除了那些元素？
    （1）新增特性
a、新增标签
article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、
hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section

b、新增localStorage、sessionStorage

c、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）

d、Geolocation 地理定位

（2）移除特性

<basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，<u> 下划线，<big> 大字体

<strike> 中横线，<tt> 文本等宽
    • <img>的title和alt有什么区别?
    1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要

  4. css

    • 阐述清除浮动的几种方式（常见问题）
    1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示

2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container"> 
  <div class="left">left浮动</div> 
  <div class="right">right浮动</div>
  <div  style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
    content: ' ';
    display: block;
    clear: both;
 }
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
    • box-sizing常用的属性有哪些？分别有什么作用？
    （1）content-box
宽高是元素本身的宽高 不包含border+padding

（2）border-box
元素的宽高已经包含了border+padding

（3）inherit
从父元素继承box-sizing属性
    • CSS选择器的优先级
    !important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
    • 为什么要初始化css样式？
    因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
    • 什么情况触发重绘和重排
    • 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型(IE盒模型、怪异盒模型)有什么不同的？
    1、CSS盒子模型:  外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)
2、CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样
3、标准的CSS的盒子模型的宽高：内容区的宽高
4、低版本IE的盒子模型的宽高：内容区+内边距+边框

  5. js

    • es6的新特性
    const let
模板字符串
箭头函数
函数的参数默认值
对象和数组解构
for...of 和 for...in
    • 普通函数和箭头函数的区别
    1、普通函数
可以通过bind、call、apply改变this指向
可以使用new

2、箭头函数
本身没有this指向，
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时，this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错，因为箭头函数没有constructor
    • undefined 和 null 区别
    1、null
什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）
2、undefined
没有设置值的变量，会自动赋值undefined
3、区别
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true
    • JS哪些操作会造成内存泄露
    这个文章讲的通俗易懂，可以参考具体案例 https://www.jianshu.com/p/763ba9562864  
内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
1、意外的全局变量
2、闭包  
3、没有清理的dom元素
dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调
    • 什么是闭包，如何使用它，为什么要使用它？
    （1）闭包就是能够读取其它函数内部变量的函数
（2）使用方法：在一个函数内部创建另一个函数
（3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
（4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）

  6. vue

  • vue2与vue3 最大的区别
1、数据双向绑定原理变了， 
    1）vue2 是利用ES5的一个API `Object.definePropert()` 
  对数据进行劫持然后结合发布订阅模式来实现的
    2）vue3 使用了es6中的`Proxy`代理Api来实现的
    3）vue3比vue2优势，
       i）、defineProperty  只能监听莫哥属性不能对全对象进行监听
       ii）、可以省去for in、闭包等内容来提升效率
       iii）、可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
2、vue3组件可哟拥有多个节点
3、Composition API  Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

  • v-show 与 v-if 有什么区别

  • 怎样理解 Vue 的单向数据流

  • computed 和 watch 的区别和运用的场景

  • 直接给一个数组项赋值，Vue 能检测到变化吗？

    由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

Vue.set
为了解决第二个问题，Vue 提供了以下操作方法：

 Array.prototype.splice
    • 谈谈你对 Vue 生命周期的理解
    • 如何让dom树重新渲染
    • watch如何实现深度监听，如何实现第一次加载就触发
    • Vue 的父组件和子组件生命周期钩子函数执行顺序？
    Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

  1. vuex有用过吗？对他的理解

  2. vue-router 有用过吗？对他的理解

  3. 两种路由模式的区别

  4. 你有什么想问的吗？

avatar
文章
阅读
粉丝