一些前端面试题

H5新增特性

1、拖拽释放(Drap and drop)API ondrop

2、画布canvas；

getContext()方法返回一个用于在画布上绘图的环境

canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

3、自定义属性 data-id

4、用于媒介播放的video和audio，如果浏览器不支持自动播放怎么办？在属性中添加autoplay

5、新的语义化标签：article，header，nav，section，footer, aside；

对语义化的理解：
对开发者友好，让人更容易读懂，利于代码可读性；
对机器友好，让搜索引擎更容易读懂，利于seo。

6、新的本地存储：localStorage（长期存储浏览器关闭后数据不丢失），sessionStorage；

7、新的表单控件：calendar , date , time , email , url , search , tel , file , number;

8、新的技术：websocket，web worker，geoloacation（基于地理位置的应用）。

CSS3新增元素

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}；
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient (red, green, blue);
阴影 box-shadow:3px 3px 3px rgba (0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
转换：旋转 transform: rotate(20deg)、倾斜 transform: skew (150deg, -10deg)、缩放 transform: scale 、位移 transform: translate (20px, 20px);

元素居中

1. .div{ position:absolute; width:100px; height:100px; top:0; left:0; right:0; bottom:0; margin:auto; }
2. .div{ display:flex; justify-content:center; align-items:center; }
3. .div{ position:absolute; top:50%; left:50%; transform:translate(-50%;-50%) }

数组常用方法

• push() 新增
• shift() 删除第一个元素
• unshift() 在数组开头新增元素
• pop() 删除最后一个元素
• join() 将所有元素放入一个字符串中，并指定分隔符分隔
• split() 将一个字符串分隔成字符串数组
• splic() 在指定下标删除/添加元素 a.splic(1,0,3,4)意为从下标1开始删除0个元素，添加元素3，4
• sort() 排序
• reverse() 颠倒顺序
• filter() 筛选出符合的元素，返回新数组 a.filter(item => item>2)
• map() 依次处理每一个元素，返回新数组 a.map(x => x+1)
• forEach() 调用每个元素，并将元素传递到回调函数中 a.forEach(item=>{})
• isArray() 判断对象是否为数组
• every() 判断每个元素是否符合条件
• indexOf() 返回元素第一次出现的位置，如无，则返回-1
• includes() 判断是否包含某个元素
• concat() 合并多个数组
  改变原数组：push、pop、unshift、shift、reverse、sort、splice
  不改变原数组（即返回新数组）：concat、filter、map、join、toString

数组去重

• es6中的Set结构 let newArray = [...new Set(oldArray)]
• filter()+indexOf()var newArr = arr.filter(function(item,index){ return arr.indexOf(item) === index; // 因为indexOf 只能查找到第一个 });
• for+indexOf() for(var i=0;i<arr.length;i++) { if(newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); }

常见数据类型

Number、Null、String、Boolean、Undefined
Object、Array

Css样式权重

!important 、内联选择器、 id、 class 、标签/伪类 、通配符 、行内样式

flex布局常用属性

display:flex 开启 弹性布局

• flex-direction:row(主轴为水平）/ column(主轴为垂直）
• justify-content:center(主轴居中对齐）/ space-between（两端对齐，间隔相等） / space-around（间隔相等）
• align-items:center（交叉轴居中对齐）
• flex-wrap:warp(换行） / nowarp(不换行）

Vue的生命周期

• beforCreate
• created
• beforMount
• mounted
• beforUpdate
• updated
• beforDestroy
• destoryed

Vue组件传值方式

• 父子传值
  父传子：props
  子传父：$emit事件
• Vuex
• EventBus 传值：
  $emit事件触发,
  $on接受

Vue2与Vue3的区别

• 响应式底层逻辑不同
  vue2通过es5的Object.defindProperty()进行数据劫持，结合发布订阅模式实现，仅能监听某个属性
  vue3通过es6的Proxy API进行代理，可对整个对象进行监听

• 碎片化程度
  vue2只能有一个根节点
  vue3可以有多个根节点

• 生命周期
  Vue3需要提前引入生命周期钩子函数，Vue2可直接调用

• 同时存在v-if 和 v-for时
  Vue2中，v-for优先于v-if
  Vue3中，v-if 优先于v-for

es5与es6的区别？

• es5中使用var声明变量，es6中使用let与const
• es6新增 块级作用域、箭头函数、字符串模板（``）、类与继承、模块化概念(导入import/引出export)、解构赋值、Promise对象等。

http常见状态码

• 1xx 请求处理中
• 200 服务器响应成功，成功处理请求
• 3xx 重定向，表需要进一步操作才能完成请求。
  301 永久重定向，指请求的资源被分配了新的URL
  302 临时重定向，指请求的资源被分配了新的URL，但该新URL可能会再次更新
• 4xx 客户端错误，表请求出错，服务器无法处理
  400 发送的请求存在语法错误（服务器不能理解请求的语法）
  401 发送的请求需要有HTTP认证信息
  403 服务器拒绝访问（没有权限访问）
  404 服务器没有找到请求的资源（网站）
• 5xx 服务器错误
  500 服务器本身出现了错误，无法完成请求
  503 服务器停机/超负载，无法处理请求

Promise + 定时器 的执行顺序

  console.log(1);
  setTimeout(()=>{
    console.log(2);
  },2000)
  setTimeout(()=>{
    console.log(3);
  },0)
  Promise.resolve().then(()=>{
    console.log(4); 
  })
  Promise.resolve().then(()=>{
    console.log(5); 
  },6000)
  console.log(6);
  
  //以上代码打印结果为 ： 1 6 4 5 3 2

console.log('script start')
async function async1() {
    await async2()
    console.log('async1 end')
}
async function async2() {console.log('async2 end')}
async1()
setTimeout(function () {console.log('setTimeout')}, 0)
new Promise(resolve => {
    console.log('Promise')
    resolve()
}).then(function () {
        console.log('promise1')
    }).then(function () {
        console.log('promise2')
    })
console.log('script end')
// 结果如下
// script start
// async2 end
// Promise
// script end
// async1 end
// promise1
// promise2
// setTimeout

执行顺序：
1、同步先执行
promise的 resolve也属于同步，跟在 promise外面效果是一致的

2、同步结束以后在执行异步里面的微任务
比如 promise的 then

3、最后是宏任务 定时器

前端性能优化

• 减少http请求次数，减少请求资源大小（JS、CSS源码文件压缩、图片大小等。
• 避免图片和iFrame等的空Src（空Src会重新加载当前页面，影响速度和效率）；
• 图片懒加载，下拉加载更多
• 利用浏览器缓存

页面从输入URL到加载渲染的过程

1. 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

2. 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；

3. 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

4. 载入解析到的资源文件，渲染页面，完成。

节流和防抖

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效（每过指定时间后执行）

const throttle = (fun,wait) => {
	let isRunning = false;
	return (obj) => {
		if(!isRunning){
			isRunning = true;
			setTimeout(() => isRunning = false,wait)
			fun(obj);
		}
	}
}
//应用
const a = throttle( x =>{},1000);

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

const debounce = (fun,interval) => {
	var handle;//这里使用提升变量时防抖只执行一次。如使用let，则interval秒后会执行n次。
	return (obj)=>{
		clearTimeout(handle);
		handle = setTimeout(() => fun(obj),interval);
	}
}
//应用
const a = debounce(x => {},1000);

实现防抖在指定时间内只执行第一次：

let debounceTimer = null;
export function debounce(callback, duration, isFirstExecution) {
  return function (...args) {
    let ctx = this;
    const delay = function () {
      debounceTimer = null;
      console.log('定时器函数执行了')
      if (!isFirstExecution) callback.apply(ctx, args);
    };
    let executeNow = isFirstExecution && !debounceTimer;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(delay, duration);
    if (executeNow) callback.apply(ctx, args);
  };
};
// isFirstExecution为true时只执行第一次，为false时只执行最后一次
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                       
原文链接：https://blog.csdn.net/Yukinoshita_kino/article/details/117566902

深拷贝和浅拷贝

浅拷贝：复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；当拷贝的新对象发生改变时，原对象也会发生相同的改变，也就是说，浅拷贝会影响原来的元素

        var arr = [1,2,3]
        var newarr = arr;
        newarr[1] = 5;
        console.log(arr,newarr);//[1, 5, 3]，[1, 5, 3]

深拷贝：只拷贝内容，两个对象拥有不同的地址，当拷贝出来的对象发生改变时，原对象内容不会改变，两者互不影响

//递归
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 非对象类型直接返回
  }
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      copy[key] = deepCopy(obj[key]);
    }else{
		copy[key] = obj[key]
	}
  }
  return copy;

//JSON.stringify() JSON.parse()方法
const copy = JSON.parse(JSON.stringify(obj))

//使用js库lodash中的_.cloneDeep()

bind、call、apply的区别

1、相同点
三个都是用于改变this指向；
接收的第一个参数都是this要指向的对象；
都可以利用后续参数传参。
2、不同点
call和bind传参相同，多个参数依次传入的；
apply只有两个参数，第二个参数为数组；
call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。

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

1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数
3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。
4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。
5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个
arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
6、其他区别：箭头函数不具有 prototype 原型对象。箭头函数不具有 super。
箭头函数不具有 new.target

Webpack

模块化开发、代码压缩

常用loader（loader用于加载某些资源文件

css-loader读取 合并CSS 文件
style-loader把 CSS 内容注入到 JavaScript 里
sass-loader 解析sass文件
url-loader将文件转换为base64 URI。
vue-loader处理vue文件。

Vite

优点：1.使用 esbuild 对依赖进行预构建，esbuild 的打包速度很快。
2.按需加载。只需要在浏览器请求源码时进行转换并按需提供源码，根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
3.vite 使用 http 缓存来加速页面的重新加载，源码模块会进行协商缓存，依赖模块会进行强缓存。

localStorage/sessionStorage/cookie

sessionStorage为临时保存，浏览器关闭则失效; localStorage为永久保存.
localStorage / sessionStorage都遵守同源（域名+协议+端口 相同）策略。

解决跨域

jsonp跨域
document.domain + iframe 跨域
nodejs中间件代理跨域
后端在头部信息里面设置安全域名