百度站长工具seo查询,缤纷销客crm,电子商务公司简介模板,英文网站后台维护CVTE前端面经项目介绍#xff08;重点#xff09;在数据B中找到数组A对应的值#xff0c;并把数组B对应的值放在数据最前面css1 定位2 外边距3 css高级应用3.1. 过渡3.2. 变形2. 浮动2.1 浮动元素特点2. 2 清除浮动3. html5语义标签4. 实现圣杯布局的两种方式4.1 定位浮动4.…
CVTE前端面经项目介绍重点在数据B中找到数组A对应的值并把数组B对应的值放在数据最前面css1 定位2 外边距3 css高级应用3.1. 过渡3.2. 变形2. 浮动2.1 浮动元素特点2. 2 清除浮动3. html5语义标签4. 实现圣杯布局的两种方式4.1 定位浮动4.2 flex布局5. 两栏布局6. 水平垂直居中6.1 水平居中6.2 垂直居中6.3 水平垂直居中JS1. es6新增的数据类型2. 数据类型的判别3. 栈和堆的区别为什么栈可以保存基础数据类型为什么可以频繁操作4. 手写深拷贝5. 重绘和重排怎么减少重排6. 垃圾回收机制7. promise是什么 promise 有哪些方法promise.all 和 promise.race 的区别这两者里面的promise的执行顺序 实现一个20个请求的串行和并行 promise我讲了链式调用 但是面试官并不太满意更优雅的方式8. Promise如何用来进行限定并发请求个数的功能说下思路9. 浏览器加载原理VUE1. React和VUE的区别2. vue3有什么更新为什么项目用vue2浏览器1. 浏览器如何渲染2. 输入google会发生什么3. 浏览器事件循环机制4. 常见网络攻击5. 浏览器本地化存储 cookie sessionStorage localStorage indexDB6. 就比如那个promise他问你怎么一张一张图片发常规就是一直.then()下去也可以用all去减少then的层级用promise第一次请求的结果和第二次请求放到all数组里面但面试官应该是想听到async await await 请求一 await请求二 用同步的方式写异步代码可读性可维护性都好。。你说到了用gzip压缩请求数据那你还了解其他相关的content-coding方式么计算机网络1. https和http的区别2. HTTP2有哪些特性网页优化1. 性能优化方式2. 首屏优化方式3. 首屏加载速度可以怎么改善4. 如何提高页面加载速度5. cookie 有什么值似乎把 secure 和 httponly 弄混了设计模式1. 简单说一下设计模式2. 项目中用到了什么设计模式数据结构1. 常见的排序堆排序2. 平衡二叉树3. 使用两个栈模仿队列项目介绍重点
在数据B中找到数组A对应的值并把数组B对应的值放在数据最前面
数组的遍历
for …of遍历数组项可以随时使用break语句停止遍历for 循环使用递增的索引变量遍历数组项array.forEach()方法通过在每个数组项上调用callback函数来遍历数组项array.map(callback)方法通过在每个数组项上使用callback调用结果来创建一个新的数组。array.from()方法通过在每个数据项上使用callback调用结果来创建一个新数组array.reduce()可以进行累加求和。数组的拷贝 array.concat()将一个或多个数组连接到原始数组。连接两个数组array.slice()返回数组的一个片段该片段从fromIndex开始toIndex结尾但不包括toIndex本身 array.slice())是另一种拷贝数组的方法。 查找数组 array.includes()返回一个布尔值判断是否包含itemToSearch。array.find()方法返回数组中满足提供的测试函数的第一个元素的值否则返回undefinedarray.indexOf()返回array中第一个出现的itemToSearch的索引。 查询数组 array.every()遍历每一个数组是否都通过callback的检查返回结果是booleanarray.som()只要有一个通过callback的检查就会返回true。 数组过滤 array.filter()方法创建一个新数组其包含所有通过callback测试的所有元素。 filter是创建一个新的数组不改变原始数组。 数组的插入 array.push()将一个或多个项目追加到数组的末尾array.unshift()将一个或多个项追加到数组的开头返回数组的新长度 删除数组元素 array.pop()从数组中删除最后的一个元素array.shift()从数组中删除第一个元素array.splice()从数组中删除元素并插入新的元素 清空数组 array.length0 删除数组中所有的项目array.splice()从数组中删除元素并插入新的元素 数组扁平化array.flat()
css
css中有三种基本定位机制普通文档流、浮动、定位1 定位
static(静态定位)、relative (相对定位)、absolute (绝对定位)、fixed(固定定位)。静态定位元素 默认的定位方式无法通过位置偏移属性top、bottom、left或right来改变元素的位置。 相对定位是普通文档流的一部分相对于本元素在文档原来出现位置的左上角进行定位可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置但该元素仍占据原来未移动时的位置该元素移动后会导致其覆盖其他的框元素。
代码展示 .he1 {height: 100px;width: 100px;background-color: rgb(164, 175, 219);}.he2 {position: relative;top: -10px;right: -20px;height: 100px;width: 100px;background-color: rgb(238, 177, 197);}div classhe1盒子1/divdiv classhe2盒子2/div如果给盒子2加上 z-index-1的话可以使得盒子2在盒子1的下面 绝对定位脱离文档流不占据原来未移动时的位置相对于父级元素或更 高的祖先元素中有relative。也可以是absolute开absolute会开启BFC所以效果可能会跟设置relative不一样 固定定位是绝对定位的一种特殊形式以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时即可将元素的定位模式设置为固定定位。会脱离文档流控制始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化该元素都会始终显示在浏览器窗口的固定位置。
2 外边距
margin外边距合并有以下原则:
(1)块级元素的垂直相邻外边距会合并且其垂直相邻外边距合并之后的值为上元素的下外边距和下元素的上外边距的较大值。 (2)行内元素实际上不占上下外边距行内元素的左右外边距不会合并。 (3)浮动元素的外边距不会合并。
3 css高级应用
3.1. 过渡
过渡是使元素从一种样式转变为另一种样式时添加的效果如渐显、渐弱、 动面快慢等 过渡通过以下属性实现: 1transition-property属性:规定设置过渡效果的CSS属性的名称。 2transition-duration属性:规定完成过渡效果需要多少秒或毫秒。 3transition-timing-function属性:规定速度效果的速度曲线。 4transition-delay属性:定义过渡效果何时开始。
3.2. 变形
transform如平移、旋转、缩放和倾斜每个效果都被称为变形函数
stylediv {width: 100px;height: 100px;border: 1px solid #000;background-color: red;float: left;margin: 50px;}.one {transform: rotate(30deg);/*旋转30度*/}.two {transform: translate(20px, 20px);/* 向右向下移动20px*/}.three {transform: scale(2, 1.5);/*宽度为原来两倍高度为原来1.5倍*/}.four {transform: skew(30deg, 20deg);/*在X轴上和Y轴上倾斜20度和30度*/}
/stylediv classone/divdiv classtwo/divdiv classthree/divdiv classfour/div2. 浮动
2.1 浮动元素特点
CSS 的 Float浮动会使元素向左或向右移动使元素共享一行类似于给元素加了inline-block的作用由于浮动框不在普通文档流之中所以文档普通流中的块元素表现的像浮动框不存在一样。浮动会将行内元素和行内块元素转化为块元素浮动元素比标准文档流的元素层级要高会将标准文档流的元素遮挡住。浮动元素会遇到父元素的边缘或者浮动元素或者块元素就停止了浮动。浮动起来的元素不会影响上面的布局影响的是下面的布局 如下面代码所示
style.container {width: 400px;border: 1px solid deeppink;overflow: hidden;}.top {height: 100px;width: 100px;background-color: rgb(223, 162, 162);}.main {height: 100px;width: 100px;float: left;z-index: -1;background-color: rgb(151, 211, 229);}.footer {height: 100px;width: 100px;float: left;background-color: rgb(207, 182, 240);}/stylediv classcontainerdiv classtopTop/divdiv classmainMain/divdiv classfooterFooter/div/div从下图中我们可以验证上面的两个规则
浮动元素比标准文档流的元素层级要高会将标准文档流的元素遮挡住。因为Main盒子把Footer盒子遮盖住了说明加了浮动的Main的盒子的层级更高。浮动起来的元素不会影响上面的布局影响的是下面的布局。因为加了浮动的是第二个元素他在遇到Top盒子的时候并没有选择去覆盖掉他而是老老实实的在Top的下面但他下面的Footer盒子跑到上面来了。所以影响了下面盒子的布局。
2. 2 清除浮动
为什么要清除浮动
因为浮动的元素会影响到下面元素会造成父盒子高度塌陷
清除浮动的3中方式
方式1给浮动的元素父元素设置一个固定的高度从视觉上看到浮动的元素在父元素包裹之内。方式2要使用这个clear属性必须创建一个新的div元素创建新的div元素不能放置任何内容它只能做一个件事情那就是清除浮动并且将这个新创建的div元素放在最后一个浮动元素的后面才会生效。方式3使用属性为overflow并且属性值为hidden来清除浮动必须将这个属性设置在浮动元素的父元素身上。
3. html5语义标签
header标签页面或页面中某一个区块通常是一些引导和导航信息nav标签可以作为页面导航的链接组section标签页面中的一个内容区块通常由内容及其标题组成aside标签非正文的内容与页面的主要内容分开的被删除而不会影响到网页的内容article标签代表一个独立的、完整的一个区块可独立于页面其他内容使用footer标签页面或页面中的某一个脚注main标签h5的语义化标签除了单词不一样本质上就是一个div
4. 实现圣杯布局的两种方式
圣杯布局header、footer定高left和right定宽center宽度自适应
4.1 定位浮动
div classheaderheader/divdiv classcontainerdiv classcenter columncenter/divdiv classleft column left/divdiv classright column right/div/div
div classfooterfooter/div首先给header、footer、container一个固定的高度宽度100%给left、right一个固定的宽度高度为container的定高center宽度100%。 - 然后给container内的三个子元素float:left;浮动但是因为center的宽度是container的100%所以left和right并没有与center浮动在一行。注意这里不要给container盒子加宽度要让left、right、center自己撑开盒子的宽度 为了使left和right浮动与center一行可以使用margin-left属性给leftmargin-left:-100%这样left就覆盖在center的左边给rightmargin-left:-【right的宽度】这样子right就覆盖在了center的右边。 虽然container的子元素现在都在一行上面但是center内容的宽度还是container的100%所以给container一个padding,左右分别与left和right等宽。 这时候left和right还是覆盖在center上所以可以给container开启相对定位然后将left和right分别移动对应的宽度这样container的子元素刚好占满container 的宽度。
4.2 flex布局
div classheaderheader/divdiv classcontainerdiv classleft column left/divdiv classcenter columncenter/divdiv classright column right/div/div
div classfooterfooter/div
设置好所需要的header、footer的高度以及left、right的宽度然后对中间的container容器开启display:flexcenter宽度flex:1
5. 两栏布局
一栏定宽一栏自适应
float:left;margin-leftfloat使左边的元素脱离文档流右边的元素可以和左边的元素显示在同一行设置margin-left让右边的元素不覆盖掉左边的元素。float:left;overflow:hidden给要自适应的盒子加overflowhidden会触发块级格式化上下文BFC利用了BFC 不会重叠浮动元素的特点。position: absolute margin-left左边绝对定位右边设置margin-leftflex布局flex布局可以使两个子元素显示在同一行只要左边的宽度固定就可以实现效果
6. 水平垂直居中
6.1 水平居中
行内元素首先看它的父元素是不是块级元素如果是则直接给父元素设置 text-align: center;块级元素 需要谁居中给其设置 margin: 0 auto; 作用使盒子自己居中首先设置父元素为相对定位再设置子元素为绝对定位设置子元素的left:50%即让子元素的左上角水平居中然后设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);使用flex布局实现宽度定不定都可以只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
6.2 垂直居中
单行的行内元素只需要设置单行行内元素的行高等于盒子的高即可块级元素 首先设置父元素为相对定位再设置子元素为绝对定位设置子元素的top: 50%即让子元素的左上角垂直居中然后设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);使用flexbox布局实现高度定不定都可以给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
6.3 水平垂直居中
设置父元素为相对定位给子元素设置绝对定位top: 0; right: 0; bottom: 0; left: 0; margin: auto;left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;设置父元素为flex定位justify-content: center; align-items: center;
JS
1. es6新增的数据类型
Symbol Symbol是一种基本数据类型Symbol()函数会返回symbol类型的值该类型具有静态属性和静态方法每一个Symbol()函数的值都是唯一的。BigInt BigInt是一种内置对象用来表示大于2^53 - 1的整数它可以表示任意大的整数如果有小数的话会向下取整。 let big BigInt(1) // 1nSet(在使用instanceof检测的时候是Object类型) 集合就是一组值与数组类似。但是与数组不同的是集合没有索引或顺序也不允许重复 常用api 注意 Set类是可迭代的可以for of遍历也可以使用…扩展操作符集合中不会出现重复数据的判断因为通过add操作返回的是集合本身所以可以使用add(1).add(2) Map Map对象表示一组被称为键(key)的值其中每个键都关联着(或映射到)另一个值它的key可以为引用数据类型 WeakMap和WeakSet 弱映射不是可迭代对象它只实现了set()、get()、has()、delete()方法弱映射的主要用途是实现值与对象的关联因为它容易被垃圾回收所以不会造成内存泄漏弱映射的key只能为引用数据类型value可以为任意类型
2. 数据类型的判别
JS的基本数据类型Undefined、Null、Boolean、Number、String 引用数据类型Array、Object、Function、Data、RegExp 判断js数据类型的方法
typeOf可以对除了null、数组、对象都会被判断为object其他判断正确instanceof可以正确判断对象的类型其内部运行机制是判断在其原型链能否找到该类型的原型constructor对象实例可以通过constructor对象访问他的构造函数。Object.prototype.toString.call()使用的是Object对象的原型方法toStrig来判断数据类型
3. 栈和堆的区别为什么栈可以保存基础数据类型为什么可以频繁操作
栈(stack)会自动分配内存空间会自动释放。堆(heap)动态分配的内存大小不定也不会自动释放。 基本类型简单的数据段存放在栈内存中占据固定大小的空间。 引用类型指那些可能由多个值构成的对象保存在堆内存中,包含引用类型的变量实际上保存的不是变量本身二十指向该对象的指针
4. 手写深拷贝
三种方式
使用JSON.stringify和JSON.parse()手写实现
function deepcope(obj) {if (!obj || typeof obj ! object) return obj;let newObj Array.isArray(obj) ? [] : {};for (let key in obj) {newObj[key] typeof obj object ? deepcope(obj[key]) : obj[key]}return newObj}let obj {a: 1,b: {c: 1}}5. 重绘和重排怎么减少重排
重排通过构造渲染树将可见DOM节点以及它对应的样式结合起来计算它们在设备视口(viewport)内的确切位置和大小这个计算的阶段就是重排。重绘我们通过构造渲染树和回流阶段知道了哪些节点是可见的以及可见节点的样式和具体的几何信息(位置、大小)那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素这个阶段就叫做重绘节点。
何时发生重排呢 回流这一阶段主要是计算节点的位置和几何信息那么当页面布局和几何信息发生变化的时候就需要回流。比如以下情况
添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化包括外边距、内边框、边框大小、高度和宽度等内容发生变化比如文本变化或图片被另一个不同尺寸的图片所替代。页面一开始渲染的时候这肯定避免不了浏览器的窗口尺寸变化因为回流是根据视口的大小来计算元素的位置和大小的
如何减少回流与重排呢
批量修改元素样式对于复杂的动画效果可以先采用绝对定位使其脱离文档流。否则会引起父元素以及后续元素频繁的回流。css3硬件加速GPU加速
参考博客https://www.cnblogs.com/wangguoxinyue/p/16253671.html
6. 垃圾回收机制
标记清除标记阶段需要从根节点遍历内存中的所有对象并为可达的对象做上标记清除阶段则把没有标记的对象非可达对象销毁。引用计数
7. promise是什么 promise 有哪些方法promise.all 和 promise.race 的区别这两者里面的promise的执行顺序 实现一个20个请求的串行和并行 promise我讲了链式调用 但是面试官并不太满意更优雅的方式
8. Promise如何用来进行限定并发请求个数的功能说下思路
9. 浏览器加载原理
VUE
1. React和VUE的区别
2. vue3有什么更新为什么项目用vue2
浏览器
1. 浏览器如何渲染
2. 输入google会发生什么
3. 浏览器事件循环机制
4. 常见网络攻击
5. 浏览器本地化存储 cookie sessionStorage localStorage indexDB
6. 就比如那个promise他问你怎么一张一张图片发常规就是一直.then()下去也可以用all去减少then的层级用promise第一次请求的结果和第二次请求放到all数组里面但面试官应该是想听到async await await 请求一 await请求二 用同步的方式写异步代码可读性可维护性都好。。
你说到了用gzip压缩请求数据那你还了解其他相关的content-coding方式么
计算机网络
1. https和http的区别
2. HTTP2有哪些特性
网页优化
1. 性能优化方式
2. 首屏优化方式
3. 首屏加载速度可以怎么改善
4. 如何提高页面加载速度
5. cookie 有什么值似乎把 secure 和 httponly 弄混了
设计模式
1. 简单说一下设计模式
2. 项目中用到了什么设计模式
数据结构
1. 常见的排序堆排序
2. 平衡二叉树
3. 使用两个栈模仿队列
