JSDOM性能优化

最新推荐文章于 2022-10-27 16:36:48 发布

进阶__前端

最新推荐文章于 2022-10-27 16:36:48 发布

阅读量261

点赞数

分类专栏：代码管理 javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_38074118/article/details/110766192

版权

本文探讨了如何优化JSDOM的性能，包括测试性能的JSperf使用步骤、避免全局变量污染、正确缓存全局变量以减少内存泄漏，以及闭包的使用和优化。此外，还提到了避免在JS中使用属性访问方法以及优化循环和节点操作以提升DOM操作效率。

摘要由CSDN通过智能技术生成

测试性能

JSperf使用流程
使用github账号登录
填写个人信息
填写详细的测试用例信息（title，slug）
准备填写代码（dom操作经常使用）
填写必要的setup与reardown代码
填写测试代码片段

慎用全局变量

为什么
全局变量定义在全局执行上下文，是所有作用域链的顶端
全局执行上下文一直存在于上下文执行栈，直到全局退出
如果某个举报作用域出现了同名变量则会遮蔽或污染全局

 var i,str="";
 for(i=0;i<1000;i++){
   
     str += i
 }

 for(let i=0;i<1000;i++){
   
     let str="";
     str+=i
 }

缓存全局变量

将使用中无法避免的全局变量缓存到局部

  <!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>
    <input type="button" value="btn" id="btn1">
    <input type="button" value="btn" id="btn2">
    <input type="button" value="btn" id="btn3">
    <input type="button" value="btn" id="btn4">
    <input type="button" value="btn" id="btn5">
    <p>11111</p>
    <input type="button" value="btn" id="btn6">
    <input type="button" value="btn" id="btn7">
    <input type="button" value="btn" id="btn8">
<p>22222</p>
<input type="button" value="btn" id="btn9">
<input type="button" value="btn" id="btn99">
    <input type="button" value="btn" id="btn11">
    <input type="button" value="btn" id="btn222">
<p>3333</p>
</body>
</html>

<script>
    function getBtn(){
   
        let btn1 = document.getElementById("btn1")
        let btn3 = document.getElementById("btn3")
        let btn4