![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习记录
咸鱼要翻身233
这个作者很懒,什么都没留下…
展开
-
this的理解
调用位置调用位置也就是函数调用的位置,想找调用位置得从调用栈下手。什么是调用栈? 调用栈可以理解为是函数的调用链。如:function a() { //此时调用栈为 a //因此此时的调用位置是 全局作用域 console.log("我是a函数"); b();}function b(){ //此时调用栈为 a -> b //因此调用位置为 a console.log("我是b函数"); c();}function c(){ //此时调用栈为 a -> b -&g原创 2022-03-05 16:20:04 · 299 阅读 · 0 评论 -
HTTP各版本区别
HTTP1.0和HTTP1.1区别HTTP1.1有持续连接,且HTTP默认使用持续链接,如果一条连接一段时间内没有被使用,就会被关闭。HTTP1.0在每一个请求都单独创建和维护一个全新的连接,这样服务器就要分配一个TCP缓存和保持TCP变量,这给服务器造成了很大的负担。HTTP1.0定义的方法有GET,POST,HEAD;HTTP1.1新增了TRACE,PUT,DELETE,OPTIONS,PATCH,CONNECT缓存处理,HTTP1.0使用If-Modified-Since,Expires来解决原创 2022-03-04 17:00:01 · 346 阅读 · 0 评论 -
HTTP请求方法
GET和POST的区别get请求参数放在URL中,POST参数放在request body中get请求参数有大小限制,POST没有GET请求直接暴露参数,POST比GET更安全GET请求在浏览器回退的时候是无害的,而POST请求再次提交请求浏览器会主动缓存GET请求,而POST需要手动设置GET请求参数的数据类型只接受ASCⅡ码,POST没有限制GET请求只支持x-www-form-urlencoded编码,POST有多种编码方式GET只产生一个TCP数据包,而POST请求产生两个TCP数原创 2022-03-03 17:49:43 · 626 阅读 · 0 评论 -
浏览器的渲染步骤
浏览器渲染步骤构建DOM树 ,生成DOM树样式计算, StyleRules布局阶段,生成Render Tree分层光栅化合成构建DOM树渲染进程中的HTML解释器会将HTML文档转成DOM树,网络进程下载了多少HTML文档,HTML解释器就会解析多少样式计算当渲染进程接收到CSS文档的时候,会把CSS文档转换成StyleSheets,将属性值标准化创建布局树遍历DOM树中的所有节点,把所有可见的节点放入布局中,忽略不可见的节点,然后计算布局树中的节点的坐标位置分层渲染进程为特原创 2022-03-03 17:14:27 · 101 阅读 · 0 评论 -
输入URL以后发生了什么
URL验证浏览器先对输入的URL进行验证,如果不符合URL规则,就用浏览器默认的搜索引擎搜索内容,如果符合规则就进行查询缓存浏览器缓存查询浏览器缓存中是否有副本,如果有副本且副本新鲜,就取出缓存的副本DNS域名解析查询DNS缓存,如果有缓存结果,就直接缓存域名解析过来的IP地址等待TCP队列在Chorme内核的浏览器中,浏览器同一个域名最多同时建立六个TCP队列,如果有多的TCP建立连接就会进入TCP队列中建立TCP连接三次握手四次挥手建立TCP连接发送HTTP请求服务端处理请求,并返原创 2022-03-03 14:53:52 · 686 阅读 · 0 评论 -
cookie,session和token的区别
cookie由服务器端生成,发送给浏览器,浏览器把cookie存入文本文件里,然后下一次请求同一个网站的时候就会携带cookie,由于cookie是存在客户端的,所以浏览器限制了一些比如cookie的大小在4K左右等sessionsession存储在服务器端,当用户离开网站的时候销毁,但是如果服务器做了负载均衡,可能会因为请求在另一台服务器上而失效Token用户输入账号密码登陆后,服务器端生成一个token令牌返回给客户端,然后每次客户端请求的时候都带上tokenToken的优势无状态,可扩展原创 2022-03-03 14:37:19 · 87 阅读 · 0 评论 -
浏览器存储
浏览器存储方式cookie:由服务端生成,携带在http请求中,一般用于验证用户的身份,大小在4k左右localStorage:本地存储,大小为5M左右sessionStorage:大小为5M左右,关闭页面就清除indexDB:大小无限,一直存在区别特性cookielocalStoragesessionStorageindexDB大小4k左右5M左右5M左右无限存在时间可以设置过期时间一直存储,除非手动清理关闭页面就清除一直存在,除非手动清理原创 2022-03-03 10:43:23 · 497 阅读 · 0 评论 -
async await 异步
生成器VS协程生成器函数是带有星号的函数,可以暂停和恢复执行生成器函数的使用方法:当遇到yield关键字的时候,交出函数的执行权外部函数使用next恢复函数的执行协程协程可以看作是线程上的任务,线程上同时只能执行一个协程,比如当前执行的协程是A协程,要启动B协程,A协程就必须让出线程控制权给B协程,这样A协程就暂停执行,B协程恢复执行,这时A协程叫做B协程的父协程,协程切换不像线程切换那么消耗资源async/await1.async异步执行和隐式返回PromisePromise微任务原创 2021-12-12 14:53:54 · 75 阅读 · 0 评论 -
Promise替代回调函数
异步编程的问题嵌套回调,出现回调地狱,错误处理的问题Promise消灭回调和错误处理如何解决嵌套回调延迟绑定回调函数,内部返回值直接穿透到外部如何进行错误处理Promise的错误会“冒泡”,多个Promise可以用一个catch捕获...原创 2021-12-09 16:01:39 · 357 阅读 · 0 评论 -
宏任务和微任务
宏任务由于JS是单线程语言,所以浏览器使用了普通消息队列和延迟消息队列来维持主线程上任务的执行,这些消息队列任务就称为宏任务如果JS只有宏任务,如果两个任务之间的时间间隔特别大,就会有问题,执行时间无法精准控制微任务异步回调的实现方法有两种,一种是直接放入消息队列的末尾,另一种是执行时机就是主函数执行结束之后,宏任务结束之前,也就是微任务在创建Javascript脚本的时候V8引擎会为其创建一个执行上下文,在这个同时也会创建微任务队列,每个宏任务都关联了一个微任务队列什么时候产生DOM节点发原创 2021-12-09 10:38:04 · 180 阅读 · 0 评论 -
XMLHttpRequest是怎么实现的
XMLHttpRequest运作机制XMLHttpRequest使用的“坑”点跨域HTTPS混和内容原创 2021-12-07 11:46:05 · 908 阅读 · 0 评论 -
setTimeout是如何实现的
setTimeout是指定多少毫秒的时间后执行某个方法的API浏览器怎么实现定时器Chorme浏览器除了正常使用的消息队列以外,还有一个消息队列用于处理需要延迟执行的任务,包括了定时器和Chomium的一些延迟任务,所以当Javascript创建一个定时器的时候,会放入浏览器的延迟队列中等待执行当创建一个定时器的时候,渲染进程会创建一个回调任务,里面包含回调函数,开始时间,延迟时间,函数的showName延迟队列的任务的执行是通过开始时间和延迟时间计算出任务的到期时间,然后执行延迟队列中的到期任务,原创 2021-12-07 10:31:56 · 228 阅读 · 0 评论 -
JavaScript面向对象
封装封装的机制包括:限制对象外部访问内部变量将数据和方法绑定,对外提供方法,从而改变内部变量使用闭包实现私有化属性闭包也就是引入一个自由变量的函数,扮演的作用是为函数提供一个上下文继承JS的继承方式是原型链继承多态JS定义对象的方式非常灵活,可以直接调用对象名称创建实例,也可以new一个实例,两者的区别在于直接调用是没有“归属”的,会归于window对象下,new的实例会有一个新的this上下文new一个关键字的时候,Javascript的实现步骤:先创建一个名称为x的对象绑定原创 2021-12-06 16:26:52 · 274 阅读 · 0 评论 -
消息队列和事件循环
用单线程处理任务这些任务会按照顺序执行在线程运行时处理新任务一般来说任务执行都是顺序执行,假如想要在执行时再加入新的任务,就需要使用到事件循环机制处理其他线程发来的任务处理新任务就需要用到消息队列,秉承“先进先出”的原则,当其他线程发来任务时,任务放入队尾,执行的任务从队头取渲染进程有一个IO线程专门用于处理其他进程发送来的任务,然后把这些任务放入消息队列中,发送到渲染进程的事件循环中执行如何安全的退出如果要退出界面,页面的主线程会设置一个退出标志的变量,在每次执行完一个任务的时候都看一下原创 2021-12-06 15:45:13 · 429 阅读 · 0 评论 -
编译器和解释器
编译器和解释器编译器语言在程序执行之前,编译器把原本的代码翻译成二进制,机器能读懂的语言,然后保存二进制文件,方便下一次运行的时候直接读取解释型语言每次运行都需要解释器动态编译和执行V8是如何执行一段JS代码的生成抽象语法树和执行上下文其中Babel代码转换器就是将ES6的语法树转为ES5的语法树ESLint利用AST来检查代码规范字节码字节码是AST和机器码之间的一种代码,机器码的运行十分高效但是占用内存非常多,像手机的执行内存有限的情况下会占用过多的内存,所以V8采用字节码,通过解原创 2021-12-05 14:14:22 · 200 阅读 · 0 评论 -
CSS外边距叠加
CSS外边距折叠(margin)外边距折叠是当两个相邻的盒子都设置了外边距的时候,在垂直方向上出现叠加的情况对比了两段代码,确实会出现外边距叠加的情况,且在普通流中,而且只是垂直方向会出现这样的问题再筛查发现父子关系也会造成外边距叠加如何避免外边距折叠浮动元素不会发生外边距折叠,包括他的子元素这里float的子元素,即使是垂直方向上也不会出现外边距重叠的情况创建了BFC的元素不会和他的子元素发生外边距叠加什么是BFCBFC叫做块级格式化上下文,也就是普通流。可以把BFC看作一原创 2021-12-01 11:04:32 · 203 阅读 · 0 评论 -
浏览器的标准模式和混杂模式
概念标准模式是由W3C标准解析代码,目前大部分浏览器在使用的模式,又称为严格模式混杂模式向后兼容,防止老站点无法工作,不同的浏览器有不同的解析方式,又称为怪异模式如何使用两种模式?触发混杂模式标准模式和混杂模式的区别盒模型:标准模式下元素的宽度为Content的宽高混杂模式下元素的宽高为Content + padding + border图片:标准模式下,div中只有图片的时候,图片下会有3px的空白混杂模式下,不会留有空白字体:混杂模式下,字体不会继承父元素的字体内联样式:原创 2021-10-25 08:36:09 · 193 阅读 · 0 评论 -
JS的垃圾回收机制
垃圾回收分为自动回收和手动回收两种策略调用栈中数据是怎么回收的JS引擎会通过向下移动ESP来销毁该函数保存在栈中的执行上下文,下一次执行的时候,这段上下文已经无效了,直接被覆盖调用堆中的数据是怎么回收的使用到JS的垃圾回收器代际假说和分代回收特点:大部分对象在内存中存在的时间很短不死对象,存在时间长JS把堆内存分为两块,一块是新生代,一块是老年代。新生代用来存在内存中存在时间短的对象;老年代用来存那些存在时间比较长的对象新生代通常只占1~8M的内存,老年代的容量比较大对于这两块区域原创 2021-10-24 15:56:23 · 140 阅读 · 0 评论 -
防抖和节流的概念以及实现
概念使用监听滚动,或者鼠标移动这样的频繁触发的事件,可能会导致页面卡顿或者假死,所以针对这种高频触发的事件的问题,有两种解决方案,节流和防抖防抖:触发高频事件以后,会延迟一段时间以后再执行,如果这个期间又触发了该事件,就会重新计算时间节流:当高频事件触发的时候,n秒只执行一次实现防抖实现思想:设定一个高频事件触发的开始时间,设置每次过一段时间后就把this重新绑定,也就是重新绑定这个函数,如果在n秒内就清除计时器,重新计算触发开始时间,反之也重新绑定函数window.onmousemove =原创 2021-10-21 21:31:16 · 190 阅读 · 0 评论 -
HTTP协议以及相关协议
HTTP是什么?HTTP协议叫做超文本传输协议,也就是计算机之间传输的规范的协议,以及相关错误的处理方式,传输的超文本也就是文字,图片,视频,音频等内容HTTP相关协议TCP/IP协议,DNS协议,HTTPS协议...原创 2021-10-21 15:43:15 · 566 阅读 · 0 评论 -
Chorme浏览器渲染机制
流程大致分为构建DOM,样式计算,布局阶段,分层,绘制,分块,光栅化,合成构建DOM树由HTML解释器将HTML代码解析成DOM树样式计算渲染引擎会把CSS解析成stylesheets,然后将属性值标准化,然后计算出每个节点的具体样式,主要是CSS继承和层叠样式布局阶段创建布局树,首先遍历出所有可见的节点然后将他们加到布局树中...原创 2021-10-21 14:35:14 · 61 阅读 · 0 评论 -
从URL输入到显示界面的过程
大致流程输入URL获取请求内容浏览器进程准备渲染进程提交请求文档解析页面,加载资源,完成渲染流程一、用户输入用户输入内容以后,浏览器检查地址栏中的地址是否符合url地址的规则,如果符合规则,合成URL地址,如果不符合,就使用浏览器默认的搜索引擎搜索出请求内容开始搜索以后,会等待页面提交文档结束以后,再替换当前界面二、URL请求流程浏览器进程通过进程间的通信(IPC)给网络进程发送URL请求然后就正式开始网络进程的请求,先查找本地缓存中是否存在该缓存,如果存在就直接返回,如果不存在原创 2021-10-20 15:47:56 · 561 阅读 · 0 评论 -
HTML几种图片格式和使用
格式透明压缩兼容特点JPG不支持有损全部支持色彩比较丰富,体积小,易传输PNG支持无损IE6不支持压缩比高,支持颜色多GIF支持无损都支持支持动画,颜色单一WEBP透明有损除了谷歌其他都不支持更优的图像压缩,内存比PNG小...原创 2021-10-19 20:03:00 · 1184 阅读 · 1 评论 -
浏览器图片懒加载原理
懒加载如果页面上有很多静态资源需要请求,为了提高页面性能,可以使用图片懒加载,等待用户浏览到图片的时候在进行加载作用减少服务器端的压力,提高性能提升页面加载速度实现先在img地址src上设一个loading图片地址,如果用户没有浏览到该图片,则不进行加载,浏览到该图片的时候,把src替换为自定义属性data-src把浏览器窗口分区,分一个可视区域,如果图片进入这个可视区域内,就把src替换为data-src步骤:获取当前窗口的偏移量,计算是否在可视范围内监听窗口滚动事件,检查元素是原创 2021-10-16 18:47:40 · 135 阅读 · 0 评论 -
深拷贝和浅拷贝及实现
基本类型和引用类型的区别内存分区:内存分为五个区:栈,堆,自由存储区,全局静态区,只读区只看栈和堆分区JS基本类型有:Number,String,null, undefined, boolean引用类型有:Object, Array, Function,Date深拷贝和浅拷贝基本数据类型名和值都存储在栈中,复制的时候会新开辟一段内存,所以不会对原来的数据有影响,所以称为深拷贝引用数据类型的名存储在栈中,而值存在堆中,栈中存的是值的地址,复制的时候会把地址传递给其他变量,所以称为浅拷贝浅拷贝原创 2021-10-16 12:15:58 · 181 阅读 · 0 评论 -
【前端优化】白屏时间,首屏时间计算,dom ready
白屏时间first paint白屏时间,指的是浏览器从白屏到界面上开始有东西显示的时间,一般认为是head标签内容解析完,或者开始解析body,等待JS,css加载完成,生成CSSDOM和DOM,合成布局树如何计算白屏时间?在head标签中加入script,在script中写入,window.firstPaint = Date.now()白屏时间 = firstPaint + performance.timing.navigationStart首屏时间首屏时间是从用户打开页面开始,到页面渲染完的原创 2021-10-16 09:26:50 · 971 阅读 · 0 评论 -
npm,yarn,cnpm,pnpm的区别
npmnpm是node.js自带的包管理工具,围绕语义版本控制npm中有三种版本号:主版本号:5.1.0当主API改变,并与之前的版本号不兼容的时候次版本号:当增加了功能,但是向后兼容的时候补丁版本号:当做了向后兼容但是版本有缺陷的时候这就导致不同的人下载的版本号不同,可能会出现问题...原创 2021-10-15 10:37:33 · 1640 阅读 · 0 评论 -
浏览器缓存原理
First paint直译过来是第一次渲染,也就是浏览器的白屏时间,从白屏到页面有东西为止一般来说是页面解析完head或者开始解析body白屏加载的过程:DNS Lookup:浏览器从DNS服务器中查询域名建立TCP连接服务端处理响应客户端下载,解析,渲染整个界面白屏加载优化:DNS解析优化:DNS缓存优化,DNS预加载策略,稳定可靠的DNS服务器TCP链路优化服务器端优化浏览器下载,解析,渲染优化:精简HTML和CSS代码结构,避免使用内联JS代码浏览器构建HTTP请求流原创 2021-10-14 21:53:30 · 205 阅读 · 0 评论 -
Vue双向绑定2.0和3.0区别
Vue2.0实现双向绑定Vue2.0使用ES5的Object.defineProperty()实现数据劫持和双向绑定Obejct.defineProperty()可以添加对象属性或者修改属性用法:Obejct.defineProperty(obj, prop, descriptor)obj:目标对象prop:对象属性descriptor:属性特性返回处理后的对象obj如果没有给Object设置特性的话,默认configurable,enumrable.writable都为false返回原创 2021-10-13 16:44:16 · 504 阅读 · 0 评论 -
2021-10-11 Chrome架构——浏览器架构
进程进程的概念,当一个进程运行的时候,进程是一个程序运行的实例,操作系统会为进程分配一段内存使用,用来存放代码,运行数据和执行任务的主线程叫做进程进程和线程线程不能脱离进程单独存在,线程运行在进程中,需要进程启动和管理,多线程可以并行处理任务进程和线程的关系特点进程中的任一线程崩溃,都会导致进程崩溃线程之间共享数据一个进程关闭后,进程执行的内存会被回收,浏览器关闭了,内存就被回收了(解决内存泄漏问题)进程隔离性,每个进程间的数据是不可以相互读写的,每个进程只能访问自己占有的数据,所以一个进原创 2021-10-11 21:39:35 · 89 阅读 · 0 评论 -
2021-10-11 Vue-router路由导航守卫
全局前置守卫守卫是异步进行的,在所有守卫resolve之前,路由一直处于waiting等待中,当导航触发的时候,全局前置守卫按照顺序执行前置守卫router.beforeEach()有三个参数:to:导航要去的地址from:导航原本的地址next:执行下一个守卫next(false)代表中断当前导航,如果URL发生改变,会回到from的URL去;next(’/’)代表路由跳转到指定urlnext(error)如果next被传入一个Error实例,那么导航将被终止并且进入router.erro原创 2021-10-11 11:07:03 · 76 阅读 · 0 评论 -
2021-10-05 前端基础知识复习
一、网络传输结构OSI模型从下到上依次是物理层,数据链路层,网络层,传输层,会话层,表示层,应用层物理层:在物理媒体上实现比特流的传输数据链路层:两个设备之前传输数据,数据封装成帧网络层:将数据报从源地址发送到目的地址传输层:主机间传输数据会话层:建立和管理应用程序的通信表示层:数据处理应用层:报文数据二、TCP和UDP区别TCP是面向连接的,UDP是面向无连接的TCP对系统资源要求的比较多,UDP比较少,因为TCP信息包比较大,且处理麻烦一些UDP的结构比较简单,目标地址,源原创 2021-10-05 17:25:35 · 59 阅读 · 0 评论 -
ICMP协议
ICMP协议概述ICMP协议作用这个协议作用于网络层,在数据传输的时候,如果没有协议控制,可能会出现连接断开,数据丢包等问题,所以ICMP协议的作用是:确认IP包到达目标地址通知在发送过程中是否有丢包ICMP协议是基于IP协议的,只能用于IPV4,IPV6需要使用ICMPv6ICMP报文结构ICMP协议应用使用ping命令构造ICMP数据包伪造ICMP数据包构造连续的ICMP数据包构造连续的ICMP数据请求包伪造ICMP数据包的IP层伪造ICMP数据包的Ethernet层原创 2021-09-27 07:14:50 · 177 阅读 · 0 评论 -
事件冒泡和事件捕获
事件冒泡比如当前有一段代码<div class="a"> <div class="b"></div></div>let a = document.getElementById('a');let b = document.getElementById('b');a.onclick = function() { alert('div1');};b.onclick = function() { alert('div2')}这时点击cla原创 2021-09-19 21:33:24 · 48 阅读 · 0 评论 -
2021-09-19 Vue知识巩固
Vue的生命周期是Vue实例从创建到销毁的过程,就叫做Vue的生命周期,从初始化事件,数据,编译模板,挂载Dom,渲染->更新->渲染,销毁的过程v-if和v-show v-if是是否通过控制节点是否存在决定是否渲染,v-show是通过设置dom的样式里的display来决定是否渲染,如果第一次编译的时候v-if判断为否,则不编译,如果编译一次,就会有编译缓存,使用条件:如果需要多次显示隐藏组件,使用v-show,否则,使用v-if,因为v-if切换开销大,v-show的初始化开销大k.原创 2021-09-19 19:56:45 · 48 阅读 · 0 评论 -
IP数据包
IP地址IP地址的构成每个IP地址包括主机号,网络号,同一物理网络下的IP地址网络号相同。IP地址为32位,IP基本分为三大类A类:前八位代表网络号,后24位代表主机号,该地址分配给政府机关单位使用B类:前16位代表网络号,后16位代表主机号,该地址分配给中等规模的企业使用C类:前24位表示网络号,后8位代表主机号,该地址分配给任何需要的人用D类:不分网络ID和主机ID,该地址用于多播E类:不分网络ID和主机ID,该地址用于实验区分这几类IP:A类:网络ID的第一位以0开始的地址B原创 2021-09-17 08:40:57 · 564 阅读 · 0 评论 -
2021-09-15 Vue实例学习
MVVM模式即模型——视图——视图模型,把后端数据转成能界面,实现方式就是双向绑定。这里双向绑定就是使用Vue2.x版本使用的技术,Object.defineProperty()重新setget方法,然后监听数据变化。但是Vue中使用不会这么简单双向绑定实现Vue的生命周期一开始看官方的文档,官方文档就给了一张图片。。。让我先可以不懂,以后慢慢领会。。所以只能看博客学了:Vue的生命周期是从组件从创建,数据初始化,挂载,更新,销毁的过程...原创 2021-09-16 17:30:11 · 58 阅读 · 0 评论 -
网络访问层
网络访问层构成物理层物理层如名,指的就是光纤,电缆,电磁波等真实存在的物理媒介,这些物理媒介可以传送物理信号,需要用两种物理信号,0和1,电脑通过接口,接受物理信号并解读程0/1序列对于计算机来说,物理层就是适配器,适配器分为两种:第一类是物理网络适配器,如有线网卡,无线网卡第二类是虚拟网络适配器,如宽带拨号连接,VPN连接等检查我的计算机网络适配器信息:数据链路层数据链路:按一种链路协议的技术要求连接两个或多个数据站的电信设施,称为数据链路,在物理层提供比特流服务的基础上,建立相邻结原创 2021-09-15 17:11:52 · 280 阅读 · 0 评论 -
ElementUI源码学习——Tag标签
昨天学了Button组件,今天把昨天学习的内容带入自己写一个Tag组件问题本来以为和昨天一样,在template中写入组件内容,然后再根据prop的数据修改样式,但是看看源码,只有js,通过render函数,之前学到过render函数是渲染的一看Vue官网,推荐用template但是用render渲染函数更接近编译器!但是我看了el-tag的属性中,并没有和官网一样的代码冗杂的问题,所以查了一下,render函数因为在js中渲染,所以渲染等级高于el和template,除了这个原因就是el-tag原创 2021-09-15 11:03:38 · 481 阅读 · 0 评论 -
ElementUI源码学习笔记——button组件
Sass部分@content用于在@mixin中占位,里面放@include@each循环,比如项目中需要一个五颜六色的checkbox,这时候一个一个添加颜色特别麻烦,就使用@eachCss部分white-space属性:规定元素内空白(空格,Tab等)的处理normal:忽略多余空白,只保留一个空白,文本自动换行nowrap:所有空白合并成一个,文本不换行pre:原样输出,不换行pre-wrap:原样出书,换行pre-line:所有空白合并成一个,回车不变,文本换行inherit:原创 2021-09-14 21:41:39 · 411 阅读 · 0 评论