![](https://img-blog.csdnimg.cn/20200402100942835.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端
文章平均质量分 57
web前端
from_the_star
sorry,本人回复消息不及时,因工作繁忙很少上线。
展开
-
前端性能优化---样式计算
重绘-样式计算也会导致性能问题?原创 2023-07-15 15:38:10 · 782 阅读 · 0 评论 -
JS沙盒实现
JS沙盒简述沙盒(英语:sandbox,又译为沙箱),计算机术语,在计算机安全领域中是一种安全机制,为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。沙盒通常严格控制其中的程序所能访问的资源,比如,沙盒可以提供用后即回收的磁盘及内存空间。在沙盒中,网络访问、对真实系统的访问、对输入设备的读取通常被禁止或是严格限制。从这个角度来说,沙盒属于虚拟化的一种。沙盒中的所有改动对操作系统不会造成任何损失。通常,这种技术被计算机技术人员广泛用于测试可能带毒的程原创 2021-08-10 00:50:58 · 1605 阅读 · 0 评论 -
Laya的2D绘制模式
Laya的2D绘制模式大致如此,每一个Node根据其类型(Text、Sprite)和某些属性(alpha、mask)等得到一个名为renderType的二进制数值,再去RenderSprite.render数组中查找对应的绘制函数单链表,进行调用。关键词为:单链表、二进制。Canvas绘制内容时,需要根据需绘制内容,选择stroke,fill,strokeText,fillText等绘制方法。根据这些绘制方法,组合出绘制文本、绘制图片、绘制自定义图形、混合、遮盖等函数,方便调用。在Laya中不是使用Ca原创 2020-12-27 18:28:13 · 766 阅读 · 0 评论 -
React样式修改背景失效
背景介绍点击后,将不透明的按钮修改为渐进透明的按钮。代码如下:修改前:let style = this.props.style;style["background"] = "rgba(250,103,37,1)";//...return (<div style={this.style}>立即下载</div>);修改后:let style = this.props.style;let progStr= Math.floor(progress*100)+"%";原创 2020-10-19 14:46:28 · 1420 阅读 · 0 评论 -
浅浅得理解HTTP
本文主要内容基于HTTP1.1。HTTP简介为了了解HTTP(HyperText Transfer Protocol,超文本传输协议),我们需要从TCP/IP入手,HTTP就是它内部的一个子集。TCP/IP(Transmission Control Protocol/Internet Protocol,传输控制协议/网际协议)是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP协议不仅仅指的是TCP 和IP两个协议,而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇, 只是因原创 2020-07-29 17:20:02 · 300 阅读 · 0 评论 -
异步函数(async/await)的原理
Generator了解一个异步函数的原理,首先要来看下Generator(具体内容去看文档):function* fibonacci() { try{ var a = yield 1; yield a * 2; }catch(err){ console.log(err.message); }}var it = fibonacci(); it.next(); // {value: 1, done: false}it.next原创 2020-07-28 17:12:39 · 764 阅读 · 0 评论 -
前端笔试坑位---JS隐式转换
我们在写笔试题的时候,经常碰到涉及隐式转换的题目,例如"1" + 2obj + 1[] == ![] [null] == false=== 和 ===== 叫做严格运算符,对象类型指向地址相同或原始类型( 数值、字符串、布尔值)值相同;==叫做相等运算符,类型不同会进行转化再比较,undefined、null相等,对象类型还是比较引用。==运算符将原始值和其包装对象视为相等,但===运算符将它们视为不等。所有obj.a==null(相当于obj.a=== null || obj.a ==原创 2020-06-13 15:33:01 · 465 阅读 · 0 评论 -
100行以内的代码实现一个Promise
Promise实现的基石就是,先了解Promises/A+规范,我按照自己的理解简单描述下。Promise规范术语:解决(fulfill):指一个 promise 成功时进行的一系列操作,如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决,但在后世的 promise 实现多以 resolve 来指代之。拒绝(reject):指一个 promise 失败时进行的一系列操作。终值(eventual value):所谓终值,指的是 promise 被解决时传递给解决回调的值,由于 pr原创 2020-06-01 21:03:14 · 458 阅读 · 0 评论 -
某条前端面试题--实现一个封装的ajax器(Promise版)
题目描述实现一个封装ajax器,功能有限制一次同时发送的ajax请求数量m个timeout限制重试n次解题思路强调下,我的想法和代码只是尝试回答面试问题,并不能直接在正式的业务场景里使用,但希望也能给你们带去思考。另外,我的解决方案是基于promise完成的。首先,限制条件1在我的理解中,发送的请求还有m个请求在请求中,那么这时程序发出的请求,要先被存下来,等到有请求结束了,再发送给服务器。这就需要我们思考用什么结构,存储请求,考虑到请求是先进先出的,那么就可以使用队列。其次,2、3这原创 2020-05-13 15:14:55 · 658 阅读 · 0 评论 -
扒一扒为啥面试官要问我们隐藏元素有几种方法
也许,你们在面试的时候,被问到过,隐藏元素有几种方法?我总结了一下,不保证全面,有下列几种方法:visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在opacity: 0; CSS3 属性,设置 0 可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外display: none; 元素会变得不可见,并且不会再占用文档的空间。transform: scale(0); 将一个元素设置为原创 2020-05-08 18:10:37 · 236 阅读 · 0 评论 -
扒一扒函数防抖和函数节流
在前端的真实场景里,我们可能不会希望频繁触发执行函数,比如说输出框输入时自动填充词,还有其他click、mousemove、mouseover、scroll等等情况的处理。通常为了解决这种问题,我们可以采用的套路,就是防抖和节流了。函数防抖简单来说,就是触发事件后,在没有再次触发事件的一段时间(n秒内)函数只能执行一次。具体流程如下:否是判断n秒内是否有将执行函数将它设为将执行函数放弃之前的...原创 2020-05-08 00:31:38 · 252 阅读 · 0 评论 -
怎么完成一个无尽的长列表
DOM节点本身并非耗能大户,但是也不是一点都不消耗性能,每一个节点都会增加一些额外的内存、布局、样式和绘制。如果一个站点的DOM节点过多,在低端设备上会发现明显的变慢,如果没有彻底卡死的话。同样需要注意的一点是,在一个较大的DOM中每一次重新布局或重新应用样式(在节点上增加或删除样式所触发的过程)的系统开销都会比较昂贵。所以进行DOM回收意味着我们会保持DOM节点在一个比较低的数量上,进而加快上面...原创 2020-05-07 00:41:58 · 1544 阅读 · 0 评论 -
浅度和深度拷贝
浅拷贝:只复制指向某个对象的指针,而不是复制对象本身,新旧对象还是共享同一块内存。这不是真正的拷贝,你不是真正的自我深拷贝:另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会影响原对象。突然的自我接下描述三种拷贝方式,嗯。。。拷贝方式一、JSON.parse(JSON.stringify(obj))非常的简单,深度拷贝,就这一行,当然戳手可得的东西总是藏着很...原创 2020-04-23 18:46:20 · 208 阅读 · 0 评论 -
chrome80后默认禁用第三方cookie,本地无法跨域调试怎么办
具体原因可以看下这篇文章,chrome80后默认禁用第三方cookie,在本地调试时是跨域请求,请求时的cookie就无法带上了,所以很带来很多麻烦。下面说解决方法:回退Chrome版本,这个方法我没有采用,但也是可行的在Chrome中打开新的标签页chrome://flags/搜索cookie,禁用SameSite by default cookies 和 Cookies without...原创 2020-03-31 15:56:54 · 1812 阅读 · 0 评论 -
为什么需要知道JavaScript的Number类型的精度问题
JavaScript的Number类型在我们平时写脚本的时候随处可见,但是因为前端对精度的要求不高,虽然不常见,但是有时也会碰到0.1+0.2!=0.3的情况,如果你不了解Number,可能就需要浪费很久事件去找bug。什么你没遇见过,不敢兴趣,了解下呗,防患于未然(虽然DUCK不必),面试会问到啊,看嘛,我讲快点(╥╯^╰╥)Number类型在js里,它是个双精度浮点数,用二进制来表示,就是...原创 2020-03-24 13:49:50 · 1844 阅读 · 0 评论 -
第三方cookie是如何窥视你的?
最近,关于 Cookie,发生了 Chrome80 屏蔽第三方 Cookie 的事件。第三方cookie会被屏蔽,是因为泄露用户隐私,导致被跟踪。举个例子,你在百度如何防止脱发,看CDSN是侧边就会有个脱发广告,曾有一段时间我的CDSN侧边老是出现肾虚治疗的广告位,我也不知道跟踪啥得出来的,明明我是个女孩纸。淘宝,优酷,爱奇艺等等也会出现这样的情况,你在一个网站看了一个东西吧,另一个网站就狂给你推...原创 2020-03-23 17:20:50 · 3204 阅读 · 1 评论 -
angular拦截器的使用(缓存)
什么是拦截器回归今天的主题, 我建议大家主要是去看官方文档的拦截请求和响应,跳到顶部,可以下载官方例子源码的。拦截器就是在发送请求给服务器之前,拦截请求,隐式进行处理。也可以在接受服务器的响应之后,拦截响应,隐式进行处理。简单的应用就像官方说的,记日志,缓存等等,我也用其...原创 2019-11-30 16:00:07 · 485 阅读 · 0 评论 -
JavaScript闭包产生的问题
Js闭包在循环中局部变量i,只保存最后一个i的值,在循环中的function函数里如果要使用i,把i存下来,例如[html] view plainvar Lis=document.getElementsByTagName("li"); for (var i = 0; i Lis.length; i++) { Lis[原创 2016-03-18 16:15:45 · 285 阅读 · 0 评论 -
轮播图
注意,记得改图片链接原创 2017-10-26 11:11:36 · 371 阅读 · 0 评论 -
JavaScript可变长数组
var array = []array[array.length] = 'dsa'for(var i = 0; i < 5;i ++){ array[array.length] = '我在增长'}原创 2017-11-13 22:18:23 · 5417 阅读 · 0 评论 -
NVM的安装
NVM工具 Node Version Manager(Node版本管理工具)由于以后的开发工作可能会在多个Node版本中测试,而且Node的版本也比较多,所以需要这么款工具来管理安装操作步骤下载:nvm-windows解压到一个全英文路径编辑解压目录下的settings.txt文件(不存在则新建)root 配置为当前 nvm.exe 所在目录path 配置为 node 快捷方式所在的目转载 2017-11-14 13:52:30 · 1298 阅读 · 0 评论 -
通过子div覆盖父div的border-bottom
边框border Document div{ width: 300px; height:300px; border-原创 2016-03-14 18:18:20 · 5486 阅读 · 0 评论 -
复制Dom元素
function copyAttributes (from, to, opts) { var attr, _i, _len, _ref, _ref1, _results; if(!Array.isArray(opts)){ console.error("copyAttributes的第三个参数必须为数组") opt...原创 2018-10-27 14:15:00 · 1052 阅读 · 0 评论 -
JavaScript图片数据转换
JavaScript图片数据转换以下代码使用TypeScript书写,小幅度修改即可JavaScript使用图片转换成BlobBlob public saveToBlob(imgDom:HTMLImageElement):Blob{ let canvas:HTMLCanvasElement = document.createElement('canvas'); ...原创 2018-11-05 15:25:49 · 1718 阅读 · 0 评论 -
自定义编写Typescript的npm包
参考文章tsconfig.json详细解析第三方扩展库以下代码github地址点这里目录如下先npm init,接着配置package.json使用tsc来编译文件,编译配置在tsconfig.json里,命令行tsc回车就会生成dist下的文件编写index.d.tsexport * from './dist/scale'npm安装使用由于我是离线安...原创 2018-11-13 14:50:56 · 1754 阅读 · 0 评论 -
JS下载文件的三种方法
因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法:利用HTML download 属性 var a = document.createElement('a'); //需要下载的数据内容,我这里放的就是BLOB,如果你有下载链接就不需要了 var url = wi...原创 2019-01-11 17:57:25 · 28679 阅读 · 0 评论 -
无上边框出现的问题
今天学习css出现一个问题记录一下下面div无边框是这样,原本上方有边框连在一起下面div内嵌div这是因为内嵌的div有margin-top,当上边框没有时,这外边距应用到与标题div的间距测试代码 边框问题 标题: 下面div嵌套的div (刚开始自学的,不对的地方望指正!!!)原创 2016-03-15 15:47:19 · 498 阅读 · 0 评论