
前端
文章平均质量分 71
此处放关于html/css/js原生开发的一些东西或插件
荒男
不忘初心
展开
-
数组循环的性能问题
测了一下数组循环性能,发现性能差距还是很大的,在数据量过大的时候,采用自带的api,会耗费更多的性能问题,然后做了一个总结。如果对于业务代码,数据量处理不大的话,这个性能大家可以忽略不计。毕竟api的使用,可以使代码可读性更高。因为做3D,为了保证每秒60桢的性能,一桢所有代码的处理时间不能超过16ms,因此对于api的使用会更加严谨。目前只跟针对for,map,foreach,reduce这四个api做测试测试代码如下:本次仅仅是简单测试,如果业务复杂的话,建议直接套用自己的处理逻辑临界数据没有体原创 2022-10-02 23:19:43 · 839 阅读 · 1 评论 -
学习3D前需要了解的一些基础
学习3D前需要了解的一些基础知识方向我使用的是three.js来实现3D,对于three的3D来说,橙色是X轴,绿色是Y轴,蓝色是Z轴,记住:左z右x朝上y,当我们确定方向的时候,我们脑中就很好的形成一个几何图形注意:如果我们引入建模师的建模,那么方向也以建模师设计的方向为主顶点任何的几何图形都有顶点,举个简单的2D例子,一个三角形,那么三角形的三个角就是它的顶点,我们通过3个点一组,表示一个顶点的xyz坐标,那么久就可以形成一个面,如下图所示立方体几何体本质上就是一系列的顶点构成,每个面至原创 2022-03-13 21:06:31 · 2552 阅读 · 0 评论 -
uni-app小程序图片v-html自适应问题
自适应前言解决办法效果展示补充前言用v-html渲染富文本框,发现小程序图片没有办法自适应采用css去修改,发现不生效img{ width: 750upx!important;}解决办法uni的v-html转换成小程序是rich-text标签,则我们直接使用rich-text来实现富文本的渲染<rich-text :nodes="details.newsConten | filtersRichText"></rich-text>我们使用过滤器来把img的标签拿原创 2022-01-20 15:30:57 · 2879 阅读 · 3 评论 -
前端算法——关于简单的渲染功能
做了一个关于简单渲染的功能let template = "this is {{name}} and I'm {{age}} years old and i'm {{sex}}"let data = { name: '小明', age: 18, address: 'BeiJing'}// 实现render(template, data) // 使得打印出 "this is 小明 and I'm 18 years old and i'm undefined"let templa原创 2021-12-24 09:15:22 · 608 阅读 · 0 评论 -
前端性能优化之——CDN优化加载
问题:在首开体验中,会觉得特别慢分析:原因很多,其中一个原因是首开时需要加载很多的js和css文件,这是因为在Vue项目中,引入到工程中的所有js、css文件,我们编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。解决方法:将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来(既外部的库文件原创 2021-12-17 14:36:26 · 5121 阅读 · 2 评论 -
前端性能优化之——浏览器http请求并发
什么是hhtp请求并发随着现在的网页设计的越来越炫酷,功能越来越丰富。伴随着的是网页加载的资源越来越多,常常一个页面加载的CSS、JS、图片、接口等超过几十上百个。但其实,在客户端,浏览器并不一定会对每个资源开个连接去请求加载,是有并发限制的总的来说:同一域名下,同一GET请求的并发数是1,也就是说上一个请求结束,才会执行下一个请求,否则置入队列等待发送;同一域名下,不同GET/POST请求的并发数量是6。当发送的请求数量达到6个,并且都没有得到响应时,后面的请求会置入队列等待发送。这其实是原创 2021-12-17 13:23:11 · 7196 阅读 · 0 评论 -
小程序开发框架比较
1、小程序为什么那么流行小程序开发算是这几年的流行趋势了,他为什么那么受欢迎呢?我们可以从几方面来分析成本低:相对于app来说,小程序开发成本低很多,一般公司都能接受客户体验好:微信小程序无需申请注册,在微信里面检索就可以开启,能够使用微信一键登录,给客户给予了便捷;并且无需安装顺应潮流:现阶段各种互联网大佬陆续发布微信小程序作用,都是在合理布局挪动网络平台平台客户群体大:一般大家称呼小程序都是只微信小程序,是因为微信的客户群体基数大,覆盖范围广2、小程序比较小程序的开发框架发展到现在也五原创 2021-12-01 18:47:41 · 1135 阅读 · 0 评论 -
前端:如何玩转自己的npm包
注册账号npm adduserUserName: zoeEmail: xxxzoe@163.com登录npm如果有账号,可直接登录:npm login确定是否登录成功:npm whoami初始化npm新建文件夹:mkdir silder-verify进入文件夹:cd slider-verify初始化:npm init注意:填写package name时,一定要在npm官网查一下是否重名,如果重名,将无法publish初始化npm上传npm publish上传成功后续每次更新原创 2021-11-19 15:14:38 · 913 阅读 · 0 评论 -
你可能还不知道的很酷JavaScript特性:如何优雅的编写代码
var a = null//console.log(a.name) //报错console.log(a?.name) //undefineda = {name:'zsf'}console.log(a?.name) //zsf在这里插入代码片原创 2021-11-11 17:32:00 · 869 阅读 · 0 评论 -
数组Array常用方法汇总+实战
数组Array常用方法汇总一.JavaScript中创建数组的方式二、数组方法概括三、方法详解一.JavaScript中创建数组的方式(1)使用 Array 构造函数:var arr1 = new Array(); //创建一个空数组var arr2 = new Array(15); // 创建一个长度为15的数组var a = new Array([15]); //指创建一个数组,长度为1,并且第一位是15var arr3 = new Array("sf","zs","zsf"); // 创建原创 2021-11-02 11:33:38 · 1468 阅读 · 1 评论 -
无需证书微信小程序实现人脸识别—E证通
E证通前言收费标准接入准备小程序1、 添加服务器域名白名单2、添加业务域名白名单3、安装 SDK/小程序包4、SDK 调用步骤即实操代码4.1、初始化 SDK4.2、 调用 SDK5、拿到回调结果6、使用uni-app开发6.1、小程序运行后,在小程序中丢入sdk包6.2、把sdk包转换成uni-app代码前言微信小程序自开发人脸识别,有很大的限制,主要在于公司资质。有没有不用资质就接入人脸识别,有的,腾讯E证通,该服务目前只向已完成企业实名认证的腾讯云用户开放,使用E证通服务前需要您注册腾讯云账号并原创 2021-10-28 10:03:16 · 6648 阅读 · 1 评论 -
使用axios实现文件流下载的安全问题
为什么要使用axios来下载文件?这涉及到安全问题,我们平时下载文件,一般都是使用window.location.href来实现,即我们打开网站,只要输入对应的下载接口都可以实现下载。例如:https://www.baidu.com?id=123,别人运用爬虫修改id的值,就可以获取到服务器的所有下载数据,因此我们需要加上一些权限校验安全方式安全方式我们考虑了几种实现方式(总体来说权限校验的重点还是token)对id进行加密处理(id+token加密)请求头带上token对id进行加密处理原创 2021-09-28 16:35:50 · 1454 阅读 · 0 评论 -
手把手教你写自动化路由
这里写目录标题前言思路使用node实现自动化router使用webpack实现自动化router前言在中大型项目中,每次新建页面都要去router文件中添加对应的router对象,会觉得特别麻烦,而且多人开发还不好方便维护,甚至当router层级发生变化的时候,可能要重写整个router对象数组,因此我们需要一个自动化router自动化router的最大好处:前端只需要专注写代码即可,无需关注路由的router文件中的router.js思路在vue中,router.js必须的写法{ path:原创 2021-09-09 15:38:04 · 2142 阅读 · 2 评论 -
Moment.js常见用法总结
时间插件引用常用的方法moment()获取get格式format设置subtract开始startOf()结束endOf()总天数Days in Month时间措关于ant选择时间的实战Moment.js是一个轻量级的js时间处理类库,其使用简单,方便了日常开发中对时间的操作,提高了开发效率。引用npm install moment常用的方法moment()获取当前的日期和时间moment()获取String的日期和时间moment(String)获取get获取当原创 2021-09-02 11:54:36 · 17211 阅读 · 2 评论 -
js关于url的解析和拼接
这里写目录标题前言思路1、理解url2、解析url2.1、全量解析前言我们经常会遇到需要自己解析url地址,或者是自己拼接url,因此我们需要一个专门对url处理的js思路1、理解urlurl有6部分组成例如:https://blog.youkuaiyun.com/weixin_43236062/article/details/109065450?id=1&name=huangnan 协议:常见的协议有两种,一种是http 一种是https 后面接://域名/ip:blo原创 2021-08-24 11:19:55 · 8236 阅读 · 1 评论 -
一道关于async神奇的测试题
问大家x的输出是什么。代码如下:let x = 0;async function test() { x+= await 2; console.log(x);}test();x += 1;console.log(x)看到这里我想,这不就是在考microTask和marcoTask吗?那么答案应该不难,执行顺序是这样的:先执行test函数,test函数中直接就进入到x+=await 2了,那么放到microTask中执行x+=1执行console.log(x),输出结转载 2021-08-03 15:07:07 · 172 阅读 · 0 评论 -
file、bolb、base64图片之间的相互转化
目录前言思路上传图片fileblobbase64图片压缩使用canvas压缩图片*代码base64转file*代码base64转blob*代码blob转base64*代码blob转file*代码file转bse64*代码前言基于uni-app开发公众号H5的上传图片并压缩的方法思路上传图片我们要清楚,图片的展示方式有三种:分别为file(文件流)、bolb(本地流)、base64(二进制流)fileFile 接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。通常情况下原创 2021-06-01 15:00:49 · 2120 阅读 · 1 评论 -
自我理解js执行顺序——附件练习题和自我解析的答案
目录前言js执行顺序微任务宏任务练习1练习2练习3前言现在每次文章开篇必前言,今天中午公司前端组发了一道题,当时面试也看过,没总结,导致看到题目知道是js执行顺序,并且包括宏任务,微任务,但是答案确差了很远,因此再次总结一下js执行顺序我们知道,js是一条流水线,没有多余的分支,而且是从上往下执行。原理是v8引擎是用来解析js的,因为v8引擎是单线程所以导致js也是单线程的,此时你会有疑问:但是我们所认识的定时器不是“多线程”吗?实际上定时器是假的‘多线程’。 这个问题留到后面你就知道了在v8原创 2021-03-19 15:00:09 · 2357 阅读 · 7 评论 -
node安装在d盘,安装nodemon后,在命令窗口输入nodemon -v提示不是内部命令也不是外部命令
先为自己的粗心打一下此处是为了解决nodejs安装在d盘而非c盘的情况下:当初安装node.js的时候,并没有修改npm路径,导致运行npm i -g nodemonnodemon并没有安装在node.js下面,全局安装后,可在下面文件查看node_cache和node_global是否空空如也如果为空,这npm的下载路径并没有配置,此时我们需要配置指定的下载路径,在命令终端处,输入以下两条命令npm config set prefix “D:\Program Files\nodejs\no原创 2020-09-30 15:42:09 · 4151 阅读 · 0 评论 -
ES11(ES2020)中Javascript 10 个新功能
1、BigIntBigInt,Javascript 中最期待的新功能终于落地。它允许开发者在 JS 中使用更大的整数进行数据处理。之前,Javascript 中最大的整数是2^25 - 1。但是,BigInt 不受此限制。BigInt是在数字后面加上n,这个n说明他的类型是BingInt,而不是Number;2、动态引入Javascript 的动态引入,允许你把 JS 文件作为一个模块动态的引入到你的应用中。这就像你使用 webpack 和 Babel 一样。这个功能可以帮助你处理按需加载的代原创 2020-09-15 11:02:33 · 471 阅读 · 0 评论 -
前端实时通信的8种方式及其优缺点和实现方式
1.短轮询短轮询的原理很简单,每隔一段时间客户端就发出一个请求,去获取服务器最新的数据,一定程度上模拟实现了即时通讯。优点:兼容性强,实现非常简单缺点:延迟性高,请求中有大半是无用,非常消耗带宽和服务器资源,影响性能,2.cometcomet有两种主要实现手段,一种是基于 AJAX 的长轮询(long-polling)方式,另一种是基于 Iframe 及 htmlfile 的流(streaming)方式,通常被叫做长连接。具体两种手段的操作方法请移步Comet技术详解:基于HTTP长连接的Web原创 2020-08-03 12:07:28 · 9331 阅读 · 0 评论 -
CSS: hover选择器的使用详解
统一代码:<html><body><style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : ...原创 2020-01-09 10:27:58 · 1355 阅读 · 0 评论 -
GitHub开源的10个超棒后台管理面板(转)
目录1、AdminLTE2、vue-Element-Admin3、tabler4、Gentelella5、ng2-admin6、ant-design-pro7、blur-admin8、iview-admin9、material-dashboard10、layui项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、样式丰富的后台管控面板,深夜学习简书上一位...转载 2019-12-06 14:16:47 · 329 阅读 · 0 评论 -
git命令行汇总和使用教程
git命令行汇总上传/常用的命令行内容git clone http://www.xxx.com/aaa/bbb从服务器上将代码给拉下来git pull本地与服务器端同步git add .添加所有文件到暂存区git commit -m “xxx”添加xxx信息git push将本地分支推送到服务器上去。常用的命令行内容...原创 2019-12-02 10:31:51 · 353 阅读 · 0 评论 -
Excel表格转换成web(html)
推荐一个比较好用的转换的网页:登录网页http://www.docpe.com/excel/excel-to-html.aspx选择文件,并点击转换此时,转换下面会出现打开文件和下载文件:打开文件:是直接跳转网页,可以预览效果下载文件:把文件放到自己想存放的文件里,里面是表格的html格式...原创 2019-08-02 14:43:59 · 6659 阅读 · 4 评论 -
关于使用content-base出错的问题
关于使用content-base出错的问题问题:执行 npm run dev的时候“dev”: “webpack-dev-server --open --port 3000 --content-base src --hot”出错解决方案:在新版本的 webpack-dev-server 中,因为取消了 content-base 参数,所以把 content-base src删掉就行,或...原创 2019-06-06 14:24:07 · 1295 阅读 · 0 评论 -
关于点击以后hover失效问题
关于点击以后hover失效问题今天遇到点击事件触发以后,hover失效的问题,解决办法如下:直接使用!important ul li:hover{ border: 1px solid #FEA015!important; background-color: #FEA015!important; color: #FFF!important; cursor: po...原创 2019-03-28 14:34:45 · 1235 阅读 · 0 评论