Leanote's Blog

Category - JavaScript

js性能优化
2023-05-23 02:18:10    5    0    0

测试网站

  • jsperf
  • jsfiddle
  • JSBench
    执行并比较不同 JavaScript 代码片段的执行速度。 通过简单而简短的 URL 与他人在线共享和协作。

合并

测试条件 Chrome版本94.0.4606.81 Firefox版本93.0 (64 位)
Object.assign对象合并 14.07080078125 ms 12.11 ms
展开运算符对象合并 18201.126953125 ms 7424.69 ms
展开运算符数组加单个 42.848876953125 ms 877.14 ms
push方法数组加单个 0.489013671875 ms 0.89 ms
concat方法数组加单个 0.6640625 ms 2.40 ms
展开运算符两个大数组合并 38.1337890625 ms 43.64 ms
concat方法两个大数组合并 4.3740234375 ms 31.28 ms

性能测试结论

在循环比较多或者操作的数组长度比较大的情况下：

  1. Object.assign 多数情况下性能比 展开运算符(...) 的性能高
  2. 数组自带的方法 connat、push 性能比 展开运算符(...) 的性能高

小结

在 Chrome版本94.0.4606.81 、 Firefox版本93.0 (64 位) 的浏览器下

  • 对象合并，数组合并，Object.assign、connat 的性能会比 展开运算符“...” 的性能高
  • Object.assign 会触发 Proxy/Object.definedProperty 的 set 方法，展开运算符“...” 不会触发
  • Object.assign 和 展开运算符 都是浅拷贝
  • 合并对象、数组的时候，展开运算符放在前面的性能比放在后面的性能高
  • 不定参数(function (a, ...b) {})的时候，有自己的使用方式
  • 在拷贝的情况下, 展开运算符“...” 比 Object.assign 性能高
获取dom到body左侧和顶部的距离
2023-04-17 11:30:32    17    0    0

getBoundingClientRect方法简介

getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。
使用方法如下：

  1. let domToTop = dom.getBoundingClientRect().top  // dom 的顶边到视口顶部的距离
  2. let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
  3. let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
  4. let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离

注意事项：

  1. 得到的值是相对于视口而言的，即如果页面的滚动位置发生变化，那么得到的top、left也会发生变化；如果需要计算到body边框的距离，需要再加上网页滚动条的长度。下面会给出完整例子。
    这个方法返回的四个值都是相对于当前视口的左上角而言的。即top和bottom是dom的顶边和底边到视口的顶部的距离，同理left和right是相对于视口左边的距离。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box {
  8.             width: 110%;
  9.             height: 200%;
  10.             position: absolute;
  11.             top: 0;
  12.             left: 0;
  13.             border: 1px solid red;
  14.         }
  16.         .content {
  17.             width: 20%;
  18.
html转换成AST
2021-12-30 07:43:37    2    0    0

html转换成AST

想要的效果

  1. 输入:  let str ="<div><span>tests</span></div>"
  2. 输出 : {
  3.   tag: 'div',
  4.   children: [
  5.     {
  6.       tag: 'span'
  7.     },
  8.   ],
  9. }

实现

  1.       // 设置每个节点标签属性
  2.      // let attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
  3.       function parseTag(tag) {
  4.         let res = {
  5.           type: "tag",
  6.           name: "",
  7.           voidElement: false,
  8.           attrs: {},
  9.           children: [],
  10.         };
  11.         let tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
  12.         if (tagMatch) {
  13.           // 标签名称为正则匹配的第2项
  14.           res.name = tagMatch[1];
  15.           if (tag.charAt(tag.length - 2) === "/") {
  16.             // 判断tag字符串倒数第二项是不是 / 设置为空标签。 例子：<img/>
  17.             res.voidElement = true;
  18.           }
  19.         }
  20.         // 匹配所有的标签正则
  21.         let classList = tag.match(/\s([^'"/\s><]+?)\s*?=\s*?(".*?"|'.*?')/g);
  23.         if (classList && classList.length) {
  24.           for (let i = 0; i < classList.length; i++) {
  25.             // 去空格再以= 分隔字符串  得到['属性名称','属性值']
  26.
Promise循环依次执行ajax
2021-07-27 09:10:55    4    0    0 
  1. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  2. function promiseForEach(arr, cb) {
  3.     let realResult = []
  4.     let result = Promise.resolve()
  5.     arr.forEach((a, index) => {
  6.         result = result.then(() => {
  7.             if (typeof cb === "function") {
  8.                 return cb(a).then((res) => {
  9.                     realResult.push(res)
  10.                 })
  11.             }
  12.         })
  13.     })
  14.     return result.then(() => {
  15.         return realResult
  16.     })
  17. }
  18. promiseForEach(arr, (ele) => {
  19.     return new Promise((resolve, reject) => {
  20.         setTimeout(() => {
  21.             console.log(ele)
  22.             return resolve(ele)
  23.         }, Math.random() * 1000)
  24.     })
  25. }).then((data) => {
  26.     console.log("成功")
  27.     console.log(data)
  28. }).catch((err) => {
  29.     console.log("失败")
  30.     console.log(err)
  31. })
js常用工具函数
2021-06-09 02:10:33    5    0    0 
  1. /**
  2.  * 复制文本
  3.  * @param text
  4.  */
  5. export function copyText(text) {
  6.     const input = document.createElement("input")
  7.     input.value = text
  8.     document.body.appendChild(input)
  9.     input.select()
  10.     document.execCommand("Copy")
  11.     window.setTimeout(function () {
  12.         document.body.removeChild(input)
  13.     }, 0)
  14. }
  16. /**
  17.  * esc监听全屏
  18.  */
  19. export const listenfullscreen = (callback) => {
  20.     function listen() {
  21.         callback()
  22.     }
  24.     document.addEventListener("fullscreenchange", function () {
  25.         listen()
  26.     })
  27.     document.addEventListener("mozfullscreenchange", function () {
  28.         listen()
  29.     })
  30.     document.addEventListener("webkitfullscreenchange", function () {
  31.         listen()
  32.     })
  33.     document.addEventListener("msfullscreenchange", function () {
  34.         listen()
  35.     })
  36. }
  37. /**
  38.  * 浏览器判断是否全屏
  39.  */
  40. export const fullscreenEnable = () => {
  41.     return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
  42. }
  43. /**
  44.  * 浏览器全屏
  45.  */
  46. export const re
javaScript toFixed()四舍五入失真
2021-05-21 10:16:17    13    0    0 
  1. Number.prototype.toFixed = function (n) {
  2.     if (n != undefined && (isNaN(n) || Number(n) > 17 || Number(n) < 0)) {
  3.         throw new Error("输入正确的精度范围");
  4.     }
  5.     // 拆分小数点整数和小数
  6.     var num = this;
  7.     var f = '';
  8.     if (Number(num) < 0) {
  9.         num = -Number(num);
  10.         f = '-';
  11.     }
  12.     var numList = num.toString().split(".");
  13.     // 整数
  14.     var iN = numList[0];
  15.     // 小数
  16.     var dN = numList[1];
  17.     n = parseInt(n);
  18.     if (isNaN(n) || Number(n) === 0) {
  19.         // 0或者不填的时候，按0来处理
  20.         if(dN === undefined){
  21.             return num + '';
  22.         }
  23.         var idN = Number(dN.toString().substr(0, 1));
  24.         if (idN >= 5) {
  25.             if (Number(iN) < 0) {
  26.                 iN = Number(iN) - 1
  27.             } else {
  28.                 iN = Number(iN) + 1
  29.             }
  30.         }
  31.         return iN + '';
  32.     } else {
  33.         var dNL = dN === undefined ? 0 : dN.length;
  34.         if (dNL < n) {
  35.             // 如果小数位不够的话，那就补全
  36.             var oldN = num.toString().ind
3种方法实现CSS隐藏滚动条并可以滚动内容
2019-11-14 07:46:32    4    0    0
参考: http://caibaojian.com/hide-scrollbar.html
Array.apply使用技巧
2019-11-14 07:46:32    5    0    0
- Array.apply(null, {length: 20}) - 参考: https://segmentfault.com/a/1190000011435501 - `map函数并不会遍历数组中没有初始化或者被delete的元素（有相同限制还有forEach, reduce方法）`
js如何判断当前文本的输入状态——中文输入法的那些坑
2019-11-14 07:46:32    13    0    0
> 参考: https://blog.csdn.net/handsomexiaominge/article/details/80977402
web前端各浏览器兼容性问题(干货，亲测有效)
2019-11-14 07:46:32    7    0    0
> 参考: https://blog.csdn.net/weixin_41830601/article/details/79908597
1/2
Proudly powered by Leanote