面试题
关注
分享
扫一扫
江-月*夜
喜欢分享项目用到的知识。也方便我日后用到直接复制修改
展开
-
第25天 虚拟 DOM 实现原理？
拟 DOM 的实现原理主要包括以下 3 部分：用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；diff 算法 — 比较两棵虚拟 DOM 树的差异；pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。...原创 2022-01-12 15:28:52 · 182 阅读 · 0 评论 -
第25天 es6 Proxy 与 Object.defineProperty 优劣对比
Proxy 的优势如下:Proxy 可以直接监听对象而非属性；Proxy 可以直接监听数组的变化；Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的；Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；原创 2022-01-12 15:27:13 · 302 阅读 · 0 评论 -
第25天 Vue 说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；缺原创 2022-01-12 14:43:49 · 127 阅读 · 0 评论 -
第25天 HTML全局属性有哪些
class :为元素设置类标识data-* : 为元素增加⾃定义属性draggable : 设置元素是否可拖拽id : 元素 id ，⽂档内唯⼀lang : 元素内容的的语⾔style : ⾏内 css 样式title : 元素相关的建议信息原创 2022-01-12 10:12:43 · 71 阅读 · 0 评论 -
第25天 ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元素和块级元素有什么区别？
⾏内元素有： a b span img input select strong块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p空元素： < br> < hr> < img> < input> < link> < meta>⾏内元素不可以设置宽⾼，不独占⼀⾏块级元素可以设置宽⾼，独占⼀⾏...原创 2022-01-12 10:01:32 · 184 阅读 · 0 评论 -
第25天 javascript事件的各个阶段
1：捕获阶段 —> 2：⽬标阶段 —> 3：冒泡阶段document —> target ⽬标 ----> document由此， addEventListener 的第三个参数设置为 true 和 false 的区别已经⾮常清晰了true 表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件false 表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件...原创 2022-01-12 08:43:20 · 161 阅读 · 0 评论 -
第25天 JavaScript写⼀个通⽤的事件侦听器函数
markyun.Event = { // 视能⼒分别使⽤dom0||dom2||IE⽅式 来绑定事件 // 参数： 操作的元素,事件名称 ,事件处理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件类型、需要执⾏的函数、是否捕捉 element.addEventListener(type, handler, false); } else if (element.at原创 2022-01-10 09:59:13 · 75 阅读 · 0 评论 -
webpack5 优化构建速度
下面会以这些方面来说明如何 优化构建速度：1.优化babel-loader：使用include或exclude来缩小查找范围使用cacheDirectory来设置缓存2.避免引入无用的模块：webpack.IgnorePlugin3.避免重复打包：module.noParse4.开启多进程打包：happypack5.多进程压缩js：webpack-parallel-uglify-plugin6.自动更新和热更新（仅适合开发环境）：watch(devServer自动开启)、HotModul原创 2022-01-10 09:54:36 · 1127 阅读 · 0 评论 -
第24天 javascript 如何渲染⼏万条数据并不卡住界⾯
如何在不卡住⻚⾯的情况下渲染数据，也就是说不能⼀次性将⼏ 万条都渲染出来，⽽应该⼀次渲染部分 DOM ，那么就可以通过requestAnimationFrame 来每 16 ms 刷新⼀次<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2022-01-08 17:17:28 · 710 阅读 · 0 评论 -
第24天 JavaScript 异步编程的实现⽅式
回调函数优点：简单、容易理解缺点：不利于维护，代码耦合⾼事件监听(采⽤时间驱动模式，取决于某个事件是否发⽣)：优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数缺点：事件驱动型，流程不够清晰发布/订阅(观察者模式)类似于事件监听，但是可以通过‘消息中⼼ʼ，了解现在有多少发布者，多少订阅者Promise对象优点：可以利⽤then⽅法，进⾏链式写法；可以书写错误时的回调函数；缺点：编写和理解，相对⽐较难Generator函数优点：函数体内外的数据交换、错误..原创 2022-01-08 16:40:37 · 75 阅读 · 0 评论 -
第24天 JavaScript ajax原理
Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascrip t 来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服 务器获得请求数据Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是aja x的核⼼机制/** 1. 创建连接 **/var xhr = null;原创 2022-01-08 11:16:50 · 82 阅读 · 0 评论 -
第24天 JavaScript事件模型
W3C 中定义事件的发⽣经历三个阶段：捕获阶段（ capturing ）、⽬标阶段 （ targetin ）、冒泡阶段（ bubbling）冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发捕获型事件：当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble = true阻⽌捕获：阻⽌事件的默认⾏为，例如 clic.原创 2022-01-08 11:06:40 · 354 阅读 · 0 评论 -
第24天 JavaScript原型，原型链 ? 有什么特点？
一、说说你对作⽤域链的理解作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能 向上访问，变量访问到 window对象即被终⽌，作⽤域链向下访问变量是不被允许的简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和 ⽣命周期二、原型每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)，当我们访问⼀个对象的 属性时如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个prototype ⼜会有⾃原创 2022-01-08 10:55:13 · 118 阅读 · 0 评论 -
第24天 前端重绘和回流（重排）是什么，如何避免？
DOM的变化影响到了元素的⼏何属性（宽⾼）,浏览器重新计算元素的⼏何属性，其他元素 的⼏何属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受 到影响的部分重新绘制到屏幕上的过程称为重绘。引起重排的原因有1）添加或者删除可⻅的DOM元素，2）元素位置、尺⼨、内容改变，3）浏览器⻚⾯初始化，4）浏览器窗⼝尺⼨改变，重排⼀定重绘，重绘不⼀定重排，减少重绘和重排的⽅法：不在布局信息改变时做 DOM 查询使⽤ cssText 或者 className ⼀次性改变属性.原创 2022-01-08 09:19:26 · 233 阅读 · 0 评论 -
第23天 html viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu // width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置 // initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数 // minimum-sc原创 2022-01-07 10:25:10 · 214 阅读 · 0 评论 -
第22天 html5有哪些新特性、移除了那些元素？
HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增 加’绘画 canvas⽤于媒介回放的 video 和 audio 元素 本地离线存储 localStorage⻓期存储数据，浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后⾃动删除语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section 表单控件，calendar 、 date 、 time 、 ema原创 2022-01-06 14:28:30 · 852 阅读 · 0 评论 -
第22天 javascript 从浏览器地址栏输⼊url到显示⻚⾯的步骤
浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构 （如 HTML 的 DOM ）；载⼊解析到的资源⽂件，渲染⻚⾯，完成。...原创 2022-01-06 11:36:33 · 504 阅读 · 0 评论 -
第22天 Vue computed 实现？ Vue complier 实现？
1.computed建⽴与其他属性（如： data 、 Store ）的联系；属性改变后，通知计算属性重新计算初始化 data ， 使⽤ Object.defineProperty 把这些属性全部转为getter/setter 。初始化 computed , 遍历 computed ⾥的每个属性，每个 computed 属性都是⼀个watch 实例。每个属提供的函数作为属性的 getter ，使⽤Object.defineProperty 转化。Object.defineProperty get原创 2022-01-06 09:57:52 · 206 阅读 · 0 评论 -
第22天 Vue 组件 data 为什么必须是函数
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同⼀个引⽤类型的值时，改变其中⼀个会影响其 他原创 2022-01-06 09:51:34 · 175 阅读 · 0 评论 -
第22天 Vue 说说NextTick？vue的优点是什么？
1.NextTicknextTick 可以让我们在下次 DOM 更新循环结束之后执⾏延迟回调，⽤于获 得更新后的 DOM2.优点低耦合。视图（ View ）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不 同的 “View”上，当View变化的时候Model可以不变，当 Model 变化的时候 View 也可 以不变可重⽤性。你可以把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯，让很多 view 重⽤这段视 图逻辑可测试。界⾯素来是⽐较难于测试的，⽽现在测原创 2022-01-06 09:47:01 · 237 阅读 · 0 评论 -
第22天 Vue ＜keep-alive＞＜/keep-alive＞ 的作⽤是什么? v-el的作⽤是什么
1.keep-alive<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要⽤于保留 组件状态或避免重新渲染⽐如有⼀个列表和⼀个详情，那么⽤户就会经常执⾏打开详情=>返回列表=> 打开详情…这样的话列表和详情都是⼀个频率很⾼的⻚⾯，那么就可以对列表 组件使⽤ 进⾏缓存，这样⽤户每次返回列表的 时候，都能从缓存中快速渲染，⽽不是重新渲染2.v-el提供⼀个在⻚⾯上已存在的 DOM 元素作为 Vue 实例的挂载⽬标.可以原创 2022-01-06 09:43:31 · 151 阅读 · 0 评论 -
第21天 Vue路由$route 和 $router 的区别
$route 是“路由信息对象”，包括 path ， params ， hash ， query ， fullPath ， matched， name 等路由信息参数。⽽ $router 是“路由实例”对象包括了路由的跳转⽅法，钩⼦函数等原创 2022-01-06 09:06:44 · 139 阅读 · 0 评论 -
第21天 vuex是什么？怎么使⽤？哪种功能场景使⽤它？
只⽤来读取的状态集中放在 store 中； 改变状态的⽅式是提交 mutations ，这是个同步 的事物； 异步逻辑应该封装在 action 中。在 main.js 引⼊ store ，注⼊。新建了⼀个⽬录 store ， … export*场景有：单⻚应⽤中，组件之间的状态、⾳乐播放、登录状态、加⼊购物⻋1.vuexstate ： Vuex 使⽤单⼀状态树,即每个应⽤将仅仅包含⼀个 store 实例，但单⼀状态 树和模块化并不冲突。存放的数据状态，不可以直接修改⾥⾯的数据。mutation.原创 2022-01-05 15:12:32 · 119 阅读 · 0 评论 -
第21天 Vue路由
vue路由的钩⼦函数⾸⻚可以控制导航跳转， beforeEach ， afterEach 等，⼀般⽤于⻚⾯ title的修改。⼀些需要登录才能调整⻚⾯的重定向功能。全局前置守卫const router = createRouter({ ... })router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false})beforeEach 主要有3个参数 to ， from ， next 。t原创 2022-01-05 15:09:27 · 78 阅读 · 0 评论 -
第21天 Vue实现数据双向绑定的原理：Object.defineProperty()
vue 实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布 消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript对象传给 Vue 实例来作 为它的 data 选项时，Vue 将遍历它的属性，⽤ Object.defineProperty() 将它们转为 getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让 Vue 追.原创 2022-01-05 15:08:39 · 101 阅读 · 0 评论 -
第21天 请详细说下你对vue⽣命周期的理解
总共分为8个阶段创建前/后，载⼊前/后，更新前/后，销毁前/后创建前/后： 在 beforeCreate 阶段， vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段， vue 实例的数据对象 data 有了，el还 没有载⼊前/后：在 beforeMount 阶段， vue 实例的 $el 和 data 都初始化了，但还是挂载 之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段， vue 实例挂载原创 2022-01-05 14:44:00 · 103 阅读 · 0 评论 -
第21天 JavaScript性能
1 DNS 预解析DNS 解析也是需要时间的，可以通过预解析的⽅式来预先获得域名所对应的 IP<link rel="dns-prefetch" href="//blog.poetries.top">2 缓存缓存对于前端性能优化来说是个很重要的点，良好的缓存策略可以降低资源的重复加载提 ⾼⽹⻚的整体加载速度 通常浏览器缓存策略分为两种：强缓存和协商缓存1）强缓存实现强缓存可以通过两种响应头实现： Expires 和 Cache-Control 。强缓 存表示在缓存期间不需要请求，原创 2022-01-05 14:37:58 · 104 阅读 · 0 评论 -
第21天 javascript Service Worker
Service workers 本质上充当Web应⽤程序与浏览器之间的代理服务器，也可以在⽹络可⽤时作为浏览器和⽹络间的代理。它们旨在（除其他之外）使得 能够创建有效的离线体验，拦截⽹络请求并基于⽹络是否可⽤以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API⽬前该技术通常⽤来做缓存⽂件，提⾼⾸屏速度// index.jsif (navigator.serviceWorker) { navigator.serviceWorker .register("sw.原创 2022-01-05 11:37:56 · 111 阅读 · 0 评论 -
第21天 es6 Proxy
Proxy 是 ES6 中新增的功能，可以⽤来⾃定义对象中的操作let p = new Proxy(target, handler);// `target` 代表需要添加代理的对象// `handler` ⽤来⾃定义对象中的操作 可以很⽅便的使⽤ Proxy 来实现⼀个数据绑定和监听let onWatch = (obj, setBind, getLogger) => { let handler = { get(target, property, receiver) { get.原创 2022-01-05 11:07:32 · 64 阅读 · 0 评论 -
第21天 JavaScript 防抖
你是否在⽇常开发中遇到⼀个问题，在滚动事件中需要做个复杂计算或者实现⼀个按钮的防⼆次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第⼀个需求，如果在频繁的事件回调中做复杂计算，很有可能导致⻚⾯卡顿，不如将多次计算合并为⼀次计算，只在⼀个精确点做 操作PS：防抖和节流的作⽤都是防⽌函数多次调⽤。区别在于，假设⼀个⽤户⼀直触发这个函 数，且每次触发函数的间隔⼩于 wait ，防抖的情况下只会调⽤⼀次，⽽节流的 情况会每 隔⼀定时间（参数 wait ）调⽤函数// 这个是⽤来获取当前时间戳的原创 2022-01-05 10:56:39 · 181 阅读 · 0 评论 -
第22天 JavaScript Typeof
typeof 对于基本类型，除了 null 都可以显示正确的类型typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof b // b 没有声明，但是还会显示 undefinedtypeof 对于对象，除了函数都会显示 objecttypeof [] // 'object'typ.原创 2022-01-05 10:33:50 · 63 阅读 · 0 评论 -
第21天 javascript == 和 ===区别，什么情况⽤ ==
// [] 转成 true，然后取反变成 false[] == false// 根据第 8 条得出 [] == ToNumber(false) [] == 0// 根据第 10 条得出ToPrimitive([]) == 0// [].toString() -> '''' == 0// 根据第 6 条得出 0 == 0 // -> true=== ⽤于判断两者类型和值是否相同。 在开发中，对于后端返回的 code ， 可以通过 == 去判断...原创 2022-01-05 10:30:48 · 219 阅读 · 0 评论 -
第21天 async、await 优缺点
async 和 await 相⽐直接使⽤ Promise 来说，优势在于处理 then 的调 ⽤链，能够更清晰准确的写出代码。缺点在于滥⽤ await 可能会导致性能问 题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性var a = 0var b = async () => { a = a + await 10 console.log('2', a) // -> '2' 10 a = (await 10) + a c.原创 2022-01-04 10:57:23 · 563 阅读 · 0 评论 -
第21天 怎么判断对象类型
可以通过 Object.prototype.toString.call(xx) 。这样我们就可以获得类似 [object Type]的字符串。instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不 是能找到类型的 prototype...原创 2022-01-04 10:53:15 · 243 阅读 · 0 评论 -
第21天 简单说下原型？
每个函数都有 prototype 属性，除了 Function.prototype.bind() ，该属性指向原 型。每个对象都有__proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指 向了 [[prototype]] ，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使 ⽤ __proto__来访问。对象可以通过__proto__ 来寻找不属于该对象的属性，__proto__将对象连接起来组 成了原型链。...原创 2022-01-04 10:52:00 · 199 阅读 · 0 评论 -
第21天 bind、call、apply 区别
call 和 apply 都是为了解决改变 this 的指向。作⽤都是相同的，只是传参的⽅式 不同。除了第⼀个参数外， call可以接收⼀个参数列表， apply 只接受⼀个参数数组let a = { value: 1 }function getValue(name, age) { console.log(name) console.log(age) console.log(this.value) }getValue.call(a, 'yck', '24')getValue.apply.原创 2022-01-04 10:46:52 · 97 阅读 · 0 评论 -
第21天 谈谈变量提升
当执⾏ JS 代码时，会⽣成执⾏环境，只要代码不是写在函数中的，就是在 全局执⾏环境中，函数中的代码会产⽣函数执⾏环境，只此两种执⾏环境。b() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b') }在提升的过程中，相同的函数会覆盖上⼀个函数，并且函数优先于变量提升b() // call b secondfunction b() { console..原创 2022-01-04 10:34:58 · 187 阅读 · 0 评论 -
第21天 UDP 与 TCP 的区别是什么？
一、UDP⾸先 UDP 协议是⾯向⽆连接的，也就是说不需要在正式传递数据之前先连接起双⽅。然后 UDP协议只是数据报⽂的搬运⼯，不保证有序且不丢失的传递到对端，并且 UDP 协议也没 有任何控制流量的算法，总的来说 UDP 相较于 TCP更加的轻便⾯向⽆连接⾸先 UDP 是不需要和 TCP ⼀样在发送数据前进⾏三次握⼿建⽴连接的，想发数据就可 以开始发送了。 并且也只是数据报⽂的搬运⼯，不会对数据报⽂进⾏任何拆分和拼接操作。在发送端，应⽤层将数据传递给传输层的 UDP 协议， UDP 只会原创 2022-01-04 10:04:21 · 711 阅读 · 0 评论 -
第21天 使用js写一个方法找出1-10000之间的对称数
对称数，又称回文数。const symmetryNumber = []const checkList = new Map()const checkSymmetryNumber = number => { if (number % 10 === 0) return const numberString = number.toString() const cn = numberString.split('').reverse().join('') if (cn === numberS原创 2022-01-04 09:19:24 · 591 阅读 · 0 评论 -
第20天 Vue keep-alive 组件有什么作⽤
如果你需要在组件切换的时候，保存⼀些组件的状态防⽌多次渲染，就可以使⽤ keepalive 组件包裹需要保存的组件。对于keep-alive 组件来说，它拥有两个独有的⽣命周期钩⼦函数，分别为 activated 和 deactivated 。⽤ keep-alive 包裹的组件在切换时不会进⾏销毁，⽽是缓存到内 存中并执⾏ deactivated 钩⼦函数，命中缓存渲染后会执⾏actived 钩⼦函数。...原创 2022-01-04 08:47:38 · 210 阅读 · 0 评论