自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(60)
  • 收藏
  • 关注

原创 我的前端性能优化体系总结

前段性能优化体系总结

2022-06-14 14:53:19 1926 1

转载 Promise中的then第二个参数和catch的区别

Promise中的then第二个参数和catch有什么区别?首页我们先要区分几个概念:reject是用来抛出异常的,catch是用来处理异常的;reject是Promise的方法,而then和catch是Promise实例的方法(Promise.prototype.then和 Promise.prototype.catch)。一、区别主要区别就是,如果在then的第一个函数里抛出了异常,后面的catch能捕获到,而then的第二个函数捕获不到。catch只是一个语法糖而己 还是通过then

2021-12-03 10:43:50 1764

原创 闭包的理解

一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。词法作用域function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包 alert

2021-03-04 11:02:35 285 1

转载 聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer

聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer外婆的​广发证券 技术工程师437 人赞同了该文章前端较少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影,今天我们就来聊一聊JS的二进制家族:Blob、ArrayBuffer和Buffer(Buffer由Node.js提供)概述Blob: 前端的一个专门用于支持文件操作的二进制对象ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同Buffer:Node.js提供的一个二进制

2021-01-11 10:31:10 1081

原创 Chrome 开发者工具 network详解

chrome 控制面板network属性(补充)默认情况下,请求表列显示以下列。您可以添加和删除列(愚人码头注:右键单击列表的任何标题栏可以以添加或删除信息列)。Name(名称) : 资源的名称。 Status(状态) : HTTP状态代码。 Type(类型) : 请求的资源的MIME类型。Initiator(发起人) : 发起请求的对象或进程。它可能有以下几种值:Parser(解析器) : Chrome的HTML解析器发起了请求。Redirect(重定向) : HTTP重定向启动了请求

2020-12-21 16:16:58 3973

原创 事件冒泡&事件捕获和事件委托

一、什么是事件1、事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。2、事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某个web页面加载完成,或者是用户滚动窗口或改变窗口大小。二、事件冒泡 Title 点击冒泡

2020-12-21 16:05:29 186

转载 深入理解css的行高与基线

1、基本概念1.  基线、底线、顶线、中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。3. 行距、行高 行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行...

2020-12-11 16:26:24 388

原创 http与https区别、1.0、1.1和2.0区别

一、http协议简介网络协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则。HTTP(HyperText Transfer Protocol ,超文本传输协议)是互联网上应用最为广泛的一种网络协议。二、http基本的优化影响一个 HTTP 网络请求的因素主要有两个:带宽和延迟。带宽:如果说我们还停留在拨号上网的阶段,带宽可能会成为一个比较严重影响请求的问题,但是现在网络基础建设已经使得带宽得到极大的提升,我们不再会担心由带宽而影响网速,那么就只剩下延迟了。延迟:浏览器阻塞(

2020-11-06 11:36:35 722 1

原创 css基础笔记

1、css样式优先级CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。<div> <p></p></div>// <div> 有个属性 color: red,则这个属性将被 <p> 继承,// 即 <p> 也拥有属性 color: red。CSS 优先规则2:"直接样式"比"祖先样式"优先级高。<div style="color: red"> <div style=

2020-10-30 12:04:11 103

原创 js 计算现在到某一时刻还有多久

function GetRTime(){ var EndTime= new Date($("#left-time").val());//截止时间 //var EndTime= new Date("2015-2-5");//截止时间 var NowTime = new Date(); var t =EndTime.getTime() - NowTime.getTime(); var d=Math.floor(t/1000/60/60/24

2020-10-20 10:18:00 595

转载 Vue 的计算属性如何实现缓存?

前言 很多人提起 Vue 中的 computed,第一反应就是计算属性会缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。 本文以 Vue 2.6.11 版本为基础,就深入原理,带你来看看所谓的缓存到底是什么样的。 注意 本文假定你对 Vue 响应式原理已经有了基础的了解,如果对于 Watcher、Dep和什么是 渲染watcher 等概念还不是很熟悉的话,可以先找一些基础的响应式原理的文章或者教程看一下。视频教程的话推荐黄轶老师的,如果想要看简...

2020-10-18 23:11:12 428

原创 js 常用对象方法大全

create 创建一个对象const obj = Object.create({a:1}, {b: {value: 2}})第一个参数为对象,对象为函数调用之后返回新对象的原型对象,第二个参数为对象本身的实例方法(默认不能修改,不能枚举)obj.__proto__.a === 1 // true obj.b = 3;console.log(obj.b) // 2//创建一个可写的,可枚举的,可配置的属性pobj2 = Object.create({}, { p:

2020-10-16 14:33:53 1660

转载 详解 TCP 连接的“ 三次握手 ”与“ 四次挥手 ”

作者 | AhuntSun责编 | ElleTCP connection客户端与服务器之间数据的发送和返回的过程当中需要创建一个叫TCP connection的东西;由于TCP不存在连接的概念,只存在请求和响应,请求和响应都是数据包,它们之间都是经过由TCP创建的一个从客户端发起,服务器接收的类似连接的通道,这个连接可以一直保持,http请求是在这个连接的基础上发送的;在一个TCP连接上是可以发送多个http请求的,不同的版本这个模式不一样。在HTTP/1.0中这个TCP连接是在http请求创建的时候同步

2020-10-09 11:59:39 907

原创 BFC与IFC的区别

1、什么是BFC?BFC(Block Formatting Context)直译为"块级格式化上下文",是 Web 页面的可视化 CSS 渲染中的一部分,是布局过程中生成块级盒子的区域,也是浮动元素和其他元素的交互限定区域。2、怎样创建BFC?根元素或者包含根元素的元素( html 元素会作为一个 BFC ),意味着 html 元素中的各个元素都在同一 BFC浮动元素(元素的 float 不为 none)绝对定位元素(元素的 position 为 absolute 或 fixed)行内块

2020-09-15 10:01:09 3503

原创 js图片下载到本地

利用a标签的download属性 <a href="https://media.xiangshengclub.com/MTU5OTQ2NDM1OTkwNyMzMTQjcG5n.png" download="name">图片下载</a>问题目前测试download可以直接下载的有:xlsx表格文件zip压缩包目前已经遇到无法直接下载,或者不稳定是否可以下载的在线图片.txt文件解决方案将src地址字符内容转变成blob地址<script> fun

2020-09-08 10:05:03 407

翻译 深入理解JavaScript event loop

举个例子function MainThread() { let a = 1 + 2; let b = 3 / 4; console.log(a + b)}JS拿到这个任务一看很简单啊:首先建一条流水线(一个单线程),然后依次处理这三个任务,最后执行完后撤掉流水线(线程退出)就行了。如下图所示:单线程执行任务会遇到一些问题,如:不是所有的任务都是在执行之前统一安排好的,很多时候,新的任务是在线程运行过程中产生的在线程执行过程中,想加入一个新任务,但是现在这个线程执行完

2020-08-30 13:10:34 114

原创 JavaScript执行上下文

var foo = function () { console.log('foo1');}foo(); // foo1var foo = function () { console.log('foo2');}foo(); // foo2function foo() { console.log('foo1');}foo(); // foo2function foo() { console.log('foo2');}foo(

2020-08-27 18:31:26 180

原创 深入理解变量提升与函数提升

一、变量提升先看一个例子通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理。举个例子function hoistVariable() { if (!foo) { var foo = 5; } console.log(foo); // 5}hoistVariable();这里我们可能有个疑问,如果外层作用域也存在一个foo变量,会不会是打印外层作用域中的foo变量?答案是:不会

2020-08-27 15:17:29 403

转载 js判断手指滑动(移动端)

var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动 function getDirection(startx, starty, endx, endy) { var angx = endx - start

2020-07-22 15:02:34 783

转载 css问题及解决方案

在浏览器中实现用户界面时,请尽可能减少浏览器带来的差异,以使用户界面具有可预测性。跟踪所有这些差异很困难,因此,我整理了一些常见问题及其解决方案方便大家查看。1.重置button和input元素的背景添加一个按钮时,重置它的背景,否则它会在不同的浏览器中看起来不同。在下面的例子中,同样的按钮在 Chrome 和 Safari 中,后者添加了默认的灰色背景。![在这里插入图片描述](https://img-blog.csdnimg.cn/2020072010200812.png?x-oss-process=i

2020-07-20 10:21:09 451

原创 前端window.location清单

参考文献:https://mp.weixin.qq.com/s/rsdy33_RpEKS1Kh9JDAYuwwindow.location.origin → '"https://segmentfault.com:8080' .protocol → 'https:' .host → 'segmentfault.com:8080' .hostname → 'segmentfault.com'

2020-07-20 09:55:53 150

转载 stylelint规则大全

Colorcolor-hex-case: 指定大写或小写十六进制的颜色。color-hex-length: 指定十六进制颜色长或短的符号。color-named: 需要(如果可能)或不允许命名的颜色。color-no-hex: 不允许十六进制的颜色。color-no-invalid-hex: 禁止无效的十六进制颜色。font-familyfont-family-name-quotes:指定是否引号应该围绕字体系列名称中使用。functionfunction-blacklist:指定不允许的

2020-07-06 10:16:38 8398

转载 269个JavaScript工具函数,助你提升工作效率(下)

130.blob转file /**     *  @param { blob } blob     *  @param { string } fileName        */  

2020-06-15 10:45:51 309

转载 JavaScript工具函数,助你提升工作效率(上)

1.匹配正整数// 匹配正整数let isPositiveNum = val => {    return /^[1-9]d*$/.test(val);};console.log(isPositiveNum(9)) //trueconsole.log(isPositiveNum(2.2)) //false2.匹配负整数// 匹配负整数 let 

2020-06-15 10:44:37 933

原创 在MAC环境小白安装brew与nginx经验总结

1、打开终端2、安装Command Line tools一般mac会自带,但是稳妥起见还是跑一下这个命令吧xcode-select --install3、安装brew命令ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"在安装brew有许多坑,因为个不是国内镜...

2020-04-13 17:17:28 629

原创 移动端H5常见问题汇总

移动端H5相关问题汇总自适应问题iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面件放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来、收起未回落问题iPhone X 底部栏适配问题H5 调试相关方案与策略H5 调用 SDK 相关问题及解决方案移动端 H5 相关基础技术概览1、自适应问题对于开发h5来说肯定要考虑到自适应问题,目前来说大多数的解...

2020-04-06 18:24:20 984 1

原创 html2canvas以及domtoimage的使用踩坑总结

背景有个需求需要通过代码下载整个dom结构,所以我一开始使用html2canvas,但是发现在安卓中是可以的,在iOS8以上版本会出现截图整个页面空白的情况,于是为搜了很多资料,最后发现一个博主的总结踩坑跟我基本差不多,博主链接:https://segmentfault.com/a/1190000015992221,下来开始进入正题一、html2canvas对于跨域图片,转换的时候会将跨域图片...

2020-03-15 14:16:36 1204

原创 十大经典排序算法总结

十大经典排序算法时间复杂度一、冒泡排序1.1、算法描述步骤1: 比较相邻的元素。如果第一个比第二个大,就交换它们两个;步骤2: 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一 对,这样在最后的元素应该会是最大的数;步骤3: 针对所有的元素重复以上的步骤,除了最后一个;步骤4: 重复步骤1~3,直到排序完成。1.2 算法分析最佳情况:T(n) = O(n)...

2020-03-09 20:09:56 311

原创 前端常见小知识

一、H5版本中新提出的表单控件1、电子邮件 表单提交时,会验证数据是否符号email的规范(有@,并且@后面有内容)2、搜索类型 提供了快速清除的功能3、url类型 提交时,验证数据是否符合url的规范(http://****)4、电话号码类型 在移动设备中,显示拨号键盘5、数字类型 属性:1)value 默认显示的值2)max 能接收到的最大值3)...

2020-02-29 10:02:35 463

原创 第二版interview

1、宏任务与微任务宏任务(macrotask):宏任务指执行栈中待执行的任务(主线程上的同步任务)。宏任务包括 script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。宏任务与页面渲染的关系是:第一次宏任务执行到结束 => 开始渲染页面 =&...

2020-02-24 14:59:54 274

原创 nodejs服务后台持续运行

forever介绍forever是一个nodejs守护进程,完全由命令行操控。forever会监控nodejs服务,并在服务挂掉后进行重启。forever安装cnpm i -g foreverforever使用forever start index.js //index.js是你要启动的js文件forever list //会列出forever正在运行的服务脚本f...

2019-10-08 14:15:03 136

原创 nodejs文件操作汇总与js跑终端命令方法

nodejs文件操作汇总引入依赖:var path = require('path')var fs = require('fs');1、判断文件是否存在fs.existsSync(path)用法if (fs.existsSync('/etc/passwd')) { console.log('文件已存在');}path string | Buffer | URL返回: ...

2019-09-26 19:00:20 645

原创 js函数的几种参数形式

1、默认参数ES6 默认参数特性允许使用默认值初始化参数。这种比上面介绍的方法更好、更简洁。// An highlighted blockfunction parameter(param1, param2 = 0) { console.log(param2); // => 0 return param1 + param2;}parameter(1); ...

2019-09-23 20:36:53 2538

原创 JS解构赋值

1、交换变量通常使用交换变量是定义一个临时变量然后进行交换,而使用解构赋值就能快速的交换变量,例如// 常用方法let temp;let a;let b;temp = a;a = b;b = temp//使用解构赋值let a = 1;let b = 2;[a, b] = [b, a];a; // => 2b; // => 12、访问数组中的元素...

2019-08-25 13:30:46 428

转载 js中的Object.defineProperty方法

这个方法可牛比了。这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.obser...

2019-07-31 09:54:58 173

转载 深拷贝与浅拷贝的区别

 壹 ❀ 引如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.l...

2019-07-30 09:15:46 105

转载 移动端声明及meta标签设置

移动端meta标签设置1.设置当前html文件的字符编码<meta charset="UTF-8">2设置浏览器的兼...

2019-07-25 10:56:39 112

转载 TCP与UDP的区别

 TCP的优点: 可靠,稳定 TCP的可靠体现在TCP在传递数据之前,会有三次握手来建立连接,而且在数据传递时,有确认、窗口、重传、拥塞控制机制,在数据传完后,还会断开连接用来节约系统资源。 TCP的缺点: 慢,效率低,占用系统资源高,易被攻击 TCP在传递数据之前,要先建连接,这会消耗时间,而且在数据传递时,确认机制、重传机制、拥塞控制机制等都会消耗大量的时间,而且要在每台设备...

2019-07-22 14:24:55 125

原创 vue入门(供自己看)

Vue常见用法1、花括号{{}} 两个大花括号直接显示data内容2、v-html <div v-html="message"></div> message可以显示html标签内容3、v-bind <div v-bind:class="{'class1': use}"> use为true则使用class1类...

2019-07-22 11:13:41 152

转载 微信小程序内联h5页面——webview组件

前言官方文档web-view是小程序提供的一个可以直连h5页面的组件,只要传递一个h5页面的地址,就可以在小程序里直接打开预览该h5页面。如果已有移动端h5版本的模块,要开发小程序版本,使用web-view组件做直连就会非常方便。准备工作首先要登录小程序管理后台,把web-view直连的h5页面地添加到配置域名白名单中。比如我想要小程序直连地址为http...

2019-07-16 17:30:40 1528

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除