2022前端面试复习

一个在教育行业苦干两年的前端菜鸟，离职后就在准备复习面试，记录一下这次前端复习过程。前端知识是在是太多，持续更新中... 希望对真正找工作的你有所帮助，文末我整理了一下面试文章，感兴趣的可以看看，尤其是2022高频前端面试题汇总系列，帮助很大。文章有所不足的地方还指明。

2022前端面试复习

HTML5、CSS3

HTML5

HTML5新增特性
  • 语义化标签：header、nav、footer、section...
  • 媒体标签：audio音频、video视频
  • 表单类型属性：email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点...
  • cavas绘图
  • web存储：localStorage、sessionStorage
行内元素、块级元素有哪些

行内元素：a、span、img、input...

块级元素：div、ul、li、ol、dt、dh、li、p、h1-6

iframe的优缺点

优点：

  • 原封不动的吧嵌入网页展示出来
  • 增加代码的可重用
  • 用来加载速度较慢的内容

缺点：

  • iframe阻塞onload事件加载
  • 网页内容无法被搜索引擎识别，对SEO不友好
  • 会产生很多页面，不利于管理
canvas和SVG的区别

canvas：通过javaScript来绘制2D图形，是逐像素进行渲染

  • 依赖分辨率
  • 不支持事件处理
  • 能够以.png或.jpg的格式进行保存
  • 适合做游戏

SVG：基于XML描述的2D图形语言，是矢量图

  • 不依赖分辨率
  • 支持事件处理
  • 适合做大型区域渲染
回流重绘

回流当DOM变化影响了元素，比如元素的尺寸、布局、显示隐藏等改变了，需要重写构建。每个页面至少需要一次回流，就是在页面第一次加载的时候，这个时候一定会发生回流。

重绘当一个元素的外观发生变化，但是没有改变布局，重新渲染元素的外观。比如background-color、color

回流必将引起重绘，而重绘不一定会引起回流

如何避免回流重绘：

  • 避免使用table布局
  • 尽可能在DOM树的最末端改变class
  • 避免设置多层内联样式
  • 开启GPU加速
  • 将动画效果应用到position属性为absolute或者fixed的元素上
src和href的区别

srcsrc指向外部资源的位置，将指向的内容嵌入到文档中当前标签所在的位置，如js脚本、img图片、iframe等

href用于在当前文档和引用资源之间确立联系，一般是用在link、a等元素

CSS3

CSS3新增特性
  • 新增CSS选择器、伪类
  • 特效：text-shadow、box-shadow
  • 渐变：gradient
  • 旋转过度：transform、transtion
  • 动画：animation
盒模型

盒模型都是有四部分组成：content、padding、border、margin

标准盒模型和IE盒模型的区别在于设置width和height时，对应的范围不同

  • 标准盒模型的width、height只包含了content
  • IE盒模型的width、height包含了border、margin、padding

通过修改元素的box-sizing属性来改变元素的盒模型

  • box-sizeing: content-box表示标准盒模型（默认值）
  • box-sizeing: border-box表示IE盒模型（怪异盒模型)
trastion和aniamtion的区别

transtion：属于过度属性，强调过度，需要一个事件进行触发（如鼠标进入、离开）类似flash的补间动画，设置一个开始帧和结束帧

aniamtion：属于动画属性，它的实现不需要触发事件，设定好后可自动执行，且可以循环播放。也是类似补间动画，但是可以设置多个关键帧

元素水平垂直居中

  • 绝对定位：先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

    .parent {    
  position: relative;
} 
.child {    
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

  • 绝对定位：设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

    .parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

  • 使用flex弹性盒子布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

    .parent {
    display: flex;
    justify-content:center;
    align-items:center;
}
p、em、rem的区别
  • px 固定像素单位，不能随其它元素的变化而变化
  • em是相对于父元素的单位，会随着父元素变化而变化
  • rem是相对于根元素html，它会随着html元素变化而变化

rem常用在移动端项目，设置根元素的fong-size，其它元素会随着根元素的变化而变化，从而达到不同手机屏幕的自适应大小。通常会配合postcss-pxtorem插件进行使用

如何解决1px问题
  • 直接写0.5px
  • 利用伪元素，先放大再缩小
  • 使用viewport缩放来解决
什么是BFC布局，如何创建BFC布局？

BFC布局为块格式化上下文（Block Formatting Context，BFC）， 是CSS布局的一个概念，里面的元素不会影响到外面的元素。

创建BFC：

  • 元素设置浮动：float有值并不为空
  • 元素设置绝对定位： position（absolute、fixed）
  • overfilow值为：hidden、auto、scroll
  • display值为：inline-block、table-cell、table-caption、flex等

BFC作用：

  • 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
  • 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
  • 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。
link和@import的区别
  • link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等
  • @import是CSS提供等语法规则，只有导入样式表带作用。
  • link标签引入的CSS被同时加载，而@import引入的CSS将在页面加载完毕后被加载
  • @import是CSS2.1才有的语法，存在兼容性，而link作为HTML标签不存在兼容性问题
CSS选择器优先级
  • @important
  • 内联样式
  • ID选择器
  • 类选择器/属性选择器/伪类选择器
  • 元素选择器/伪元素选择器
  • 关系选择器/通配符选择器

JS基础

基础数据类型

string、number、boolean、object、function、undefined、null、symbol

null和undefined的区别：null表示对是一个空的对象(object)、undefined是申明了但没赋值，在使用typeof检测类型时，null为object，undefined为undefined

null == undefined // true

null === undefined //false

值类型（基本数据类型）：string、number、boolean、undefined、null、symbol

引用类型：object、function、array

值类型和引用类型区别：

  • 值类型保存在栈中，占用空间固定，当一个方法执行时，每个方法都会创建自己的内存栈，方法中定义的变量会存放在这个内存栈中。当方法执行结束时，这个内存栈也会被销毁。所以，栈中存储的是基础变量。而引用变量存储在栈中是指向堆中的数组或对象的引用地址。这也就是为何修改引用类型总会影响到其它指向这个地址的引用变量。
  • 值类型可以使用typeof进行数据类型检测
  • 引用类型保存在堆中，占用空间不固定。创建对象会保存到堆内存中，这个内存不回随着方法结束而销毁，因为这个对象还可能被另外一个变量所引用，只有当一个对象没有被任何变量引用时，系统的垃圾回收机制会将它回收。
  • 引用类型使用instanceof检测数据类型
  • 使用new（）方法构造出来的对象是引用类型
闭包

闭包就是能够读取到其它函数内部变量的函数，创建一个最简单的闭包，就是在一个函数内部创建另外一个函数，创建的函数可以访问到当前函数的局部变量。

闭包优点：

  • 创建全局私有变量，避免变量全局污染
  • 可以实现封装、缓存等

闭包缺点：

  • 创建的变量不能被回收，容易消耗内存，使用不当会导致内存溢出
变量提升、作用域、作用域链
变量提升

js代码在解析的时候，会将所有的变量函数，提升到代码的最上面。变量提升，提升的只是变量申明，并不会吧变量赋值提升上来

console.log(i) // 4
var i = 4
作用域

作用域是一个变量或函数的可访问范围，作用域控制着变量或函数的可见性和生命周期

  1. 全局作用域：可以全局访问

    • 最外层函数和最外层定义的变量拥有全局作用域
    • window上的对象属性方法拥有全局作用域
    • 为定义直接复制的变量自动申明拥有全局作用域
    • 过多的全局作用域变量会导致变量全局污染，命名冲突

  2. 函数作用域：只能在函数中访问使用哦

    • 在函数中定义的变量，都只能在内部使用，外部无法访问
    • 内层作用域可以访问外层，外层不能访问内存作用域

  3. ES6中的块级作用域：只在代码块中访问使用

    • 使用ES6中新增的let、const什么的变量，具备块级作用域，块级作用域可以在函数中创建（由{}包裹的代码都是块级作用域）
    • let、const申明的变量不会变量提升，const也不能重复申明

    • 块级作用域主要用来解决由变量提升导致的变量覆盖问题

      var i = 3
function fnc() {
  console.log(i);
  var i = 6;
}
fnc() // undefined
作用域链

变量在指定的作用域中没有找到，会依次向上一层作用域进行查找，直到全局作用域。这个查找的过程被称为作用域链。

call、apply、bind区别
  • 都可以用作改变this指向
  • call和apply的区别在于传参，call、bind都是传入对象。apply传入一个数组。
  • call、apply改变this指向后会立即执行函数，bind在改变this后返回一个函数，不会立即执行函数，需要手动调用。
new操作符干了什么操作
  1. 创建一个空对象
  2. 设置原型，将对象的原型设置到函数的prototype对象上
  3. 改变this指向，将this指向该对象，并执行构造函数。
  4. 判断函数的返回类型，如果是值类型，返回创建的对象。如果是引用类型，返回这个引用类型的对象。
原型、原型链
  • 原型: 每个对象在内部初始化的时候，都会初始化一个prototype原型属性 ，而对象的 _proto_属性，指向它的原型对象。
  • 原型链: 当我们访问英国对象属性时，如果这个属性不存在，那么就会去它的原型对象上进行查找，而这个原型对象又会有自己的原型，会这样一直查找，知道找到顶级对象object为止。这个查找的过程被称为原型对象。
继承
原型链继承

利用对象的原型链，将子类Son.prototype指向父类的构造函数创建出来的实例对象new Person()

function Person() {
  ...
};
  
function Son() {
  ....
};

// 关键代码
Son.prototype = new Person();

优点：

  • 子类可以继承父类构造函数、原型上的属性方法

缺点：

  • 父类引用类型的实例对象被共享，容易造成修改的混乱。
  • 创建子类的时候不能向父类传参
构造函数继承

利用.call()或者.apply()方法，在子类中借用父类的构造函数，初始化父类构造函数。

function Person(name) {
  ...
};
  
function Son(name) {
    // 关键代码  
  Person.call(this, name)
  ...
}

优点：

  • 子类在继承父类时，可以向父类构造函数中传参。
  • 不会造成子类势力之间引用属性共享。

缺点：

  • 只能继承父类构造函数中的属性方法，无法访问原型上的方法。
  • 每个子类都会创建一个父类副本
组合继承

组合继承，将原型链继承和构造函数继承融合在一起。

function Person(name) {
  ...
};
  
function Son(name) {
  // 借用构造函数继承关键代码
    Person.call(this, name);
};

// 原型链式继承关键代码
Son.prototype = new Person();
// 将子类的构造函数指向自己
Son.prototype.constructon = Son;

优点：

  • 结合前面两种继承方式的优点，子类的实例可以访问到父类原型上的属性方法
  • 子类的实例之间不会被共享

缺点：

  • 调用了两次父类构造函数
原型式继承

用函数包装一个对象，返回这个函数的调用（也就是ES5的Object.create的模拟实现），将传入的对象作为创建对象的原型

function create(obj) {
  // 创建一个空的的构造函数
    function F() {};
  
  // 将空的构造函数原型指向传递进来的对象
  F.prototype = obj;
  
  // 返回一个实例对象
  return new F();
}


const obj = {
  name: 'zs',
  ...
};

const newObj1 = create(obj);
const newObj2 = create(obj);

优缺点和原型链式继承一样，引用类型还是会被共享。

寄生式继承

在原型式继承基础上，在函数内部来做增强函数，返回对象。

function createObj(obj){
  // 获取继承的子类对象，也就是上面的create方法实现
  const newObj = Object.create(obj);
  
  // 函数增强
  newObj.say = function() {
    ...
  }
    
  // 返回对象
  return newObj;
}

类似原型式继承，但在原有的基础上可以自定义属性方法，依旧没有解决引用值被共享问题。（跟借用构造函数模式一样，每次创建对象都会创建一遍方法。）

寄生组合式继承

结合寄生继承和组合式继承优缺点，组合式继承缺点为调用了两次父类构造函数，优点为解决了引用值被共享问题。而寄生式继承缺点为没有解决引用值被共享问题，只要将两者结合就得到完美的继承方式。

function createObj(son, parent) {
  // 寄生式继承，利用父类构造函数的原型对象创建出一个新的对象，解决组合式继承创建两个父类问题
  const newObj = Objcet.create(parent.prototype)；
  
  // 将新对象的constructor构造函数执行子类
    newObj.constructor = son;
  
  // 将子类构造函数的原型指向心的  原型式继承
  son.protoytype = newObj; 
  
}

function Person(name) {
  ...
};

function Son(name) {
  // 构造函数继承
  Person.call(this, name);
  ...
};
  
  
// 实现继承
createObj(Son, Person)
// 更简洁的方式  在组合式继承的基础上  直接将son的原型通过API指向person的原型
Son.prototype = Object.create(Person.prototype);

const obj1 = new Son('zx');
const obj2 = new Son('lw');
深拷贝、浅拷贝
浅拷贝

浅拷贝只是复制对象的值类型，通过Object.assign或者扩展运算符即可实现

深拷贝

通过递归实现

function deepClone(obj) {
  // 判断是否为对象
  if (!obj || typeof obj !=='object') return obj;
  
  // 根据obj类型创建数组还是对象
  let newObj = obj instanceof Object ? {} : [];
  
    // 循环遍历obj，处理子元素为对象，递归拷贝
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      newOb[key] = deepClone(obj[key])
    };
  };
  
  return newObj;
};
事件循环机制EventLoop（浏览器）
栈、队列理解
  • 栈（Stack）中的任务后进先出，js中的执行栈是一个存储函数的栈结构，栈中的任务执行遵循先进后出的原则依次执行。
  • 队列（Queue）中的任务先进先出，js运行时创建一个任务队列，用来处理列表（事件）和待执行的回调函数
宏观任务、微观任务

js中的任务分为两种：宏观任务(MacroTask|Task)、微观任务(MicorTask)。

  • 宏任务：script全部代码、setTimeout、setInterval、I/O、UI Rendering
  • 微任务：Promise.then、Process.nexTick(Node独有)、MutationObserver
同步任务、异步任务

js有一个主线程和一个执行栈（调用栈），所有的任务都会放到执行栈中等待被主线程执行。

js代码在执行时，所有函数都会压入执行栈中。同步任务会按照后进先出原则依次执行，直到执行栈清空。异步任务会在异步任务有了结果后，将注册的回掉函数放入异步任务队列中，等待主线程空闲后（执行栈中的同步任务执行完毕）。

异步队列中的任务又分为宏观任务和微观任务，当当前执行栈清空后，处理异步队列中的任务时，首先会判断是否有微观任务可执行，如果有就将微观任务压入执行栈中执行。当微观队列中的任务在执行栈被执行完毕，再来异步队列中将宏观任务放入执行栈。

简单的来说：

  1. 执行同步代码，这属于宏观任务
  2. 所有代码执行完毕，执行栈清空，执行异步队列中任务
  3. 异步队列中，先执行微观任务
  4. 微观任务执行完毕，再执行宏观任务
节流防抖

节流（throttle）：在n秒内只允许执行一次，

防抖（debounce）：在n秒内多次触发但不执行，而是在n秒后执行，如果n秒内触发则重新计算。

事件冒泡、事件委托

事件发生的三个阶段：捕获阶段、目标阶段、冒泡阶段

  • 事件冒泡：在一个对象上触发某类事件，如果此对象绑定了事件，就会触发事件，如果没有，就会向这个对象的父级对象传播，最终父级对象触发事件。

    • 如何阻止：

      • 普通浏览器：event.stopPropagation()
      • IE浏览器：event.cancelBubble = true;

  • 事件委托：利用浏览器事件冒泡机制。事件在冒泡的过程中会传到父节点，并且父节点可以通过事件对象获取到目标节点，可以吧子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件

    • 事件委托可以不必要为每一个子节点都绑定监听事件，减少内存上的消耗。
    • 使用事件委托还可以实现事件的动态绑定，比如新增一个子节点，并不需要为此单独增加一个监听事件，可以由父元素中的监听函数来处理。
对DOM元素进行增删改查
增
 document.createElement()
删
element.removeAttribute()
element.removeChild()
改
element.innerHTML()
element.setAttribute()
查
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()
ajax、axios、fetch区别

ajax

  • 基于原生的XHR开发
  • 本身针对MVC编程，不符合现在前端MVVM潮流

axios

  • 从浏览器中创建XMLHttpRequest
  • 支持promise
  • 支持请求拦击和响应拦截
  • 从node.js创建http请求
  • 客服端支持防止CSRF/XSRF

fetch

  • 浏览器原生实现的请求方式，ajax的替代品
  • 只对网络请求报错，对400、500都当做成功的请求，需要封装
  • fetch默认不会带cookie，需要添加配置项
  • fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
  • fetch没有办法原生监测请求的进度，而XHR可以

ES6

var、let、const区别

  • var声明变量可以重复声明，而let不可以
  • var是不受限于块级作用域，而let受限
  • var存在变量提升，let和const不存在变量提升
  • const声明的变量不可变
  • const声明之后必须赋值，否则会报错

Promise

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

它有三种状态

  • pending初始状态
  • fulfilled操作成功
  • rejected操作失败。

Promise状态改变只有两种可能

  • 从pending------>fulfilled
  • 从pending------>rejected

Promise构造函数接收一个参数和一个带有resolve和reject参数的回调函数。

  • resolve的作用是将Promise状态从pending变为fulfilled，在异步操作成功时调用，并将异步结果返回，作为参数传递出去
  • reject的作用是将Promise状态从pending变为rejected，在异步操作失败后，将异步操作错误的结果，作为参数传递出去

Promise实例方法

  • promise.then() 对应resolve成功的处理
  • promise.catch()对应reject失败的处理
  • promise.call()将多个Promise实例，包装成一个新的Promise实例，返回的实例就是普通的Promise。有一个失败，代表该Primise失败。当所有的子Promise完成，返回值时全部值的数组
  • promise.race()类似promise.all()，区别在于有任意一个完成就算完成（例如：将异步和定时器放在一起，设置请求超时）

箭头函数和普通函数的区别

  • 箭头函数时匿名函数，不能作为构造函数，不能使用new
  • 箭头函数不绑定arguments
  • 箭头函数没有自己的this，将所在的上下文的this作为自己的this值
  • 没有prototype
  • call()、applay()、bind()方法不能改变箭头函数中的this指向

forEach和map的区别

  • forEach返回值是undefined，不可以链式调用
  • map()返回一个新的数组，不改变原数组。forEach改变原数组。

Set、Map的区别

Set
  • 创建： new Set([1, 1, 2, 3, 3, 4, 2])
  • add(value)：添加某个值，返回Set结构本身。
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  • has(value)：返回一个布尔值，表示该值是否为Set的成员。
  • clear()：清除所有成员，没有返回值。
Map
  • set(key, val): 向Map中添加新元素
  • get(key): 通过键值查找特定的数值并返回
  • has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
  • delete(key): 通过键值从Map中移除对应的数据
  • clear(): 将这个Map中的所有元素删除
区别
  • Map是一种键值对的集合，和对象不同的是，键可以是任意值
  • Map可以遍历，可以和各种数据格式转换
  • Set是类似数组的一种的数据结构，但在Set中没有重复的值

谈谈你对ES6对理解

  • 解构赋值
  • 扩展运算符
  • 模版字符串
  • 箭头函数
  • async/await
  • Class
  • 引入Moldule语法
  • class类

Vue

基础知识

MVVM

MVVM是一种软件架构模式，在vue中 M 代表model层（数据模型），负责数据模型。V代表View层（视图层），VM代表ViewModel（视图模型），它是Model和View之间的桥梁，数据会绑定到viewModel层，并自动将数据渲染到页面层，视图变化时会通知viewModel更新数据

Vue生命周期

创建前后：

  • beforeCreated（创建前）： 数据观测和初始化事件还未开始，不能访问data、computed、watch、methods上的数据方法。
  • created(创建后)：实例创建完成，可以访问data、computed、watch、methods上的数据方法，但此时渲染节点还未挂在到DOM上，所以不能访问。

挂载前后：

  • beforeMounted（挂载前）: Vue实例还未挂在到页面html上，此时可以发起服务器请求
  • mounted（挂载后）:Vue实例已经挂在完毕，可以操作DOM

更新前后：

  • beforeUpdate（更新前）: 数据更新之前调用，还未渲染页面
  • updated（更新后）:DOM重新渲染，此时数据和界面都是新的。

销毁前后：

  • beforeDestoryed（销毁前）:实例销毁前调用，这时候能够获取到this
  • destoryed（销毁后）:实例销毁后调用，实例完全被销毁。
watch和computed的区别

watch：监听属性，用来监听数据的变化，没有缓存，当监听到的数据发生变化时都会执行毁掉函数

computed：计算属性，被监听的值有缓存，只有它依赖的属性值发生变化后，下一次获取computed的值时才会重新计算computed的值。（只有依赖发生变化后才会重新计算）

v-for中key的作用

key是为了更高效的对比虚拟DOM中的每个节点是否相同，避免页面更新时重复更新节点

v-if和v-show的区别

v-if元素不可见 删除dom元素

v-show元素可见 通过设置元素的display：none样式属性

组件中的data为什么是一个函数

因为对象是一个引用类型，如果data时一个对象的情况下会造成多个组件共用一个data，data为一个函数，每个组件都会有自己的私有数据空间，不会干扰其他组件的运行。

Vue组件通信
父子组件

父传子

  • props
  • $children
  • $refs

子传父

  • $emit
  • $parent
兄弟组件
  • provied
  • inject
  • eventBus
  • Vuex
Vuex的基本使用

Vuex用于vue中的数据状态管理，有五种属性：

  1. state：Vuex的基本数据，用于存储变量
  2. getter：从state派生出来的数据，当相遇state的计算属性，在这里可以对state数据进行过滤、筛选等操作
  3. mutation：提交更新state数据的方法
  4. action：和mutation功能相似，都是用来提交更新，但action提交的是mutation，而不是直接变更数据，并且action可以包含异步操作
  5. module：模块化Vuex，每个模块都有自己的state、mutation、actoion、getter
mutation和action的区别
  • mutation更专注于修改state，必须是同步执行。
  • action提交的是mutation，而不是直接更新数据，可以是异步的。
  • action可以整合多个mutation
Vuex和localstory的区别
  • Vuex存储在内存中，页面关闭刷新就会消失。而localstorage存储在本地，读取内存比读取硬盘速度要快
  • Vuex应用于组件之间的传值，localstorage主要用于不同页面之间的传递
  • Vuex是响应式的，localstorage需要刷新
路由守卫
  • 全局前置钩子：beforeEach、beforeResolve、afterEach
  • 路由独享守卫：beforeEnter
  • 组件内钩子：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave
hash和history的区别
hash

hash模式是vue开发中的默认模式，地址栏URL携带#，#后为路由。

原理是通过onhashchange()事件监听路由hash的变化，这个好处就是当hash值发生变化，不需要向后端发起请求，window就可以监听事件的改变，并按照规则加载项对应的代码。除此之外，hash值的变化对应的URL都会被浏览器记录下来，这样就能实现浏览器历史页面的前进后退。

history

vue还提供history模式，在history模式下URL中没有#，相比hash模式更加好看。但是需要后台配置支持。

history的原理是利用HTML5中hostory提供的pushState、replaceState这两个API，这两个API记录了浏览器历史栈，并且当在修改URL时不会触发页面刷新和后台请求。

动态路由
定义方式

  • params传参

    • 路由配置： /index/:id
    • 路由跳转：this.$router.push({name: 'index', params: {id: "zs"}});
    • 路由参数获取：this.params.id
    • 最后形成的路由：/index/zs

  • query传参

    • 路由配置：/index正常的路由配置
    • 路由跳转：this.$rouetr.push({path: 'index', query:{id: "zs"}});
    • 路由参数获取：this.query.id
    • 最后形成的路由：/index?id=zs
$router 和$route
  • $router是指整个路由对象，可以使用this.$router.push({name: ;index'})进行页面跳转
  • $route时指当前页面的路由对象，可以使用this.$route.parmas.id来获取当前路由对象传递进来的参数
Vue性能优化

原理知识

双向绑定原理

data在初始化的时候，会实例化一个Observe类，在它会将data数据进行递归遍历，并且通过definereactive方法，这个方法通过Object.defineProperty方法，给每个值添加上一个getter和一个setter。在数据读取的时候会触发getter进行依赖（Watcher）收集，当数据改变时，会触发setter，对刚刚收集的依赖进行触发，并且更新watcher通知视图进行渲染。

依赖收集

依赖收集发生在defineReactive()方法中，在方法内new Dep()实例化一个Dep()实例，然后在getter中通过dep.depend()方法对数据依赖进行收集，然后在settter中通过dep.notify()通知更新。整个Dep其实就是一个观察者，吧收集的依赖存储起来，在需要的时候进行调用。在收集数据依赖的时候，会为数据创建一个Watcher，当数据发生改变通知每个Watcher，由Wathcer进行更新渲染。

Object.defineProperty()数据劫持缺陷

该方法只能监听到数据的修改，监听不到数据的新增和删除。vue2中会对数组的新增删除方法push、pop、shift、unshift、splice、sort、reserve通过重写的形式，在拦截里面进行手动收集触发依赖更新。

在vue2中，需要数据里添加或删除时，使用vue.$set/vue.$delete进行操作。

在Vue3中，改用proxy对对象进行代理，返回一个代理对象，只需要操作新对象就可以。

双向绑定原理

Vue双向绑定是一个指令v-model，可以将数据动态绑定到视图上，同时视图中变化也可以改变改值。他的本质是 v-bind 和 v-on 的语法糖。在 ⼀个组件上使⽤ v-model ，默认会为组件绑定名为 value 的 prop 和名为 input 的事件。

nextTick的实现

vue中的nextTick是浏览器eventLoop是应用。nextTick是将回调函数放到一个异步队列中，保证在异步更新DOM的watcher后面，从而获取到更新后的DOM。

Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启1个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用；

怎么理解 vue 中的虚拟 DOM

虚拟DOM，就是用一个JS对象来描述一个DOM节点。Vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作DOM,而操作真实DOM又是非常耗费性能的，这是因为浏览器的标准就把 DOM 设计的非常复杂，所以一个真正的 DOM 元素是非常庞大的。VNode类中包含了描述一个真实DOM节点所需要的一系列属性，tag表示节点的标签名，text表示节点中包含的文本，children表示该节点包含的子节点等。

模版编译原理

模版编译主要过程：template ---> ast ---> render，分别对象三个方法

  • parse 函数解析 template
  • optimize 函数优化静态内容
  • generate 函数创建 render 函数字符串

调用parse方法，将template转化为AST（抽象语法树），AST定义了三种类型，一种html标签，一种文本，一种插值表达式，并且通过 children 这个字段层层嵌套形成了树状的结构。

optimize方法对AST树进行静态内容优化，分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化。

generate将AST抽象语法树编译成 render字符串，最后通过new Function(render)生成可执行的render函数

diff算法逻辑

diff算法发生在视图更新阶段，也就是当数据发生变化的时候，diff会对新就虚拟DOM进行对比，只渲染有变化的部分。

当数据发生变化的时候，依赖对应的watcher会通知更新，生成一个新的vnode，新的vnode会去和旧的vnode进行对比更新。

整个更新的过程就是调用path函数，主要做了三件事：

  • 创建节点：新的vnode中有而旧的vnode中的节点，在旧vnode中进行创建
  • 删除节点：新的vnode中没有二旧的vnode中有，在旧的vnode中删除
  • 更新节点：新的vnode和旧的vnode中都有，以新的vnode位主，更新旧的vnode
new Vue的流程

合并配置，调用一些初始化函数，触发生命周期钩子函数，调用$mount开启下一个阶段。

keep-live原理

keep-alive是Vue.js的一个内置组件。它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。

通过include、exclude来匹配和排除缓存，max定义缓存的上限。

keep-alive内部其实是一个函数式组件，没有template标签。在render中通过获取组件的name和include、exclude进行匹配。匹配不成功，则不需要进行缓存，直接返回该组件的Vnode。

匹配成功就进行缓存，获取组件的key在this.cache中进行查找，如果存在就直接将缓存的组件实例覆盖到当前的Vnode上，然后将当前组件的key从keys中进行删除，然后在push(key)添加到尾部，这样做是为了改变key当前的位置，也就实现了max功能。

不存在的话，就需要对组件进行缓存。将当前组件push(key)添加到尾部，然后再判断当前缓存的max是否超出指定个数，如果超出直接将第一个组件销毁（缓存淘汰策略LRU）。

LRU（Least recently used，最近最少使用）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。

性能优化

网站优化

  • 使用浏览器缓存机制
  • 资源懒加载、预加载
  • 骨架屏
  • 合理使用雪碧图、字体图标、

代码优化

  • 减少回流重绘
  • 减少DOM的操作
  • 节流防抖
  • 使用事件委托
  • 将CSS文件放在头部、js文件放在底部

请求优化

  • 使用CDN加速
  • 开启nginx，Gzip压缩
  • 使用强缓存、协商缓存
  • 减少、合并请求

webpack优化

  • 按需加载
  • 代码打包体积压缩
  • 移除console
  • 压缩图片、字体等本地资源
  • 分离css文件，单独进行打包

浏览器相关

跨域

浏览器的同源策略会导致跨域问题

同源策略

同源指的是：协议、端口号、域名必须一致。

同源策略的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作

解决跨域问题
  • CORS：服务器开启跨域资源共享
  • JSONP：利用JavaScript标签不存在跨域限制，只支持GET请求
  • Nginx：反向代理

本地存储

Cookie
  • 存储小，只有4k
  • 不同域之间不能共享
  • 不安全，容易被拦截
SessionStorage
  • 存储在内存中，体积相对较大
  • 页面关闭，数据会删除
  • 相对Cookie安全
LocalStorage
  • 体积大，可以存储更多内容
  • 生命周期长，需要手动删除
  • 存储在硬盘，不会像cookie一样被请求携带

从输入一个 URL 地址到浏览器完成渲染的整个过程

  1. 浏览器输入URL并回车
  2. 浏览器查找当前是否有缓存

  3. DNS解析URL得到IP

    1. 浏览器DNS缓存
    2. host文件缓存
  4. 建立TCP连接（三次握手）
  5. 发送HTTP请求
  6. 服务器处理请求，浏览器得到响应数据

  7. 浏览器解析渲染页面

    1. 解析DOM生成DOM树
    2. 解析CSS生成CSS树
    3. 合并DOM树和CSS树，生成渲染树
    4. 浏览器开始渲染页面（回流重绘发生在这个阶段）
  8. TCP连接关闭（四次挥手）

网络协议、安全相关

TCP、UDP协议

TCP和UDP都是在传输层定义的两种传输协议。基于UDP协议传输不能保证数据准确无误的送达，但UDP不仅可以支持一对一的传输方式，还可以支持一对一、一对多等形式。也不需要像TCP一样建立连接，所以传输速度快。

TCP的目的是提供可靠的数据，并且需要在传输前建立连接（三次握手）。只支持一对一进行传输。

区别：

  • TCP协议可靠，UDP协议不可靠
  • TCP面向连接，UDP采用无连接
  • TCP可以保证数据顺序，UDP不能
  • TCP一对一传输，UDP可以一对多、多对一等形式

HTTP和HTTPS区别

  • HTTP是明文传输，不安全。HTTPS基于SSL进行加密传输，比较安全。
  • HTTPS需要CA证书，HTTP不需要。
  • HTTP端口为80，HTTPS端口为443

HTTP状态码

  • 1XX: 请求正在处理

  • 2XX：正常状态码

    • 200 ：请求处理成功
    • 201 ： 请求成功并且服务器创建了新资源
    • 202 ：服务器已经接收请求，但尚未处理

  • 3XXX：重定向状态

    • 301 ：请求重定向
    • 302: 临时重定向
    • 303: 临时重定向，使用get请求新的url
    • 304：浏览器缓存相关

  • 4XX：错误状态码

    • 400: 服务器无法理解请求格式，需要修改请求内容后再次发起请求
    • 401: 请求未授权
    • 403: 禁止访问
    • 404: 服务器上无法找到请求资源

  • 5XX：服务器错误

    • 500: 服务端错误
    • 503: 服务器暂时无法处理请求

HTTP三次握手、四次挥手

三次握手

三次握手是在建立TCP连接时，客户端和服务端总共发送三个包。进行三次握手的主要目的就是为了确认双方的接受能力和发送能力都是正常的，为后面传输可靠数据做准备。

报文：

  • 序号：表示发送的数据字节流，确保TCP传输有序，对每个字节编号
  • 确认序号：发送方期待接收的下一序列号，接收成功后的数据字节序列号加 1。只有ACK=1时才有效。
  • ACK：确认序号的标志，ACK=1表示确认号有效，ACK=0表示报文不含确认序号信息
  • SYN：连接请求序号标志，用于建立连接，SYN=1表示请求连接
  • FIN：结束标志，用于释放连接，FIN=1表示关闭本方数据流

三次握手：

  1. 第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN，此时客户端处于 SYN_SEND 状态。
  2. 务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN。同时会把客户端的 ISN + 1 作为ACK的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态。
  3. 客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，双方已建立起了连接。
四次挥手
  1. 客户端会发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。
  2. 服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。
  3. 如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
  4. 客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态，服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。
为什么需要四次挥手

因为当服务端收到客户端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当服务端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉客户端，“你发的FIN报文我收到了”。只有等到我服务端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四次挥手。

HTTP缓存

强缓存

使用强制缓存策略，如果缓存资源有效，就直接使用缓存资源，不需要向服务器发送请求。强制缓存通过两种方式来设置，在request headers中的Expires属性和Cache-Contorl属性。

Expires属性，指定资源的过期时间。在过期时间以内，改资源可以被缓存使用，不需要向浏览器发送请求。这个时间依赖于服务器时间，会存在服务器时间和客户端时间不一致。

Cache-Control属性：

  • private： 仅浏览器可以缓存
  • public：浏览器和代理服务器都可以缓存
  • max-age=xxx 过期时间，单位为秒
  • no-cache 不进行强缓存，但会有协商缓存
  • no-store 不强缓存，也不协商缓存

如果request header中，Cache- Control的值中有max-age=xxx，这个时候走强缓存。如果值为no-cache，表明没有命中，走协商缓存。如值为no-store，不使用缓存。

协商缓存

如果没有命中强制缓存，在设置协商缓存情况下，先向服务器发送一个请求，如果资源没有发生修改，则返回一个304的状态，让浏览器使用本地的缓存副本。如果资源发生修改，则返回修改后的资源。在request headers中的Etag属性和Last-Modified属性，来进行设置。其中，ETage优先于Last-Modified。

命中协商缓存条件：

  • Cache-Control: no-cache
  • max-age时间过期

Last-Modified（文件的修改时间）：

服务器在响应头中添加Last-Modified属性，来指出资源最后一次修改时间。当浏览器发起请求时，会在request headers中添加一个If-None-Match属性，值为上一次请求的资源返回的Last-Modified值。服务端会通过这个属性和资源最后一次修改时间进行对比，以此来判断资源是否修改。如果资源没有修改，请求返回304状态，客户端使用本地缓存。如果资源有修改，则返回修改的资源。

这种方式有一个缺点，Last-Modified标记的时间只能精确到秒。

ETag（文件改动）：

同样在服务器返回资源的时候，在头信息中添加ETag属性，这个属性是资源的唯一标识符。当资源改变时，这个值也会改变。在一下次请求资源时，会在request headers中添加一个If-None-Match属性，值为上一次请求的资源返回的ETag值。服务端会通过这个属性和资源最后一次修改时间进行对比，以此来判断资源是否修改。这种方式比Last-Modified更加准确。

区别
  • 强缓存优先级高于协商缓存
  • 强缓存不需要发请求，协商缓存需要。
  • 强缓存返回的状态码为200，协商缓存返回304
  • ctrl+F5强制刷新会跳过所有缓存，而F5刷新跳过强缓存，但是会检查协商缓存。

POST和GET的区别

  • 传递的参数不同，POST传递的参数在request body中，GET传递的参数在url后拼接
  • POST相对GET请求安全
  • GET请求长度有限制，POST没有
  • GET请求会被浏览器主动缓存，POST不会，要手动设置
  • GET请求一般用于查询，POST一般用于提交某种信息进行某些修改操作

XSS、csrf攻击

XSS（跨站脚本攻击）

Xss(cross-site scripting) 是一种代码注入攻击，攻击者往 Web 页面里插入恶意 html 标签或者 javascript 代码。在骗取用户点击后获取用户，获取用户信息。

避免方式：

  • url参数通过encodeURIComponent方法进行转义
  • 尽量不使用InnerHtml插入HTML内容
  • 对用户输入的地方和变量都需要仔细检查长度和对 ”<”,”>”,”;”,”’” 等字符做过滤
CSRF（跨站请求伪造）

CSRF（Cross-site request forgery）攻击者盗用你的身份信息，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

避免方式：

  • 添加验证码验证

  • 使用token

    • 服务端给用户生成一个token，加密后传递给用户
    • 用户在提交请求时，需要携带这个token
    • 服务端验证token是否正确

前端工程化

webpack的loader和plugin的区别

loader

loader是导出一个函数的javascript模块，webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。如babel-loader、Css-loader、image-loader、url-loader、Saas-loader...

plugin

Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。如html-webpack-plugin、mini-css-extract-plugin、uglifyjs-webpack-plugin

手写系列

节流防抖

new操作符

call、bind、apply实现

发布订阅模式

class EventEmitter {
  constructor() {
    // 事件列表
    this.eventList = {};
  }

  // 监听
  on(name, callBack) {
    // 以 name 为 key  创建容器   如果有容器就不用创建
    if (!this.eventList[name]) {
      this.eventList[name] = []
    }

    // 把事件放入容器
    this.eventList[name].push([callBack])
  };

  // 触发
  emit(name, data) {
    if (!this.eventList[name]) {
      return new Error('没有找到事件！')
    };

    // 从容器中取出事件进行调用
    this.eventList[name].forEach((item) => {
      item(data)
    })
  };

  // 只触发一次
  once(name, callBack) {
    if (!this.eventList[name]) return;
    // 利用off  在callBack执行后  关闭订阅
    function onceFn(callBack) {
      callBack();
      this.off(name, callBack);
    };
    this.on(name, onceFn)
  };

  // 关闭监听  若第二个参数没有  移除 name 下所有的事件
  off(name, callBack) {
    if (!this.eventList[name]) return;

    if (callBack) {
      // 只移除对应的callBack
      this.eventList[name] = this.eventList[name].filter((item) => {return item !== callBack});

      // name容器长度为0 直接删除整个 name 事件订阅发布
      if (this.eventList[name].length === 0) {
        delete this.eventList[name];
      };
    } else {
      // 没有 callBack  直接删除整个 name 事件订阅发布
      delete this.eventList[name];
    };

  };

};

函数柯里化实现

promise

实现一个队列

数组去重

深浅拷贝

交换两个变量的值

数组扁平化

输出结果

闭包

var name = "The Window";   
　　var object = {   
　　　　name : "My Object",   
　　　　getNameFunc : function(){   
　　　　　　return function(){   
　　　　　　　　return this.name;   
　　　　　};   
　　　　}   
};   
alert(object.getNameFunc()());  //"The Window"
function aaa(){
 var a=0;
 function bbb() {
  a++;
  alert(a);
 }
 return bbb
}
var ccc=aaa();
ccc();  //结果为1
ccc();  //结果为2
var ddd=aaa();
ddd();  //结果为1
ddd();  //结果为2

github 同步

参考：

2021」高频前端面试题

2021年我的前端面试准备

震惊！前端300基础面试题+答案、分类学习整理（良心制作）持续更新

高级知识点

你可能感兴趣的:(前端面试)

  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 2019年面试遇到的笔试题 程序猿阿峰
    前端面试，肯定是少不了笔试题，果然，今天去面试就遇到的笔试题，慌了一批。回来赶紧整理了一下一、css3的常用的新特性？flex布局和传统布局有什么区别？css3的新特性那就多啦，简单的列举了几个：过渡transition:CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)动画animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认
  • 最新vue3 +ts 安装并封装axios_vue3 ts axios封装，前端面试题2024对kotlin的要求 2401_84433769 程序员前端面试学习
    自学几个月前端，为什么感觉什么都没学到？？这种现象在很多的初学者和自学前端的同学中是比较的常见的。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。这就会给人一个错误的信息就是，我把资料上的学
  • 如何将html模板资源转为vuecli项目，2024阿里巴巴前端面试真题解析 m0_60607971 2024年程序员学习前端html面试
    这里要注意一下。有些js是作者用于业务逻辑写的，有些js则是引入的成熟的第三方的js文件。如果直接也在vue中script处import这些js的话，是有各种问题的（最好别这么干）本人是前端小白，没法知道哪些是作者写的，哪些是引用的怎么办例如上图的这些。一般来说说可以看下具体js文件的内容。如果是压缩成一行的，基本上就是第三方的js库。这些第三方的库一般可以通过npminstallxxxx来进行安
  • 前端面试：CSS优化、提高性能的方法有哪些？ 真愚翁 前端css
    在前端开发中，CSS优化和提高性能是确保网页快速加载和流畅运行的重要环节。以下是一些有效的方法：减少CSS文件大小：压缩CSS：使用工具（如CSSNano或CleanCSS）压缩CSS文件，去除空格、注释和不必要的字符。合并文件：将多个CSS文件合并为一个文件，减少HTTP请求次数。使用CSS预处理器：使用Sass、Less等预处理器，可以更好地组织和管理CSS代码，减少冗余，提高可维护性。避免使
  • 大前端面试题集锦——HTML篇 Midshar.top 前端html
    HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得
  • 高频面试题：ReactNative前端面试频率较高的面试题和答案（十六） 夲奋亻Jay 高频面试题react跨端reactnative前端面试
    ReactNative是一个由Facebook开发的框架，它允许使用React来开发原生移动应用。以下是一些在前端面试中可能会问到的关于ReactNative的高频面试题及答案：ReactNative是什么？答案：ReactNative是一个基于React构建的框架，允许使用JavaScript和React的编程方式来开发原生移动应用。ReactNative与React有什么不同？答案：React
  • 前端技能树，面试复习第 54 天—— 手写代码：情景题 编程轨迹_ 前端面试复习笔记前端面试题手写题真题场景题
    ⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。本文已收录至前端面试题库专栏：《前端面试复习笔记》（点击订阅）。1.循环打印红黄绿下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次；如何让三个灯不断交替重复亮灯？
  • 前端面试题（附答案）持续更新中…… 卖家导航 程序员前端
    块标签：div、h1~h6、ul、li、table、p、br、form。特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行行标签：span、a、img、textarea、select、option、input。特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。5.清除浮动⭐⭐⭐父级div定义overflow:hidden结尾处加空div标签c
  • 2023前端面试时遇到的面试题 No regrets, no return 前端vue.js面试
    2023前端面试时遇到的面试题1.数组有哪些方法push、pop、unshift、shift、join、forEach、filter、map、find…2.filter和some返回的分别是一个什么filter返回的是一个数组，some返回的是一个布尔值3.es6新增了哪些方法let和cconst、模板字符串（）、扩展运算符、for…of、解构、箭头函数、symbol数据类型、Set和Map方法等
  • 【Uniapp】前端面试题 菜鸟una 前端八股文面试题前端uni-appjavascript
    Uniapp部分文章目录Uniapp部分1.Uniapp的页面生命周期和Vue的生命周期有何区别？1）Vue的生命周期2）Uniapp的页面生命周期3）区别2.Uniapp的rpx转换px的公式？3.Uniapp的tabbar自定义，怎么实现突起home标？1）配置自定义tabBar2）创建自定义tabBar组件3）突出显示“home”标4.Uniapp的tabbar自定义，怎么实现隐藏原生tab
  • 【前端面试】标记、绘画视频的某一帧 贾明恣 前端音视频
    搜寻三方库在前端开发中，Canvas是一个强大的工具，可以用来创建图形、动画和各种视觉效果。为了简化和增强Canvas的使用，社区中出现了许多库。以下是一些主流的Canvas库及其特性和性能对比：Fabric.js：概述：Fabric.js是一个基于对象的Canvas库，提供了丰富的API来操作和管理Canvas元素。它特别适合处理交互式和可编辑的图形应用，如在线图像编辑器、绘图工具等。优点：面向
  • 【前端面试】深入回答http状态码 贾明恣 前端http网络协议
    HTTP状态码是服务器在响应HTTP请求时返回的三位数代码，这些代码用于表示请求的结果。状态码分为五个类别，每个类别都有不同的含义：1xx（信息性状态码）：表示服务器接收到请求，并需要请求者继续执行操作。100Continue：表明服务器已接收到请求的一部分，要求客户端继续发送请求。如果服务器在接收到包含Expect:100-continue的请求后，没有准备好接收请求体，或者服务器配置不允许发送
  • 【前端面试】事件监听机制&React 的事件系统实现 贾明恣 前端react.js面试
    目的React实现了自己的事件系统，主要是为了解决以下几个问题：跨浏览器兼容性：不同的浏览器在处理DOM事件时有不同的实现，React的事件系统抽象了这些差异，提供了一致的API给开发者使用。性能优化：React可以对事件进行池化（Pooling），这意味着事件对象可以在事件处理过程中被重用，减少了内存分配和垃圾回收的开销。合成事件（SyntheticEvents）：React使用合成事件来封装所
  • JavaScript前端面试题——JS 中 Map 和 WeakMap 有什么区别 ? 早八睡不醒午觉睡不够的程序猿 开发语言javascript前端
    刷了面试题之后才知道自己的知识是多么薄弱，这题我连Map和WeakMap是什么都不知道参考答案在JavaScript中，Map和WeakMap都是键值对的集合，但它们有几个重要的区别：1.键类型：Map对象的键可以是任何类型,包括基本数据类型和对象类型，而WeakMap对象的键必须是对象类型。2.垃圾回收：Map对象中的键和值都会被常规垃圾回收机制回收，而WeakMap中的键是弱引用，即在对象被垃
  • 2024最新前端面试真题-超详细答题思路解析（持续更新ing） 我的E样人生 前端面试职场和发展
    为了更加高效的准备面试，所以面试题都来源于牛客网真题，让面试题更符合实际。1cookie，sessionStorage，localStorage的区别（1）考察点分析存储机制：了解每种存储方式的实现原理和数据存储方式。生命周期：掌握每种存储方式的数据存储时长和生命周期管理。作用域：理解每种存储方式的数据访问范围和作用域限制。（2）最终答案Cookie：存储机制：以文本形式存储在客户端浏览器中，通过
  • Vue + ElementUI 实现全国各个省份相对应城市的联动选择_vue+elementui 省市区联动 2401_84617681 程序员前端面试学习
    打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader:rules="rules"label-width="150px">定
  • 面试php项目中遇到的难点,前端面试被问到项目中的难点有哪些？ weixin_39966130 面试php项目中遇到的难点
    在每个前端求职者的面试过程中，一定都有过被面试官问到项目中的难点，而答不上来的情况。为了让大家在前端面试前准备得更加充足，小编准备了一些易被忽视且难度较高的前端面试题，希望可以帮助大家更加顺利完成求职，找到自己满意的工作。1.流式布局如何实现，响应式布局如何实现？流式布局：也叫fluid,当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间。场景：主要用于关键词搜索或者热门标签等场景
  • 前端面试遇到的问题记录（实习） 为什么没有实习 前端javascript
    一、vue2和vue3的区别Vue2和Vue3之间存在一些重要的区别，这些差异主要体现在架构、API、性能优化和开发体验等方面。以下是Vue2和Vue3的主要区别：数据绑定原理:Vue2使用ES5的Object.defineProperty方法来劫持数据变化。Vue3则使用了ES6的ProxyAPI来代理数据，这样可以更高效地监听整个对象和数组的变化。支持碎片(Fragments):Vue2不支持
  • 前端面试题系列之-数据结构及算法篇 wowoqu
    排序算法篇一、冒泡排序冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。算法描述比较相邻的元素。如果第一个比第二个大，就交换它们两个；对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这
  • Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级 2401_84433769 程序员前端面试学习
    结尾正式学习前端大概3年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】取消盒子的
  • 2024年前端真实面试题集合（前端面试关注我就够了） 泛微集团小王 前端面试题前端面试
    前言：从2024年1月初到2月底为止，由本人伪装其他经验段去面试收集的来。面试城市在昆明、贵阳。前后一共差不多20家。其中三家大公司，其他都是中小型公司。拿到的offer薪酬也不是很理想，有几个规模比较大，比较理想的公司也是平薪甚至降薪拿到的offer，当然跟我本人自身的三脚猫功夫有关。整体大环境不是很友好，特别卷，各位靓仔靓女简历里的项目尽量不要带有电商系统，后台管理系统的字眼，很多hr，面试官
  • 手写Promise（前端面试题）第二篇 ·实例方法与静态方法 DT—— 手写promise前端javascript面试
    目录1.实例方法catch2.finally方法3.MyPromise.resolve()4.MyPromise.reject()5.MyPromise.race()6.MyPromise.all()7.MyPromise.allSettled()8.MyPromise.any()总结1.实例方法catch在promise中，每一个promise实例都有一个catch方法，该方法接收一个回调函数，
  • 手写Promise.all() 方法(前端面试真题） DT—— 前端面试前端javascript开发语言面试
    文章目录promise简介第一版第二版小结promise简介Promise是JavaScript在ES6中引入的一种用于异步计算的对象。它代表了一个可能现在还没有结果，但将来某个时刻会有结果的值。Promise的主要目的是提供一个更合理、更强大的方式来处理异步操作。状态：一个Promise对象有三种状态：Pending（等待中）：初始状态，既不是成功，也不是失败状态。Fulfilled（已成功）：
  • 2024前端面试题-篇章二 蕉君桑 前端面试题前端
    几种实现css绝对居中(水平、垂直居中)的方法方法有很多需要的自己再去探索1.flex+margin:auto.test{display:flex;width:600px;height:400px;background-color:rgb(39,203,170);.item{width:100px;height:100px;background-color:skyblue;border:1pxso
  • 前端面试题每日一学_3 努力的小朱同学 前端每日一学前端面试
    今日一题：下面的JS代码执行的结果是什么？consta=Boolean()console.log(a);constb=Boolean(null);console.log(b);constc=Boolean(NaN);console.log(c);constd=Boolean('false');console.log(d);conste=Boolean({});console.log(e);cons
  • 第 35 题：如何实现字符串反序？ Noxus丶SJ
    利用数组的reverse实现letarr='abcdefg';letres=[...arr].reverse().join('');console.log(res);//gfedcba文章的内容/灵感都从下方内容中借鉴【持续维护/更新500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues【大数据可视化图表插件】https
  • 【前端面试】rpc协议 贾明恣 前端面试rpc
    rpc的概念RPC（RemoteProcedureCall，远程过程调用）是一种计算机通信协议，它允许一个程序（客户端）通过网络向另一个程序（服务器）请求服务，使得开发者可以像调用本地函数一样调用远程服务器上的函数或方法。RPC的主要特点包括：透明性：调用远程过程就像调用本地过程一样，对调用者来说，两者没有区别。位置无关性：调用者不需要知道服务的物理位置，也不需要了解服务是如何实现的。协议无关性：
  • 【前端面试】React深度学习（下） 贾明恣 前端面试专栏前端面试react.js
    render阶段：构建Fiber树Fiber节点是如何被创建并构建Fiber树的render阶段的工作可以分为“递”阶段和“归”阶段。“递”阶段会执行beginWork:根据传入的Fiber节点创建子Fiber节点，并将这两个Fiber节点连接起来。当遍历到叶子节点（即没有子组件的组件）时就会进入“归”阶段。“归”阶段会执行completeWorkbeginWorkcurrent：当前组件对应的F
  • 2024React前端面试题 司宁 前端面试题前端
    1.Diff算法Diff算法比较过程第一步：patch函数中对新老节点进行比较如果新节点不存在就销毁老节点如果老节点不存在，直接创建新的节点当两个节点是相同节点的时候，进入patctVnode的过程，比较两个节点的内部第二步：patchVnode函数比较两个虚拟节点内部如果两个虚拟节点完全相同，返回当前vnode的children不是textNode，再分成三种情况-有新children，没有旧c
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他