随笔分类 - JavaScript集合
摘要：深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系 前言 关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题： 每一轮 Event Loop 都会伴随着渲染吗？ requestAnimationFrame 在哪个阶段执行，在渲染前还是后
阅读全文
摘要：原理： 由于Promise内部实现中，是否resolve由内部成功数组的长度和传入数组的长度进行比较的，那么在给失败的Promise在catch的时候返回一个reolve状态就可以啦。 上代码： 正常失败情况： let p1 = new Promise((resolve, reject) => {
阅读全文
摘要：前言 如果让你手写async函数的实现，你是不是会觉得很复杂？这篇文章带你用20行搞定它的核心。 经常有人说async函数是generator函数的语法糖，那么到底是怎么样一个糖呢？让我们来一层层的剥开它的糖衣。 有的同学想说，既然用了generator函数何必还要实现async呢？ 这篇文章的目的
阅读全文
摘要：/* eslint-disable @tuya-fe/i18n-detection */ import moment from 'moment' const defaultFormat = 'YYYY-MM-DD' // 获取时间格式: 毫秒 export const formatDate = (
阅读全文
摘要：// 校验手机号 严格 export const StrictMobileReg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$
阅读全文
摘要：在小程序使用dayjs的时候，遇到报错： Aray size is not a small enough positive integer 由于部分手机兼容性问题，在使用dayjs构建日期数据对象时，使用new Date() 会引发意想不到的异常，所以如下代码： dayjs(new Date(‘20
阅读全文
摘要：1、体积过大的原因： 当你在代码中写了 var moment = require('moment') 然后再用webpack打包, 打出来的包会比你想象中的大很多，因为打包结果包含了各地的local文件。 2、优化方案： （1）IgnorePlugin插件 IgnorePlugin的原理是会移除mo
阅读全文
摘要：1、何为观察者模式？ 观察者模式，又可以称之为发布-订阅模式，观察者，顾名思义，就是一个监听者，类似监听器的存在，一旦被观察/监听的目标发生的情况，就会被监听者发现，这么想来目标发生情况到观察者知道情况，其实是由目标将情况发送到观察者的。 观察者模式多用于实现订阅功能的场景，例如微博的订阅，当我们订
阅读全文
摘要：首先，我们先来看看 👀 雅虎军规 的 35 条。 尽量减少 HTTP 请求个数——须权衡 使用 CDN（内容分发网络） 为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。 避免空的 src 和 href 使用 gzip 压缩内容 把 CSS 放到顶部 把 JS 放到
阅读全文
摘要：Gulp和Webpack对比 在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5
阅读全文
摘要：直接粘代码，如果发现Jquery引入出错了，更新一下Jquery CDN链接。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; pa
阅读全文
摘要：1、思路： 因为offsetTop、scrollTop等不属于css属性，所以这些无法用css动画或过度来实现。首先想到的是使用position + top 定位结合 transition 来实现。 2、效果： 3、原生代码： <!DOCTYPE html> <html lang="zh"> <he
阅读全文
摘要：概念： 为什么是16.67毫秒： 这个根据浏览器刷新帧率来定，大多数浏览器的刷新帧率是60Hz，所以1/60 = 0.0166666... (秒)= 16.67(毫秒) 如果一个任务耗时很长，那么时间用完后会中断该任务吗？ 不会中断该任务，一直到执行完毕为止，所以如果单个任务耗时很长，那么也会造成卡
阅读全文
摘要：offsetWidth：返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight ：返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth ：返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight：返回元素的高度（
阅读全文
摘要：利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因： setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 s
阅读全文
摘要：条件语句如'if'语句使用强制`ToBoolean'抽象方法来评估它们的表达式，并且始终遵循以下简单规则： Objects 计算成 true Undefined 计算成 false Null 计算成 false Booleans 计算成 the value of the boolean Number
阅读全文
