vue前端面试题（补充中）

——a

已于 2023-02-19 11:54:03 修改

阅读量159

点赞数

文章标签：前端 vue.js javascript

于 2023-02-17 17:22:47 首次发布

本文链接：https://blog.csdn.net/pakhozou/article/details/129089006

版权

html类

img标签上的title和alt有什么用

alt: 图片无法正常显示时的替代文本，在IE6下也有title的作用
title: 鼠标划过时显示的文本

行内元素有哪些、块级、行内块级元素有哪些

行内: <a /> <i /> <span /> <lable /> <em /> <button /> <br />
块级: <main /> <center /> <h1 /> <p /> <ul /> <table /> <form /> <div />
行内块级: <img /> <input /> <select/> <button/>

HTML语义化的理解

根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

HTML5的文件离线储存怎么使用，工作原理是什么

含义: 将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件

原理: HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用：
页面头部像下面一样加入一个manifest的属性

... 在cache.manifest文件的编写离线存储的资源以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等 CACHE MANIFEST #v0.1 CACHE: js/index.js css/index.css NETWORK: images/logo.png FALLBACK: *.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

离线存储的manifest一般由三个部分组成
①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代所有html文件。

浏览器如何对离线存储的资源进行管理和加载
①　在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
②　离线的情况下，浏览器就直接使用离线存储的资源。

注意：
①　引用manifest的html必须与manifest文件同源，在同一个域下，FALLBACK中的资源也必须和manifest文件同源。
②　站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
③　如果服务器对离线的资源进行了更新，那么必须更新manifest文件（如更新manifest的版本等）之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
④　浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
⑤　更新了资源后，新的资源要到下次再访问网页时才会生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，再去检查manifest是否有更新，所以要到下次打开页面才能生效。如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效。

更新缓存的三种方式：
①　更新manifest文件
1)给manifest添加或删除文件。
2)若manifest没有添加或删除文件，只是修改了文件，可以通过更改版本号等更新manifest文件。
②　通过javascript操作
html5中引入了js操作离线缓存的方法：window.applicationCache.update()，可以手动更新缓存。
③　清除浏览器缓存
如果用户清除了浏览器缓存（手动或用其他一些工具），都会重新下载文件。

PNG,GIF,JPG的区别及如何选

png: 无损格式
jpg: 有损压缩
gif: 支持动画

css类

less和sass区别，函数式怎么使用

区别：
1.Less是基于JavaScript，是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的
2.关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持
例如：
$num:1;
h3{
@if $num == 1 { color: #ee78da; }
@if $num == 2 { color: #65e3e7; }
}

// 编译结果
h3 {
color: #ee78da;
}

函数式：
@function column-width($col, $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsurn percentage($ col/$total);
}

.col-3 {
width: column-width(3, 8);
}

对BFC的理解

块级格式化上下文，是一个独立的布局环境，其中的元素布局是不受外界的影响（可以解决marigin垂直塌陷、子元素margin-top带跑父元素等）
触发BFC的条件
·设置浮动，不包括none
·设置定位，absoulte或者fixed
·行内块显示模式，inline-block
·设置overflow，即hidden，auto，scroll
·表格单元格，table-cell
·弹性布局，flex

常用伪类、伪元素有哪些

伪类:
:first-child 表示在一组兄弟元素中的第一个元素
:first-of-type 表示一组兄弟元素中指定类型的第一个元素
:last-child 表示在一组兄弟元素中的最后一个元素
:last-of-type 表示一组兄弟元素中指定类型的最后一个元素
:not 一个否定伪类，用于匹配不符合参数选择器的元素
/* 不含有 .not 的正方形有背景色*/

.square:not(.not){ background: orangered; } :nth-child(4) 匹配位置为 4 的元素 :nth-child(2n) 匹配偶数的元素 :nth-child(2n+1) 匹配奇数 :hover

伪元素:
:after 该伪元素会成为选中元素的最后一个子元素
:before 该伪元素会成为选中元素的第一个子元素

讲述盒模型

标准盒模型的内容大小就是content的大小
IE的则是content + padding +border 总的大小

行内元素、块级元素水平垂直居中的方法有哪些

行内:
水平居中: text-align:center
垂直居中: line-height:30px

块级:
水平居中: margin:0 auto

em和rem区别以及用法

margin塌陷问题

选择器优先级

导入样式的link和@import有什么区别
css3新特性
css优化提高性能

基础类

浏览器缓存(http缓存)

http、https、tcp、socket协议区别

TCP
TCP 是传输层协议，主要解决数据如何在网络中传输的，TCP连接是长连接
第一次握手：客户端发送请求包到服务器，等待服务器确认
第二次握手：服务器响应客户端请求，同时也发送一个回应包给客户端
第三次握手：客户端收到服务器的回应包后，向服务器发送确认包
握手过程中传送的包里，不包含数据，三次握手完毕后，客户端与服务端才正式的开始传递数据。
TCP一旦连接起来，在客户端和服务端任何一方主动关闭连接之前，TCP连接都将被一直保持下去。
断开连接时，服务器和客户端都可以主动发起断开TCP连接的请求

HTTP
(超文本传输协议)是应用层协议，主要解决怎么包装数据，Http连接是短连接，它是无状态的，浏览器和服务器每进行一次http操作，就建立一次连接，但任务结束就断开连接， HTTP是利用TCP在两台电脑(通常是Web服务器和客户端)之间传输信息的协议

不过Http协议存在以下问题：
1、通信使用明文（不加密），内容可能会被窃听和

由于 HTTP 本身不具备加密的功能，所以也无法做到对通信整体（使用 HTTP 协议通信的请求和响应的内容）进行加密。即，HTTP 报文使用明文（指未经过加密的报文）方式发送

2、不验证通信方的身份，因此有可能遭遇伪装

HTTP 协议中的请求和响应不会对通信方进行确认。也就是说存在“服务器是否就是发送请求中 URI 真正指定的主机，返回的响应是否真的返回到实际提出请求的客户端”等类似问题。

3、无法证明报文的完整性，所以可能已遭篡改
所谓完整性是指信息的准确度。若无法证明其完整性，通常也就意味着无法判断信息是否准确由于 HTTP 协议无法证明通信的报文完整性，因此，在请求或响应送出之后直到对方接收之前的这段时间内，即使请求或响应的内容遭到篡改，也没有办法获悉。换句话说，没有任何办法确认，发出的请求 / 响应和接收到的请求 / 响应是前后相同的。

HTTPS
相对于http是安全的协议

两者区别如下:
　　1、https协议需要申请证书，一般免费证书较少，因而需要一定费用。
　　2、http是信息是明文传输，https则是具有安全性的ssl加密传输。
　　3、http和https用的端口也不一样，前者是80，后者是443。
　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

socket
是对TCP/IP协议的封装，Socket本身并不是协议，而是一个调用接口(API)

http状态码

如何减少http请求

图片使用精灵图
缩小合并脚本和样式文件
内容分发网络(CDN)
删除无用资源

get、post请求区别

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中
深入
get和post都是关于HTTP协议的两种发送请求的方法
HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。）
GET产生一个TCP数据包；POST产生两个TCP数据包。（对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）

一个页面从输入-url-到页面加载显示完成这个过程中都发生了什么流程
浏览器地址栏输入url
浏览器会先查看浏览器缓存–系统缓存–路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步
域名解析（DNS）获取相应的ip
浏览器向服务器发起tcp连接
握手成功，浏览器向服务器发送http请求，请求数据包
服务器请求数据，将数据返回到浏览器
浏览器接收响应，渲染页面
断开TCP连接

三次握手、四次挥手

localStorage、sessionStorage和cookie用法和区别

cookie大小只有4kb,始终在同源http请求中携带，在浏览器与服务器之间来回传递。
localStorage一直存在与浏览器中，需要手动删除
sessionStorage近存在当前浏览器窗口

wekpack loader作用

让webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理

js数据类型

基本数据类型的特点：直接存储在栈(stack)中的数据
String、Number、Boolean、Null、Undefined、Symbol

引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
Object、Array、Function、Date

null和undefined区别

值相等，类型不等

深拷贝、浅拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

判断数据类型的方法

Object.prototype.toString.call
constructor 判断某个实例对象是不是这个构造函数创建出来的
instanceof 判断是否存在于同一原型链上
typeof 识别null时会返回object
== 或者 ===

ES6常用
let const
模板字符串
解构赋值
箭头函数
扩展运算符(…)
Promise
arr.includes() arr.find()
Object.assign()

原型和原型链

只有函数才有prototype(显示原型)
所有的引用类型都为构造函数
所有的引用类型都有__proto__(称之为隐式原型)
所有的引用类型的__proto__属性值都指向他的构造函数的的prototype
instanceof判断

什么是闭包？闭包优缺点以及应用、怎么防止内存泄露

闭包
函数嵌套函数
函数内部可以引用函数外部的参数和变量
参数和变量不会被垃圾回收机制回收

优点
希望一个变量长期存储在内存中。
避免全局变量的污染。
私有成员的存在。

缺点
闭包可能会导致内存占用过多的问题，造成网页的性能、内存泄露问题

怎么防止内存泄露

变量使用完成后清空掉释放内存

箭头函数和普通函数区别、箭头函数this指向问题

箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变

call、apply和bind方法的用法、那个先执行以及区别

改变this指向，call和apply会执行函数，bind返回一个全新的函数，不会直接执行
for…in、for…of和普通for

如何理解异步和同步

Promise问题、Promise有几种状态、Promise.all问题以及setTimeout问题

如何解决解决异步回调地狱

promise

变量、函数作用域以及作用域提升

常用的性能优化方法

js延迟加载的方法

import和require

require 是 AMD规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
require是赋值过程
import是解构过程

事件流、事件捕获、事件代理、事件冒泡、阻止捕获和冒泡、事件绑定几种方法

事件流: 从页面中接收事件的顺序

事件冒泡: 即从下至上，从目标触发的元素逐级向上传播，直到window对象

事件捕获: 即从document逐级向下传播到目标元素

事件代理: 事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制
uls.onclick = function(e){
var e = window.event || e;
var tar = e.target || e.srcElement;
if(tar.nodeName==‘LI’){//注意这里要大写
tar.style.background=‘red’;
}
优点
效率高，提高的性能。比如，不用for循环为子元素添加事件了
js新生成的子元素也不用新为其添加事件了

阻止事件捕获、冒泡

w3c 的方法是 e.stopPropagation()
IE 是使用 e.cancelBubble = true

阻止默认事件

w3c 的取消默认事件方法是 e.preventDefault()
IE9 以下是使用 e.returnValue = false

事件绑定

行内绑定 onclick
JS绑定 dom.onclick
绑定监听函数 addEventListener，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡

防抖和节流函数

js是单线程还是多线程，为什么是单线程，如何实现多线程

js是单线程，作为浏览器脚本语言，JS的主要用途就是与用户交互,以及操作DOM。Worker，通过的事件循环(event loop)进行

Vue类

Vue2.x和Vue3.x的区别，其双向数据绑定原理

Watch和computed区别

watch 监听属性变化，首次加载不回监听，不用return
computed 首次加载开始监听，必须return
computed如何执行异步操作
vue-async-computed异步计算属性的插件

Watch立即执行

immediate设为true

Vue3中WatchEffect

首次加载就会执行，无法获取到原值，只能获取当前值，不用指明监听属性，监听回调中用到哪个属性就监视哪个属性。

Vue传参方式有哪些（说全）

props,emit,vuex,pinia,路由
computed如何绑定到v-module

单项数据流

指数据一般从父组件传到子组件，子组件没有权利直接修改父组件传来的数据，即子组件从 props 中直接获取的数据，只能请求父组件修改数据再传给子组件。父级属性值的更新会下行流动到子组件中

为什么data是个函数

给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据,不会相互影响

子组件的生命周期是在父组件的那个生命周期后开始执行

子组件在父组件的beforemounted生命钩子完后才能后就开始实例化自己，并走完自己的整个生命周期
等子组件的生命周期构建完成后挂载到父组件上，父组件的mounted才会执行

axios封装以及请求取消

Axios.interceptors.request.use(config => {
return config
// 添加取消标记
config.cancelToken = new axios.CancelToken(cancel => {
window.axiosCancel.push({
cancel
})

},function(error) {
return Promise.reject(error)
}

Vuex应用、模块化

Vue中性能优化方法、首屏加速方法

路由懒加载

keep-alive 缓存页面
使用v-show复用dom
v-for 遍历避免同时使用v-if
如果列表是纯粹数据展示，不会有任何变化，就不需要数据响应
//让数据就不能变
export default {
data () {
return {
users:[]
}
},
await created(){
const users=await.get(‘/api/users’)
this.users=Object.freeze(users)
}
}
/*
Object.freeze()冻结对象可提升性能，冻结后，不能修改添加删除修改对象。返回被冻结的对象。

当把一个普通的js对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
*/

如果是大数据列表，可采用虚拟滚动，只渲染少部分区域的内容（vue-virtual-scroller、vue-virtual-scroll-list）
事件销毁
图片懒加载
第三方插件按需引入
代码模块化
使用cdn的方式外部加载一些资源