![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端面试
谢家的晓敏
这个作者很懒,什么都没留下…
展开
-
vue基础总结
mvc和mvvc的区别mvc:后端概念,model和view和controller;mvvm:前端的概念,model(data部分)和vm(双向数据绑定控制)和view(html代码部分)插值表达式v-if的值为false的时候,会在html树结构中消失v-show的值为false的时候,display:nonev-on绑定事件,缩写@v-for必须指定keyv-text会完全覆盖标签内容v-model双向数据绑定v-html把字符串当表达式解析事件修饰符.stop.capture原创 2021-04-12 17:16:07 · 111 阅读 · 0 评论 -
模块化
模块化指将一个大文件差分成几个小文件,并且将小文件组合起来模块化的好处防止命名冲突代码复用高维护性es6模块化语法export:规定模块的对外接口(分别暴露,统一暴露,默认暴露)<script type="module">//通用导入方式import * as m1 from 'm1.js'//解构赋值import {school,findJob] from 'm1.js'import {default as m3} from 'm1.js'</scrip原创 2021-04-12 16:07:25 · 56 阅读 · 0 评论 -
for in和for of的区别
for in以任意顺序迭代对象的可枚举属性返回值是下标或者键名可遍历数组也可遍历对象for of遍历可迭代对象定义要迭代的数据返回的是对应的元素数据不可遍历对象,但可以使用object.keys()获取对象的key值集合后,遍历对象...原创 2021-04-09 20:36:03 · 66 阅读 · 1 评论 -
从输入url到页面渲染的全过程+DNS解析
全过程输入url后,浏览器先查看浏览器缓存、本地缓存、路由缓存,若没有则进行下一步进行域名解析(DNS),获取对应的ip地址浏览器宇服务器进行tcp三次握手浏览器发送HTTP请求,请求数据包服务器获取请求,将数据返回给浏览器浏览器收到响应后读取解析HTML源码,生成DOM数,解析css,解析js浏览器于服务器进行ajax查询DNS解析浏览器检查自身缓存、检查操作系统缓存浏览器向本地服务器发起请求本地服务器向根域名服务器发起请求,返回给本地服务器一个国际顶尖域名服务器的地址本地服原创 2021-04-09 20:12:09 · 242 阅读 · 0 评论 -
立即执行函数
立即执行函数的两种方式(function(a){ console.log(a)})(1234)//输出1234(function(a){ console.log(a)}(1234))//输出1234立即执行函数,形成一个独立的作用域,防止污染全局环境。原创 2021-04-08 14:24:02 · 47 阅读 · 0 评论 -
symbol
symbol是ES6新出的一个数据类型,是唯一的数据结构,只要声明了symbol,那么就是唯一的let s1=symbol('s1')//括号里的s1是用来描述这个symbol的,即使再来一个symbol(‘s1’)也与之前那个不相等,这就是唯一性symbol可以用来防止因为变量重名导致的无法存储问题。不能与其他数据类型进行运算symbol无法被常规遍历,但可以使用Object.getOwnPropertySymbols(),Reflect.ownKeys()遍历。symbol的属性symb原创 2021-04-08 13:44:00 · 67 阅读 · 0 评论 -
虚拟DOM
vue中创建虚拟DOM需要引入Snabdom库什么是虚拟DOM在vue中使用的是MVVM数据双向绑定模式,这样由于数据的变更视图实时更新,会导致大量的操作DOM节点,为了优化操作,使用对象的形式模拟真实的DOM节点,以减少对真实DOM的操作。对象中包含三个属性:tag、props、children虚拟DOM的优点虚拟DOM会比较两个DOM树中的不同,只渲染发生改变的节点diff算法在vue中只会比较同一层次的节点,不会跨层比较,这样就减少了深度遍历dom树所花费的时间创建vnodevnode原创 2021-04-08 13:11:30 · 46 阅读 · 0 评论 -
Proxy代理
是一个对目标对象操作的拦截器,拦截对目标对象的操作并自定义一些行为let p=new Proxy(target,handler)//target指目标对象,handler指(包含操作时定义代理的行为的属性)一个对象vue使用proxy替换Object.defineProperty方法给属性添加set,get的办法,直接监控data对象...原创 2021-03-26 20:46:15 · 1114 阅读 · 0 评论 -
vue双向数据绑定原理
通过Object.defineProperty()来劫持各个属性setter、getter,在数据变动时发布消息给订阅者、触发相应的回调函数监听器:Observer,用来劫持并监听属性,并告诉订阅者订阅者:Watcher,每个上面都绑定一个更新函数解析器:Compile,扫描解析每个节点的相关指令找v-modle,v-on...原创 2021-03-26 19:13:03 · 51 阅读 · 0 评论 -
px em rem
px浏览器默认字体大小为16pxem根据父元素算比例rem根据根元素算比例%相对于父元素的尺寸原创 2021-03-26 19:03:50 · 79 阅读 · 0 评论 -
BFC
概念块级格式化上下文,是一块独立的布局区域不受外边的布局影响。方式overflow:hidden设置floatposition:relative和staticdisplay:inline-block、flex作用避免边距重叠清除浮动(父元素塌陷问题)自适应布局...原创 2021-03-26 18:29:24 · 39 阅读 · 0 评论 -
强缓存和协商缓存
强缓存直接从本地副本比对读取,不去请求服务器,返回状态码200expires设置资源的过期时间协商缓存先去服务器读取,若没有改变直接读取本地缓存,返回状态码304原创 2021-03-26 10:30:57 · 49 阅读 · 0 评论 -
手写前端基础代码
//快排function Quick_sort(A,l,r){ if(l<r){ var index=f1(A,l,r) Quick_sort(A,l,index-1) Quick_sort(A,index+1,r) } return A}function f1(A,l,r){ var i=l var j=r var x=A[(l+r)/2] while(i<j){ wh原创 2021-03-25 21:17:05 · 66 阅读 · 0 评论 -
XSS和CSRF
XSS跨站脚本攻击通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML和Javascript以达到设陷阱的目的利用虚假输入表单骗取用户个人信息利用脚本窃取cookie显示伪造的文本或图片CSPF跨站点请求伪造利用设置好的陷阱强制对已完成认证的用户进行非预期的个人信息或状态行为的变更。利用用户权限发表言论利用用户权限购买商品利用用户权限更新设定信息...原创 2021-03-25 16:41:42 · 60 阅读 · 0 评论 -
TCP和UDP的区别以及应用
区别TCP基于连接,比较可靠;UDP基于无连接,不可靠TCP面向字节流,UDP面向数据报TCP保证数据正确性,UDP可能丢包TCP报文头有序号保证数据顺序,UDP不保证TCP拥有流量控制及拥塞控制的机制使用场景TCP:当网络通信质量要求较高时,HTTP、HTTPS、FTP等UDP:要求网络通信速度快时,语音、视频等...原创 2021-03-25 14:16:47 · 90 阅读 · 0 评论 -
js中for和forEach的区别(数组扁平化)
上代码function deepFlatten(arr){ // const res=[] // arr.forEach(element => { // if(Array.isArray(element)){ // res=res.concat(deepFlatten(element)) // }else{ // res.push(element) // } // });原创 2021-03-22 20:17:37 · 301 阅读 · 0 评论 -
常用的四种设计模式
单例模式一个构造函数一生只能有一个实例function Person(){ this.name='Jack'}//核心代码let instance=nullfunction(){ if(!instance) instance=new Person() return instance}const p1=singleTon()const p2=singleTon()//改造单例模式const Person(function(){ function(name,age,gender原创 2021-03-20 21:23:54 · 176 阅读 · 0 评论 -
Vue开发项目中踩过的坑
表单重置:只会重置为刚开始第一次定义的值,若初始化的时候不为空,则重置后也不为空。阿里巴巴图标库可以开源导出漂亮的图标文件,并且生成相应的类,可以之间导入项目使用。原创 2021-03-18 17:35:08 · 195 阅读 · 0 评论 -
css选择器以及优先级
基础选择器class类选择器 :.class{}id选择器:#id{}通配符选择器:*{}元素选择器:h1{}并集选择器:h1,p{}层次选择器子级选择器:p>img{}后代选择器:div span{}兄弟选择器:h1+h2{}伪类选择器first-child{}last-child{}nth-child(){}伪元素选择器beforeafterfirst-letterfirst-line选择器优先级!important优先级最高行内样式优先级原创 2021-03-13 14:28:58 · 60 阅读 · 0 评论 -
浏览器的存储方式
cookie缺点:请求头上带有数据,导致流量增加当expires设置的日期过了,cookie会自动删除,同源可共享cookie数据限制不能超过4klocalStoorage永久存储,永不删除在所有同源窗口中共享数据限制5MsessionStorage在当前页面有效,当前页面关闭后被清空不在不同浏览器页面中共享数据限制5M...原创 2021-03-13 11:41:51 · 55 阅读 · 0 评论 -
事件轮询
js是一种单线程语言,事件轮询就是用来解决一些单线程带来的问题;首先我们来了解一下宏任务和微任务宏任务:script,setTimeOut,setTimeInterval微任务:promise.then,promise.nextTick,Object.observerpromise是同步任务首先,script中全部的代码作为一个宏任务进入栈中;先执行同步任务然后,将所有的宏任务放入宏任务队列,微任务放入微任务队列先清空微任务队列,再取一个宏任务执行,再清空微任务队列依次循环,直到所有的任务原创 2021-03-12 19:24:23 · 150 阅读 · 0 评论 -
浏览器跨域请求
跨域:当两个页面的协议、主机、端口名有一项不一致时,就会因同源策略产生跨域问题同源策略:阻止一个域的Javascript脚本和另一个域的内容进行交互同源:两个页面拥有同一个协议、主机、端口名如何解决跨域问题jsonp当script标签的type属性设置为“text/javascript”(默认)时,可以执行js代码(把里面的代码当作js执行);src属性是引入外部资源的属性,不受同源策略的影响;jsonp原理:利用src属性向一个非同源的服务器请求数据,只要这个服务器能返回一段字符串,就把这段原创 2021-03-12 19:02:41 · 71 阅读 · 0 评论 -
垂直居中
<style> .father{ height:300px; width:500px; position:relative; background-color: pink; } .son{ width:100px; height:100px; position:absolute;原创 2021-03-11 10:10:44 · 50 阅读 · 0 评论 -
js算法
快排function quickSort(arr){ if(arr.length<2) {return arr} var left=[],right=[],mid=arr.splice(Math.floor(arr.length/2),1) ; for(var i=0;i<arr.length;i++){ if(arr[i]<mid){ left.push(arr[i]); }else{原创 2021-03-04 13:17:24 · 47 阅读 · 1 评论 -
generator
generator是函数生成器在定义时,在function和函数名之间加一个 “ * ”内部使用yield关键字,这个关键字类似return,返回一个结果并让函数暂停。当在粗回到这个函数时,继续执行下面的代码到下一个yield;用next()依次调用function *A(){ console.log('我是小卓'); yield '我去钓鱼'; console.log('我是小敏'); yield '我去煮鱼'; console.log('小卓和小敏');原创 2021-01-31 14:47:44 · 132 阅读 · 0 评论 -
async_await用法
async作为修饰关键字修饰在函数前,表示该函数是一个异步函数await的使用必须有async关键字await等待的必须是一个promise对象async返回的是一个promise对象asyn function A(){ return '星星';}A().then(result=>{console.log(result);})没有await的执行function A(){ return new Promise((resolve,reject)=>{ .原创 2021-01-31 14:15:00 · 358 阅读 · 4 评论 -
promise
promisepromise的几种状态:pending:初始状态fulfilled:操作成功rejected:操作失败当成功时,会调用resolve并且执行then里的内容;当失败时调用reject并且执行catch里的内容。function A(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var nu原创 2021-01-29 21:57:11 · 62 阅读 · 2 评论 -
get和post区别
get请求可以缓存,post请求不可以缓存get传参放在url中,post传参放在请求体中get比Post更不安全,直接暴露在url上,不能用来传递敏感信息get请求传递的参数又长度限制,post没有get请求会被浏览器主动cache,post不会,除非主动设置get只进行url编码,post支持多种方式编码get请求会被完整保留在浏览器记录里,post不会get一次性发送请求头和数据,返回200;Post发送两个请求包,发送一个请求头,收到响应100,发送一个数据,收到响应200;get.原创 2021-01-29 16:13:30 · 130 阅读 · 4 评论 -
事件冒泡和事件捕捉
事件冒泡text->div->body->document->window事件开始时,由最具体的元素接收,然后逐级向上传播到最不具体的节点。事件捕获window->document->body->div->text时间开始时,由最不具体的元素接收,然后逐级向下传播到最具体的节点在事件流中,包括事件捕获、目标阶段、事件冒泡三个阶段捕获阶段,事件从document到html到body后就停止了。下一阶段是处于目标阶段,于是事件在div上发生,并在事件原创 2021-01-29 14:41:44 · 116 阅读 · 1 评论 -
函数柯里化
柯里化函数的目的:把多个参数拆开成多个函数,一个函数只有一个参数,使用闭包返回一个函数。创建一个柯里化函数的通用方式function curry(fn){ var args=Array.prototype.slice.call(arguments,1);//获取外部函数从第二个开始的参数 return function(){ var innerArgs=Array.prototype.slice.call(arguments);//获取内部函数全部参数 var finalArgs=args.原创 2021-01-29 12:17:17 · 75 阅读 · 1 评论 -
浅拷贝和深拷贝
浅拷贝把对象里面的每一个成员,复制一模一样的内容给另一个对象,但是操作对象里的一层可以,再深层次会出问题深拷贝对象成员里不管有多少层,都是相对独立的,用for in遍历,遇到复杂数据类型再进入到这个数据类型进行遍历利用递归思想function deep(o2,o1){ for(var key in o1){ if(o1[key].constructor===array) { o2[key]=[] deep(o2[key],o1[key]) } else if(o1[key].co原创 2021-01-28 22:12:11 · 50 阅读 · 0 评论 -
变量提升
对变量提升将变量的声明提升至作用域的最上面,但是赋值不提升,也就是只提升声明不赋值。只执行提升后的语句为undefine;对函数提升对于函数声明式进行提升function A(){}对于函数字面量式不进行提升var A=function(){}函数提升优先级高于变量提升...原创 2021-01-28 18:58:56 · 63 阅读 · 0 评论 -
执行栈和执行上下文
执行上下文执行上下文的生命周期创建:生成变量对象、创建作用域链、确定this指向执行:变量赋值、函数引用、执行其他代码出栈:出站后等待被回收分类全局执行上下文:首先进入全局环境函数执行上下文:当函数执行时,进入函数环境执行上下文栈栈:先进后出先将全局执行上下文压入栈,之后每次进入一个函数就会创建一个执行上下文并压入栈中。当函数执行完毕时,对应的上下文出栈等待回收。(当浏览器关闭时,才会将全局上下文弹出)...原创 2021-01-28 18:32:10 · 121 阅读 · 1 评论 -
防抖和节流
防抖n秒内函数只执行一次,如果在n秒内再次触发则从新计时。function debounce(fn,delay){ let timer=null return ()=>{ if(timer){ clearTimeout(timer) } timer=setTimeout(fn,delay) }}节流高频函数触发时,在n秒内只执行一次。大量触发时,函数只执行一次,并且在delay时间内无效,过了delay后重新生效。function throttle(fn,dela原创 2021-01-28 17:58:37 · 61 阅读 · 0 评论 -
闭包
闭包是指有权访问另一个函数作用域中的变量的函数。function A(){ var x=10 function B(){ return x; }}1.闭包中携带它的函数的作用域,因此会比其他函数占用过多的空间。当A返回后,其执行环境的作用域链会被销毁,但他的活动对象仍然留在内存中,直到匿名函数被销毁,他的活动对象(变量的值)才会被销毁。闭包会发生内存泄漏。2.闭包里面的环境都是独立互不干扰的。3.能够让外部函数访问内部变量。...原创 2021-01-28 17:27:34 · 46 阅读 · 0 评论 -
内存泄漏和垃圾回收机制
内存泄漏不用的内存没有及时的释放,就叫内存泄漏垃圾回收机制垃圾回收机制会定期地找出不在使用的内存,将其释放掉常用的垃圾回收机制有:标记清除、引用计数1.清除标记当变量进入环境时,被标记为“进入环境”,进入环境的变量不会被释放内存,当其离开环境时被标记为离开环境。垃圾回收机制在运行的时候会给存储在内存的所有变量加上标记,然后去掉在环境中的变量以及被环境中的变量引用的变量的标记。删掉被标记的变量的值并且回收它们所占用的内存空间。2.计数引用跟踪记录每个值被引用的次数当这个值赋值给一个变量,原创 2021-01-28 14:53:02 · 167 阅读 · 0 评论 -
display:flex和三列布局
flex 弹性盒子在父元素上设置display:flex弹性改变父元素中的子元素默认情况下:有一条水平的主轴,所有子元素按照主轴方向排列,在主轴方向没有宽度,在侧轴方向宽度填满。主轴方向元素变多时,自动挤压父元素属性flex-direction表示主轴方向:1.row表示主轴水平方向排列,从左到右,侧轴垂直从上到下row-reverse表示主轴水平,从右到左排列2.column表示主轴垂直方向排列,从上到下column-reverse表示主轴垂直方向排列,从下到上justify-cont原创 2021-01-27 22:19:23 · 1501 阅读 · 0 评论 -
display:none,visibility:hidden,opacity:0
去原创 2021-01-27 20:16:03 · 141 阅读 · 0 评论 -
回流和重绘
浏览器使用流式布局Render Tree=DOM(浏览器把HTML解析成DOM)+CSSOM(把css解析成CSSOM)回流当RanderTree中部分或全部元素的尺寸结构或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流,每个页面至少发生一次回流,就是在第一次加载的时候会导致回流的操作1. 页面首次渲染2. 浏览器窗口大小发生改变3. 激活css伪类4.元素尺寸位置发生变化5.添加和删除某些可见的DOM元素6.元素字体大小,内容发生变化重绘页面元素样式发生变化,.原创 2021-01-27 20:03:45 · 85 阅读 · 0 评论 -
箭头函数
箭头函数是匿名函数匿名函数的写法有:var fn=function(){}var obj={fn:function(){}}setTimeout(function(){},0)setInterval(function(){},0)[].foreach(function(){})div.onclick=function(){}div.addEventListener('click',function(){})箭头函数的写法:()=>{}//()为形参位置//=>为箭头函数原创 2021-01-27 18:25:41 · 58 阅读 · 0 评论