第四节 js代码优化

最新推荐文章于 2021-11-13 19:25:42 发布
最新推荐文章于 2021-11-13 19:25:42 发布
阅读量185 收藏
点赞数
分类专栏： javaScrip性能优化 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30732045/article/details/109923226
版权

第四节 js代码优化

文章内容输出来源：拉勾教育Java高薪训练营

1. 简介

  • 如何精准测试javaScript性能
    • 本质上就是采集大量执行赝本进行数学统计和分析,从而得出一个比对的结果
    • 使用基于Benchmark.js的https://jsperf.com完成
  • 使用流程
    • 填写详细的测试用例信息(title,slug)

image.png

  • 填写准备代码(DOM操作时经常使用)

image.png

  • 填写必要有setup(准备工作)与teardown(结束时的销毁工作)代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e5oKQPNk-1606014064001)(https://cdn.nlark.com/yuque/0/2020/png/222679/1590720754921-7109d510-f17e-41ec-ac64-5936b610ea97.png)]
重点是测试代码对比的片段
image.png

2. 慎用全局变量

  • 全局变量定义在全局执行上下文,是所有作用域链的顶端
    • 如果作用域链层级比较深,一层层往上找比较耗时
  • 全局执行上下文一直存在于上下文执行栈,直到程序退出
    • 如果放到全局,则GC会一遍一遍的扫描,浪费时间
  • 如果某个局部作用域出现了同名变量则会遮蔽或污染全局
var i ,str = ''
for (index = 0; index < 1000; index++) {
  str += index
}

let str = ''
for (let index = 0; index < 1000; index++) {
  str += index;

}

image.png

3. 缓存全局变量

将大量采用全局变量缓存起来,提高使用效率

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn1">add</button>
  <button id="btn2">add</button>
  <button id="btn3">add</button>
  <p>123</p>
  <button id="btn4">add</button>
  <button id="btn5">add</button>
  <button id="btn6">add</button>
  <p>456</p>
  <button id="btn7">add</button>
  <button id="btn8">add</button>
  <button id="btn9">add</button>
  <script>
      function getBtn() {
        let btn1 = document.getElementById('btn1')
        let btn3 = document.getElementById('btn3')
        let btn5 = document.getElementById('btn5')
        let btn7 = document.getElementById('btn7')
        let btn9 = document.getElementById('btn9')
      }
      function getBtn2() {
        let obj = document
        let btn1 = obj.getElementById('btn1')
        let btn3 = obj.getElementById('btn3')
        let btn5 = obj.getElementById('btn5')
        let btn7 = obj.getElementById('btn7')
        let btn9 = obj.getElementById('btn9')
      }
  </script>
</body>
</html>

准备代码中放入body的内容,不包括脚本
image.png
image.png

4. 通过原型对象添加附加方法

var fn1 = function () {
  this.foo = function() {
    console.log('11111');
  }
}
let f1 = new fn1()

var fn2 = function() {}
fn2.prototype.foo = function() {
  console.log('11111');
}

let f2 = new fn2()

image.png

5. 避开闭包陷阱

闭包使用不当会造成内存泄漏

function test(func) {
  console.log(func());
} 
function test2(){
  var name = 'log'
  return name
}

test(function(){
  var name = 'log'
  return name
})

test(test2)

image.png

6. 避开属性访问方法使用

  • js不需要属性的访问方法,所有的属性都是外部可见的
  • 使用属性访问方法只会增加一层重定义,没有访问的控制力

image.png

function Person() {
  this.name = 'xiaoming'
  this.age = 18
  this.getAge = function() {
    return this.age
  }
}
const p1 = new Person()
p1.getAge()


function Person() {
  this.name = 'xiaoming'
  this.age = 18
}
const p1 = new Person()
p1.age

7. For循环优化

缓存数组的长度

var array = []
array[10000] = 'test'

for (let index = 0; index < array.length; index++) {
  console.log(array[index]);
}

let length = array.length
for (let index = 0; index < length; index++) {
  console.log(array[index]);
}

for (let index = array.length -1; index >= 0 ; index--) {
  console.log(array[index]);
}

image.png

8. 选择最优的循环方式

for / forEach / forin 三个遍历方式,那个更优

var array =  [1,2,3,4,5]
array.forEach(item => {
  console.log(item);
})
for (let index = array.length -1; index >= 0 ; index--) {
  console.log(array[index]);
}
for (const index in array) {
  console.log(array[index]);
}

image.png

9. 文档碎片优化节点添加

使用const fragEle = document.createDocumentFragment()创建节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    for (let index = 0; index < 10; index++) {
      var op = document.createElement('p')
      op.innerHTML = i
      document.body.appendChild(op)

    }
    const fragEle = document.createDocumentFragment()
    for (let index = 0; index < 10; index++) {
      var op = document.createElement('p')
      op.innerHTML = i
      fragEle.appendChild(op)
    }
    document.body.appendChild(fragEle)
  </script>
</body>
</html>

image.png

10. 克隆优化节点操作

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="box1">old</p>
  <script>
    for (let index = 0; index < 3; index++) {
      var op = document.createElement('p')
      op.innerHTML = index
      document.body.appendChild(op)

    }
    const oldP = document.getElementById('box1')
    for (let index = 0; index < 3; index++) {
      var newP = oldP.cloneNode('p')
      newP.innerHTML = index
      document.body.appendChild(newP)

    }
    document.body.appendChild(fragEle)
  </script>
</body>
</html>

11. 直接量替换 new Object

image.png

var a = [1,2,3]
var a1 = new Array
a1[0] = 1
a1[1] = 2
a1[2] = 3
小夜（noct）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Java（四）继承
qq_38344538的博客
02-28 227
/* 二、继承性的格式 * class A extends B{} * A:子类、派生类、subclass * B:父类、超类、基类、superclass * * 2.1 体现：一旦子类 A 继承父类以后，子类 A 中就获取了父类 B 中声明的结构：属性、方法 * 特别的，父类中声明为 private 的属性或方法，子类继承父类以后，仍然认为获取了父类中私有的结构。 * 只有因为封装性的影响，使得子类不能直接调用父类的结构而已。 * 2.2 子类继承父类以后，还可以声.
jQuery源码分析之tearDown和setup
高山上的鱼
12-14 1434
问题1：如果我绑定focusin，那么底层是如何处理的? 在jQuery.event.add方法中 special = jQuery.event.special[ type ] || {};//获取初始事件的对象 // If selector defined, determine special event api type, otherwise given type type = (
第二节 V8
qq_30732045的博客
11-22 247
第二节 V8 1.认识V8 V8是一款主流的javascript执行引擎(高效执行javascript,优秀的内存管理机制) V8采用即时编译 可以直接把javascript源码翻译成能够执行的机器码 V8的设置内存有上限 32位操作系统 800M 64位操作系统 1.5G 2. V8垃圾回收策略 基本类型数据,有javascript语言本身进行控制的 而现在讨论的回收主要是存放在堆区中的对象数据 策略 采用分代回收的思想 内存分为新生代和老生代 针对不同代的对象采用不同的算法进行回收,进
SQL Server 使用CLR 调用C#的自定义函数
qtwitter的博客
11-13 657
今天在阅读文章的时候，偶然看到SQL Server里面居然也能调用C#的dll,这样太爽了呀，写某些存储过程就在SQL里面会很容易写错。 因此找了一篇链接学习以上技术：https://www.cnblogs.com/tylerdonet/archive/2011/05/26/2058980.html ...
VS：扩展程序提供程序未能为该对象返回扩展程序
qtwitter的博客
06-28 3143
WinForm项目： 重启VS
你所未知的3种Node.js代码优化方式
10-22
Node.js 代码优化是提升应用程序性能的关键步骤，尤其是在面临CPU密集型任务或输入输出操作时。本文主要讨论了三种不常见的Node.js代码优化方法，帮助开发者有效地改进代码库，提高程序运行效率。 首先，识别和优化...
web前端第四节代码.zip
最新发布
10-25
`.js`文件可能是JavaScript代码，用于实现特定的交互功能。 4. 响应式设计：随着移动设备的普及，响应式设计成为现代Web开发的重要概念。它使网页能够根据不同的屏幕尺寸自动调整布局。在压缩包中，可能会有使用...
js代码-冒泡排序优化
07-16
在这个"js代码-冒泡排序优化"的主题中，我们将深入探讨JavaScript实现冒泡排序的优化策略。 在原始的冒泡排序中，每次遍历时会检查每对相邻元素，如果它们的顺序错误，就交换位置。这个过程可能会导致大量的不必要...
js代码-深拷贝优化
07-14
通过以上讨论，我们可以根据实际需求选择合适的深拷贝实现，并结合优化策略提高代码性能。在main.js文件中，可能会包含一个实现了深拷贝优化的函数，供项目中使用。而README.txt文件可能详细解释了该函数的用法和...
分享javascript实现的冒泡排序代码并优化
10-22
优化后，如果数组已经是有序的，那么在第一轮比较后就不会有元素交换，内循环会立即结束，外层循环也会随之停止，这样就节省了不必要的比较操作。 此外，还可以考虑使用更高级的优化策略，例如双指针法，或者结合...
触摸小夜灯(USB最终版).rar
10-31
我用#CSDN#这个app发现了有技术含量的博客，小伙伴们求同去《根据RH6616芯片设计星星“触摸小夜灯”(纽扣电池供电)》, 一起来围观吧 https://blog.csdn.net/m0_52162042/article/details/120007902?utm_source=app&app_version=4.17.0
三级管制作小夜灯电路图.jpg
01-11
最简单的三级管与光敏电阻做的小夜灯原理电路图 只用一个光敏电阻、一个三级管（PNP 和NPN 的电路图均有）、一个可调电阻、一个发光二级管即可实现，想看电路图请下载。
建站环境学习一：宝塔面板安装
yichurou2981的博客
09-02 2695
                                                                 建站环境学习一：宝塔面板安装 安装宝塔面板的原因是因为方便，简单，一键配置的网络环境，安装只要用下面的链接（看版本）下载，教程慢慢更新 Debain的： wget -O install.sh http://download.bt.cn/install/insta...
JS 垃圾回收与性能优化
雪急飞绪博客
11-29 540
JavaScript 通过自动内存管理实现内存分配和闲置资源回收，基本思路：确定哪个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间就会自动运行。但是某块内是否还有用，属于“不可判断的”问题，意味着靠算法是解决不了的 垃圾回收方法 标记清理 JavaScript 最常用的垃圾回收策略是标记清理（mark-and-sweep）。当变量进入环境时就将其标记为进入环境，当变量离开环境时将其标记为离开环境。随后每隔一段时间就会检测一下当前作用域中的内存，是否被占用，如果没有被占用
Qt信号槽连接失效
qq_36284984的博客
05-17 808
1.在connect(a,SIGNAL(int a,int b),this,slot(int a,int b))信号槽中加入了形参 2.将槽函数放在普通函数声明中了 3.使用了自定义的类型，如类，list等等 解决：首先注册，加入头文件#include <QMetaType>； qRegisterMetaType<QList<QString> > ("QList<double>");（connect之前注册） ...
物联网实验光控小夜灯
weixin_43542702的博客
06-20 3147
物联网实验光控小夜灯的实现实验目的实验硬件设备实验软件设备实验原理连接实物图程序源码实验截图结束 实验目的 这是物联网的期末实验作业，做了一个基于Arduino的光控小夜灯以下是我的实验过程 实验硬件设备 1.一个Arduino开发板 2.若干导线 3.几个小电阻 4.一个RGB灯 5.光敏电阻传感器 实验软件设备 1.Arduino-1.8.9 实验原理 当周围暗度达到一定程度时,自动接通电路,...
QSettings添加注册表项（Windows开…
星痕_Raphael
04-18 751
QString path = QCoreApplication::applicationDirPath(); QDir::setCurrent(path); path.replace("/","\\"); path.append("\\Nanya.exe"); QSettings *reg = new QSettings("HKEY_LOCAL_MACHINE\\SOFTWARE\\Mi
Scroll View 滚动窗口
qq_43152591的博客
09-13 501
Viewport // Content 添加组件 Grid layout Group Content SizeFitter Scrollbar Horizontal Scrollbar Vertical CellSize：就是每个Item的大小 Spacing：就是Item与Item的间隔 Start Corner: 排版 Start Axis：按照水平排列（Horiz...
小夜php彷站,www.xiaoyewl.net
weixin_34723270的博客
03-28 456
Domain Name : xiaoyewl.netRegistry Domain ID :Registrar WHOIS Server : whois.sund1.comRegistrar URL : http://www.sund1.comUpdated Date : 2013-03-22Creation Date : 2013-02-22Registrar Registration Expi...
优化第三方广告代码：稳定性与性能提升
评估第三方内容的性能可以从多个维度进行，包括Page Speed和YSlow的评分，关注总请求数、总数据量、JavaScript代码量、DOM节点数量以及是否使用`doc.write`等可能影响加载时间的方法。 优化策略可以包括以下几个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值