【秋招面经】搬运大华和汉得前端题目

纵有千堆雪与长街

已于 2022-10-13 11:34:34 修改

阅读量1k

点赞数 1

分类专栏：秋招面经文章标签：前端 javascript 开发语言

于 2022-10-12 23:59:42 首次发布

本文链接：https://blog.csdn.net/qq_40992225/article/details/127285876

版权

秋招面经专栏收录该内容

18 篇文章 1 订阅

订阅专栏

前言

本次主要搬运大华和汉得面试的常问问题

文章目录

前言
- - - 本次主要搬运大华和汉得面试的常问问题
问题总结

问题总结

ajax的流程?

1、创建XML HttpRequest 对象，即创建一个异步调用对象。
2、创建一个新的HTTP 请求，并指定该HTTP 请求的方法，URL及验证信息
3、设置响应HTTP请求状态变化的函数（onreadystatechange）。
4、发送HTTP 请求。
5、获取异步调用返回的数据。
6、使用JavaScript和DOM 实现局部刷新

css盒模型(IE盒、标准盒) ？

CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。

CSS盒模型分为两种：标准盒模型、IE盒模型（也称为怪异盒模型）。

两种盒模型的区别在于他们的总宽度的计算公式不一样。

在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。

标准盒子模型：

width = 内容（content）的宽度
height = 内容（content）的高度
总宽度：width + margin（左右） + padding（左右） + border（左右）
总高度：height +margin（上下） + padding（上下） + border（上下）
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒模型（怪异盒模型）

width = border + padding + 内容（content）的宽度
height = border + padding + 内容（content）的高度
总宽度：width + margin（左右）（即 width 已经包含了 padding 和 border）
总高度：height + margin（上下）（即 height 已经包含了 padding 和 border）
设置 padding 、border 后，真正宽度或高度就会改变。
box-sizing
CSS 中的 box-sizing 属性定义了 user agent（用户计算机程序）应该如何计算一个元素的总宽度和总高度。
属性值：border-box（IE盒模型）、content-box（标准盒模型）

H5新增标签?H5存储相关API？

h5新增标签
 关于H5的存储方式

flex布局?

Flex布局详解

less和sass的区别，是怎么使用它们的 ?

sass和less的区别以及如何使用

如果有多个请求，那么可以用promise的哪些方法?

关于Promise
Promise是异步编程的一种解决方案，（大白话就是让这个异步可以写成同步的感觉，向下顺次执行）比传统的解决方案—回调函数和事件—更合理和强大，最主要解决的是死亡的地狱回调
Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是 pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的，我们可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

promise 能解决什么问题

回调地狱多个回调相互嵌套导致代码维护困难，代码臃肿
支持多并发的请求
解决可读性差的代码问题
解决代码的信任问题，promise只有一次决议
promise的常用api
Promise.then():得到异步任务的正确结果
Promise.catch():获取异常信息
Promise.finally():无论成功还是失败都会执行
Promise.all():并发处理多个异步任务，所有任务执行完成才能得到结果
Promise.race():并发处理多个异步任务，只要有一个任务完成就能得到结果

promise中race()和all()方法的异同？
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。Promise.race()将里面返回最快的结果返回，不管结果本身是成功状态还是失败状态。

常用的数组方法，我说了reduce加递归实现数组拍平，面试官接着问了ES6中新增的数组拍平方法(flat) ？

【JavaScript总结】之数组
flat() 方法
作用： flat() 方法是拍平数组(就是整理原数组的元素，然后放在一个新的数组中)
返回值：拍平以后的数组
语法：数组.flat(数字) 其中数字：表示扁平化多少层，默认是1，可以填其他正整数，也可以填Infinity（无穷大）

// arr这个数组里面的元素又是数组，称为二维数组
let arr = [
    [1, 2, 3],
    ['a', 'b'],
    [4, 5, 6]
]
// 使用flat()方法可以让arr数组元素不再是数组
let flat1 = arr.flat(); // 不填数字，默认拍一层
console.log(flat1);   //[1, 2, 3, "a", "b", 4, 5, Array(2), Array(2)]
 
let arr1 = [
            [1, 2, 3],
            ['a', 'b'],
            [4, 5, [6, 7],
                [8, 9]   //数组元素中又嵌套数组，即arr1变为了三维数组
            ]
        ]
let flat2 = arr1.flat(1);  // 数字为1，表示拍1层，由于原始是三维数组，所以无法全拍平
console.log(flat2);   // [1, 2, 3, "a", "b", 4, 5, 6]

注意：使用flat()方法要起效果的前提条件是：数组是个多维数组，不然无需拍平。如果是n维数组，要想全拍平，则数字需要填 n-1 ，如果嫌弃计算麻烦，直接填Infinity即可

vue-router如何在不同页面间传递数据？

vue-router是什么?对vue-router的实现原理，使用方式以及参数传递的了解

grid flex布局你用过吗？用过哪些属性？

css3 布局、flex布局、grid布局的常用属性(笔记)

console.log(1+…) 1+undefined，1+true，1+‘false’，1+{}，1+[]等？

console.log(1 + undefined); //NAN
console.log(1 + true); //2
console.log(1 + 'false'); //1false
console.log(1 + {}); //1[object Object]
console.log(1 + []); //1

splice的用法？

splice()
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

删除功能，第一个参数为删除的起始位置，第二个参数为要删除几个。（用法：array.splice(index,num)，返回值为删除内容，array为结果值。）
插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。（用法：array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值。）
替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。（用法：array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。）

 const months = ['Jan', 'March', 'April', 'June'];
 console.log(months.splice(1, 3)); //['March', 'April', 'June']
 console.log(months); //['Jan']

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

let var const的区别？

var、let、const的区别总结

jQuery和vue的区别？

jQuery：曾经是前端最流行的js库。

Vue：是一个兴起的js库，是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把view和Model层连接起来，通过对数据的操作完成对页面视图的渲染。

二者的区别是：

一、Vue 和 jQuery 对比 jquery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

二、Vue 则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，他们通过 Vue 对象这个 vm 实现相互的绑定。这就是传说中的 MVVM。

ajax和axios的区别？

axios和ajax的区别是什么

vue的生命周期函数？

【VUE生命周期】

行内元素和块级元素的区别，列举出你知道的行内元素和块级元素？

【秋招面经】搬运深信服以及360前端面经第一个问题

get和post请求的不同？

应用场景：GET请求是一个幂等请求（不会对服务器的运行状态造成任何的负担与阻塞），一般Get请求用于对服务器资源不会产生影响的场景，比如请求一个网页的资源。而Post不是一个幂等请求，一般用于对服务器资源会产生影响的情景，比如注册用户这一类操作。
是否缓存：浏览器一般会对Get进行缓存，但很少对Post请求缓存。
发送的报文格式：Get请求的报文中实体部分为空，Post请求的报文中实体部分一般为向服务器发送的数据。
安全性：Get请求可以将请求的参数放入url中向服务器发送，这样的做法相对于Post请求来说不太安全，因为url会被保留在历史记录中。
请求长度：浏览器由于对url长度的限制，所以会影响get请求发送数据时的长度。这个限制时浏览器规定的，并不是RFC规定的。
参数类型：post的参数传递支持更多的数据类型。

怎么清除浮动？

清除浮动的四种方法

jQuery中id选择器和class选择器的区别？

ID选择器使用ID来选择元素，例： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲idtest1"). 而 cl\dots$ (“.classtest1”)。当只需要选择一个元素时，使用ID选择器，如果需要选择具有相同 CSS class的元素，就要用class 选择器。

js用在什么情况下？

在body中插入的JavaScript在页面加载时会被执行。
在head中插入的JavaScript会在被调用时执行。

ajax请求拦截怎么实现？

Ajax拦截器的实现

前端Ajax请求超时处理？

前端Ajax请求超时处理

vue生命周期的用处？

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。

vue生命周期中mounted的作用？

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
在这里插入图片描述

怎么用原生js进行表单验证？

知识点：
① form标签的action属性为提交地址，method属性为提交方式，取值有get和post。若想禁止点击type=submit//button按钮后提交表单内容，可通过form对象.οnsubmit=function（）{return false}/对象.οnsubmit=“return false;”"来禁止。默认是return true的。故默认是直接提交的。
② 显示禁止图标：cursor:not-allowed。
③ 去掉button按钮的点击后边框变蓝样式：outline:none
④ vertical-align:middle可实现父元素的子元素垂直对齐。
⑤ click、blur、focus事件可直接调用，无论是否写该事件对应的函数。eg:对象.focus()。若写了该事件对应的函数，则会执行该函数内的内容。
⑥ 当要将输入的密码显现出来时可将type="password"变成type=“text”
⑦ 在验证一个字符串内是否有数字、字母和字符时，可进行三次match匹配，每次只匹配一样（例如：第一次匹配数字，第二次匹配字母，第三次匹配字符），若都匹配上，则字符串中是符合标准的，否则，是不符合标准的。
⑧ 函数名.call(this)会将自定义对象中的函数中的this变换成其他对象，而不是该自定义对象。（默认情况下，在自定义对象中的函数中的this为该自定义对象）

思想：在点击提交按钮后，让页面全部必填元素元素先得到焦点，再失去焦点，因此会触发每个元素对应的失焦事件。在每个元素的失焦事件对应的函数中判断对应内容是否都符合规则，若不符合，则显示错误提示信息，否则不显示。当所有元素中的内容都符合规范时才可提交。

原生js —— 表单验证

vue中传参问题：子传父/父传子/兄弟传值？

父给子：props；

子给父：自定义事件；

任意组件通信：全局事件总线；

另外，vuex、插槽、路由传参、本地存储都是可以进行组件之间传值的。

js的数据类型有哪些？

简单数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt。
复杂数据类型（引用数据类型）：Object。

判断js的数据类型？

JS 判断数据类型的方法

说一下怎么实现水平垂直居中布局？

【CSS面试题】盒子水平垂直居中的五种方式

操作js数组有哪些方法？

JavaScript数组常见操作有哪些

数组求和得最快的方法？

forEach(callback(currentValue,index,array)，thisArg);

   function sum(arr) {
        let s = 0;
        arr.forEach(function(val, idx, arr) {
            s += val;
        }, this);
        return s;
    };

js怎么给对象赋值?

JavaScript给对象赋值的两种方式

怎么操作浅拷贝深拷贝吗?

深拷贝与浅拷贝是什么？如何实现浅拷贝和深拷贝？

对dom进行操作是在哪个生命周期?

在 mounted 中可以访问操作 DOM。因为在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上。

页面布局方式？ flex布局用了哪些属性呢？怎么垂直居中？

页面布局的几种方式？

css3新特性了解哪些，说一下？

CSS3新增了哪些新特性？

null和undefined的区别？null是什么类型？

undefined和null两种数据类型的区别

vue中的diff算法 ?

diff算法的实现过程
初次渲染的时候，将VDOM渲染成真正的DOM然后插入到容器里面。
再次渲染的时候，将新的vnode和旧的vnode相对比，然后之间差异应用到所构建的真正的DOM树上。

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。每遍历到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。
渲染的一些不同改变：
1.如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3.文本改变，直接修改文字内容。
4.移动，增加，删除子节点时。

computed和watch的区别 ?

Vue中 computed 和 watch 区别及应用场景详解
相同点：他们两者都是观察页面数据变化的。
不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。

异步promise，async，await?

异步编程在js中有三种场景，分别是定时任务，ajax，事件函数，如果不嵌套异步任务，则返回的结果顺序是不能保证的，要想异步任务有序，就需要嵌套多个异步任务，但是这种做法保证了返回结果的顺序却造成了回调地狱的现象，代码可读性也很低，所以用promise来解决。
首先创建promise的实例对象，然后再在它的构造函数中传递一个函数function（resolve，reject），函数体内用来处理异步任务，异步的结果返回来之后触发对应的方法，成功时调用resolve（）方法，失败时调用reject（）方法，最终resolve（）和reject（）的处理结果通过p.then()的方式来获取，p.then的参数有两个，分别对应正常的情况和异常的情况，分别可以获取到resolve（）获取的正常结果和reject（）获取的错误信息。
发送多个ajax请求执行多个异步任务，使用then的方式保证了他们顺序的执行顺序和返回结果
return 的是一个新的promise对象，下一个then调用的就是上一个return返回的这个新的promise实例对象，并且then中的参数data用于接收上一个异步任务的处理结果。
关于then参数中的函数返回值有两种情况，第一种就是返回一个新的promise的实例对象，那这个对象会调用下一个then，从而在下一个then中会得到上一个then中处理结果；第二种情况就是返回一个普通值，那这个普通值会直接传递给下一个then，从而下一个then参数中的函数可以接受这个值，在这种情况下then会默认产生一个promise实例对象，从而保证了下一个then可以进行链式操作。
catch专门用来处理失败情况，相当于接受then的第二个参数信息。
finally方法是不管失败成功与否都一定会执行的方法，可以返回一个信息，比如success。

通过暴露出的全局变量axios直接调用它的api（如get），然后传入url地址就可以发送请求了，通过then的方式获取后台数据，并且通过.data才能获取到实际的数据，这个data属性名称是固定的，属于axiosAPI的一部分，用于获取后台数据。
async/await总结：首先封装一个函数，在函数前面加上async关键字，通过await来处理异步任务，await后面跟上一个promise实例对象，在promise里可以处理具体的异步任务，await前面通过返回值的形式得到异步处理的结果，就不要then做回调函数了，代码比较简洁。async的返回值是一个新的promise实例对象，如果在asyns函数最后返回一个具体的值的话，可以在调用async函数的时候通过then来得到函数的返回值。

浏览器缓存?

浏览器缓存机制

防抖(debounce)和节流(throttle) ?

节流和防抖

伪类伪元素的区别及属性?

【秋招面经搬运】字节一面之伪类和伪元素

websocket在那些地方用到过?

WebSocket就是这么简单

浏览器存储有哪些方法？它们之间的区别?

sessionStorage的区别
1、Cookie
cookie 是存储在本地的数据，本身非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码“，这通常就是通过在Cookie 中存入一段辨别用户身份的数据来实现的。
2、LocalStorage
仅在客户端保存(即浏览器)，不参与和服务器的通信:没有时间限制，即使浏览器关闭，数据依然存在；
3、sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同，做过后端的同学都知道Session这个词，翻译过来就是会话。而sessionStorage是前端的一个概念。它只是可以将部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是关闭后，sessionStorage 中的数
据就会被清空。
4、三者区别
(1)生命周期不同
Cookie一般由服务器生成，可设置失效时间如果在浏览器端生成cookie,默认是关闭后失效。
localStorage除非被永久清除，否则永久保存。
sessionStorage仅在当前会话会有效，关闭页面或浏览器后被清除
(2)存放数据的大小不同
Cookie一般为4kb
localStorage和sessionStorage一般为5mb
3) 与服务器端通信不同
Cookie每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题
lcalStorage和ssionStorarge仅在客户端(即浏览器)中保存，不参与和服务器的通信。
(4)易用性
Cookie需要程序员自己来封装，原生的cookie接口不够友好
lcalslorare和sstroge原生接口可以接受，可对以封装来对bjef和Aray有更好的支持

websocket你在那些地方用到过?

WebSocket的理解以及应用场景

http状态码？

网络状态响应码用来表示网页服务器HTTP响应状态的3位数字代码。请求状态码如果1开头就是临时相应，2开头一般表示成功，3开头是重定向，4开头是客户端错误，5开头是服务器错误。平时常见的响应状态码包括：200（成功）、301（永久重定向）、302（临时重定向）、400（错误请求）、401（未授权）、403（禁止）、404（未找到）、500（服务器内部错误）、503（服务不可用）

vue中异步请求放在哪个生命周期中？

得看实际情况：一般在 created 里面就可以，如果涉及到需要页面加载完成之后的操作话就用 mounted；

created 阶段的优势是：请求时间比较早，页面 loading 时间相对较短；（调用异步请求最佳，用户就越早感知页面的已加载）
mounted 阶段的优势是：页面已经渲染完成，如果想请求之后进行 DOM 操作的话，必须在 mounted 阶段发起请求

css中与字体相关的属性有哪些？

html中样式属性有哪些,css字体样式属性有哪些？

input标签常用的属性？

name属性：元素的名称，也就是name的值代表当前input元素的名字；
value属性：元素的默认值

1）当input type=“text”、“password”、"hidden"时，定义输入字段的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。

style属性：为input元素设定CSS样式；
width属性：当input type="image"时，通过width属性控制元素的宽度；
height属性：当input type="image"时，通过height属性控制元素的高度；
maxlength属性：定义input元素中可输入的最长字符数。

对语义化标签的理解以及有哪些？

什么是HTML语义化标签？为什么要用H5语义化标签？HTML5语义化标签有哪些

为什么setTimeout是宏任务？

为什么promise.then就是微队列？setTimeOut就是宏队列？

其实就是线程的事，宿主线程的回调就是宏队列，像setTimeout网络通信，JS是自己的，就是微队列。
或者可以这样说，因为promsise是ES的，setTimeout是浏览器的，归浏览器控制的属于宏任务，script脚本在浏览器上执行也算宏任务。一个是es规范，一个是w3c规范。

把文件发布到github上面的步骤？

两种方法上传本地文件到github
在这里插入图片描述

响应式布局和css的哪个属性相关？

CSS之响应式布局

css怎么设置响应式布局？

CSS–响应式布局的实现方式

watch怎么监听数据？

vue中的watch监听数据变化以及watch中各属性详解

http缓存？

在这里插入图片描述
强缓存和协商缓存:
浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；
下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持HTTP1.1，则使用 expires 头判断是否过期；
如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match和 If-Modified-Since 的请求；
服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200；
如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200；

迭代器怎么实现？

迭代器是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回下一个可用的值

如果在最后一个值返回后再调用next()方法，那么返回的对象中属性done的值为true，属性value则包含迭代器最终返回的值，这个返回值不是数据集的一部分，它与函数的返回值类似，是函数调用过程中最后一次给调用者传递信息的方法，如果没有相关数据则返回undefined

迭代器想要解决的问题是：
解决、或减少使用类似for循环过程中，访问变量集合的中出错的问题。比如：空指针引用。
用js实现一个简单的迭代器：

function myIterator(list) {
    let i = 0;
    return {
        next: function() {
            let done = (i >= list.length);
            let value = !done ? list[i++] : undefined;
            return {
                done: done,
                value: value
            };
        }
    };
}

由函数定义可以看出：
函数返回值是个对象，对象中，key为next、value为函数；
每调用一次next()，i+1，同时返回一个对象，对象就是集合的元素；

$attrs listener中listener监听的是什么？

$attrs和 $listeners

setTimeout和setInterval的区别？

setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

相同点：通常我们使用setTimeout()和setInterval()来创建定时器。

不同点：
1.一般情况下setTimeout()用于延迟执行某方法或功能，setInterval()则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步。
2.setTimeout()在指定的毫秒数后就会执行，而setInterval()则在每隔指定的毫秒数执行。也就是说setTimeout()执行一次，而setInterval()可以循环执行。

css定位有哪些？

position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。其属性值有五种，分别是— static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。

浏览器从输入url到回车经历了哪些过程？

1、浏览器的地址栏输入URL并按下回车
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3、DNS解析URL对应的IP
4、根据P建TC连接（三次握手）
5、HTTP发起请求
6、服务器处理请求，浏览器接HTTP响应
7、渲染页面，构建DOM树
8、关闭TCP连接（四次挥手）

路由的两种模式？

hashRouter和historyRouter区别：
history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听location对象hash值变化事件来实现
history的url没有’#'号，hash反之
相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。
原理：

HashRouter的原理：

通过window.onhashchange方法获取新URL中hash值，再做进一步处理

HistoryRouter的原理：
通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理

vue2和vue3的区别？

vue2和vue3的区别有以下8点：1、双向数据绑定原理不同；2、是否支持碎片；3、API类型不同；4、定义数据变量和方法不同；5、生命周期钩子函数不同；6、父子传参不同；7、指令与插槽不同；8、main.js文件不同。

Diff算法的原理？

15张图，20分钟吃透Diff算法核心原理，我说的！！！

CSS3与CSS2的区别？

区别：1、css3是css2的进阶，增加了一些新的属性，例如animation、box-sizing、icon等；2、css2推崇内容和表现效果分离的方式，而css3是朝着模块化发展的；3、css2没有兼容性问题，css3有。

什么是BFC，BFC的作用，如何开启BFC ?

什么是BFC？作用是什么？怎么开启？

如何用ES5实现const ?

JS面试题：ES5实现let 和const

call、apply、bind的区别 ?

bind和call、apply有什么作用？它们的区别是什么？

说说this的理解 ?this什么时候被绑定 ?

谈谈对this的理解和绑定原理

v-for中为什么要加key，原理是什么？

原理:

vue实现了一套虚拟dom,使我们可以不直接操作dom元素,只操作数据就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法
当页面数据发生改变,Diff算法只会比较同一层级的节点
如果节点类型不同,直接干掉前面的节点,再创建并添加新的节点,不会再比较这个节点后面的子节点
如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新
使用key给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,"就地更新"找到正确的位置区插入新的节点

作用:

高效的更新虚拟DOM,提高渲染的性能
避免数据混乱的情况出现

vuex和事件总线区别 ?

Vuex详解以及和事件总线的区别

说说V8的理解?

JS垃圾回收机制有哪些 ?

javascript垃圾回收机制原理：解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。通常采用的垃圾回收机制有两种方法：标记清除，引用计数。js 中最常用的垃圾回收方式就是标记清除。

HTTP2.0与HTTP1.1的区别 ?

HTTP1.1 和 HTTP2.0

请求的方式有哪些?说说OPTONS请求?

get：请求指定页面信息，并返回实体主体。
head：类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头。
post:向指定资源提交数据进行处理请求（例如提交表单或上传文件），数据包含在请求体中。post请求可能会导致新的资源的建立或已有资源的修改。
put：从客户端向服务器传送的数据取代指定的文档的内容。
delete：请求服务器删除指定的页面。
connect：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
options：允许客户端查看服务器的性能。
trace：回显服务器收到的请求，主要用于测试或诊断。

options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。

说说JavaScript弱类型的理解?

你知道为什么JavaScript是弱类型语言吗

new过程发生了什么，实现一下?

1.在内存中创建一个新的空对像。
2.让this指向这个新的对象。
3.执行构造函数里面的代码，给这个新对像添加属性和方法。
4.返回这个新对象(所以构造函数里面不需要return。

广度优先遍历跟深度优先遍历的区别?

区别：

（1）首先二叉树的深度优先遍历的非递归的通用做法是采用栈，广度优先遍历的非递归做法是采用队列。

（2）深度优先遍历：对每一个可能的分支路径深入到不能再深入为止，而且每个节点只能访问一次（二叉树的深度优先遍历比较特殊，可以细分为先序遍历，中序遍历，后序遍历）。

  广度优先遍历：又叫层次遍历从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问节点，访问完一层就继续访问下一层，直到没有节点可以访问为止。

（3）深度优先搜索算法，：不全部保留节点，占用空间少，有回溯操作（即有入栈，出栈操作），运行速度慢。

    广度优先搜索算法：保留全部节点，占用空间大，无回溯操作（即无入栈，出栈操作），运行速度快。

（4）深度优先遍历：不全部保留节点，扩展完的结点从数据库中弹出删去，这样，一般在数据库中存储的结点数就是深度值，因此它占用的空间较少。

    广度优先遍历：一般需要存储产生的所有的结点，占用的存储空间要比深度优先搜索大的多，因此在程序设计的过程中必须考虑溢出和节省内存空间的问题。

vue的包管理文件是哪个?除了存放包的版本之外，还有什么?

package.json

譬如我项目中存放了以下这些

{
  "name": "market",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "better-scroll": "^1.13.2",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.0.1",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.0",
    "@vue/cli-service": "^5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

有没有手动尝试发布一个插件，然后下载下来用?

纵有千堆雪与长街

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【秋招面经】搬运大华和汉得前端题目

1、创建XML HttpRequest 对象，即创建一个异步调用对象。2、创建一个新的HTTP 请求，并指定该HTTP 请求的方法，URL及验证信息3、设置响应HTTP请求状态变化的函数（onreadystatechange）。4、发送HTTP 请求。5、获取异步调用返回的数据。6、使用JavaScript和DOM 实现局部刷新什么是BFC？作用是什么？怎么开启？
复制链接

扫一扫