前端
前端总结
lijieling123
努力赚钱
展开
-
前后端分离
前后端分离解决了一个问题,那就是静态资源(页面)和动态资源(数据接口)的分离,以前的jsp因为是直接把数据嵌入页面的导致页面资源也是动态的,接下来需要引入cdn缓存的概念,涉及的是运维方面的知识,静态资源一旦进入缓存,是可以有效降低服务器的负载的cdn缓存是服务器缓存, cdn就是代理和Http类似,客户端请求数据时,先从本地缓存查找,如果被请求数据没有过期,拿过来用,如果过期,就向CDN边缘节点发起请求。CDN便会检测被请求的数据是否过期,如果没有过期,就返回数据给客户端,如果过期,CDN再向源站发原创 2022-04-09 11:33:56 · 787 阅读 · 0 评论 -
JavaScript基础
学习视频链接:(https://www.bilibili.com/video/BV1jE411T7ya from=search&seid=609703055903100372)let const区别let值可变,不需要初始化,没有初始化时候默认undefined,const则相反开发中一般都使用const,除非明确知道值会改变的才用let基本数据类型String, Number, Boolean, null, undefined, symbol, bigint (后两个ES6新增)原创 2022-04-09 11:29:15 · 90 阅读 · 0 评论 -
寻找数组中第n多重复的数字及对应的次数
B站前端笔试题 20210913注:如果不存在第n多的,则返回-1let arr=[1,3,2,3,3,2,2,1,2]//[1,3,2,3,2,2,1,2] [1,3,2,3,2,2,1,2] 4let n=3;let obj={};for(let i = 0;i < arr.length; i++){ let item = arr[i]; obj[item] = (obj[item] + 1) || 1;}const count = [];for(let key in原创 2021-09-13 20:50:01 · 138 阅读 · 0 评论 -
小米前端一面
background-image 与img标签的区别1.background-image无法使用懒加载,而img标签可以通过设置其src进行懒加载的实现加载顺序不同: background-image是css属性,img标签中如果有src会立即请求,img会优先background-image进行请求.图片设置性不同:background-image 可以借助其本身css属性中的background-position、background-size来设置图片展示的位置关系,大小显示关系,而..原创 2021-09-08 14:21:17 · 87 阅读 · 0 评论 -
浏览器碰到 script 脚本的时候怎么加载(网易云音乐前端一面)
<script src="wangyi.js"></script>没有 defer 或 async,浏览器不等待后续载入的文档元素,读到就加载并执行。有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。参考链接...原创 2021-08-30 17:38:23 · 159 阅读 · 0 评论 -
小米读代码题-1
function foo(){this.a = 100;this.b = 200;}function goo(){this.c = 300;this.d = 400;}var seed = new foo(); foo.prototype.fuss = function(fn) {fn.prototype = seed;seed = new fn; //seed 为new goo(),也就是{c: 300,d: 400, prototype: foo:{a: 100,b:原创 2021-08-09 13:37:28 · 125 阅读 · 0 评论 -
小米前端面经整理(二)
Vue兄弟组件传值1,首先创建一个事件总线,例如bus,作为一个通讯的桥梁;2,在需要传值的组件中,通过e m i t 触 发 一 个 自 定 义 事 件 , 并 传 递 参 数 ;3 ,在接收数据的组件中,通过on监听自定义事件,并处理传递过来的参数;;父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的VUE自定义指令通过directives自定义指令VUEX的mutation和action的区别mutation处理同步任务,act原创 2021-08-09 11:48:03 · 124 阅读 · 0 评论 -
小米前端面经整理(一)
HTTP3、2、1.XHTTP1.0存在一些浪费带宽的现象,例如客户端只是需要某个对象的一部分,而服务器却将整个对象送过来;HTTP1.1则在请求头引入了range头域,它允许只请求资源的某个部分http2二进制传输,多路复用,header压缩,服务器主动向浏览器推送与此请求相关资源http3实现了类似TCP的流量控制、传输可靠性功能,集成了TLS加密功能跨域基本概念:跨域问题是浏览器同源策略限制,当协议,主机,和端口号有一个不同时,就是跨域。跨域并不是请求发不出去,请求能发出去,服务端能收原创 2021-08-08 21:57:45 · 253 阅读 · 0 评论 -
WeakMap和Map的区别以及WeakMap限制只能用对象作为键的原因
WeakMap和Map的区别Map的键值可以是原始数据类型和引用类型,WeakMap的键值只能是引用类型Map可以迭代遍历键,WeakMap不可迭代遍历键Map所构建的实例是需要手动清理,才能被垃圾回收清除,而WeakMap只要外部的引用消失,所对应的键值对就会自动被垃圾回收清除很多博客写着WeakMap的键名所指向的对象,不计入垃圾回收机制,一直不理解这个不计入垃圾回收机制的意思,总以为是不能被回收,给想反了,其实是说保存的对象不会增加引用计数器,如果一个对象不被引用了会自动删除Weak原创 2021-07-29 15:24:51 · 622 阅读 · 0 评论 -
1.const 对象可以改,那怎么让它也不能改,2.通过reduce实现map函数,--字节面试
const 对象可以改,那怎么让它也不能改我回答的时候是直接只记得freeze()更详细的方法见这个链接通过reduce实现map函数let arr=[1,2,3];Array.prototype.map2=function(fn){ let result=[]; this.reduce((pre,cur)=>{ result.push(fn(cur)) },[]) return result;}let arr2=arr.map2(func原创 2021-07-27 20:11:02 · 128 阅读 · 0 评论 -
函数的原型链
原型对象:在声明了一个函数之后,浏览器会自动按照一定的规则创建一个对象,这个对象就叫做原型对象。每一个函数对象都有一个prototype属性,但是普通对象是没有的;Object继承自己,Funtion继承自己,Object和Function互相是继承对方函数A的原型链function A(){};var f1 = new A();f1.proto ==>A.prototype ==> A.prototype.proto ==> Object.prototype ==> O原创 2021-07-27 11:44:44 · 391 阅读 · 0 评论 -
Promise.all()的实现---字节飞书一面
面试时间:20210726面试官很耐心,一步步等我完善,虽然最后一个下标的没完善好最原始的没加settimeout的时候,注释那里的可以后续改进,加了settimeout以及如果参数不是promise的时候不能then最后一次改进,为了能看到具体是哪个promise,采用下标let promise1=new Promise(function(resolve){ setTimeout(function(){ resolve(1); },1000);});let p原创 2021-07-26 20:15:18 · 113 阅读 · 0 评论 -
字节面经算法题总结
求数组第k大的数有两个方法:1.直接用快速排序的思路O(nlogn)2.快速选择,使用快速排序的思路, 递归取中间的索引进行排序, 比中间值小的放左边, 比中间值大的放右边,只需递归一个方向,O(n)var findKthLargest = function(nums, k) { // quicksort(nums); // return nums[nums.length-k]; return quickSelect(nums,nums.length-k,0);};let原创 2021-07-22 13:27:35 · 246 阅读 · 0 评论 -
Promise.resolve(v)和new Promise(r => r(v))的对比
当v是一个Promise实例new Promise(r => r(v))let v = new Promise(resolve => { console.log("begin"); resolve("then"); }); new Promise(resolve => { resolve(v); }).then((v)=>{ console.log(v) }); new Promise(resolve => {原创 2021-07-21 17:46:00 · 654 阅读 · 0 评论 -
var与for循环结合使用产生的无法取得最新变量值的问题
很多博客都有写了,经典的面试题,自己重新记录下,顺便也明白下var、let的区别,以及加深对闭包的理解for(var i=1;i<=5;i++) { setTimeout(() => { console.log(i) }, i*1000) }原因:for循环中用var来申明变量i,此时var存在变量提升问题,并且6次循环中全都共用一个变量,当setTimeout中的延迟函数开始执行时,循环已经结束,此时i=6,所以会打印出6个6解决方法一:let声明原创 2021-07-03 19:33:52 · 461 阅读 · 0 评论 -
async读代码题,加强理解
//https://www.jianshu.com/p/b4fd76c61dc9 参考学习腾讯二面做错的题await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完,再回到async内部async function async1(){ console.log(await async2() ); console.log('1')}async function async2(){ // await async3() console.log('2')原创 2021-07-01 13:25:24 · 96 阅读 · 0 评论 -
JavaScript系统视频学习笔记-原型(二)
视频__proto__原来是属性访问器既要实现继承,达到对象复用的目的;又要实现重载,让不同的对象有不同的方法。共性、个性一个都不能少。—因为第二个重新创建了原型继承对constructor属性的影响对象工厂派生对象并实现继承:直接在函数里面生成对象...原创 2021-06-23 11:30:53 · 77 阅读 · 0 评论 -
JavaScript系统视频学习笔记-原型(一)
函数当对象使用时,有原型proto;函数当构造函数使用时(实例化对象)有原型prototype1,let a=new b则有 a.proto=b.prototype 2,__proto__一般自己用; prototype一般给new的人继承 3,自己没有的方法可以向上寻找constructorconstructor就是为了将实例的构造器的原型对象暴露出来, 比如你写了一个插件,别人得到的都是你实例化后的对象, 如果别人想扩展下对象,就可以用 instance.constructor.prototype原创 2021-06-22 19:51:07 · 76 阅读 · 0 评论 -
JavaScript系统视频学习笔记-对象(二)
视频不可扩展对象、密封对象、冻结对象使用访问器保护数据访问器伪造属性操作Proxy代理拦截–这个比较难,后续复习的时候,自己敲一下使用Proxy,数据绑定的容器更新原创 2021-06-22 19:47:59 · 63 阅读 · 0 评论 -
JavaScript系统视频学习笔记-对象(一)
视频对象有同名属性的时候,后面的会把前面的覆盖entries,数组和对象的遍历是一样的,可以用来后面的深拷贝深拷贝使用工厂函数创建对象手工的工厂函数还可以通过构造函数创建对象抽象:把一些属性封装到类内部,不让外部访问对象内部的数据就被闭包到了这个函数内部,且又因为只有一个属性值show,你使用lisi.name,lisi.info只会添加新的属性值而不改变原有被闭包的数据{ let data='a';}console.log(data);//data is not原创 2021-06-22 10:59:06 · 92 阅读 · 0 评论 -
JavaScript系统视频学习笔记-作用域和闭包
视频同个函数重复执行,里面的变量是创建多份,不是只有一份,即会产生多个对应的内存空间延伸函数:函数中定义的变量被使用,会保留闭包:子函数可以访问到其它函数作用域的变量闭包的三个特性:1、函数嵌套函数;2、函数内部可以访问函数外部的参数和变量;3、闭包内部的变量不会被垃圾回收;闭包内存泄漏:将不使用的变量声明为空this在闭包中的历史遗留问题:...原创 2021-06-21 21:36:54 · 82 阅读 · 2 评论 -
JavaScript系统视频学习笔记-函数进阶
视频this类里面的普通函数的this对象是window解决方法1.赋值一份2.使用箭头,箭头函数的this指的是父级作用域call和Apply的区别bind和上面两个的区别1.不立即执行(打印的时候控制台是返回一个函数),应用场景,按钮点击事件注:当this是windows对象,不是想要的对象,可以通过bind传2.可以在两个地方传参其它:Symbol.for根据描述获取Symbol,如果不存在则新建一个Symbol1. 使用Symbol.for会在系统中将Symbol原创 2021-06-21 19:26:08 · 70 阅读 · 0 评论 -
JavaScript全面文档学习笔记-字符串与数组
文档slice,substr和substring方法的区别substr(pos[,length]),到了substring方法,substring(from[,to]);从定义上就可以看到,后一个参数是一个位置,而非长度,因此他更像sliceslice和substring–这个比较难1.substring是以两个参数中较小一个作为起始位置,较大的参数作为结束位置。2.当接收的参数是负数时,slice会将它字符串的长度与对应的负数相加,substring则干脆将负参数都直接转换为0。var t原创 2021-06-20 16:23:25 · 60 阅读 · 0 评论 -
携程前端面试题目总结-牛客 (二)
问题vue的生命周期创建、数据初始化、挂载、更新、销毁生命周期箭头函数与普通函数的区别1.箭头函数是匿名函数,不能作为构造函数,不能使用new2.箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值3.箭头函数没有原型属性-vue的虚拟dom解决什么问题, 为什么要用虚拟dom参考...原创 2021-06-02 23:09:19 · 321 阅读 · 0 评论 -
携程前端面试题目总结-牛客 (一)
问题如何利用webpack来优化前端性能?压缩代码。删除多余的代码、注释、简化代码的写法等等方式。利用CDN加速。在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。额外:element-ui借用了bootstrap框架的思想,使用了栅格布局HTML居中怎么实现,大概怎么做一、text-align:center;这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可。如原创 2021-06-02 11:40:45 · 891 阅读 · 0 评论 -
JavaScript全面文档学习笔记-基础知识要点总结
文档基础知识这文档的代码里面很多注释有错误,和说明矛盾,自己验证了,其它还好变量提升解析器会先解析代码,然后把声明的变量的声明提升到最前,这就叫做变量提升。console.log(a); //undefinedvar a = 1;console.log(a); //1解析器执行过程如下var aconsole.log(a); //undefineda = 1;console.log(a); //1 TDZTDZ 又称暂时性死区,指变量在作用域内已经存在,但必须在let/原创 2021-06-01 14:15:25 · 91 阅读 · 1 评论 -
JavaScript 异步学习笔记(四)
学习视频P31 async与await语法糖await要放到async里面P35 class与await的结合P36 异步封装在类内部P37 async和await的多种声明普通函数的声明函数表达式的声明对象的声明类的声明P38-39 async基本错误处理可以在函数体里面解决,也可以在外面解决P40 await并行技巧1.方法前面不加await的时候并行执行,最后再用await来接收前面已经执行了的Promise2.用.all方法...原创 2021-05-30 22:24:02 · 129 阅读 · 1 评论 -
JavaScript 异步学习笔记(三)
https://www.bilibili.com/video/BV15J411G7FG?from=search&seid=17520211839469801890P21 script脚本的Promise加载引擎P22 Promise.resolve缓存后台数据第一次先用ajax读取数据,存入缓存,后面就都读缓存–函数其实也是一个对象//query是一个函数const cache=query.cache||(query.cache=new Map())if(cache.has(name)原创 2021-05-30 10:53:47 · 88 阅读 · 1 评论 -
JavaScript 异步学习笔记(二)
https://www.bilibili.com/video/BV15J411G7FG?from=search&seid=17520211839469801890P11 Promise.then也是一个Promise两个Promise:P1,P2放主线程打印的时候,P2还不知道自己是P1来的,所以P2的状态是pedding加了定时器后微任务前与宏任务,P2就知道自己是P1来的,所以P2的状态是resolvedP12 then返回值的处理技巧一个Promise一个解决的办法,都是对应的,链原创 2021-05-28 10:31:22 · 112 阅读 · 0 评论 -
JavaScript 异步学习笔记(一)
https://www.bilibili.com/video/BV15J411G7FG?from=search&seid=17520211839469801890P1 异步编程JS是单线程的,只有一个人干活,其它的活都会安排到其它的容器,其它的容器干完之后先放到任务队列,等这个人手上的活干完之后,再去任务队列里面取。P2 异步加载图片主线程有打印的,会先打印出来,然后图片才加载。也就是先干完主线程的活,再取任务队列里面取新任务P3 定时器的任务轮询定时器的任务,也相当于把其它活先交给定时原创 2021-05-28 09:19:57 · 81 阅读 · 0 评论 -
JS原型和原型链
原型学习的帖子学习的视频定义:每个对象都会在其内部初始化一个属性prototype原型最大的作用,共享属性和方法proto 的内置属性,用于指向创建它的构造函数的原型对象原型链当访问其中的一个属性或方法的时候,如果这个对象中没有这个方法或属性,那么Javascript引擎将会访问这个对象的proto属性所指向上一个对 象,并在那个对象中查找指定的方法或属性,如果不能找到,那就会继续通过那个对象 的proto属性指向的对象进行向上查找,直到这个链表结束...原创 2021-05-24 11:39:56 · 62 阅读 · 0 评论 -
JS检测数据类型的方法以及数据的深浅拷贝
检测数据类型的方法typeof判断变量是否是number, string, boolean, function, undefined等类型对于基本类型,除 null 以外,均可以返回正确的结果。对于引用类型,除 function 以外,一律返回 object 类型。对于 null ,返回 object 类型。对于 function 返回 function 类型instanceof与typeof方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型instanc原创 2021-05-23 19:35:10 · 64 阅读 · 0 评论 -
http缓存策略
协商缓存让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率强缓存服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略即协商缓存可以提供是否更新的验证,不是直接使用...原创 2021-05-23 14:33:46 · 160 阅读 · 0 评论 -
传输协议
OSI七层协议应用层:各种应用软件,协议:DNS、FTP、HTTP、SMTP等表示层:定义数据格式和加密会话层:控制应用程序的会话能力传输层:最关键的一层,负责整体的数据传输和数据控制,协议:TCP、UDP等网络层:负责寻找地址,路由选择,阻塞控制数据链路层:物理地址寻址、数据的成帧、流量控制等,协议:ARP等物理层:为上层协议提供了一个传输数据的物理媒体tcp和udptcp三次握手,为什么需要三次确保建立可靠连接避免资源浪费为了防止已经失效的连接请求报文段突然又传到服务端,因原创 2021-05-21 19:18:18 · 816 阅读 · 4 评论 -
http
常用的http请求头Accept: 浏览器可以接受服务器回发的类型Accept-Encoding:浏览器申明自己接收的编码方法Accept-Language:浏览器申明自己接收的语言Host:请求报头域主要用于指定被请求资源的Internet主机和端口号,它通常从HTTP URL中提取出来的User-Agent:告诉HTTP服务器, 客户端使用的操作系统和浏览器的名称和版本Connection:客户端再次发送Request是否需要重新建立TCP连接Cookie:存储一些用户信息以便让服务器辨原创 2021-05-21 17:34:02 · 82 阅读 · 0 评论 -
JS-this关键字
this的四种绑定规则默认绑定,this默认指向全局,window (tip: 全局变量为window对象的属性)隐式绑定,方法在对象里面,this指对象硬绑定,用call,apply方法,想绑定哪个对象就绑定哪个对象构造函数绑定,通过调用一个构造函数,指明其中对象...原创 2021-05-16 19:26:55 · 64 阅读 · 0 评论 -
JavaScript基础
学习视频链接let const区别let值可变,不需要初始化,没有初始化时候默认undefined,const则相反开发中一般都使用const,除非明确知道值会改变的才用let基本数据类型String, Number, Boolean, null, undefined, symbol, bigint (后两个ES6新增)const Arrays使用const操控数组的时候可以直接在末尾通过下标增加元素,但是初始化的时候不能[]这样不知道有多少值得时候可以用push往末尾加,uns原创 2021-05-16 14:39:31 · 67 阅读 · 0 评论