当前位置: 首页 > news >正文

尽量减少对DOM的操作

在页面中对DOM操作是比较消耗的(比如在页面插入或删除一段文字),把这个改动降至最小是保持性能的最佳实践!比如:

<ul id="test"> </ul> <script type="text/javascript"> var $list = $("#test"); for (i = 1; i < 101; i++) { $list.append("<li>Item" + i + "</li>"); } //very bad,change dom 100 times var listItem = ""; for (j = 1; j < 101; j++) { listItem += "<li>Item" + j + "</li>"; } $list.html(listItem); //good practice,only modify dom once </script>

可以看出,第一个例子对DOM修改100次,而第二个只对DOM修改1次,这上面的性能差距是显而易见的。

可以屏蔽JQuery的动画效果

在某些情况下,如果,可以关闭JQuery动画,能对性能进行一定提升,屏蔽的方法是:

<script type="text/javascript"> jQuery.fx.off = true; </script>
如果参数可以是JS对象,尽量使用对象

很对JQuery插件,或者JQuery的css和attr方法都接受键/值 或 js键/值对象 对作为参数,传递键值对象可以减少JQuery对象的创建,比如:

<div></div> <script type="text/javascript"> $("div").css("display", "block"); $("div").css("background-color", "blue") //slow,because it create more Jquery object $("div").css({ "display": "block", "background-color": "blue" }); //fast,only create one object </script>

当然也可以使用连缀的方式:

<div></div> <script type="text/javascript"> $("div").css("display", "block").css("background-color", "blue"); </script

但是这种方式的性能不如上面那种.需要使用两个方法,并且需要多生成临时对象.

http://www.jsqmd.com/news/1132448/

相关文章:

  • mnist-数据集的学习-3.6手写数字识别
  • Tableau新手实战指南:3天做出可交付业务看板
  • 【学习记录】Week14(一):信息泄露系统化方法论与 ORW 基础体系构建
  • 用虚拟机实际体验Google Chromium OS (Chrome OS) Pre-Built
  • FastAPI 新手入门第 8 篇:让 /docs 更像一份 API 文档
  • 【 CLI与GUI两种AI编程范式技术解析】终端Agent与可视化IDE架构对比
  • ClaudeCode Skills:IDE内可工程化的AI编程技能体系
  • 从 Agent Memory 到 Object-Scoped Context 的思考
  • !ccstatusline:让你的 Claude Code 状态栏直接封神!
  • 华为防火墙Web登录配置:eNSP环境搭建与安全策略详解
  • JQuery Tips(4)----一些关于提高JQuery性能的Tips
  • 软件:STM32-F1系列-存储器映像(2026/7/5)
  • 基于自然语言的软件工程和程序设计(中)
  • AI模型安全测试革命:从手工POC到自动化Fuzz框架的工程实践
  • GitHub Copilot 实战指南:结对编程式AI辅助开发核心逻辑与7大高频场景
  • 新手流量池实战:从零搭建你的第一个桌面自动化工作流
  • 判断dll是debug还是release,这是个问题
  • SpringBoot JUnit 教程
  • Qt界面底层实现浅谈: 多渲染后端的分层架构
  • CAF 与 PDAF 监控机制对比:从 3 种检测逻辑到触发条件差异分析
  • 126、DyHead 动态检测头替换 YOLOv11 Head:Scale+Space+Task 三维注意力的实现
  • 宝鸡装修必看:安柏特全屋定制厂环保板材解析
  • 视频孪生时空感知技术详解
  • C# 基础入门指南:从零开始学习 C# 编程
  • XCA开源证书管理:如何用现代工具解决传统PKI难题
  • 【译】组织好你的Asp.Net MVC解决方案
  • 实战指南:如何将微信聊天记录转化为个人AI训练数据资产
  • NHibernate Issues之1255:联合主键(composite-id)
  • 该如何进行WPF界面设计
  • o1-preview在机器学习项目中的协同建模实战