“2030年必备!10个令你叹为观止的Web前端面试常问之简单原理、概念“

宏任务、微任务

javaScript是单线程语言(如果多线程dom会疯掉)
所以在同一时间只能执行一个任务,称为主线程,用来执行同步任务
同时还有两个任务列表用于存放异步任务,宏任务、微任务
执行顺序为:主线程=>微任务=>宏任务

宿主环境提供的叫宏任务,不是立即执行
由语言标准提供的叫微任务,立即执行

宿主环境:简单来说就是能使javascript完美运行的环境,只要能完美运行javascript的载体就是javascript的宿主环境。目前我们常见的两种宿主环境有浏览器和node
语言标准:我们都知道JavaScript是一种编程语言,但其实JavaScript由ECMA制定标准,称之为ECMAScript,所以由语言标准提供的就是微任务,比如ES6提供的promise。

宏任务:script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering.
微任务:Promise, process.nextTick, Object.observer, MutationObserver

引用、复制(深/浅拷贝)的区别

直接赋值对象(array、json),是引用,如果想复制,必须循环赋值每一项。或者使用JSON.Stringify()、JSON.parse()等等进行转换
直接赋值数字、字符串,是复制

基本数据类型:string、number、boolean、undefined、null
引用数据类型:object、array、function

js的防抖、节流

防抖(Debounce)
防抖的基本思想是设置一个等待时间,在这个等待时间内,事件可以被连续触发,但函数只会在最后一次触发后的等待时间结束时执行一次。如果在等待时间内再次触发事件,那么会重新计算等待时间。
使用场景:搜索框实时搜索、窗口大小变化后的计算等。

节流(Throttle)
节流的基本思想是保证在一定时间内只触发一次函数。与防抖不同的是,节流不管事件触发多频繁,都会保证在一段时间内至少执行一次函数。
使用场景:滚动事件中的加载更多、拖拽场景等。

触发机制:
防抖是在事件停止触发 N 秒后执行一次,如果你在一个事件执行的 N 秒内又触发了这个事件,则会重新计算执行时间。
节流是在固定的时间间隔内只执行一次函数,不论事件触发多频繁,都会保证在一段时间内至少执行一次函数。

使用场景:
防抖通常用于输入框的实时搜索、窗口大小变化后的计算等场景,需要等待用户停止输入或窗口大小变化停止后再执行相应的操作。
节流通常用于滚动事件中的加载更多、拖拽场景等,需要保证在一定时间内至少执行一次函数来响应用户的操作。

实现方式:
防抖的实现方式通常是在事件触发时设置一个延迟执行的函数,并清除之前的延迟执行函数。
节流的实现方式通常是在事件触发时判断距离上次执行函数的时间是否达到了指定的时间间隔,如果达到了则执行函数,否则不执行。

js哪些操作会造成内存泄露?

内存溢出是指应用系统中存在无法回收的内存或使用的内存过多,最终使得程序运行要用到的内存大于虚拟机能提供的最大内存。

闭包
意外的全局变量引起的内存泄露
被遗忘的定时器或者回调:没有使用clearInterval()、clearTimeout()清理

事件
引用

脱离 DOM 的引用
回调函数

vue内存泄漏
    vue是单页应用 (SPA),页面路由切换后,内存未释放。vue-router跳转到别的组件导致的内容泄漏
    keep-alive将组件保存到了内存中,不会释放
    通过原型连,将插件绑定在vue实例上,通过this全局引用
    在钩子函数(如:mounted/created)中,绑定了DOM/BOM 对象中的事件、变量的初始化,内存不会释放。需要在beforeDestroy 中做对应销毁处理
    如果在mounted/created 钩子中使用了$on,需要在beforeDestroy 中做对应解绑($off)处理

    通过插件新建的对象,使用完之后一定要删除,释放内存
        使用第三方库、插件引起的
        使用其他的框架(如:jquery)创建元素、绑定事件,v-if的值变成false时,无法删除这些元素、事件
        使用其他的框架(如:jquery)创建元素、绑定事件,v-if的值变成false时,无法删除这些元素、事件
            1、v-if绑定到false的值,但是实际上dom元素在隐藏的时候没有被真实的释放掉
            2、就是非常常见的比如我们通过v-if删除了父级元素,但是并没有移除父级元素里的dom片段。

闭包

闭包是指有权访问另一个函数作用域中变量的函数
闭包:函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回。
JS中的垃圾回收机制:函数调用完后,函数中的参数和变量,会被垃圾回收机制收回,不再存在

闭包需要注意的地方:在IE下可能引发内存泄漏,页面跳转时,变量不会释放,一直存在,造成累加,只有关闭浏览器时,才会释放
    IE下发生内存泄漏的条件:在一个闭包中,内部函数与外部函数互相引用,
如果过多使用闭包,容易导致内存泄露。

闭包的好处:
    希望一个变量长期驻扎在内存当中
    避免全局变量的污染
    私有成员的存在。

用法:
    模块化代码:减少全局变量的污染
    在循环中直接找到对应元素的索引

函数定义的同时,马上执行
    (  function(){ ... }  )();

案例:闭包  
function aaa(){
    var a = 1;   //a是局部变量,一直存在于内存中
    return function(){
        a  ;
        alert(a);
    }
}
var b = aaa();
b();  //2
b();  //3
//alert(a);   //a是全局变量,未被定义,避免了全局变量的污染

将函数改写成闭包形式的模块代码
function aaa(){
        var a = 1;
        return function(){
            a;
            alert(a);
        }
}
var b = aaa();
b();  //2
b();  //3
//alert(a);

改写后的模块代码
var aaa = (function(){
        var a = 1;
        return function(){
            a;
            alert(a);
    }
})();
aaa();  //2
aaa();  //3

cookie

Cookie:数据存储到计算机中,通过浏览器控制添加与删除数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来向访问者电脑上存储数据
cookie的格式:document.cookie = key   ‘=‘   value   ‘;path=/;expires=‘   oDate.toGMTString();

cookie的共享原则:
    兄弟关系的文件夹之间,cookie无法共享
    子文件夹可以共享父文件夹的cookie
    父文件夹不能共享子文件夹的cookie

cookie的特点
    cookie保存的是字符串
    cookie的数据可以设置名字的

    cookie默认是临时存储的,当浏览器关闭进程的时候自动销毁;如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
    cookie的存储是以域名形式(文件夹)(并非网址)进行区分的,作用域为对应的文件夹
          同1个网站域名设置:path=/

    不同的浏览器存放的cookie位置不一样,也是不能通用的
    一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样
    每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样;
        如:域名100个cookie,每组值大小4KB

cookie过期时间设置方式:
    cookie.setMaxAge(0);//不记录cookie
    cookie.setMaxAge(-1);//会话级cookie,关闭浏览器失效
    cookie.setMaxAge(60*60);//过期时间为1小时

    toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串,并返回结果。

/*key、value、t分别对应名称、值、将可以保存t天(负数时为过期删除)*/
function setCookie(key, value, t) {

var oDate = new Date();

oDate.setDate( oDate.getDate()   t );

document.cookie = key   ‘=‘   value   ‘;path=/;expires=‘   oDate.toGMTString();
}

事件委托是什么?

利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行
将所有的操作交给父元素,将事件添加给父元素,父元素接收到这个事件的发生,找到具体触发事件的子元素,让子元素处理事件

dom、bom渲染浏览器的原理

DOM:document对象,通过它可以对html中的元素进行操作、访问
body 提供对body元素的直接访问。对于定义了框架集的文档,该属性引用最外层的frameset
cookie
设置或返回与当前文档有关的所有 cookie。
domain
返回当前文档的域名。
lastModified
返回文档被最后修改的日期和时间。
referrer
返回载入当前文档的文档的 URL。
title
返回当前文档的标题。
URL
返回当前文档的 URL。

close()
关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById()
返回对拥有指定 id 的第一个对象的引用。
getElementsByName()
返回带有指定名称的对象集合。
getElementsByTagName()
返回带有指定标签名的对象集合。
open()
打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()
向文档写 HTML 表达式 或 JavaScript 代码。
writeln()
等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

BOM:浏览器对象模型,通过它可以访问、操作浏览器
window
location
History
Screen
Navigator

常见数据结构与算法整理总结

线性表
    数组实现
    链表
栈与队列
树与二叉树
    树
    二叉树基本概念
    二叉查找树
    平衡二叉树
    红黑树

免费的API接口开放平台

  • 12
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值