怎么做网站跳转,洛阳市App网站开发公司,凯里网站建设,网站的域名怎么起自我介绍
您好#xff0c;面试官#xff01;我叫[您的姓名]#xff0c;非常荣幸能有机会参加这次面试。 在过去的 3 年里#xff0c;我一直专注于前端开发领域#xff0c;积累了丰富的实践经验。 在 Vue.js 项目中#xff0c;我能够熟练运用组件化开发模式#xff0c;实…自我介绍
您好面试官我叫[您的姓名]非常荣幸能有机会参加这次面试。 在过去的 3 年里我一直专注于前端开发领域积累了丰富的实践经验。 在 Vue.js 项目中我能够熟练运用组件化开发模式实现高效的代码复用和维护。对于 React我也相信我能迅速上手并开发出功能完善的组件。我对新技术始终保持着浓厚的兴趣和学习热情不断探索和尝试将最新的前端技术应用到实际项目中。我相信我的技能和经验能够为贵公司的前端项目带来价值。
前端性能优化
前端性能优化是提高网站或应用程序用户体验的重要方面以下是一些常见的前端性能优化方法
1常见优化 压缩Code Minification和合并文件 压缩 CSSMiniCssExtractPlugincssnano、JavaScriptTerserPlugin 和 HTML 文件减少文件大小加快加载速度。 合并多个 CSS 和 JavaScript 文件减少请求数量。 图片优化base 64 asset 选择合适的图片格式如 JPEG、PNG、WebP 等根据图片内容和用途进行选择。 压缩图片大小不影响视觉效果的前提下减少图片的像素和质量。 使用懒加载Lazy Loading技术只在图片进入视口时加载。 缓存策略 设置适当的 HTTP 缓存头让浏览器缓存静态资源避免重复请求。 利用 cache HardSourceWebpackPlugin、persistentCache选项启用缓存提高构建速度。为输出的文件添加 contenthash 以便浏览器有效地利用缓存。 使用 Service Workers 实现离线缓存和更灵活的缓存控制。 代码优化 优化 JavaScript 代码避免不必要的计算和循环。 去除未使用的 CSS 代码减少样式表的大小。 减少 HTTP 请求 尽量减少页面中的图片、脚本、样式表等资源的请求数量。 异步加载 对于非关键的 JavaScript 脚本使用异步加载如 defer 或 async 属性不阻塞页面渲染。 优化 CSS 和 JavaScript 的加载顺序 将关键的 CSS 放在页面头部加载以避免页面闪烁。 非关键的 JavaScript 放在页面底部加载不影响页面内容的呈现。 使用 CDN内容分发网络 利用 CDN 加速静态资源的加载减少网络延迟。 减少 DOM 操作 避免频繁的 DOM 读写操作尽量一次性修改 DOM。
2Webpack优化
代码分离Code Splitting 利用 splitChunks 插件将代码分割成多个块例如将第三方库与业务代码分离或者将不同路由的模块分离。动态导入Dynamic Imports使用 import() 函数实现按需加载模块。css/js代码压缩cache缓存优化模块解析Module Resolution Optimization 合理配置 resolve 选项如设置 extensions 减少文件扩展名的尝试指定 modules 减少模块搜索路径。
网络篇
1. 三次握手四次挥手。为什么要三次握手四次挥手两次不行吗?为什么四次挥手比三次握手多一次?
三次握手三次握手是 TCP 协议建立连接时使用的一种机制。 具体过程如下 第一次握手客户端向服务端发送一个带有 SYN标志位的数据包表示客户端想要建立连接同时初始化序列号seq。 第二次握手服务端收到客户端的 SYN 数据包后向客户端发送一个带有SYN 和 ACK 标志位的数据包确认客户端的请求并也初始化自己的序列号seq同时确认号ack为客户端的序列号加 1。 第三次握手客户端收到服务端的 SYN ACK 数据包后向服务端发送一个带有 ACK 标志位的数据包确认号为服务端的序列号加1表示客户端确认收到了服务端的回应连接建立成功。 四次挥手四次挥手是 TCP 协议断开连接时使用的机制。 具体过程如下 第一次挥手客户端向服务端发送一个带有 FIN 标志位的数据包表示客户端没有数据要发送了想要关闭连接。 第二次挥手服务端收到客户端的 FIN 数据包后向客户端发送一个带有 ACK标志位的数据包表示服务端已经收到客户端的关闭请求。 第三次挥手服务端向客户端发送一个带有 FIN标志位的数据包表示服务端也没有数据要发送了准备关闭连接。 第四次挥手客户端收到服务端的 FIN 数据包后向服务端发送一个带有 ACK 标志位的数据包表示客户端确认收到服务端的关闭请求连接完全关闭。 为什么要三次握手两次不行吗三次握手是必要的两次握手不行原因如下 两次握手无法确认双方的接收和发送能力。第一次握手客户端表明能发送但服务端不知道客户端能接收。第二次握手服务端表明能接收和发送但客户端不知道服务端能接收。 两次握手可能导致错误的连接建立。如果网络延迟旧的请求到达服务端服务端以为是新的请求而建立连接会造成资源浪费和错误。 为什么四次挥手比三次握手多一次四次挥手比三次握手多一次主要是因为在关闭连接时双方的数据传输状态不同。 在三次握手建立连接时服务端收到客户端的连接请求并确认后可以直接将 SYN 和 ACK一起发送因为此时服务端不需要额外处理未完成的数据传输。 而在四次挥手关闭连接时当客户端发送 FIN表示没有数据要发送后服务端可能还有数据需要继续发送所以不能立即发送 FIN 关闭连接而是先回复 ACK 确认客户端的关闭请求。等服务端数据发送完毕再发送 FIN 表示自己也可以关闭了。因此关闭连接时需要多一次交互。 例如在一个客户端与服务端进行实时通信的场景中客户端发送完所有消息并想要关闭连接第一次挥手服务端收到请求后先回复 ACK 表示知道了第二次挥手但此时服务端可能还有未发送完的消息等发送完后才发送 FIN 表示自己也准备关闭第三次挥手客户端最后回复 ACK 完成关闭第四次挥手。 2http,协议状态码。http1.0跟 http2.0 的区别http跟https的区别
HTTP 协议HTTPHyperText Transfer Protocol超文本传输协议是用于在 Web 上传输数据的应用层协议。它定义了客户端和服务器之间如何进行请求和响应的交互。 HTTP状态码200成功 301表示请求的资源已被永久移动到新的 URL客户端应使用新的 URL 访问 302表示请求的资源临时被移动到了其他位置客户端应继续使用原有 URL 进行访问 400、401、403、404客户端语法出错、需要认证、没有权限、找不到 500服务端出错 301和302状态码区别301 Moved Permanently永久移动 含义表示请求的资源已被永久移动到新的 URL地址。搜索引擎等爬虫会将链接权重传递到新的 URL 。 缓存浏览器和搜索引擎会记住这个重定向下次访问相同的请求时会直接访问新的 URL 不会再向原 URL 发送请求。 影响对 SEO搜索引擎优化有较大影响因为搜索引擎会认为原 URL 已失效将权重转移到新的 URL 。 示例如果一个网站的域名发生了永久性的变更从 olddomain.com 变更为 newdomain.com 服务器就会返回 301 状态码并告知客户端新的域名地址。 302 Found临时移动含义表示请求的资源临时被移动到了另一个 URL 。 缓存浏览器在接收到 302 响应时不会自动将后续请求重定向到新的 URL每次请求都会先访问原 URL 由服务器再次返回 302 重定向到新的地址。 影响对 SEO 的影响相对较小搜索引擎不会将原 URL 的权重立即传递给新的 URL 因为它认为这只是临时的重定向。 示例在网站进行临时维护或活动期间将某些页面临时重定向到其他页面时可能会使用 302 状态码。 例如假设一个电商网站进行系统升级预计需要几个小时在此期间访问商品详情页可能会被 302 临时重定向到一个通知页面。而如果该电商网站决定永久关闭某个商品分类并将相关页面永久重定向到新的分类页面就会使用 301 状态码。
HTTP1和HTTP2的区别多路复用2支持多个请求和响应在一个连接上并发处理1每次都需要建立请求头压缩2头部信息压缩减少传输的数据量二进制分帧2将请求和响应分割为更小的帧并进行二进制编码传输效率服务器推送服务器可以主动向客户端推送资源而无需等待客户端请求。
HTTP和HTTPS的区别
安全https通过ssl/tls协议对数据进行加密保证了数据的机密性和完整性防止数据盗取和篡改http使用的是明文传输不安全端口http端口80https端口443证书使用https时服务器需要配置数字证书来进行身份验证而http则不需要 例如在线支付场景可以使用https更为严谨而一般的网站http就可以
3当输入地址后浏览器做哪些操作
地址解析—建立tcp连接—发送http请求—接收服务器响应—处理响应—
显示页面—后续交互地址解析 检查地址格式是否正确 如果使用的是域名那就去DNC域名系统服务器发送求情获取该域名对应的Ip地址如果使用的Ip则直接拿IP简历TCP连接 建立TCP连接 浏览器通过获取IP地址和端口http端口80https端口443去向服务段建立tcp连接3次握手客SYN-服‘发送建立请求’服SYNACK-客‘确认请求’客ACK-服‘收到服务端确认建立连接’ 发送HTTP请求 Tcp连接成功后浏览器会构建http请求报文里面包括请求方式post,get、URL、请求头包含各种信息、如接受的内容格式和可能需要的请求体例post请求需要传一些请求参数将这个请求通过已建立的TCP发送给服务端 接受服务器响应 服务器接收到请求后会处理请求并返回一个http响应 浏览器接收这个响应并解析响应体和响应头 处理响应 如果响应状态为成功如200浏览器会根据响应头中的内容类型来处理响应体 显示页面 将从服务器获取的数据放在页面上并进行渲染最后页面展示最新的内容 后续交互 如果页面上用其他资源图片、css、js浏览器会再次发送请求获取该些资源 例如当您输入一个电商网站的地址浏览器首先解析并获取服务器的 IP 地址建立连接后发送请求获取首页的 HTML 文档。然后根据文档中的资源链接继续获取图片、样式表和脚本等逐步构建并显示完整的页面供您浏览和交互。
4TCPUDP有什么区别
TCPTransmission Control Protocol传输控制协议
UDPUser Datagram Protocol用户数据报协议是两种常见的传输层协议
它们有以下主要区别连接性 TCP是面向连接的协议在数据传输之前需要先建立连接通过三次握手建立可靠的连接。 UDP是无连接的协议不需要事先建立连接直接发送数据可靠性 TCP提供可靠的数据传输通过确认。重传、排序和流量控制机制确保数据准确无误和按序到达 UDP不保证可靠的交付可能出现丢包、乱序的情况头部开销 TCP头部开销比较大通常20个字节 UDP头部开销比较小通常8个字节应用场景 TCP适用于数据准确和可靠行要求较高的应用文件传输、电子邮箱、远程登陆 UDP适用于对实时性要求比较高的如视频会议、直播、在线游戏、实施音频
5Cors请求头
CORS跨域资源共享请求头是一组 HTTP 头字段
用于解决浏览器的同源策略限制实现跨域请求。当一个请求的 URL 的协议、域名、端口三者之间任意一个与当前页面地址不同时就会产生跨域问题。为了允许跨域请求服务器需要在响应中添加特定的 CORS请求头告诉浏览器该请求可以跨域访问资源。 为了允许跨域请求服务器需要在响应中添加特定的 CORS 请求头告诉浏览器该请求可以跨域访问资源。 常见的 CORS 请求头包括
Access-Control-Allow-Origin指定允许访问该资源的源Origin可以是具体的域名如http://example.com或通配符*表示允许任何源访问。
Access-Control-Allow-Methods指定允许的跨域请求方法如GET、POST、PUT、DELETE等多个方法之间用逗号分隔。
Access-Control-Allow-Headers指定允许的跨域请求头字段多个字段之间用逗号分隔。
Access-Control-Expose-Headers指定客户端可以访问的额外响应头字段。
Access-Control-Max-Age指定预检请求Preflight request的结果可以被缓存的时间以秒为单位在缓存有效期内浏览器无需再次发送预检请求。
Access-Control-Allow-Credentials当需要跨域发送 Cookie 或其他凭证信息时将该字段设置为true。但需注意如果设置了该字段为trueAccess-Control-Allow-Origin不能设置为通配符*而必须指定具体的域名。6GetPOST请求
数据传递 Get:挂在浏览器的地址栏上面 Post:将数据放在请求体中进行传递数据长度受限 Get:受到url长度限制不适合传大量的数据 Post:不受限制可以传输大量数据安全性 Get安全性差url上不适合传敏感信息post数据在请求体内相对更安全用途 Get:常用于获取数据如查询操作 Post:常用于提交数据表单或上传文件等
7CSRFXSS攻击 CSRFCross-Site Request Forgery跨站请求伪造和 XSSCross-Site Scripting跨站脚本攻击是两种常见的 Web 安全攻击方式。 CSRF 攻击是指攻击者诱导受害者在已经登录的 Web 应用程序中执行他们事先精心构造的恶意请求。例如攻击者可能构造一个恶意的链接或表单当受害者在登录状态下点击或提交时会在受害者不知情的情况下执行一些危险操作如修改密码、转账等。 XSS 攻击则是指攻击者通过在目标网站注入恶意脚本代码当其他用户访问该网站时恶意脚本会在用户浏览器中执行从而获取用户的敏感信息如 Cookie、会话令牌等、篡改页面内容或进行其他恶意操作。 为了防范这两种攻击可以采取多种措施: 如验证请求来源、设置 CSRF 令牌、对用户输入进行严格的过滤和转义、设置 HttpOnly 属性防止 Cookie 被脚本获取等。 8HTTP缓存 HTTP 缓存是一种用于提高 Web 应用性能和减少网络带宽使用的机制。 强缓存 通过 Expires 和 Cache-Control 响应头来控制。 Expires 指明资源的过期时间。 Cache-Control 可以设置更精确的缓存策略如 max-age 表示资源在多少秒内有效。 meta
http-equivCache-Control
contentmax-age31536000 /metahttp-equivExpirescontentThu, 31 Dec 2030 23:59:59 GMT /当缓存未过期时浏览器直接从本地缓存获取资源不会向服务器发送请求。 协商缓存 服务器通过 Last-Modified 告知浏览器资源的最后修改时间浏览器再次请求时通过 If-Modified-Since 带上这个时间服务器对比判断资源是否有更新如果没有则返回 304 状态码告知浏览器使用本地缓存。 ETag 是服务器为资源生成的唯一标识浏览器下次请求通过 If-None-Match 带上这个标识服务器对比判断决定是否返回新的资源。 在前端页面中设置通过 HTML 的 标签 例如一个网站的图片设置了强缓存有效期为 1 天。当用户在一天内再次访问该页面时浏览器直接从缓存中读取图片无需再次从服务器下载大大提高了页面加载速度。 又比如对于经常更新的网页内容服务器可以使用协商缓存根据资源的实际修改情况决定是否让浏览器使用缓存。
9Options预检请求
在 HTTP 协议中“OPTIONS”是一种请求方法。当客户端向服务器发送 OPTIONS 请求时它通常用于获取服务器支持的 HTTP 方法和其他与请求/响应相关的选项信息。 例如在进行跨域请求之前浏览器可能会先发送 OPTIONS 请求来检查服务器是否允许特定的跨域请求方法和头信息。
JS篇
0-1. 数组方法
改变原数组push、pop、shift、unshift、sort、splice、reverse 不改变原属组concat、join、map、forEach、filter、slice
0-2. 高阶函数
高阶函数是至少满足下列一个条件的函数接受一个或多个函数作为输入或输出一个函数。 Array扩展 forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex let arr [68, 53, 12];
// forEach里面传的是函数满足一个
arr.forEach((item, index) {console.log(第${index}个数是${item});
})
// forEach里面传的是函数并且也有返回值满足两个个
const map arr.map(function(i){return i*i
});0-3 script 中async和defer表示什么意思 async 和 defer 是两个属性用于控制脚本的加载和执行方式 当 script标签设置了 async 属性时脚本将异步加载并且一旦下载完成就会立即执行不会阻塞页面的渲染。这意味着脚本的执行顺序是不确定的可能会在页面的其他部分还在加载和渲染时就开始执行。
当 script 标签设置了 defer 属性时脚本会异步加载但会等到页面的解析DOM 构建完成后按照它们在页面中出现的顺序依次执行。这意味着脚本不会阻塞页面的初始渲染但执行顺序是有保证的。
0-4 Dom事件流的顺序什么是事件委托 当页面上的一个元素被点击时先从document向下一层层捕获到该元素。然后再向上冒泡一层层触发。 事件委托是将事件写在父级元素上e.target是事件捕获时那个最小的元素即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件代码更加简约。
0-5. break/continue/return的使用场景 break用于结束整个循环for、while、do-while continue用于结束循环中的当前层循环进入下一层循环 return用户结束整个函数 0-. 闭包是什么利弊如何解决弊端使用场景
场景 事件处理、回调函数、递归、链式调用 闭包是什么 JS中内层函数可以访问外层函数的变量外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。 闭包的好处
隔离作用域保护私有变量有了闭包才有局部变量要不然都是全局变量了。让我们可以使用回调操作其他函数内部变量长期驻扎在内存中不会被内存回收机制回收即延长变量的生命周期 闭包的弊端 内层函数引用外层函数变量内层函数占用内存。如果不释放内存过多时易引起内存泄露。
解决办法无法自动销户就及时手动回收使用后将函数的引用赋null。
1事件循环机制(event loop) 事件循环Event Loop是 JavaScript 运行时环境用于处理异步操作的一种机制。 在 JavaScript 中同步任务会在调用栈中依次执行而异步任务会在合适的时机被放入任务队列中等待执行。 事件循环的主要工作流程如下
首先执行同步任务这些任务会依次进入调用栈并执行直到调用栈为空。然后事件循环会检查任务队列通常包括宏任务队列和微任务队列。 宏任务MacroTask例如 setTimeout 、 setInterval 、 IO 操作等会被放入宏任务队列。 微任务MicroTask如 Promise.then 、 MutationObserver 等会被放入微任务队列。 事件循环会先处理微任务队列中的所有任务直到微任务队列为空。接着从宏任务队列中取出一个任务并执行。执行完一个宏任务后再次检查微任务队列重复上述过程。
通过这种机制JavaScript 能够在单线程环境中有效地处理异步操作不会造成阻塞从而保证了程序的响应性和性能。
2Null跟underfine的区别
Null 和 Undefined 在 JavaScript 中有以下区别
含义 Null 表示一个被明确赋值为空的对象引用。 Undefined 表示一个变量未被初始化或者一个对象中不存在的属性。类型 typeof null 的结果是 “object” 这是 JavaScript 中的一个历史遗留问题。 typeof undefined 的结果是 “undefined” 。
3Promise Promise 是 JavaScript 中处理异步操作的一种机制。 创建一个 Promise 对象通常需要传入一个执行器函数该函数接受两个参数 resolve 和 reject 用于改变 Promise 的状态 它具有以下特点和优势
解决回调地狱通过链式调用 then 方法可以更清晰地组织异步操作的逻辑避免多层嵌套的回调函数导致的代码可读性差和维护困难的问题。明确的状态Promise 有三种状态pending等待、fulfilled成功和 rejected失败。一旦状态确定就不可再改变。错误处理可以使用 catch 方法统一处理异步操作中的错误。 Promise.all([promise1,promise2]).then(res{}).catch(err{}) 4判断一个属性是对象还是数组 Array.isArray()typeOf 5New操作符做了哪些操作
创建一个新的空对象这个对象将成为构造函数创建的实例。将新创建的对象的 __ proto__ 属性指向构造函数的 prototype 对象从而建立实例与构造函数原型之间的链接实现了继承和方法共享。将构造函数中的 this 绑定到新创建的对象上。执行构造函数中的代码这可能包括属性的初始化、方法的定义等操作。 如果构造函数有返回值并且返回值是一个对象类型不是原始类型则返回这个对象否则返回新创建的对象。
6Node非阻塞i/o 非阻塞 I/O 意味着当 Node.js 发起一个 I/O操作如文件读取、网络请求等时不会阻塞当前线程等待操作完成而是继续执行后续的代码。当 I/O操作完成时通过回调函数或事件通知来处理结果。提高高并发处理能力和充分利用系统资源Web 服务器、实时聊天、文件上传下载 缺点编程复杂增加开销多了回调函数、错误内容处理棘手
7commonJS跟requireJS和ES6的区别
加载方式 CommonJS 是同步加载代码执行到 require 语句时会阻塞等待模块加载完成。 RequireJS 是异步加载不会阻塞后续代码的执行。 ES6 模块在编译时确定模块的依赖关系在运行时异步加载。模块导出 CommonJS 主要通过 module.exports 或 exports 来导出。 RequireJS 中模块通过定义函数并返回一个对象来导出。 ES6 模块可以使用 export default 导出默认值或者使用 export 关键字导出多个具名的变量、函数、类等。模块导入 CommonJS 使用 require 函数引入模块返回的是模块导出的对象的副本。 RequireJS 使用 require 函数通过配置模块的路径和依赖来加载。 ES6 模块使用 import 语句导入导入的是只读的绑定而非值的副本。运行环境 CommonJS 常用于服务器端如 Node.js 。 RequireJS 主要用于浏览器端。 ES6 模块既可以用于服务器端也可以用于现代浏览器端。模块循环引用 CommonJS 可以较好地处理模块的循环引用。 RequireJS 也能处理循环引用但方式与 CommonJS 不同。 ES6 模块在编译阶段确定依赖原则上不支持循环引用如果存在会报错。
8基本数据类型 Number/string/boolen/null/indefind/symbol i基础数据类型修改对应的栈就重新生成 9es6语法箭头函数新的操作方法等 模板字符串、结构、set、map、箭头函数、默认参数、for of、扩展运算、promise、es6model 10dom0跟dom2结构 DOM0 和 DOM2 是文档对象模型的不同级别它们在处理事件的方式上有所不同。 DOM0 点击事件 DOM2 可以监听点击事件并捕获各种阶段捕获、目标、冒泡 DOM2 级的事件处理方式相比 DOM0 级更加规范和灵活能够更好地管理多个事件处理程序并且支持事件的捕获和冒泡阶段。
11bind跟applycall的区别实现方式
getting.call(obj,”vlaue1”) getting.apply(obj,[”vlaue1”,”vlaue2”]) call、apply上面两个会立即执行函数 而const newFun getting.bind(obj,”vlaue1”); newFun ()是创建一个新的函数并改变其 this 指向和预设部分参数新函数需要手动调用执行。
12深拷贝浅拷贝
浅拷贝Object.assign()、扩展运算符 浅拷贝创建一个新的对象或数组但它只复制原始对象或数组的顶层属性或元素。如果原始对象或数组的属性值是引用类型如对象或数组则浅拷贝会复制引用而不是创建新的引用类型实例。 深拷贝JSON.parse(JSON.stringify())、clonedeep 深拷贝会递归地复制原始对象或数组的所有属性和子属性创建完全独立的副本原始对象的修改不会影响到深拷贝的结果。 14跨域同源策略 所谓“同源”指的是两个 URL 的协议、域名和端口都相同。 同源策略主要限制了以下几种操作 Cookie、LocalStorage 和 IndexedDB 等数据无法跨域读取。 DOM 无法跨域操作。 AJAX 请求无法跨域发送除非服务器明确允许。 跨域当浏览器请求的资源与当前页面的源不同时就产生了跨域请求。 常见的跨域解决方案有
JSONP利用 script标签的跨域能力通过动态创建 script 标签并指定回调函数来获取数据。CORS服务器端设置响应头允许特定源的请求访问。nignx代理在同域的服务器端转发跨域请求将获取到的数据返回给前端。
15快速排序 快速排序Quick Sort是一种分治的排序算法。它的平均时间复杂度为O(nlogn) 空间复杂度为O(logn),最坏时间复杂度为O(n方 以下是快速排序的基本步骤
选择一个基准元素pivot通常可以选择数组的第一个元素、最后一个元素或中间元素。对数组进行分区partition操作将小于基准的元素放在基准的左边大于基准的元素放在基准的右边。分区操作完成后基准元素处于最终排序后的正确位置。对基准元素左边和右边的子数组分别递归地重复步骤 1 和 2直到整个数组有序。
16解释原型继承如何工作 每个函数都有一个 prototype 属性当使用这个函数作为构造函数创建对象实例时这些实例可以通过 __proto__指针访问构造函数的prototype 对象。当试图访问实例对象的某个属性或方法时如果在本身找不到JS引擎会沿着 __proto__链向上原型对象查找如果在整个原型链中都没有找到该属性或方法最终会返回undefined。这种机制可以让多个实例共享来自原型对象的方法和属性可以在保持代码复用和灵活性的同时实现对象之间的层次结构和功能共享。 17解释 JavaScript 中“this”的工作原理
普通函数调用在非严格模式下this指向全局对象在浏览器中为window在 Node.js 中为global在严格模式下this会绑定到undefined。对象方法调用this指向调用该方法的对象。构造函数调用使用new关键字调用构造函数时this指的是实例化的新对象。apply和call调用通过这两个方法显式地指定this所指向的对象即this指向参数中的对象。箭头函数箭头函数没有自己的this而是继承外层函数的this。定时器中调用例如setInterval和setTimeoutthis指向的是全局变量在浏览器中为window。
18、New Set()的用法
类似数组、成员唯一用于数组去重 add() clear() delete() has() forEach() […new set(arr)]
19、描述一下 async、await 的用法及使用场景
ayayn/await主要用于异步操作将异步代码从视觉上看来比较同步化更加简洁易读。
用法
1. ayayn 将一个函数标示为一个异步函数在异步函数中可以使用await等待异步操作
2. await 只能在async中使用等待异步函数的操作完成获取异步函数执行的结果
使用场景
1. 网络请求 获取页面渲染的数据
2. 数据库操作等待查询或更新20、for in 与 for of for-in 遍历对象 key 为对象的 key遍历数组的话 key 为索引数for-of 用来遍历数组不能遍历普通对象 HTMLCSS篇
重绘和重排回流/重构/重载是什么如何优化
样式的调整会引起重绘比如字体颜色、背景色调整等 Dom的变动会引起重排比如定位改动、元素宽高调整
伪类和伪元素区别
伪类本质上用于弥补常规css选择器的不足因为如果没有我们可能需要多写一个class所以叫伪类
.class:last-child{}
.class:first-child{}a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}伪元素本质上是创建了一个有内容的虚拟元素如::before ::after。因为相当于多了一个元素/节点所以叫为元素
// :before用于在某个元素之前插入某些内容。
// :after用于在某个元素之后插入某些内容。
css
p:before{content:Read this: ;
}html:
pI live in Ducksburg/p页面展示
Read this: I live in DucksburgF12看dom中
before
Read this: I live in Ducksburg1h5新增属性
本地存储比如localStorage、sessionStorage 语义化标签如header、footer、nav等使代码结构清晰利于seo canvas svg web worker在主线程外再创建一个线程可与主线程交互 拖放功能
2Css3新增属性常问flextransform transform: translate(50px, 50px) rotate(30deg) scale(1.5); 3本地存储
cookie: 常用于保存用户登录状态,每次请求都会携带4klocalStorage: 存储数据量比较大的数据只要浏览器不清除就一直会在(5m)sessionStorage: 用于同一会话区间保存临时数据比如表单数据等窗口关闭数据清空(5m)
4Meta有哪些属性 标签位于文档的 部分一个 标签只能用于一种用途如果想要使用多种特性需要添加多个 标签 charset“utf-8” 字符编译 viewport 用于设置视口 http-equiv 网络缓存 content-security-policy 防止跨站点脚本攻击 5怎么实现移动端适配
使用 viewport 元标签
meta
nameviewport
contentwidth-device-width,
initial-scale1.0, maximum-scale1.0,
user-scalablenowidthdevice-width 视口宽度与设备宽度一致不设置的话浏览器会默认给个较宽值可能在移动端就不友好 媒体查询Media QueriesMedia screen弹性布局Flexbox和网格布局Grid相对单位(rem相对根元素、vh/vw相对视口)图片适配 banckground-size:cover
6水平垂直居中方式
框架篇
vue
0. v2/v3/v3.2 v-model实现方法
v2 通过 value和input(‘update:value’, $event)事件 v3 通过 modleValue和input(‘update:modelValue’, $event) v3.2通过 update:title“value $event”
1Vue数据双向绑定原理
vue2 原理是使用 es5 的 apiobject.defineProperty()对数据进行劫持结合发布订阅模式的方式来实现。vue3 使用的是 es6 的 proxy 实现的Proxy 用于创建一个数据代理当属性被访问或修改时触发 Proxy 拦截器实现数据响应式。 在 Vue 2 中双向数据绑定是利用 ES5 的一个 APIObject.defineProperty()对数据进行劫持结合发布订阅模式的方式来实现的。通过Object.defineProperty()来劫持数据对象的属性对属性getter和setter进行拦截当属性被访问或修改时除非getter和setter否则实现数据响应式。每个数据都有一个Watcher实例当数据发生变化时触发setter并通知Watcher然后Watcher会调用其函数将值更新在DOM。 而 Vue 3 中的双向数据绑定则是基于 ES6 的Proxy实现的。Proxy用于创建一个数据代理当属性被访问或修改时触发Proxy拦截器实现数据响应式。Proxy相较于Object.defineProperty()的优势在于它可以直接监听对象而非属性直接监听数组的变化并且拦截方式较多。Proxy返回一个新对象可以只操作新对象达到目的而Object.defineProperty()只能遍历对象属性直接修改。 2路由实现原理 路由管理器它的实现原理主要是通过改变浏览器的 URL 来实现不同页面组件的切换同时在不重新请求页面的情况下更新视图。 在浏览器环境下Vue Router 主要有两种实现模式hash 模式和 history 模式。
hash 模式 URL 中带有##后面的内容作为路径地址使用。 hash 模式的实现是基于锚点和onhashchange事件。hash 虽然出现在 URL 中但不会被包括在 HTTP 请求中它是用来指导浏览器动作的对服务器端完全无用改变 hash 不会重新加载页面,不会出现404。 每一次改变 hashwindow.location.hash都会在浏览器的访问历史中增加一个记录。history 模式 通过 HTML5 的history.pushState()和history.replaceState()方法改变地址栏只改变了地址栏并不会真正跳转到真正的路径。 需监听popstate事件当点击浏览器前进后退按钮或者通过 JavaScript 触发back或者forward时才会触发。 需要服务器端进行相应配置以处理页面刷新时的 404 错误。
这种模式充分利用了 HTML5 History Interface 中新增的方法使 URL 看起来更美观、更接近真实的路径但需要服务器的支持。因为没有#号当用户刷新页面之类的操作时浏览器会给服务器发送请求为避免出现这种情况需要服务器将除了静态资源外所有路由都重定向到根页面。 传参 router 包含所有路由信息和方法 route 只包含当前路由信息 router-link :to{ name:router1,params: { id: status ,id2:status3},query: { queryId: status2 }} router-link跳转router1/router-link区别 URL 表现形式
param参数作为 URL 路径的一部分。 有**/**标志 this.$route.params
query参数以 ?keyvalue 的形式附加在 URL 后面。有?标志 this.$route.query
刷新页面影响 param页面刷新不会丢失参数。 query页面刷新参数仍然存在。
3Watch跟computed的区别
computed(计算属性) 多对一 通过现有的数据计算出一个新的值具有缓存性当依赖变化会重新计算 watch(监听属性) 1. 一对多 监听某一个特定属性对象的单个属性或整个对象执行相应的回调函数没有缓存每次变化都会触发区别就是computed侧重于数据派发watch侧重于数据变化后对复杂逻辑的处理操作
4Watch的配置项 Immdera 立即执行 Deep 5为什么数组pushvue能跟踪到数据发生变化用下标方式不行
Vue 使用 Object.defineProperty 把数据对象的属性转为 getter/setter从而实现对数据变化的监听。然而对于数组Vue 不能检测通过索引直接设置数组项和修改数组长度这两种变动。
当使用 push 等方法时这些方法是 Vue 经过特殊处理的它们会触发 Vue 的更新机制从而通知视图进行更新。例如 push 方法向数组末尾添加元素会改变数组的内容并且 Vue 能够感知到这种变化。
6怎么实现一个组件的封装 创建 — 引入 — 注册 — 使用 v-model的原理 v-model其实是个语法糖 在 Vue 中v-model 是一个用于实现表单元素和组件数据双向绑定的指令。 其原理主要包括以下几个方面 对于原生的表单元素如 input、textarea、select 等 v-model 实际上是 value 属性和 input 事件的语法糖。 当用户输入内容时会触发元素的 input 事件Vue 会通过这个事件来更新组件实例中的数据。 同时组件实例中的数据变化也会同步更新到元素的 value 属性上从而实现双向绑定。 对于自定义组件 父组件使用 v-model时子组件需要接收一个名为 value 的 prop并触发一个名为 input 的自定义事件来更新父组件传递的值。 7MVVM模式的核心
通过数据绑定和 ViewModel 实现视图和模型的高效交互和低耦合从而提高应用程序的开发效率和可维护性。
8Provider跟inject
Provider 和 inject 是 Vue 中用于实现依赖注入的两个概念。它们的主要作用是允许祖先组件向其所有子孙后代组件传递数据或方法而不论组件之间的嵌套层次有多深。
在 Vue 2 和 Vue 3 中都可以使用 provide 和 inject但具体的使用方式略有不同。
9Keep-alive及其生命周期 activated在组件被激活时调用 deactivated在组件被停用时调用 需要注意的是使用 keep-alive 后原本的 beforeDestroy 和 destroyed 钩子函数将不会再被触发因为组件不会被真正销毁只是被缓存起来了。 另外keep-alive 组件还支持通过 include、exclude 属性或动态判断来有条件地缓存组件。 keep-alive 常用于需要频繁切换但又希望保持状态的组件比如列表页、详情页等以减少服务器请求次数和提高用户体验
10不想让vue中data里的一个对象里所以属性都具有settergetter怎么解决freeze Object.freeze() 11Slot
匿名插槽 (默认插槽) 子组件中没有指定名称的slot标签 父组件传递的未具名内容会填充到默认插槽中具名 子组件中使用 name 属性为插槽命名。 父组件使用 template 标签并通过 v-slot:插槽名 来传递对应名称的内容。
// 子组件
slot nameheader默认的头部内容/slot
// 父组件
template v-slot:headerp父组件传递的头部内容/p
/template作用域 子组件向插槽传递数据。 父组件通过接收这些数据来决定如何渲染插槽内容
// 子组件slot :useruserp默认用户信息未知/p/slotdata() {return {user: { name: 张三, age: 25 }};}
// 父组件
template v-slot{ user }p用户信息{{ user.name }}年龄{{ user.age }}/p
/template12、Vuex 有哪种属性及作用
vue2vue3都可使用vuex
state: 存放共享的数据属性mutations: 更改 state 中的状态同步操作actions: 异步操作 获取数据提交 mutations 来间接更新 state 数据getters: 类似于计算属性对 stated 的数据进行计算model: 模块设置每个模块有自己对于的 vuex 属性
vue3 新增了一个pinia
state 存放共享属性actions 可支持同步和异步getters可选用于计算派生状态。persist可选用于配置状态的持久化选项。
13计算属性和监听的执行顺序
默认 beforeCreate - props - data - computed - created - mounted - methods监听设置立即执行 beforeCreate - props - data - watch - computed - created - mounted - methods触发某一事件 Methods - watch - computed
14以下是 Vue3 与 Vue2 在一些方面的比较
v2的mixin与v3的hook
相同点 目的相同Vue 2 的 Mixin 和 Vue 3 的 Hook 都旨在实现代码的复用和逻辑的共享。不同点 语法和实现方式 Mixin在 Vue 2 中通过将多个对象的属性和方法合并到组件中来实现复用。 Hook在 Vue 3 中通过函数来封装和返回有状态的逻辑。 数据响应式处理 Mixin对于响应式数据的处理可能相对复杂容易出现一些意外情况。 Hook基于 Vue 3 改进的响应式系统处理响应式更加可靠和高效。 代码组织和可读性 Mixin多个 Mixin 混合使用时可能导致代码结构混乱难以清晰地理解数据和方法的来源。 Hook函数式的风格使得代码的组织更加清晰逻辑更加内聚。 类型支持 Hook在 TypeScript 中的类型支持更好更容易进行类型推导和类型检查。
响应式原理
Vue2通过 Object.defineProperty 对 data 中的属性进行劫持来实现响应式。但存在无法监听数组变化、需通过特殊方法实现以及无法监听对象新增和删除属性等限制。Vue3使用 Proxy 代替 Object.defineProperty可以监听到对象的所有属性包括新增和删除操作还支持数组的监听并且使用 WeakMap 存储依赖关系避免了内存泄漏问题。
性能提升
Vue3 在响应式处理以及重写 diff 算法等内部实现上进行了大量优化渲染速度更快性能更好内存占用更少。例如采用静态提升技术对不参与更新的元素做静态提升只会被创建一次在渲染时直接复用优化内存。在 diff 算法中增加了静态标记,采用同序列比对和最长递归子序列算法计算最小修改偏移量。Vue3 还支持更好的 Tree Shaking通过模块拆分和函数式编程实现按需引入减少打包体积同时对源码体积进行了优化移除了一些非必要特性新增模块也可按需引入。
编码方式
Vue3 引入了 Composition API组合式 API允许开发者更好地组织和复用逻辑代码提高代码的可维护性。可以根据逻辑相关性组织代码代码量少更灵活语法提示友好且对 TypeScript 的支持更好。Vue2 使用 Options API组件的逻辑分散在不同的选项中如 data、methods、computed 等。
设计理念
Vue3 更注重模块的拆分模块之间耦合度低可独立使用部分模块如只引入 reactive 模块来使用响应式处理。对所有 API 进行重写采用函数式编程支持更好的 Tree Shaking精确实现按需引入减少打包体积。Vue2 模块的独立性相对较弱。
特性支持
Vue3 支持更多特性如片段、Teleport、Suspense 等。Vue2 相对较少。
生命周期 Vue3 中的生命周期函数有所变化例如 beforeCreate 和 created 变为 setupbeforeDestroy 改名为 beforeUnmountdestroyed 改名为 unmounted 等。并且 Vue3 的生命周期函数可以多次调用而不会覆盖。
全局方法定义
Vue2 中直接在 Vue 实例上挂载全局方法。Vue3 中通过创建的应用实例来定义全局方法。
template 根组件
Vue2 有且只有一个根组件。Vue3 没有固定的根节点可以有多个根。
启动方式
1. Vue2new Vue({ store, router, render: h h(App) }).$mount(#app)
2. Vue3import { createApp } from Vue; createApp(App).use(store).use(router).mount(#App)路由和状态管理
Vue3 的路由创建方式和 Vue2 有所不同。在 Vue2 中创建路由对象实例通过 new Router而 Vue3 是通过 import createRouter 这个函数来构建。Vue3 中的状态管理库 Pinia 与 Vue2 中的 Vuex 也有一些区别Pinia 去掉了 mutations 和 modulesmodules 在 Pinia 中是自带的不需要手动去写。
computed 计算属性和 watch 监听
Vue2 中的 computed 写法是在对象中定义方法而 Vue3 中需引入 computed写法是一个函数需返回结果。Vue3 中的 watch 监听写法也有所不同第三个参数可选。对于 ref 数据的监听不需要加 .value且能监听多个值的变化。而 ref 生成的响应式对象默认不支持深度监听需加上 deep: truereactive 生成的响应式对象则默认为深度监听。
props 处理
Vue2 中接收 props 是对象时可添加 default、required、type 等属性。而 Vue3 中 props 是只读的不能在 setup 函数中修改如需修改可使用响应式对象或 ref。
微信小程序
1. 登陆顺序
调用 wx.login() 接口获取临时登录凭证 code拿code向后端获取token后端通过code去向微信端获取sessionKey和openId后向前端返回登录态也就是token
react
1Hooks高阶组件
useState:用于在函数组件中添加状态可跟踪随时间变化的数据。它返回一个状态值和更新该状态值的函数。useEffect:用于执行副作用操作如数据获取、订阅或手动更改 DOM 等。类似于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount生命周期。(没有依赖项初始更新、依赖为空初始、有依赖初始值变)useRef:用于创建对 DOM 元素或值的引用可以在渲染之间保持状态。useMemo用于对计算结果进行记忆避免在每次渲染时重复计算。只有当依赖项发生变化时才会重新计算结果。useReducer:用于更复杂的状态逻辑它接收一个 reducer 函数和初始状态然后返回当前的状态和派发 action 的 dispatch 函数。uesContet用于访问 React Context 在组件树中传递的数据而不必通过每个组件传递 propsuseLayoutEffect与 useEffect 类似但它在所有的 DOM 变更之后同步执行。这在需要读取 DOM 布局并同步触发重渲染时非常有用。useDebugValue用于在 React 开发者工具中显示自定义 Hook 的标签useCallback用于返回一个记忆化版本的回调函数防止不必要的渲染。它会在依赖项没有变化时返回上次缓存的函数。useFetch非 React 内置 Hook例如react-fetch-hook用于便捷地使用fetch API进行数据获取。useWindowScrollPosition非 React 内置 Hook用于获取窗口的滚动位置。useLocalStorage非 React 内置 Hook用于同步本地存储的数据 总的来说useState 关注状态的管理和组件的重新渲染useEffect 专注于副作用的处理useRef 则主要用于引用和保存跨渲染的数据。
2Redux中间件原理 在 Redux 中数据的更新流程通常是 action 被派发 - reducer 根据 action 计算新的 state - 新的state 更新到 store 中从而触发视图的更新。 中间件位于 action 被派发和 reducer 处理之间。它本质上是一个函数接收 Redux 里 store 的 dispatch 和 getState 方法作为参数并返回一个新的函数。这个新的函数会接收下一个中间件或者最终的 reducer 作为参数。
3Redux异步操作
Redux Thunk 原理Redux Thunk 是一个中间件它允许 action 创建函数返回一个函数而不是一个对象。返回的函数接收 dispatch 和 getState 方法作为参数从而可以在函数内部进行异步操作并在操作完成后使用 dispatch 派发相应的同步 action 来更新状态。
vue、react和小程序之间的区别
1Diff算法react跟vue的diff区别
Diff 算法是一种用于比较两个数据结构差异的算法,主要用于高效地更新虚拟 DOM 以最小化对真实 DOM 的操作从而提高性能.
React 的 Diff 算法主要基于两个假设 两个不同类型的元素会产生完全不同的树。 对于同一层级的一组子节点通过 key 来标识节点的唯一性。 当对比两棵树时如果节点类型不同直接删除旧的节点并创建新的节点。对于同一类型的节点则比较属性的变化来更新 DOM。 Vue 的 Diff 算法 在更新节点时会更加精细化。在处理同层级节点对比时会遵循以下策略 新老节点数组的开始和结束位置设置指针进行比较。 如果节点有 key会根据 key 进行更准确的匹配和复用。 当新节点多或者老节点多时会通过创建或删除节点来达到最终的一致性。 例如如果在 Vue 中一个列表的顺序发生了变化并且节点有 key 那么 Vue 可以更准确地移动节点而不是删除和重新创建。 2React、vue生命周期要展开来说
react:
Mounted挂载 Constract(初始化state) stateFromProps Render(计算返回虚拟dom|挂挂在和更新都会用) ComponetDidMout获取数据更新updating:父组件重新渲染、 setState或forceUpdate触发 前两个是因为父组件重新渲染更新的 stateFromProps Render() shouldComponetUpdate ComputedDidUpdata卸载Unmouting cnmponetWillUnmount(清理资源取消定时器)
vue3 { setup, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } vue2 父前三个-子前四个-父结尾
3小程序原生父子传值
父传子正常传 子properties收 子传父taggerEvent(“fun”,value) 父bindFunthis.selectComponent(“类名”)
4Vuereact小程序组件间的通信
Vue
导航编程Query 参数params路由参数meta
React
导航编程props.params 方法query 方法类似于表单中的 get 方法传递参数为明文但刷新页面参数会丢失。
小程序
使用 navigator 的 url 带参传值利用 getCurrentPages 进行页面传值小程序中还可以使用 wx.navigateTo、wx.redirectTo 等方法进行路由跳转并传值它们与 navigator 的对应关系如下
navigator 的 open-type“navigate”不写默认值是 navigate等于 wx.navigateTo保留当前页面跳转到应用内的某个页面但不能跳到 tabbar 页面小程序中页面栈最多十层可带参。wx.redirectTo关闭当前页面跳转到应用内的某个页面但不允许跳转到 tabbar 页面可带参。wx.switchTab跳转到 tabBar 页面并关闭其他所有非 tabBar 页面不可带参。wx.reLaunch关闭所有页面打开到应用内的某个页面可带参。wx.navigateBack关闭当前页面返回上一页面或多级页面
5Vue跟react的优缺点
Vue 和 React 都是非常流行的前端框架它们各自有一些优点和缺点 Vue 的优点
学习曲线相对较平缓容易理解和上手。模板语法简洁Vue 的模板语法直观与 HTML 结构相似使得开发者可以更自然地编写视图。轻量级Vue 的核心库相对较小性能开销较低。渐进式框架可以逐步将 Vue 引入现有的项目无需一次性进行大规模重构。中文文档丰富对国内开发者来说查找资料和解决问题更加方便。 Vue 的缺点生态系统相对较小与 React 相比一些特定领域的库和工具可能相对较少。大型项目的可扩展性在处理超大型复杂应用时可能在架构和扩展方面面临一些挑战。
React 的优点
强大的生态系统拥有大量的高质量第三方库和工具几乎可以满足任何需求。虚拟 DOM 优化高效的虚拟 DOM 算法使得性能优化更具可控性。社区活跃拥有庞大且活跃的社区技术更新和支持力度大。适用于大型应用架构灵活在大型项目中更容易进行代码组织和管理。
React 的缺点
学习曲线陡峭需要掌握较多的概念和技术如 JSX、函数式编程等。代码复杂度较高尤其是在处理复杂的状态管理时。原生模板语法不够直观JSX 对于一些开发者来说可能不太习惯。
需要注意的是选择 Vue 还是 React 取决于具体的项目需求、团队技术栈和个人偏好。在实际开发中两者都能构建出高质量的应用程序。
Git
rebase
1.在基于某个分支进行开发时如果上游分支有新的提交使用 rebase 可以将本地的提交重新应用到更新后的上游分支顶端而不是直接合并。
