前端面试题
前端面试题
学习前端的渣渣
正在学习前端的渣渣
展开
-
强缓存与协商缓存
If-Modified-Since能检测到的精度是秒级的,某些服务器不能精确的得到文件的最后修改时间,我们编辑了文件,但文件的内容没有改变,因为服务器是根据文件的最后的修改时间判断的 ,导致重新请求所以才出现了ETag,ETag对服务器也有性能损耗Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后CIA觉得是否返回304。第一次请求资源时,服务器返回资源,并在respone header头中回传资源的缓存参数;原创 2022-09-29 12:40:43 · 1537 阅读 · 0 评论 -
引入css的方式
通过外部创建一个css文件,@import引入这个css文件。通过外部创建一个css文件,link标签引入这个css文件。写在标签里面,通过style=""属性设置样式。写在每个页面的标签里面。原创 2022-09-28 21:52:18 · 1399 阅读 · 0 评论 -
行内元素与块级元素
【代码】行内元素与块级元素。原创 2022-09-28 13:23:51 · 80 阅读 · 0 评论 -
水平+垂直 居中的方法
如何实现子元素(红色部分)水平+垂直居中的效果呢?原创 2022-09-28 12:52:08 · 193 阅读 · 0 评论 -
setTimeout与setInterval的区别与机制
用于在指定的毫秒数后调用函数或计算表达式。只执行一次。原创 2022-09-26 17:24:48 · 119 阅读 · 0 评论 -
CSS中的BFC是什么?
BFC格式化上下文指一个独立的渲染区域,或者说是一个隔离的独立容器,可以理解为一个独立的封闭空间。无论如何不会影响到它的外面。原创 2022-09-22 16:35:26 · 460 阅读 · 0 评论 -
重绘(Repaint)和回流(Reflow)(重排),以及如何优化?
流式布局。原创 2022-09-22 14:55:59 · 468 阅读 · 0 评论 -
服务端渲染SSR
服务端渲染的模式下,当用户第一次请求页面时,由服务器把需要的组件或页面渲染成HTML字符串,然后把它返回给客户端。客户端拿到手的,是可以直接渲染然后呈现给用户HTML内容,不需要为了生成DOM内容,自己再去跑一遍JS代码。有了服务端渲染,当请求用户也页面时,返回body里,已经有了首屏的html结构,之后结合css显示出来。原创 2022-09-21 23:36:33 · 87 阅读 · 0 评论 -
JS中什么是变量提升(预解析),导致了什么问题?
js在执行代码前,浏览器会对js代码进行扫描,默认把所有带var和function声明的变量进行提前声明或定义,遵循先解析后使用的原则。原创 2022-09-21 23:12:39 · 330 阅读 · 0 评论 -
解决js延迟加载的方式
JS延迟加载就是页面加载完成之后再加载js文件,有助于提高页面加载速度。因为js是单线程,会阻塞DOM解析,因此也会阻塞DOM的加载。HTML元素是按其在页面中出现的次序调用的,如果用javascript来管理页面上的元素(使用文档对象模型dom),并且js加载于欲操作的HTML元素之前,则代码将出错。也就是说,我们写了js语句来获取DOM对象,但由于DOM结构还没有加载完成,因此获取到的是空对象。原创 2022-09-21 18:08:56 · 2375 阅读 · 0 评论 -
Object对象的相关方法
该参数是一个属性描述对象,它所描述的对象属性,会添加到实例对象,作为该对象自身的属性。如果目标对象与源对象、或者源对象与源对象有同样的属性的话,后面的属性会覆盖前面的属性。该方法接收一个对象作为参数,然后以它为原型,返回一个实例对象。为参数对象设置原型,返回该参数对象。用于返回给定对象自己的可每组属性名称的数组,以与普通循环相同的顺序迭代。创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。返回一个数组,成员是参数对象本身的所有属性的键名,不包含继承的属性名。这是获取原型对象的标准方法。原创 2022-09-19 23:04:23 · 222 阅读 · 0 评论 -
elementUI如何实现按需引入和全局引入?
【代码】elementUI如何实现按需引入和全局引入?原创 2022-09-19 13:36:15 · 875 阅读 · 1 评论 -
JS中的宏任务与微任务
主线程 > 微任务 > Dom渲染 > 宏任务。原创 2022-09-18 22:51:41 · 518 阅读 · 0 评论 -
vue中的插槽slot
将子组件中data的数据传出,在父组件中使用。子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。实现原理:当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm.slot.default,具名插槽为vm.为插槽名,当组件执行渲染函数时候,遇到。原创 2022-09-18 21:55:19 · 361 阅读 · 0 评论 -
vue中的mixin混入
这不是Vue的专属的,可以说是一种思想,在很多开发框架中都实现了Mixin。mixin提供了一种非常灵活的方式,来分发Vue组件中可复用的功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样可以减少代码冗余度,也可以让后期维护起来更加容易。原创 2022-09-18 20:46:17 · 1190 阅读 · 0 评论 -
vue中keep-alive的作用
keep-alive是Vue提供给我们的一个内置组件,会缓存不活动的组件实例,而不是销毁它们。作为标签使用包裹这需要缓存的组件。原创 2022-09-17 22:13:36 · 1794 阅读 · 0 评论 -
vue与react的区别?
# 1、相同点 1. 都是使用了虚拟DOM; 2. 父子组件都是单向数据流; 3. 都采用了组件化开发;# 2、不同点 1. react是数据单向流,vue是双向数据流; 2. react编码用的是jsx,vue用的是template; 3. 状态集中管理,react用的mobx、redux,vue用的是vuex(vue2)、pinia(vue3); 4. 数据变化,react 手动 setState vue自动响应式处理 proxy object.DefineProperty原创 2022-09-16 13:41:55 · 163 阅读 · 0 评论 -
js中声明函数的几种方式
【代码】js中声明函数的几种方式。原创 2022-09-14 22:12:01 · 1676 阅读 · 0 评论 -
ES6如何实现模糊查询
【代码】ES6如何实现模糊查询。原创 2022-09-14 21:44:48 · 877 阅读 · 0 评论 -
css中的单位
viewport width、viewport height的缩写,视口的宽度、高度,相对单位,1vw=1%相对于根元素的单位,即html中body中的font-size。绝对单位,不会随父元素大小改变而改变,大小固定;是一个相对单位,相对于父元素;原创 2022-09-14 15:55:47 · 119 阅读 · 0 评论 -
vue2全家桶-vuex
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中,对于组件中的私有数据,依旧存储在组件自身的data中即可。通过将导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法。通过将导入的mapGetters函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性。通过将导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性。Vuex是实现组件全局状态(数据)一种管理机制,可以方便的实现组件之间。原创 2022-09-08 12:13:56 · 401 阅读 · 0 评论 -
MVC、MVVM、MVP的区别
MVC、MVVM、MVP是常见的3中软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。原创 2022-09-07 16:18:58 · 657 阅读 · 0 评论 -
cookie、session、token的区别
cookie、session、token的区别原创 2022-09-07 15:43:33 · 90 阅读 · 0 评论 -
懒加载与预加载
懒加载也可以叫做延迟加载,当访问一个页面的时候,先把img元素伙食其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样只需要请求一次,俗称占位图);只有当图片出现在浏览器的可视区域内时,才这只图片真正的路径,让图片显示出来,这就是图片懒加载。资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。原创 2022-09-06 23:46:57 · 597 阅读 · 0 评论 -
与http相关的前端面试题
http是超文本传输协议,是一个简单的请求-响应协议。原创 2022-09-05 23:14:13 · 743 阅读 · 0 评论 -
react事件与原生事件的区别
react的事件对象是合成的,不是原生的;原创 2022-09-05 22:02:51 · 609 阅读 · 0 评论 -
vue中时间戳转换为日期格式的方法封装
在需要转换的地方使用过滤器进行过滤,如果很多地方都需要转换,那么可以在main.js中写成全局过滤器。原创 2022-09-05 09:15:29 · 631 阅读 · 0 评论 -
vue2和vue3响应式的理解及如何进行依赖收集
响应式数据:数据改变了,对应的视图也会改变;原创 2022-09-04 20:40:20 · 260 阅读 · 0 评论 -
vue组件中的data为什么必须是一个函数?
通过上面的例子可以看出,多个组件引入了这个组件作为子组件,在视图层修改输入框的数据,视图层中所有输入框的数据都发生了改变;如果每个父组件有属于自己的逻辑,修改了以后,也会对其他父组件造成影响,因为他们共用了一个data。组件是可复用的实例;当每次复用这个组件的时候,返回的都是一个新的data,如果单纯的写出对象的形式,那么所有的组件实例共用一个data,造成数据污染。data作为函数每次一个新返回对象,修改视图层的输入框值,可以看出其他引入了这个组件的父组件中的输入框的值是未发生改变的。原创 2022-09-04 20:08:22 · 98 阅读 · 0 评论 -
vue中数据双向绑定v-model的原理
数据双向绑定是两个指令的结合:v-bind、v-on;原创 2022-09-04 17:11:49 · 69 阅读 · 0 评论 -
react组件的生命周期
组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数),会在特定的时刻调用。我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。原创 2022-07-29 22:34:09 · 395 阅读 · 4 评论 -
vue中组件之间的通信
不能直接对传递过来的数据进行修改,如果需要修改,子组件需要一个data去接收传递过来的数据,然后修改data。不能直接对传递过来的数据进行修改,如果需要修改,父组件需要一个data去接收传递过来的数据,然后修改data。通过prop(可以在组件上注册一些自定义的属性)向子组件传递数据;通过自定义事件向父组件传递数据;来触发事件,传递数据,原创 2022-09-04 16:38:14 · 148 阅读 · 0 评论 -
vue中父子组件之间的访问方式-$children-$refs-$parent
通过$parent获取父组件的数据,实际开发中尽量少用,因为这样会导致耦合度太高了;通过这样直接修改父组件的数据或状态,使父组件的状态(数据)飘忽不定,不利于后期的调试和修改。需要和ref一起使用;通过属性去获取子组件,无论去掉哪个子组件,只要不把所对应的ref所删除,就一直可以放到到自己需要的子组件。缺点:需要通过索引才能拿到自己想要的子组件,如果删除了某个子组件,会影响到哪去的子组件的结果,$children返回的是一个。,包含所有的子组件对象;原创 2022-09-04 15:35:30 · 538 阅读 · 0 评论 -
vue中什么是$nextTick?
nextTick:将回调函数延迟到dom更新数据后调用。改变message前:改变message后:经过上面两张结果运行图比较,可以看出,message1拿到的是message改变的数据,是因为。原创 2022-09-04 15:05:32 · 156 阅读 · 0 评论 -
vue中如何使用自定义指令
指令:以“v-”开头的都是指令,不同的指令实现不同的功能;注册自定义指令:1、全局注册;2、局部注册使用时时候需要添加v-原创 2022-09-03 23:44:14 · 232 阅读 · 0 评论 -
vue哪些数组的方法可以直接对数组修改实现视图更新
【代码】vue哪些数据的方法可以直接对数组修改实现视图更新。原创 2022-09-03 23:28:12 · 2177 阅读 · 0 评论 -
vue中计算属性computed的特性和应用
基于template里面的{{ }}计算;处理props传值;:基于他们的依赖进行缓存,只要在他相关的依赖发生改变的时候,才会重新计算;原创 2022-09-03 23:04:25 · 246 阅读 · 0 评论 -
vue2中过滤器的使用(vue3中已舍弃)
vue3中已经舍弃了过滤器,因为使用计算属性也可以达到同样的效果过滤器:主要用于一些常见的文本格式化。可以在不改变原始数据的情况下,只是对数据进行加工处理,并且会返回过滤后的数据,再进行调用处理。原创 2022-09-03 22:23:29 · 424 阅读 · 0 评论 -
vue中常用的修饰符
【代码】vue中常用的修饰符。原创 2022-09-03 22:01:40 · 182 阅读 · 2 评论 -
vue中watch如何对对象进行深度监听
所以在使用对对象的深度监听时,要注意是否对整个对象进行深度监听(这样会极大的消耗性能),还是对对象中的某个属性进行监听。:是否深度监听,默认为false;监听器会一层一层的向下遍历,给对象的每一个属性添加一个监听器。:监听的对象发生变化后需要执行的方法;原创 2022-09-03 21:00:04 · 1130 阅读 · 0 评论