参考自：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. vim编辑器——常用操作整理

    注意:以下的操作都是在命令状态下进行的,不要进入插入状态了.参考这里 1.删除 dd       删除一行 ndd    删除以当前行开始的n行dw    删除以当前字符开始的一个字符ndw   删除 ...

  2. 关于chrom开发者工具priview和respons 数据内容不一致问题

    在昨天晚上2017年8月24日,深夜升级的时候发现你了一个问题:简单的把问题描述一下:新增的一个付款单中的金额为最大值9999999999999999 ,但是保存后返回来的却是100000000000 ...

  3. Windows & Linux服务器如何禁用ping总结

      有时候你ping一些服务器或网站,你会发现ping不通,这个是因为对方出于安全因素(security reason)或避免网络拥堵(avoid network congestion)等原因,禁用了 ...

  4. 2.4 PCI总线的配置

    PCI总线定义了两类配置请求,一个是Type 00h配置请求,另一个是Type 01h配置请求.PCI总线使用这些配置请求访问PCI总线树上的设备配置空间,包括PCI桥和PCI Agent设备的配置空 ...

  5. JLINK 10针J和20针JTAG接口连接方法

    我的JLINK终于用上了,哈哈,好开心,终于不用考虑是不是要借用别人的PC机了,昨天到城隍庙电子市场忙活了一下午,终于算是满载而归,呵呵,好了,下面说一下接法,其实根本不需要什么转接板什么的,直接把相 ...

  6. Extjs 4.0 Tab页

    1.JSON代码 Ext.MyTabs=Ext.extend(Ext.TabPanel ,{ xtype:"tabpanel", activeTab:2, width:694, h ...

  7. 【mysql】mysql主从复制

    mysql主从复制配置 主服务器:192.168.0.100 从服务器 192.168.0.101 主服务器配置 my.ini(window下 linux 下是my.cnf) #开启二进制日志 log ...

  8. FusionCharts报错

    1.具体报错如下 SCRIPT 5007:无法获取属性"SetReturnValue"的值: 对象为空或未定义 script block(158),行1字符158 2.错误原因 3 ...

  9. 使用Restify+superagent做数据转发

    最近为了解决跨域问题,做了一个Node数据转发服务器,使用到了Restify和superagent. Restify 是nodejs的模块.虽然restify的API或多或少的参考了express,但 ...

  10. 【CJOJ P1096】最佳老农

    http://oj.changjun.com.cn/problem/detail/pid/1096 Description FJ打算带着他可爱的N (1 ≤ N ≤ 2,000)头奶牛去参加" ...