• 减少DOM数量
  • 减少DOM操作
  • 批量处理DOM操作
  • 批量处理样式修改
  • 尽量不要使用tabel布局
  • 尽量不要使用css表达式
  • string用数组join
  • css选择符优化

1.减少DOM数量

　　在HTML生成DOM树的时候，DOM数量越少，HTML渲染速度越快

2.减少DOM操作

　　每次操作DOM，都会带来repaint和refolw

3.批量处理DOM操作：

　　将元素移除DOM Tree，修改完后再放回去，因此只会调用一次repaint或者reflow

4.批量修改样式

　　改变classname，或者用css()，原理和批量处理js一样

5.尽量不要使用tabel布局

　　tabel中某个元素改变了，整个tabel就会reflow.

　　如果非用不可，可以设置tabel-layout:auto或者tabel-layout：fixed,让tabel一行一行的渲染，限制渲染范围

6.尽量不要使用css表达式

　　每计算一次就会触发reflow一次

7.string用数组join连接

　　在js中使用“+”来拼接字符串效率比较低，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接的字符串赋值给新变量。使用数组的话效率就高一点

8.css选择符优化

　　因为css是从右向左解析的，根据这个规则，尽量使右边的样式唯一

web性能优化--减少DOM操作（三）的更多相关文章

  1. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  2. 前端性能优化--为什么DOM操作慢？

    作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部 ...

  3. Web性能优化工具WebPageTest（三）——本地部署（Windows 7版本）

    这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...

  4. web性能优化--减少客户端请求数（一）

    多图标合并,用css分隔 设置较长时间的过期时间 合并多个css文件 合并多个js文件 根据域名划分内容 首先介绍一款速度测试工具:webpagetest(填上url,username,passwor ...

  5. Web性能优化-合并js与css，减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  6. Web 性能优化： 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  7. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

  8. Web 性能优化： 使用 Webpack 分离数据的正确方法

    摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...

  9. web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识

    web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...

随机推荐

  1. 阶段3 2.Spring_10.Spring中事务控制_3 作业-基于注解的AOP实现事务控制及问题分析_下

    此时没有异常 测试我们的方法 执行报错 注解在实际的测试过程中,实际的执行顺序是有问题的.会先调用最终通知.然后再调用后置通知 最终通知已经关闭了连接.再调用后置通知肯定报错. getThreadCo ...

  2. 阶段3 2.Spring_03.Spring的 IOC 和 DI_3 spring基于XML的IOC环境搭建和入门

    创建新项目 修改为jar包的方式 把上一个工程内的代码 java下的com复制过来 由于配置文件没有,所以一运行就会报错 factory文件夹整个删除 dao的实现类 这里删除 测试类保留这两行代码 ...

  3. Delphi实现类的持久化保存（DFM格式)

    var inStream,outStream:TMemoryStream; begin inStream:=TMemoryStream.Create; outStream:=TMemoryStream ...

  4. Golang基础(6)：go的net/http用法

    http包提供了HTTP客户端和服务端的实现 一:http客户端的几种方法 1. func (c *Client) Get(url string) (resp *Response, err error ...

  5. [转载]jsp上传文件

    JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器.上传的文件可以是文本文件或图像文件或任何文档. 本章节我们使用 Servlet 来处理文件上传,使用到的文件有: uplo ...

  6. 【HANA系列】【第八篇】SAP HANA XS使用Data Services查询CDS实体【二】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第八篇]SAP HANA XS ...

  7. css实现毛玻璃效果

    css实现毛玻璃效果,效果图 1,html代码 <div class="mainHolder"> <div class="textHolder" ...

  8. 导入已有项目到svn

    版本管理一直是程序员使用频率比较高的一个工具软件.不管你是自己使用还是使用别人提供的svn服务,svn的使用技巧都一个必须掌握的技术.为止小编专门制作了关于svn使用技巧的系列文章.今天我们先来介绍一 ...

  9. Spring（二）--Spring入门案例

    Spring入门案例 1.需要的实体类 2.需要的接口和实现类 3.需要的service和实现类 /** * service层的作用 * 在不改变dao层代码的前提下,增加业务逻辑操作 */ publ ...

  10. MySQL的日志系统

    一.日志类型 逻辑日志:存储了逻辑SQL修改语句 物理日志:存储了数据被修改的值 二.binlog 1.定义 binlog 是 MySQL 的逻辑日志,也叫二进制日志.归档日志,由 MySQL Ser ...