前端面试题
文章平均质量分 73
前端在面试中常被问到的重要知识点
万物之恋
我思故我在
展开
-
如何理解页面的重排和重绘
重排和重绘是浏览器关键渲染路径上的两个节点,浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树,然后根据渲染树通过 Layout的步骤来确定页面上所有内容的大小和位置,确定布局之后,就是将像素绘制到屏幕之上。 在这之中,重排就是当元素的位置发生改变的时候,浏览器重新执行 Layout 这个步骤,来重新确定页面上内容的大小和位置,确定完后就会重新进行绘制到屏幕上,所以重排一定会导致重绘。原创 2023-02-19 23:21:24 · 326 阅读 · 0 评论 -
怎么解决首屏加载速度过慢的问题
图片资源索然不在编码的过程中,但它却是影响页面加载性能的最大因素,而对于这类资源,我们可以进行适当的压缩。再者,对于页面上使用到的icon,可以使用在线字体图标(如:iconfont),或者使用雪碧图(也叫精灵图) ,将众多的小图标合并到同一张图上,以减轻http的请求压力。值得注意的是此时整个网页不一定要全部渲染完成,只需展示当前视窗所需要的内容,这个环节也是影响用户体验最重要的一个环节。除上述几种方法外,还有静态资源本地缓存,减少入口文件体积,开启Gzip压缩等等都可以合理有效的解决这个问题。原创 2023-02-15 21:01:25 · 2710 阅读 · 0 评论 -
几个简单的JavaScript面试题
默认对象是 window,所有函数都可以直接调用,也可以通过指定 window 来调用 history、screen、location等 window 的不同属性。与其他面向对象的编程语言中的“this”是由于类实例化的对象不同,在JavaScript中“this”是一个对象,是方法的所有者。(2)var 变量可以在其范围内更新和重新声明,let 变量可以更新但不能重新声明,const 变量即不能更新也不能重新声明;(1)用 let 和 const 声明的变量是块范围(多指作用域)的;原创 2022-09-19 20:40:24 · 2821 阅读 · 0 评论 -
GET和POST的区别
而对于 POST 方式的请求,浏览器会先发送 header,服务器对此响应100,continue,然后浏览器再发送 data,服务器响应200,返回数据。首先,我们知道 HTTP 的底层是 TCP/IP,由此可以得知 GET 和 POST 的底层实际也是 TCP/IP。也就是说 GET/POST 都是 TCP 链接,二者所能做的事情是相同的(给 GET 添加 request body,让 POST 携带 URL 参数,都是完全行得通的)。这里是万物之恋,我们下次再见了!原创 2022-09-19 00:35:35 · 381 阅读 · 0 评论 -
简单了解下深拷贝
简单了解下深拷贝什么是深浅拷贝JSON方法拷贝的缺陷很复杂但不容易出错的一种方法在了解深拷贝之前,我们需要对浅拷贝有一定的理解。什么是深浅拷贝浅拷贝:简单来说,浅拷贝就是创建一个新的对象,这个对象有着原始对象属性值的拷贝。如果不进行深拷贝,那么一个对像的值改变了就会影响到另一个对象的值。深拷贝:了解了浅拷贝的概念,我们就可以将深拷贝理解为在内存中开辟一个新的空间,存放新对象,并且修改新对象的值不会影响原对象。JSON方法拷贝的缺陷说到深拷贝,相信很多人首先就会想到 JSON 方法:let ob原创 2022-05-20 14:00:42 · 241 阅读 · 1 评论 -
SDK和API的区别
SDK和API的区别一、API的概念二、SDK的概念三、SDK和API的区别在正式了解它们的区别之前,我们得先知道 SDK 和 API 分别是什么?一、API的概念我们先来看这样一张图:(图画的很烂就请不要在意了)API 的全称为 Application Programming Interface,翻译过来的意思就是应用程序编程接口。实际上,API 是一些预先定义的函数,目的是提供应用程序与开发人员基于某个软件或硬件,得以访问一组进程的能力。不需要直接去访问源码,或去深刻理解内部工作机制的细节。原创 2022-05-13 13:54:36 · 43581 阅读 · 5 评论 -
常见的几个JavaScript兼容问题及解决方案
常见的几个JavaScript兼容问题及解决方案事件对象的兼容e = ev || window.event;滚动事件的兼容scrollTop = document.documentElement.scrollTop || document.body.scrollTop;阻止冒泡事件的兼容if(e.stopPropagation){ e.stopPropagation();}else{ e.cancelBubble = true;}阻止浏览器默认行为的兼容原创 2022-05-02 12:24:15 · 1147 阅读 · 0 评论 -
JavaScript中检测数据类型的几种方式
javaScript中检测数据类型的几种方式1.typeoftypeof 的缺陷2.instanceof3.Array.isArray()4.Object.prototype.toString.call()1.typeof主要用于判断基本数据类型,使用方式:typeof(表达式) / typeof 变量名。第一种是对表达式做运算,第二种是对变量做运算值对应类型undefined未定义的变量或值boolean布尔类型的变量或值string字符串类型的变量或值原创 2022-05-04 17:26:51 · 778 阅读 · 0 评论 -
一些有关HTTP和HTTPS的问题(容易忽略的前端面试题)
一些有关HTTP和HTTPS的问题(容易忽略的前端面试题)http和https有什么联系?它们的默认端口号都是多少?为什么HTTPS更加安全?什么是HTTP/2?完整的HTTP事务流程是怎样的?什么是HTTP无协议状态?如何克服HTTP无状态的缺陷?HTTP1.1的新特性有哪些?什么是反向代理?http和https有什么联系?它们的默认端口号都是多少?http通常承载于tcp之上,在http和tcp之间,添加一个安全协议层(SSL或者TSL)就成为了我们常说的https;http默认的端口号为80,原创 2022-01-26 22:20:47 · 1786 阅读 · 0 评论 -
一些简单的HTML+CSS面试题
HTML+CSS 面试题网络中使用最多的图片格式有哪些请简述css盒子模型视频/音频标签的使用HTML5新增的内容有哪些HTML5 新增的语义化标签有哪些如何理解HTML语义化标签CSS3 新增的特性清除浮动的方式有哪些?请说出各自的优点各种定位属性的区别水平垂直居中的方式标准盒子模型和怪异盒子模型如何让chrome浏览器显示小于12px的文字?CSS选择器有哪些,优先级如何计算?哪些CSS属性可以继承网络中使用最多的图片格式有哪些JPEG,GIF,PNG。最流行的是jpeg格式,可以把文件压缩到最小,原创 2022-01-19 21:54:24 · 322 阅读 · 0 评论 -
VUE基础面试题(三)vue最后补充+部分JavaScript面试题
VUE基础面试题(三)vue最后补充+部分JavaScript面试题VUE部分Vue的优点什么是单页应用?说说对SPA单页面的理解,它的优缺点分别是什么?vue的单页面应用(SPA)的优缺点SPA首屏加载速度慢的怎么解决?Vue权限管理JavaScript部分JQuery一个对象可以同时绑定多个事件,这是如何实现的?什么是webkit, 怎么用浏览器的各种工具来调试代码前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?Promise 和async原创 2022-01-19 21:41:44 · 226 阅读 · 0 评论 -
如何取消axios的重复请求
如何取消axios的重复请求什么是axios取消axios请求判断重复请求如何取消重复请求 在 web项目开发的过程中,经常会遇到客服端重复发送请求的场景,如果开发者不对重复的请求进行相应的处理,可能会导致项目崩溃,服务器瘫痪等各种各样的问题出现。通过 axios为例,了解解决重复请求的问题答案。什么是axios axios是一个基于 Promise的 HTTP客户端,同时支持浏览器和 node.js环境。是一个十分优秀的 HTTP客户端,被广泛运用在大量的 web项目中。取消axios请求原创 2022-01-17 11:28:00 · 3770 阅读 · 5 评论 -
VUE基础面试题(二)
VUE基础面试题(二)怎样理解 Vue 的单向数据流?Vue初始化过程中(new Vue(options))都做了什么?对MVVM的理解?Vue数据双向绑定原理Vue的响应式数据原理Vue3.x响应式数据原理Proxy只会代理对象的第一层,Vue3是怎样处理这个问题的呢Vue3.0 里为什么要用 Proxy API替代 defineProperty API?Proxy 与 Object.defineProperty 优劣对比vue中组件的data为什么是一个函数?而new Vue 实例里,data 可以直接原创 2022-01-16 17:11:20 · 521 阅读 · 0 评论 -
VUE基础面试题(一)
VUE基础面试题(一)v-if 和 v-show 区别vue常用的修饰符js中的冒泡是什么?vue中如何阻止冒泡事件vue中常用的一些指令vue的自定义指令vue的指令周期vue循环中 key值的作用v-for循环遍历时为什么要加上 “:key”?为什么避免 v-if 和 v-for 一起使用?Vue的生命周期Vue组件间参数的传递Vue的父组件和子组件生命周期钩子函数执行顺序methods、computed、watch的区别可以在哪个生命周期内调用异步请求?在vue生命周期的什么阶段才能访问操作DOMvu原创 2022-01-15 14:08:52 · 1085 阅读 · 0 评论 -
VUE2数据绑定原理
VUE2数据绑定原理 简单来说,vue数据绑定的底层是使用了 ES5中的 Object.defineProperty方法,通过“发布-订阅者”模式来实现的。但要真正理解其原理,首先要了解 vue的响应式原理。vue响应式原理vue的响应式数据原理需要经历以下几个步骤:vue会遍历此 data对象中所有的属性;使用 Object.defineProperty方法将这些属性全部转为 getter/setter,实现读取和写入;每个组件实例中存在 watcher对象,来监听属性变化;它会在组件渲原创 2022-01-15 13:59:18 · 748 阅读 · 0 评论 -
vue项目中如何解决跨域问题
vue项目中如何解决跨域问题跨域的含义 跨域的本质就是浏览器基于同源策略的一种安全手段。所谓同源就是必须有以下三个相同点:协议相同、主机相同、端口相同。如果其中有一项不同,即出现非同源请求,就会产生跨域。 跨域实际上是浏览器的限制,开发中使用 postman请求接口能够获得数据就印证了跨域是浏览器的限制这个问题。解决方法 一般前端中解决跨域问题的方法有 JSONP,CROS,Proxy等,这里我们主要讲解一下在 vue中常用的 CROS和 Proxy方法。CROS CROS是 Cros原创 2022-01-14 22:12:53 · 15592 阅读 · 0 评论 -
SEO是什么?前端如何进行SEO优化
SEO是什么?前端如何进行SEO优化SEO是什么?seo又称网站优化,也称搜索引擎优化,英文名(Search Engine Optimization),简称:seo。seo是一种基础搜索引擎的网络营销推广方式,通过搜索引擎平台的规则来优化,以实现产品的自然排名,以获得流量曝光及品牌收益。也可以理解为将自己或自己公司的网站排名前置,方便网民搜索。常见的国内搜索引擎有百度、搜狗、360、神马、头条搜索、必应等。国外的有谷歌、英文名:google,目前国内用户无法访问。SEO用户行为解析网民原创 2021-11-13 22:54:21 · 10444 阅读 · 5 评论 -
彻底理解Vue生命周期
初步介绍:简单来说,vue 的生命周期有:beforeCreate 创建前create 创建后boforeMount 挂载前mounted 挂载后beforeUpdate 数据更新前updated数据更新后beforeDestroy 销毁前destroyed 销毁后然后可以看看官网的生命周期分析图:但实际上, 对生命周期,可以有更深刻的理解。生命值周期的概念: Vue 实例从创建到销毁的过程就是生命周期。即指从创建、初始化数据、编译模板、挂载Dom到渲染Dom、更新数据到渲原创 2021-11-10 20:55:58 · 884 阅读 · 0 评论 -
如何实现Ajax?它的原理是什么?
如何实现Ajax?它的原理是什么?Ajax的概念: Ajax全称 Async JavaScript and XML,也就是异步的 JavaScript 和 XML,是一种创建交互式网页应用的网页开发技术。可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页。Ajax的原理: 简单来说,就是通过 XmlHttpRequest 对象向服务器发送异步请求,从服务器获得数据,然后使用 Javascript 来操作 DOM 从而更新页面。流程图如下所示:实现过程:实现 Ajax原创 2021-11-09 20:34:49 · 1975 阅读 · 1 评论 -
史上最全概括,十种方法实现水平垂直居中~来自万物之恋
十种实现水平垂直居中的方法,有用的话就点赞收藏吧!十种方法实现水平垂直居中1. 绝对定位配合外边距2. 绝对定位配合外边距二3. 绝对定位配合偏移4. 弹性布局5. 网格布局6. 使用类似表格的布局特性7. 外边距左右自适应配合弹性盒子8. 使用display:box 并设置相应属性9. 使用内边距撑开容器10. 文字居中与同等行高首先设置好需要用到的标签:<style> *{ margin: 0; padding: 0;原创 2021-10-28 17:23:42 · 2066 阅读 · 0 评论 -
JavaScript中的.forEach()如何跳出循环
Hello!大家好,这里还是万物之恋。今天给大家带来的依旧是一道前端方面的面试题。题目是:在js中使用.forEach()方法进行遍历时,如何在需要的时机跳出循环?说到跳出,无非就是三种,break,continue和return false。let array = [0, 1, 2, 3, 4, 5]; for (let i = 0; i < array.length; i++) { if (i === 2) { break; } console.log(array[i])原创 2021-10-28 15:40:09 · 1888 阅读 · 0 评论 -
js.forEach和.map的区别
今天介绍的内容是,了解JavaScript中两种常用的循环数组的方法,array.forEach() 和 array.map() 的区别。共同点介绍区别之前,自然要先讲讲它们的共同点:都用于循环数组,可以获得数组中的每一项;每次用于循环的匿名函数都有三个参数:表示数组中的当前项 item;当前项的索引 index;代表原始数组 input。简单来段代码演示下:先定义一个数组let array = [1, 2, 3];// 首先是forEach()方法array.fo原创 2021-10-23 20:18:52 · 204 阅读 · 0 评论 -
ES6箭头函数的this指向问题
ES6箭头函数的this指向问题今天依旧给大家带来的是一道前端的面试题,有关的是ES6中箭头函数的this指向问题,以及它能否被call,apply或者bind方法来改变。箭头函数的this特性正式解决问题前,我们需要先来了解下箭头函数的this特性:箭头函数没有自己的this对象。这里说的没有指的是箭头函数本身无法有效的使用this,它指向的永远是自己的父作用域;箭头函数的this永远指向其父作用域。在没有规划父级作用域的情况下,执行代码中最高级别的,也就是window;任何方法都改变不了t原创 2021-10-22 21:23:02 · 1344 阅读 · 0 评论 -
CSS面试题:什么是BFC?
CSS面试题:什么是BFC?css中的BFC是什么?常见的定位方案BFC的概念形成BFC的条件BFC的特性BFC的作用归纳总结演示代码完整演示css中的BFC是什么?本质:BFC就是符合一些特性的HTML标签。在了解BFC的具体概念前,我们还需要简单了解下常见的定位方案常见的定位方案定位方案:普通流元素按照其在HTML中的先后位置至上而下自动排列布局;行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为一个完整的新行;所有元素默认都是普通流。浮动元素首先按照普通原创 2021-10-20 20:44:57 · 187 阅读 · 0 评论