参考自：http://blog.csdn.net/xuexiaodong009/article/details/51810252

其实在web开发中，单纯因为js导致性能问题的很少，主要都是因为DOM操作引起的。

这些dom的操作优化大概包括以下：

1查找元素的优化

2改变DOM，包括添加，修改，删除DOM

3改变DOM的样式类等

4批量修改DOM

5减少iframe

6样式放在header中，脚本放在关闭标签</body>之前

前端dom元素的操作优化建议的更多相关文章

  1. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  2. Ajax基础（四）--dom元素简单操作

    1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...

  3. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  4. JS中对DOM元素的操作

    https://www.runoob.com/jquery/jquery-ref-html.html 1.each  遍历 //遍历所有class为checksingle的DOM元素 $(" ...

  5. Dom元素的操作

    getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标 ...

  6. 返本求源——DOM元素的特性与属性

    抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...

  7. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  9. react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中

    在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...

随机推荐

  1. Luogu P1877 [HAOI2012]音量调节

    题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要改变一次音量.在演出开始之前,他已经做好一个列表,里面写着每首歌开始之前他想要改变的音量是多少. ...

  2. Wireshark抓包常见出现错误

    转自这里 1.   tcp out-of-order(tcp有问题) 解答: 1).    应该有很多原因.但是多半是网络拥塞,导致顺序包抵达时间不同,延时太长,或者包丢失,需要重新组合数据单元 因为 ...

  3. rpm检验是否被改动过

    参考原文http://vbird.dic.ksu.edu.tw/linux_basic/0520rpm_and_srpm.php#rpmmanager_verify   rpm -qVa   (当然可 ...

  4. ORACLE ASMM与AMM的总结

      概念对比介绍 相信有些人会对ORACLE当中的AMM(Automatic Memory Management)与ASMM(Automatic Shared Memory Management)有些 ...

  5. FFMPEG 实现 YUV，RGB各种图像原始数据之间的转换（swscale）

    FFMPEG中的swscale提供了视频原始数据(YUV420,YUV422,YUV444,RGB24...)之间的转换,分辨率变换等操作,使用起来十分方便,在这里记录一下它的用法. swscale主 ...

  6. 安装sphinx和coreseek

    sphinx简介 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.Sphinx可以非常容易的与SQL数 ...

  7. Java Web项目（Extjs）报错五

    1. Java Web项目(Extjs)报错五 具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname ...

  8. Deadlock found when trying to get lock; try restarting transaction

    1.错误描述 [ERROR:]2015-06-09 16:56:19,481 [抄送失败] org.hibernate.exception.LockAcquisitionException: erro ...

  9. 堡垒机-teleport的安装以及常见问题解决办法

    teleport是一款简单易用的堡垒机系统,运用在企业对windows.linux服务器的安全使用管理以及审计. 官网网址:http://teleport.eomsoft.net/ github地址: ...

  10. CF Educational Round 23 F.MEX Queries

    写了3小时 = =.这两天堕落了,昨天也刷了一晚上hihocoder比赛,还爆了零.之后得节制点了,好好准备考研.. 首先很容易想到 压缩数据 + 线段树 然后对于Pushdown真很难写..需要牵涉 ...