JS
文章平均质量分 64
yolanda__xiaoxiao
爱民谣的前端小妹,欢迎关注微信公众号“筱筱日记”,若没及时回复私信,可添加微信号“yolanda__xiaoxiao”
展开
-
微任务,宏任务,DOM渲染的执行顺序
event loop过程同步代码,一行一行放在Call Stack执行遇到异步先记录下来,等待时机(定时,网络请求)时机一到立马推入Callback Queue中如Call Stack为空(同步代码执行完毕),Event Loop开始工作轮询查找Callback Quque,有则移动到Call Stack中执行然后继续轮询查找例1console.log(100)setTimeout(() => { console.log(200)}, 5000);console.lo原创 2021-01-11 11:26:43 · 5473 阅读 · 10 评论 -
解决百度地图内存泄露问题
百度地图内存泄露问题百度地图中,我们会遇到循环创建marker点时内存占用不停上涨导致页面直接崩掉。或者数据量过大页面渲染CPU占用过高导致页面卡死。如图:需求实例:使用百度地图展示车辆的位置,并且30s刷新一次位置信息。面对这样的需要,展示车辆的位置,每一个车辆需要一个Marker点,车辆太对需要考虑聚合,代码实现如下:const clustererInstance = null...原创 2020-04-22 17:51:46 · 4745 阅读 · 0 评论 -
筱筱日常踩坑笔记
new Date()在IOS中的坑我们平时的在工作中,创建一个指定时间的new Date对象时,通常的做法是new Date('2019-10-19 12:40');然后根据这个对象获取年月日等信息。我们发现这种方式在chrome,firefox,Android中使用都没有问题。但是在IOS中就会出问题,在IOS中使用这种方式创建时间对象,返回的值是valid Date(无效值)。因为...原创 2019-10-31 18:32:57 · 295 阅读 · 0 评论 -
基于Vue的日程排班表 - common-schedule
common-schedule基于Vue的日程排班表,根据不同的时间显示粒度设置granularity的值,支持年/月/日/小时安装npm install common-schedule实用场景为车辆添加班线计划实现代码设置粒度为day<commonSchedule start="2019-08-01 07:00:00" end="2019-8-31...原创 2019-08-24 10:28:01 · 16022 阅读 · 6 评论 -
浅谈requestAnimationFrame
背景在Web应用中,实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout或者setInterval 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的API,那就是 requestAnimationFrame,顾名思义就是请求动画帧。但...转载 2019-07-01 16:39:06 · 448 阅读 · 0 评论 -
筱筱笔记:npm发包流程
npm发包流程我们在开发过程中,为了开发便利,可以下载别人已经封装好了的npm包,那么如何创建自己的npm包呢?第一步:创建账号我们想要发布自己的npm包,首先需要在npm网站上去注册一个账号npm网站地址:https://www.npmjs.com/npm网站注册地址:https://www.npmjs.com/signup注册完后,在电脑端登陆,输入注册时填写的用户名和密码,邮箱...原创 2019-06-03 17:22:46 · 321 阅读 · 0 评论 -
vue-cli脚手架打包的静态资源请求出错
vue-cli脚手架打包的静态资源请求出错问题vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。静态资源打包使用相对路径后css文件引入大图片路径错误问题使用vue-cli2脚手架生成的默认打包配置文件,npm run build打包,部署项目到特定路径下://ip:port/test/index.html此时访问//ip:port/test/index.html可以...原创 2019-06-05 18:04:53 · 431 阅读 · 0 评论 -
微信内置浏览器私有接口WeixinJSBridge介绍
微信浏览器私有接口WeiXinJsBridge,大致有以下几个有用的知识点:分享给好友分享到朋友圈分享到微博隐藏下方工具栏隐藏微信右上角分享按钮(三个小圆点)关闭浏览器回到公众号对话窗口WeiXinJsBridge的分享函数WeiXinJsBridge的分享函数分为分享给好友,分享到朋友圈,分享到微博,但是这三种分享都是在下面在个函数内部实现的。function sendMe...原创 2019-04-16 16:19:17 · 36572 阅读 · 4 评论 -
['1','2','3'].map(parseInt)返回结果是什么?
[‘1’,‘2’,‘3’].map(parseInt)返回结果是什么?你的第一反应结果是不是[1,2,3],但是真正的结果是[1, NaN, NaN]。为什么呢?首先看一下数组中的map方法。map方法引入MDN的解释,map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。var arr = [1, 2, 3];var arr1 = arr.map(x...原创 2019-04-09 11:19:36 · 7163 阅读 · 1 评论 -
基于JS实现简单甘特图
基于JS实现简单甘特图最近同事求助到一个小小的需求,写一个时间甘特图,主要想表现一个车在一天的不同的时间点里,停靠的站点,先来看一下效果吧,这里的需求是从早上的5点为开始时间,到第二天到凌晨5点前期准备其实网上有很多甘特图的实现方式,但是他们都只能具象到天,不能具体到某个时间点,而且每一个具体的时间段中的描述是不能自定义的,所以准备自己写一下了。实现逻辑我们可以先模拟一些demo...原创 2019-02-28 16:43:19 · 14075 阅读 · 1 评论 -
简单总结浏览器缓存
浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行储存,当访问者再次访问同一页面的时候,浏览器可以直接从本地磁盘加载文档。为什么要使用浏览器缓存减少冗余的数据传输减少服务器负担,提升网站性能,加快客户端加载网页的速度提升用户体验浏览器缓存作为Web性能优化的重要方式之一,那么浏览器缓存的过程是怎么样的呢?浏览器缓存过程在浏览器第一次发起请求时,本地无缓存,向...原创 2019-01-14 19:45:25 · 162 阅读 · 3 评论 -
Fetch上传文件(不需要设置headers)
Fetch上传文件(不需要设置headers)最近在项目中有一个上传文件的需求,然后我使用了fetch进行文件上传,代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试fetch上传文件</title> &原创 2019-01-08 20:32:30 · 6266 阅读 · 2 评论 -
【每日一题】- 运算符优先级
你是否遇到过这样的面试题:var a = {n:1};var b = a;a.x = a = {n:2};console.log(a.x);console.log(b.x);输出的结果:a.x undefined;b.x {n:2}b不是和a一样指向的一个对象吗?为什么赋值以后a.x为undefined;而b.x为{n:2}呢?这里的关键是“.”是优先级最高的运算符;...原创 2019-01-11 18:48:11 · 205 阅读 · 0 评论 -
理解ES6中的TDZ(暂时性死区)
什么是TDZTemporal Dead Zone(TDZ)是ES6(ES2015)中对作用域新的专用语义。TDZ名词并没有明确地写在ES6的标准文件中,一开始是出现在ES Discussion讨论区中,是对于某些遇到在区块作用域绑定早于声明语句时的状况时,所使用的专用术语。let/const和var的区别在ES6之前,JS的scope只有两种,全局作用域和函数作用域,但是在ES6种出现了块级...原创 2019-01-05 20:04:04 · 614 阅读 · 0 评论 -
JS中的IIFE
IIFEIIFE: Immediately Invoked Function Expression,翻译过来就是立即调用的函数表达式。也就是说,在函数声明的同时立即调用这个函数。普通的函数声明和函数调用function bar() { var a = 10; console.log(a);}bar(); // 函数调用IIFE函数声明和调用(function f...原创 2019-01-04 20:06:26 · 1050 阅读 · 0 评论 -
你不知道的简单数组拷贝方法全解
在我们的日常工作中,经常会遇到一些把一个值赋给另一个值,简单数据类型我们可以直接用=的方式进行简单值拷贝,那么遇到数组或者对象这些引用类型的拷贝应该怎么做呢?接下来简单总结了一些数组的浅拷贝和深拷贝的方法浅拷贝【Shallow copy】concat()concat()方法主要用于数组的连接,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。var arr1 = [1,2,3,4...原创 2018-12-17 16:31:33 · 224 阅读 · 0 评论