面试题
文章平均质量分 94
如果你正在寻找一份前端工作,或者想要进一步提升自己的技能和知识,那么这个专栏一定不容错过!本专栏将为你提供最全面、最实用的前端面试题目,覆盖HTML、CSS、JavaScript等方方面面。
我们会从基础入手,逐步深入,带你了解最新的前端技术趋势和应用场景。
江城开朗的豌豆
大家好!我是一位前端开发工程师,拥有4年以上的前端开发经验。我熟练掌握HTML、CSS、JavaScript等语言,能够灵活运用各种前端框架,如Vue、React、Uniapp、Flutter等。我注重理论与实践相结合,希望通过我的博客分享,能够帮助大家成为一名优秀的前端开发工程师。
展开
-
2024年最火爆的前端技术:虚拟DOM让页面性能飞升!
虚拟 DOM ()这个概念相信大家都不陌生,从React到Vue,虚拟DOM为这两个框架都带来了跨平台的能力(和Weex实际上它只是一层对真实DOM的抽象,以JavaScript对象 (VNode节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中,虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性,不同框架对这三个属性的名命可能会有差别创建虚拟。原创 2024-01-02 10:39:59 · 5884 阅读 · 199 评论 -
快速操控鼠标行为!Vue鼠标按键修饰符让你事半功倍
在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理原创 2023-11-29 12:49:06 · 6261 阅读 · 222 评论 -
深入解析Vue中的keep-alive组件:优化组件切换与DOM渲染!
keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOMkeep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们原创 2023-11-16 11:30:43 · 3531 阅读 · 16 评论 -
解密Vue中key的神奇原理:优化列表渲染效率的关键策略!
如果不用key,Vue会采用就地复地原则:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。原创 2023-11-16 11:23:17 · 2511 阅读 · 4 评论 -
开启创造力之门:掌握Vue中Slot插槽的使用技巧与灵感
Slot艺名插槽,花名“占坑”,我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承载分发内容的出口原创 2023-11-16 06:00:00 · 2822 阅读 · 7 评论 -
提升代码复用性:探讨Mixin类在面向对象语言中的独特作用和优势
Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂原创 2023-11-15 10:08:55 · 2457 阅读 · 172 评论 -
揭秘Vue中的nextTick:异步更新队列背后的技术原理大揭秘!
们可以理解成,Vue在更新DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新原创 2023-11-15 07:00:00 · 596 阅读 · 12 评论 -
探秘Vue组件间通信:详解各种方式助你实现目标轻松搞定!
都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件,可能会往table组件中传入某些数据,这个本质就形成了组件之间的通信原创 2023-11-15 06:00:00 · 673 阅读 · 0 评论 -
Vue中组件与插件:究竟有何不同?详细解析带你get到核心差异!
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件原创 2023-11-14 10:30:23 · 464 阅读 · 23 评论 -
热议:Vue中如何让界面及时刷新,应对对象新增属性难题!
返回值:设置的值通过Vue.set向响应式对象中添加一个property,并确保这个新property 同样是响应式的,且触发视图更新关于Vue.set源码(省略了很多与本节不相关的代码)原创 2023-11-14 10:23:56 · 517 阅读 · 6 评论 -
探秘 Vue 数据绑定:为何 data 必须是函数而非对象?
组件data必须是一个函数,不知道大家有没有思考过这是为什么呢?在我们定义好一个组件的时候,vue最终都会通过Vue.extend()构成组件实例这里我们模仿组件构造函数,定义data属性,采用对象的形式原创 2023-11-13 09:35:57 · 718 阅读 · 19 评论 -
网页速度即体验速度:vueSPA(单页应用)首屏加载成就用户心动瞬间
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节原创 2023-11-13 09:30:29 · 518 阅读 · 3 评论 -
灵活运用Vue指令:探究v-if和v-for的使用技巧和注意事项
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组或者对象,而item则是被迭代的数组元素的别名在v-for的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化原创 2023-11-10 17:06:20 · 2406 阅读 · 7 评论 -
Vue生命周期全解析:从工厂岗位到任务执行,一览无遗!
生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在Vue生命周期钩子会自动绑定this上下文到实例中,因此你可以原创 2023-11-10 17:02:09 · 627 阅读 · 0 评论 -
Vue技巧大揭秘:v-show与v-if的区别及性能对比一目了然
控制手段:v-show隐藏则是为该元素添加css--display:none,dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染原创 2023-11-08 17:54:18 · 1080 阅读 · 11 评论 -
一杯子三变:揭秘vue单页应用(spa)与内容动态加载的奥秘
目前主流的静态化主要有两种:(1)一种是通过程序将动态页面抓取并保存为静态页面,这样的页面的实际存在于服务器的硬盘中(2)另外一种是通过WEB服务器的URL Rewrite的方式,它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果原创 2023-11-08 17:48:06 · 1219 阅读 · 94 评论 -
揭秘Vue框架下的MVVM架构:数据双向绑定背后的技术细节
我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定举个例子原创 2023-11-07 10:32:29 · 634 阅读 · 13 评论 -
节省服务器资源、实现双向数据传输——深度解析WebSocket协议
WebSocket,是一种网络传输协议,位于OSI模型的应用层。可在单个TCP连接上进行全双工通信,能更好的节省服务器资源和带宽并达到实时通迅原创 2023-11-07 10:20:44 · 477 阅读 · 3 评论 -
TCP四次挥手过程解密:为什么不止三次挥手或更少次挥手?
如果是两次握手,发送端可以确定自己发送的信息能对方能收到,也能确定对方发的包自己能收到,但接收端只能确定对方发的包自己能收到 无法确定自己发的包对方能收到并且两次握手的话, 客户端有可能因为网络阻塞等原因会发送多个请求报文,延时到达的请求又会与服务器建立连接,浪费掉许多服务器的资源原创 2023-11-03 14:17:50 · 628 阅读 · 15 评论 -
GET与POST的区别:为什么GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留?
GETGET方法请求一个指定资源的表示形式,使用GET的请求应该只被用于获取数据POSTPOST方法用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用本质上都是TCP链接,并无差别但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中会体现出一些区别原创 2023-11-03 14:02:58 · 679 阅读 · 5 评论 -
保护你的数据隐私:为何选择HTTPS而不是传统的HTTP?
在HTTPS通信过程中,采用的是对称加密+非对称加密,也就是混合加密在对称加密中讲到,如果能够保证了密钥的安全,那整个通信过程就可以说具有了机密性而HTTPS采用非对称加密解决秘钥交换的问题具体做法是发送密文的一方使用对方的公钥进行加密处理“对称的密钥”,然后对方用自己的私钥解密拿到“对称的密钥”原创 2023-11-02 09:36:26 · 404 阅读 · 2 评论 -
安全与HTTP协议:为何明文传输数据成为争议焦点?
传输的数据并不是计算机底层中的二进制包,而是完整的、有意义的数据,如HTML 文件, 图片文件, 查询结果等超文本,能够被上层应用识别在实际应用中,HTTP常被用于在Web浏览器和网站服务器之间传递信息,以明文方式发送内容,不提供任何方式的数据加密原创 2023-11-02 09:29:02 · 820 阅读 · 0 评论 -
Webpack构建慢如蜗牛?提升开发效率的速度优化秘籍!
随着我们的项目涉及到页面越来越多,功能和业务代码也会随着越多,相应的webpack的构建时间也会越来越久构建时间与我们日常开发效率密切相关,当我们本地开发启动devServer或者build的时候,如果时间过长,会大大降低我们的工作效率所以,优化webpack构建速度是十分重要的环节原创 2023-11-01 09:58:30 · 904 阅读 · 17 评论 -
前端性能瓶颈崩溃项目?Webpack助力解决!
随着前端的项目逐渐扩大,必然会带来的一个问题就是性能尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至奔溃一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节原创 2023-11-01 09:50:06 · 620 阅读 · 3 评论 -
模块化时代的必备工具:Webpack详解,为你的项目注入新活力
最早的时候,我们会通过文件划分的形式实现模块化,也就是将每个功能及其相关状态数据各自单独放到不同的 JS文件中约定每个文件是一个独立的模块,然后再将这些js文件引入到页面,一个script标签对应一个模块,然后调用模块化的成员原创 2023-10-31 09:00:00 · 857 阅读 · 29 评论 -
前端开发必备技能!用简单CSS代码绘制三角形,提升用户体验
通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢?原创 2023-10-31 05:30:00 · 854 阅读 · 5 评论 -
想要吸引用户的眼球?试试CSS视差滚动,给你带来超级视觉盛宴
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层原创 2023-10-30 22:37:57 · 581 阅读 · 2 评论 -
不知道怎么显示长标题?这里有小技巧,让你的内容更简洁明了!
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号原创 2023-10-30 09:27:55 · 714 阅读 · 8 评论 -
重要环节不可忽视,CSS性能优化引领用户体验!
css样式文件有两种引入方式,一种是link元素,另一种是@import@import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时而且多个@import可能会导致下载顺序紊乱比如一个css文件index.css包含了以下内容:@import url("reset.css")那么浏览器就必须先把index.css下载、解析和执行后,才下载、解析和执行第二个文件原创 2023-10-28 22:44:09 · 569 阅读 · 8 评论 -
水性杨花:揭秘CSS响应式界面设计,让内容灵活自如,犹如水之变幻
CSS3 中的增加了更多的媒体查询,就像if条件表达式一样,我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表原创 2023-10-28 22:34:06 · 468 阅读 · 1 评论 -
回流重绘零负担,网页加载快如闪电
当我们对DOM的修改引发了DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性,然后再将计算的结果绘制出来原创 2023-10-28 22:24:20 · 631 阅读 · 1 评论 -
掌握CSS动画技巧:打造引人注目的页面过渡效果!
CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多,如平移、旋转、缩放等等,复杂动画则是多个简单动画的组合原创 2023-10-27 11:46:25 · 668 阅读 · 12 评论 -
从入门到精通:深入了解CSS中的Grid网格布局技巧和应用!
Grid网格布局是一种基于网格线的布局方式,它将页面按照行和列进行划分,将内容元素放置在网格线之间。这种布局方式具有很强的规律性和重复性,能够呈现出整洁、有序、美观的页面效果。Grid网格布局常用于网页、UI设计、移动应用等多种场合,是一种非常实用的布局方式。原创 2023-10-27 11:27:47 · 731 阅读 · 1 评论 -
掌握CSS Flexbox,打造完美响应式布局,适配各种设备!
Flexbox 是一种新的 CSS 布局模式,它可以轻松地实现各种复杂的布局。与传统的布局方式(如浮动、定位等)相比,Flexbox 具有更高的灵活性和性能。原创 2023-10-27 11:03:42 · 773 阅读 · 1 评论 -
如何实现两栏布局?这篇文章告诉你所有的细节!
两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,比如Ant Design文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器原创 2023-10-26 11:34:44 · 866 阅读 · 6 评论 -
如何让元素在页面中完美居中?看这篇文章就够了!
父级设置为相对定位,子级绝对定位 ,并且四个定位属性的值都设置了0,那么这时候如果子级没有设置宽高,则会被拉开到和父级一样宽高这里子元素设置了宽高,所以宽高会按照我们的设置来显示,但是实际上子级的虚拟占位已经撑满了整个父级,这时候再给它一个margin:auto它就可以上下左右都居中了原创 2023-10-26 11:27:14 · 778 阅读 · 0 评论 -
CSS隐藏元素的N种方法,你知道哪一种最适合你?
在平常的样式排版中,我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种,它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法原创 2023-10-26 11:19:09 · 546 阅读 · 0 评论 -
成为CSS选择器大师,让你的网页瞬间提升品味!
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式原创 2023-10-26 11:05:28 · 423 阅读 · 0 评论 -
CSS基础框盒模型:打造炙手可热的网页布局!
当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)一个盒子由四个部分组成:content、padding、border、margin原创 2023-10-25 13:03:40 · 463 阅读 · 2 评论 -
网页开发者必看!5种JS跳转页面技巧,提升用户交互体验
根据具体需求选择适合的方法来实现页面跳转。在实际应用中,还需考虑用户体验和安全性。需要注意的是,在使用这些方式时,要遵守相关法律法规,确保合法合规。原创 2023-10-25 06:30:00 · 2120 阅读 · 12 评论