前端 interview
文章平均质量分 96
前端 interview
yingjieweb
踏踏实实学点前端
展开
-
浅谈 Web 前端性能优化
一、背景和目标前端性能优化的话题大家一直都在讨论,无论是在工作还是面试都经常遇到工作方面: toC 项目确实要着重考虑这个问题,强调性能和用户体验 ➡️「得用户者得天下」 面试方面:关于前端性能优化的面试题很多,比如: Web 性能优化有哪些常见的手段? 如何解决单页面应用首屏加载慢的问题? 为什么要把 <script> 放在 <body> 之后? <script> 的 async 和 defer 有什么区别? HTTP/1.1 和 HTT原创 2021-12-31 22:40:22 · 1441 阅读 · 0 评论 -
JavaScript 执行机制
目录一、JavaScript是单线程的二、任务队列三、JavaScript的运行机制四、定时器一、JavaScript是单线程的JavaScript是单线程的(同一时间只能做一件事)。之所以是单线程与它的用途有关。作为浏览器的脚本语言,JavaScript的主要用途是与用户互动以及操作DOM,这决定了它只能是单线程的,否则会带来复杂的同步问题。比如:假设JavaScript...原创 2019-10-10 09:28:28 · 221 阅读 · 0 评论 -
JavaScript 垃圾收集机制
JavaScript 具有自动垃圾收集机制, JavaScript 程序的内存分配以及无用内存的回收完全是自动管理的。这种垃圾收集机制的原理是:找出那些不再使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码种预定的收集时间),周期性地执行这一内存回收操作。JavaScript 函数种的局部变量的正常生命周期:局部变量只在函数的执行过程中存在,而这个过程中,会为局部变...原创 2019-11-05 19:25:35 · 101 阅读 · 0 评论 -
JavaScript 对闭包的理解 ★
目录1、认识闭包函数2、使用闭包3、定义闭包存储器1、认识闭包函数简单的说,闭包函数就是定义在一个函数内部的函数,它有权访问外部函数作用域中的变量。作为闭包的必要条件,内部函数应该访问外部函数中声明的私有变量、参数或其它内部函数。当上述的两个必要条件是实现后,如果在外部函数外调用这个内部函数,它就成为了闭包函数。比如下面这个经典的闭包结构。function fun(x){...原创 2019-11-11 19:16:01 · 121 阅读 · 0 评论 -
使用 call() 、apply() 和 bind()
目录1、call() 和 apply()2、使用 bind()3、call()、apply() 和 bind() 的区别1、call() 和 apply()call() 和 apply() 是 Function 对象的原型方法,它们能够将特定函数当作一个方法绑定到指定对象上并进行调用。具体用法如下:function.call(thisobj,...args);funct...原创 2019-11-08 16:35:34 · 183 阅读 · 0 评论 -
JavaScript 中准确的判断数据类型
在 ECMAScript 规范中,共定义了 7 种数据类型,分为基本类型和 引用类型两大类。其中:基本类型:String、Number、Boolean、Symbol、Undefined、Null引用类型:Object基本类型也称为简单类型,由于其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈(stack)中,即按值访问。引用类型也称为复杂类型,由于其值的大小会改变,所以不能将其存放在栈中,否则会降低变量查询速度,因此,其值存储在堆(heap)中,而存储在变量处的值...原创 2020-08-12 14:57:53 · 273 阅读 · 0 评论 -
箭头函数与普通 function 的区别
1、书写上的区别箭头函数的语法比普通函数更加简洁,而且在一定情况下还可以简写,比如:function fun(x, y) { return x + y;}let fun = (x, y) => { return x + y };//1. 如果 () 内只有一个参数,可以省略 ()//2. 如果 {} 内只有一句 return ...,可以省略 return 和 {}2、参数上的区别普通函数的参数是 arguments,而箭头函数是 arg,比如:let ar原创 2020-08-10 12:44:39 · 609 阅读 · 0 评论 -
JS 构造函数在 new 时做了啥?
let Person = function(){ //this指向谁,在定义时是不知道的};var p=new F;用new调用一个函数发生了这些事:(1)新建一个对象instance=new Object();(2)设置原型链instance.__proto__=F.prototype;(3)让F中的this指向instance,执行F的函数体。(4)判断F的返回值类型:如果是值类型,就丢弃它,还是返回instance。如果是引用类型,就返回这个引用...原创 2020-08-10 19:19:46 · 435 阅读 · 0 评论 -
JavaScript 原型与原型链 ★
目录1、原型对象2、__proto__3、__proto__ 和 prototypeJavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain)...原创 2019-12-19 16:58:14 · 133 阅读 · 0 评论 -
JavaScript 几种继承方式
目录1、什么是面向对象(OOP)?2、JavaScript 原型链继承3、JavaScript call() 继承4:寄生组合继承:call() 继承+类似于原型继承5、基于 ES6 的继承1、什么是面向对象(OOP)?面向对象(OOP,Object Oriented Programming)是一种编程思想,它有三大特性:封装、继承、多态。JavaScript以及目前...原创 2019-12-17 20:09:47 · 240 阅读 · 0 评论 -
for...of vs for...in
forEach 循环无法中途跳出,break 命令或 return 命令都不能奏效。 for...of 适用遍历数/数组对象/字符串/map/set 等,但是不能遍历对象。它可以正确响应 break、continue 和 return 语句。 for...in 适用于遍历对象,但是缺点是它在取索引值事不方便。可用 Object.keys() 方法来迭代一个对象的属性。简单地说,for/of是遍历数组最可靠的方式,它比for循环简洁,并且没有for/in和forEach()那么多奇怪的特例。for.原创 2020-08-09 11:35:51 · 156 阅读 · 0 评论 -
JS 多种数组去重方法
无论是在实际开发还是工作面试,数组去重都是一个很常见的问题,今天就来总结一下,以备不时之需。首先声明这篇博客中出现的所有数组去重方法并不是我自己一个人想到的,在撰写这篇博客的期间,我参考了网上的很多资源和帖子,其中大部分数组去重方法是参考这篇博文:传送门,有兴趣的同学可以移步传送门,希望能帮到大家。需求1、双重循环方法双重循环方法是比较简单,而且很容易被想到的方法,具体去重步骤如下:...原创 2020-04-01 10:49:22 · 325 阅读 · 0 评论 -
JavaScript 几种元素选择器
目录1、getElementById() 方法2、getElementByTagName() 方法3、getElementsByClassName()方法4、querySelector() 和 querySelectorAll() 方法1、getElementById() 方法使用 getElementById() 方法可以准确获取文档中指定元素。以下脚本能够获取对<...原创 2019-11-23 14:44:33 · 3239 阅读 · 0 评论 -
轮播图 - z-index 淡入淡出式
目录1、轮播图是个啥?2、实现轮播图 1.03、实现轮播图 2.04、实现轮播图 3.05、实现轮播图 4.01、轮播图是个啥?随便打开一个网站,七八成的概率都能看到网站上至少有一个轮播的横幅图片,电商和视频类网站则更多。现在网上有很多已经封装好的轮播图功能模块,而且使用性能和展示效果都很好,可以直接拿过来用,这里推荐两个:Bootstrap里的Carousel、Swi...原创 2019-09-18 10:49:23 · 544 阅读 · 0 评论 -
JavaScript 快速交换两个变量的值
有两个变量,现在想要交换它们的值,简单的做法时:var a = 10,b = 20;var temp = a;a = b;b = temp;也就是说,要实现变量交换,需要定义一个临时变量做中转,但是,利用数组可以这样设计:var a = 10,b = 20;a = [b,b = a][0]; //通过数快速交换数据这种做法是通过定义一个匿名数组,把变量 b 的值传...原创 2019-11-07 11:00:47 · 644 阅读 · 0 评论 -
用 mouse 事件写一个可拖拽的 div
今天刷题的过程中看到一个有意思的题目,用 mouse 事件写一个可拖拽的 div,个人以为可以凭脑子想象一下就能写出来,但是很显然脑子说:啥?你说啥?写的过程中涉及 div 的绝对定位样式,鼠标的位置,还有一些差值计算,于是乎我就画了个图,图画出来以后,简直不要台清晰哦,两秒钟搞定!不多说了,下面上才艺:精髓在于,在鼠标点击时判断鼠标在 div 内的 offsetX 和 offsetY 并保存起来,然后在鼠标移动的过程中计算 pageX 和 pageY 与offsetX 和 offsetY 分别做.原创 2020-07-19 18:35:28 · 266 阅读 · 0 评论 -
JavaScript 简易的秒表计时器
实现一个简易的秒表计时器,要求点击开始按钮进行计时,点击停止按钮暂停即使,再次点击开始按钮会继续计时。最近面试第二次遇到这个题了,第一次是快手的一面面试题,当时面试官让我用 Vue 写,磕磕绊绊写出来了,面试完也没想仔细看看代码优化一下,结果今天招商银行的笔试又遇到这道题了,所以决定好好整理一下。<input id="counter" type="text" readonly><button onclick="start()">开始</button><原创 2020-09-06 15:51:19 · 718 阅读 · 0 评论 -
JavaScript中的 =、==、=== 运算符
JavaScript中的:=、==、====:赋值运算符,可以将 = 号右侧的值赋值给 = 号左侧的变量。比如:var a = 10;+=:a += 5 等价于 a = a + 5-=:a -= 5 等价于 a = a - 5*=:a *= 5 等价于 a = a * 5/=:a /= 5 等价于 a = a / 5%=:a %= 5 等价于 a = a % 5==:相...原创 2019-10-28 09:10:30 · 1476 阅读 · 0 评论 -
Vue 中表单元素双向绑定 v-model 原理
表单元素在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单元素。在 Vue 中使用 v-mode 指令来实现表单元素和数据的双向绑定。v-model 指令只能用于表单元素中:input、select、checkbox、textarea。1、用 v-model 实现表单元素和数据的双向绑定<body> <div id="app"> ...原创 2019-10-20 11:01:36 · 996 阅读 · 0 评论