- 博客(73)
- 收藏
- 关注
RSS订阅原创 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
306
原创 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
357
原创 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
635
原创 浏览器的渲染步骤
浏览器渲染步骤构建DOM树 ，生成DOM树样式计算， StyleRules布局阶段，生成Render Tree分层光栅化合成构建DOM树渲染进程中的HTML解释器会将HTML文档转成DOM树，网络进程下载了多少HTML文档，HTML解释器就会解析多少样式计算当渲染进程接收到CSS文档的时候，会把CSS文档转换成StyleSheets，将属性值标准化创建布局树遍历DOM树中的所有节点，把所有可见的节点放入布局中，忽略不可见的节点，然后计算布局树中的节点的坐标位置分层渲染进程为特
2022-03-03 17:14:27
105
原创 输入URL以后发生了什么
URL验证浏览器先对输入的URL进行验证，如果不符合URL规则，就用浏览器默认的搜索引擎搜索内容，如果符合规则就进行查询缓存浏览器缓存查询浏览器缓存中是否有副本，如果有副本且副本新鲜，就取出缓存的副本DNS域名解析查询DNS缓存，如果有缓存结果，就直接缓存域名解析过来的IP地址等待TCP队列在Chorme内核的浏览器中，浏览器同一个域名最多同时建立六个TCP队列，如果有多的TCP建立连接就会进入TCP队列中建立TCP连接三次握手四次挥手建立TCP连接发送HTTP请求服务端处理请求，并返
2022-03-03 14:53:52
691
原创 cookie，session和token的区别
cookie由服务器端生成，发送给浏览器，浏览器把cookie存入文本文件里，然后下一次请求同一个网站的时候就会携带cookie，由于cookie是存在客户端的，所以浏览器限制了一些比如cookie的大小在4K左右等sessionsession存储在服务器端，当用户离开网站的时候销毁，但是如果服务器做了负载均衡，可能会因为请求在另一台服务器上而失效Token用户输入账号密码登陆后，服务器端生成一个token令牌返回给客户端，然后每次客户端请求的时候都带上tokenToken的优势无状态，可扩展
2022-03-03 14:37:19
92
原创 浏览器存储
浏览器存储方式cookie：由服务端生成，携带在http请求中，一般用于验证用户的身份，大小在4k左右localStorage：本地存储，大小为5M左右sessionStorage：大小为5M左右，关闭页面就清除indexDB：大小无限，一直存在区别特性cookielocalStoragesessionStorageindexDB大小4k左右5M左右5M左右无限存在时间可以设置过期时间一直存储，除非手动清理关闭页面就清除一直存在，除非手动清理
2022-03-03 10:43:23
520
原创 async await 异步
生成器VS协程生成器函数是带有星号的函数，可以暂停和恢复执行生成器函数的使用方法：当遇到yield关键字的时候，交出函数的执行权外部函数使用next恢复函数的执行协程协程可以看作是线程上的任务，线程上同时只能执行一个协程，比如当前执行的协程是A协程，要启动B协程，A协程就必须让出线程控制权给B协程，这样A协程就暂停执行，B协程恢复执行，这时A协程叫做B协程的父协程，协程切换不像线程切换那么消耗资源async/await1.async异步执行和隐式返回PromisePromise微任务
2021-12-12 14:53:54
78
原创 Promise替代回调函数
异步编程的问题嵌套回调，出现回调地狱，错误处理的问题Promise消灭回调和错误处理如何解决嵌套回调延迟绑定回调函数，内部返回值直接穿透到外部如何进行错误处理Promise的错误会“冒泡”，多个Promise可以用一个catch捕获...
2021-12-09 16:01:39
365
原创 宏任务和微任务
宏任务由于JS是单线程语言，所以浏览器使用了普通消息队列和延迟消息队列来维持主线程上任务的执行，这些消息队列任务就称为宏任务如果JS只有宏任务，如果两个任务之间的时间间隔特别大，就会有问题，执行时间无法精准控制微任务异步回调的实现方法有两种，一种是直接放入消息队列的末尾，另一种是执行时机就是主函数执行结束之后，宏任务结束之前，也就是微任务在创建Javascript脚本的时候V8引擎会为其创建一个执行上下文，在这个同时也会创建微任务队列，每个宏任务都关联了一个微任务队列什么时候产生DOM节点发
2021-12-09 10:38:04
206
原创 setTimeout是如何实现的
setTimeout是指定多少毫秒的时间后执行某个方法的API浏览器怎么实现定时器Chorme浏览器除了正常使用的消息队列以外，还有一个消息队列用于处理需要延迟执行的任务，包括了定时器和Chomium的一些延迟任务，所以当Javascript创建一个定时器的时候，会放入浏览器的延迟队列中等待执行当创建一个定时器的时候，渲染进程会创建一个回调任务，里面包含回调函数，开始时间，延迟时间，函数的showName延迟队列的任务的执行是通过开始时间和延迟时间计算出任务的到期时间，然后执行延迟队列中的到期任务，
2021-12-07 10:31:56
235
原创 JavaScript面向对象
封装封装的机制包括：限制对象外部访问内部变量将数据和方法绑定，对外提供方法，从而改变内部变量使用闭包实现私有化属性闭包也就是引入一个自由变量的函数，扮演的作用是为函数提供一个上下文继承JS的继承方式是原型链继承多态JS定义对象的方式非常灵活，可以直接调用对象名称创建实例，也可以new一个实例，两者的区别在于直接调用是没有“归属”的，会归于window对象下，new的实例会有一个新的this上下文new一个关键字的时候，Javascript的实现步骤：先创建一个名称为x的对象绑定
2021-12-06 16:26:52
279
原创 消息队列和事件循环
用单线程处理任务这些任务会按照顺序执行在线程运行时处理新任务一般来说任务执行都是顺序执行，假如想要在执行时再加入新的任务，就需要使用到事件循环机制处理其他线程发来的任务处理新任务就需要用到消息队列，秉承“先进先出”的原则，当其他线程发来任务时，任务放入队尾，执行的任务从队头取渲染进程有一个IO线程专门用于处理其他进程发送来的任务，然后把这些任务放入消息队列中，发送到渲染进程的事件循环中执行如何安全的退出如果要退出界面，页面的主线程会设置一个退出标志的变量，在每次执行完一个任务的时候都看一下
2021-12-06 15:45:13
442
原创 编译器和解释器
编译器和解释器编译器语言在程序执行之前，编译器把原本的代码翻译成二进制，机器能读懂的语言，然后保存二进制文件，方便下一次运行的时候直接读取解释型语言每次运行都需要解释器动态编译和执行V8是如何执行一段JS代码的生成抽象语法树和执行上下文其中Babel代码转换器就是将ES6的语法树转为ES5的语法树ESLint利用AST来检查代码规范字节码字节码是AST和机器码之间的一种代码，机器码的运行十分高效但是占用内存非常多，像手机的执行内存有限的情况下会占用过多的内存，所以V8采用字节码，通过解
2021-12-05 14:14:22
207
原创 CSS外边距叠加
CSS外边距折叠（margin）外边距折叠是当两个相邻的盒子都设置了外边距的时候，在垂直方向上出现叠加的情况对比了两段代码，确实会出现外边距叠加的情况，且在普通流中，而且只是垂直方向会出现这样的问题再筛查发现父子关系也会造成外边距叠加如何避免外边距折叠浮动元素不会发生外边距折叠，包括他的子元素这里float的子元素，即使是垂直方向上也不会出现外边距重叠的情况创建了BFC的元素不会和他的子元素发生外边距叠加什么是BFCBFC叫做块级格式化上下文，也就是普通流。可以把BFC看作一
2021-12-01 11:04:32
208
原创 招新项目优化
问题本地跑只是卡一下，但是上线跑了以后就卡在加载app.js上，查看了一下本地的app.js，总共24M，由于之前没有学过webpack优化打包，所以我是直接使用npm run build直接打包运行，这一下就提醒自己去学习了！优化方式路由懒加载才知道原来vue-router支持路由懒加载，只在需要用到的时候加载js，分割了js文件，app.js文件大小直接减少了一半，加载速度也提升了一半，使用前加载app.js需要280ms左右，使用以后140ms左右代码压缩gzip按需加载项目中使用了e
2021-11-29 09:10:01
4014
原创 2021-11-12 项目自定义组件（模态框）
模态框element的模态框组件实现太复杂了，层层封装工具类，再增添dom，由于项目开发时间赶，就写个能用的就行，使用css阻止模态框外被点击，然后画个框就可以了<template> <div class="cl-dialog-box" v-show="visible"> <div class="cl-dialog"> <div class="cl-dialog-header"> <slot name="header">
2021-11-12 15:14:52
378
原创 2021-11-11 项目自定义组件通信
组件通信子孙之间的通信一般使用attr和attr和attr和listener这两个属性，但是如果我的子组件是用户手动添加进去的，就无法把这两个属性直接绑定到标签上面，查了element的解决方式，发现它将组件通信是封装了的，看了一遍它的东西，用的是mixins来实现把子组件的data视为自己的data，就忽略了复杂的组件通信，然后再经过封装来复用。export default { methods: { /** * 发送消息 * @param {Object} componentName
2021-11-11 16:52:57
178
原创 前端项目技术解决方案
基于 img2 的渐进式加载解决方案图片加载的时候先加载一个模糊的图片，然后逐渐清晰，实现需要两张图片，一张体积较小，比较模糊，一张体积较大，比较清晰，体积较小的图片会先加载成功，直到原图加载成功才替换图片基于 PJAX 的页面无刷新解决方案页面切换url的时候无需刷新界面前端SKU问题前端图片优化基于@vueuse/core数据懒加载无限列表加载解决前端性能分析前端SPA...
2021-11-05 17:37:16
638
原创 浏览器的标准模式和混杂模式
概念标准模式是由W3C标准解析代码，目前大部分浏览器在使用的模式，又称为严格模式混杂模式向后兼容，防止老站点无法工作，不同的浏览器有不同的解析方式，又称为怪异模式如何使用两种模式？触发混杂模式标准模式和混杂模式的区别盒模型：标准模式下元素的宽度为Content的宽高混杂模式下元素的宽高为Content + padding + border图片：标准模式下，div中只有图片的时候，图片下会有3px的空白混杂模式下，不会留有空白字体：混杂模式下，字体不会继承父元素的字体内联样式：
2021-10-25 08:36:09
202
原创 2021-10-24项目修改
解决微信小程序swiper高度自适应要求图片的宽度固定790，高度自适应计算出图片的宽高比例，然后把这个高度动态的设置给swiper连续的图片之间有间隙在HTML中，图片文字等inline元素默许是和父级元素的baseline对齐的，而baseline又和父级底边有必定间隔给image设置vertical-align:top/bottom/text-top/text-bottom即可解决。登录问题之前登陆的时候会存在下一次登录还是需要点击才能登录，但是token依然存在的问题，还是没有处理好
2021-10-24 21:39:05
39
原创 JS的垃圾回收机制
垃圾回收分为自动回收和手动回收两种策略调用栈中数据是怎么回收的JS引擎会通过向下移动ESP来销毁该函数保存在栈中的执行上下文，下一次执行的时候，这段上下文已经无效了，直接被覆盖调用堆中的数据是怎么回收的使用到JS的垃圾回收器代际假说和分代回收特点：大部分对象在内存中存在的时间很短不死对象，存在时间长JS把堆内存分为两块，一块是新生代，一块是老年代。新生代用来存在内存中存在时间短的对象；老年代用来存那些存在时间比较长的对象新生代通常只占1~8M的内存，老年代的容量比较大对于这两块区域
2021-10-24 15:56:23
146
原创 防抖和节流的概念以及实现
概念使用监听滚动，或者鼠标移动这样的频繁触发的事件，可能会导致页面卡顿或者假死，所以针对这种高频触发的事件的问题，有两种解决方案，节流和防抖防抖：触发高频事件以后，会延迟一段时间以后再执行，如果这个期间又触发了该事件，就会重新计算时间节流：当高频事件触发的时候，n秒只执行一次实现防抖实现思想：设定一个高频事件触发的开始时间，设置每次过一段时间后就把this重新绑定，也就是重新绑定这个函数，如果在n秒内就清除计时器，重新计算触发开始时间，反之也重新绑定函数window.onmousemove =
2021-10-21 21:31:16
195
原创 HTTP协议以及相关协议
HTTP是什么？HTTP协议叫做超文本传输协议，也就是计算机之间传输的规范的协议，以及相关错误的处理方式，传输的超文本也就是文字，图片，视频，音频等内容HTTP相关协议TCP/IP协议，DNS协议，HTTPS协议...
2021-10-21 15:43:15
570
原创 Chorme浏览器渲染机制
流程大致分为构建DOM，样式计算，布局阶段，分层，绘制，分块，光栅化，合成构建DOM树由HTML解释器将HTML代码解析成DOM树样式计算渲染引擎会把CSS解析成stylesheets，然后将属性值标准化，然后计算出每个节点的具体样式，主要是CSS继承和层叠样式布局阶段创建布局树，首先遍历出所有可见的节点然后将他们加到布局树中...
2021-10-21 14:35:14
66
原创 从URL输入到显示界面的过程
大致流程输入URL获取请求内容浏览器进程准备渲染进程提交请求文档解析页面，加载资源，完成渲染流程一、用户输入用户输入内容以后，浏览器检查地址栏中的地址是否符合url地址的规则，如果符合规则，合成URL地址，如果不符合，就使用浏览器默认的搜索引擎搜索出请求内容开始搜索以后，会等待页面提交文档结束以后，再替换当前界面二、URL请求流程浏览器进程通过进程间的通信（IPC）给网络进程发送URL请求然后就正式开始网络进程的请求，先查找本地缓存中是否存在该缓存，如果存在就直接返回，如果不存在
2021-10-20 15:47:56
571
原创 HTML几种图片格式和使用
格式透明压缩兼容特点JPG不支持有损全部支持色彩比较丰富，体积小，易传输PNG支持无损IE6不支持压缩比高，支持颜色多GIF支持无损都支持支持动画，颜色单一WEBP透明有损除了谷歌其他都不支持更优的图像压缩，内存比PNG小...
2021-10-19 20:03:00
1199
1
原创 2021-10-17 TARGET个人博客组件和登录界面
组件参照ElementUI组件，封装组件名称，合成样式的名称，然后遍历样式名称mix混合颜色，方便容易混合出浅色作为hover颜色等切换动画使用css自带的transform-style，3d翻转切换登录注册界面在写代码时候，vue加了一句overflow: hidden导致翻转后界面变成镜面，而不显示注册界面，太坑了...
2021-10-19 16:41:55
165
原创 浏览器图片懒加载原理
懒加载如果页面上有很多静态资源需要请求，为了提高页面性能，可以使用图片懒加载，等待用户浏览到图片的时候在进行加载作用减少服务器端的压力，提高性能提升页面加载速度实现先在img地址src上设一个loading图片地址，如果用户没有浏览到该图片，则不进行加载，浏览到该图片的时候，把src替换为自定义属性data-src把浏览器窗口分区，分一个可视区域，如果图片进入这个可视区域内，就把src替换为data-src步骤：获取当前窗口的偏移量，计算是否在可视范围内监听窗口滚动事件，检查元素是
2021-10-16 18:47:40
143
原创 深拷贝和浅拷贝及实现
基本类型和引用类型的区别内存分区：内存分为五个区：栈，堆，自由存储区，全局静态区，只读区只看栈和堆分区JS基本类型有：Number,String,null, undefined, boolean引用类型有：Object， Array， Function，Date深拷贝和浅拷贝基本数据类型名和值都存储在栈中，复制的时候会新开辟一段内存，所以不会对原来的数据有影响，所以称为深拷贝引用数据类型的名存储在栈中，而值存在堆中，栈中存的是值的地址，复制的时候会把地址传递给其他变量，所以称为浅拷贝浅拷贝
2021-10-16 12:15:58
185
原创 【前端优化】白屏时间，首屏时间计算，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
987
原创 npm，yarn，cnpm，pnpm的区别
npmnpm是node.js自带的包管理工具，围绕语义版本控制npm中有三种版本号：主版本号：5.1.0当主API改变，并与之前的版本号不兼容的时候次版本号：当增加了功能，但是向后兼容的时候补丁版本号：当做了向后兼容但是版本有缺陷的时候这就导致不同的人下载的版本号不同，可能会出现问题...
2021-10-15 10:37:33
1654
原创 浏览器缓存原理
First paint直译过来是第一次渲染，也就是浏览器的白屏时间，从白屏到页面有东西为止一般来说是页面解析完head或者开始解析body白屏加载的过程：DNS Lookup：浏览器从DNS服务器中查询域名建立TCP连接服务端处理响应客户端下载，解析，渲染整个界面白屏加载优化：DNS解析优化：DNS缓存优化，DNS预加载策略，稳定可靠的DNS服务器TCP链路优化服务器端优化浏览器下载，解析，渲染优化：精简HTML和CSS代码结构，避免使用内联JS代码浏览器构建HTTP请求流
2021-10-14 21:53:30
213
原创 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
513
原创 2021-10-11 Chrome架构——浏览器架构
进程进程的概念，当一个进程运行的时候，进程是一个程序运行的实例，操作系统会为进程分配一段内存使用，用来存放代码，运行数据和执行任务的主线程叫做进程进程和线程线程不能脱离进程单独存在，线程运行在进程中，需要进程启动和管理，多线程可以并行处理任务进程和线程的关系特点进程中的任一线程崩溃，都会导致进程崩溃线程之间共享数据一个进程关闭后，进程执行的内存会被回收，浏览器关闭了，内存就被回收了（解决内存泄漏问题）进程隔离性，每个进程间的数据是不可以相互读写的，每个进程只能访问自己占有的数据，所以一个进
2021-10-11 21:39:35
96
原创 2020-10-08
项目Bugel-tree刷新数据时，展开菜单收起最开始以为是冒泡问题，因为点击右方的操作栏，el-tree会被收起，于是在每个click点击事件后面加上.stop阻止事件冒泡，但是问题依然没有解决，才发现是因为数据刷新导致的，用了el-tree的属性:default-expanded-keys修改分类数据的时候，因为可能等待数据回显，但是数据没有回显更新完成，而导致数据发生添加不成功的情况，这一次更新，选择每次更新数据的时候给一个数据正在加载中的提示，并加一个遮罩，防止非法数据选中。v-Loadin
2021-10-11 14:57:27
260
原创 2021-10-10 TARGET个人博客项目BUG
Node.js框架Koa的洋葱模型这个地方本来是没有写成check函数的，但是因为放行问题报错了，没有理解洋葱模型Koa使用async/await来实现中间件，next之后的内容是会继续执行的，知识交出了执行权，所以Koa的中间件模型又叫做洋葱模型。项目前端拦截器使用vue-router的路由守卫，在导航触发的时候，在beforeEach触发，然后查看路由是否存在在白名单中，判断是否需要token，不符合条件的强制跳转回登录界面如果axios的响应coed为401，没有登录或者token失效
2021-10-11 14:56:43
52
原创 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
80
原创 2020-10-09 TARGET个人博客
module.exports和exports的区别module.exports和exports其实是一个东西,exports如果是指向值类型，那么这两者相等，如果exports指向引用类型，那么这两者就不同。什么是值类型，什么是引用类型？ 值类型存储在栈中，引用类型存储在堆中，值类型赋值的时候，会在栈中拷贝一份，就不会对原来那一份有影响，但是引用类型会改变用户鉴权两种方式，一种是session，后端获取登录用户后，生成session存储在redis数据库中，交给前端后，前端每次把session携
2021-10-10 12:49:45
40
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人