web性能优化--减少DOM操作(三)
- 减少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操作(三)的更多相关文章
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 前端性能优化--为什么DOM操作慢?
作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部 ...
- Web性能优化工具WebPageTest(三)——本地部署(Windows 7版本)
这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...
- web性能优化--减少客户端请求数(一)
多图标合并,用css分隔 设置较长时间的过期时间 合并多个css文件 合并多个js文件 根据域名划分内容 首先介绍一款速度测试工具:webpagetest(填上url,username,passwor ...
- Web性能优化-合并js与css,减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
- Web 性能优化: 图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
- web性能优化——浏览器相关
简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...
- Web 性能优化: 使用 Webpack 分离数据的正确方法
摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...
- web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
随机推荐
- python生成密码字典
import itertools as its words = 'abcdefghijklmnopqrstuvwxyz1234567890' r = its.product(words, repeat ...
- Oracle 笔记(三)
Oracle的数据库对象 七大对象:用户.表.约束.序列.视图.同义词和索引 知识点一:用户 - User - 账户.管理员-一切对象的宿主 1.创建用户 ???? 2.授权 ???? 授权+ ...
- golang remote debug和docker debug
在编写 Go 代码的时候,因为很多时候都是需要调试服务器上的代码的,作为一个年长的工程师,肯定不能用 log.Printf 来调试问题,所以我选择了 delve 这个工具,通过 delve 我可以像本 ...
- MyBatis框架原理4:插件
插件的定义和作用 首先引用MyBatis文档对插件(plugins)的定义: MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用.默认情况下,MyBatis 允许使用插件来拦截的方法调用 ...
- cocos2dx[3.2](3) 浅析CCDeprecated.h
CCDeprecated.h中存放的都是2.x将要被抛弃的命名规范,主要包含类名.枚举类型. 虽然说2.x的这些命名规范被CCDeprecated.h保留了.但是为了彻底学习3.x的新特性,就必须要尽 ...
- pandas的.columns和.index
可以通过.columns和.index着两个属性返回数据集的列索引和行索引 设data是pandas的一个DataFram类型的数据集. 则data.index返回一个index类型的行索引列表,da ...
- word2vec原理浅析
1.word2vec简介 word2vec,即词向量,就是一个词用一个向量来表示.是2013年Google提出的.word2vec工具主要包含两个模型:跳字模型(skip-gram)和连续词袋模型( ...
- 【Android Apk重新签名报错re-sign.jar之解决方法】
故障现象:
- python 列表的(总结)
列表(自我总结) 1.在python中什么是列表 列:排列,表:一排数据 在python中的表达就是 l = [1,2,3,4,5,6,7] 2.列表是可变类型还是不可变类型 也就是说列表能不能被ha ...
- /etc/sysctl.conf 控制内核相关配置文件
/etc/sysctl.conf 用于控制内核相关的配置参数,而且它的内容全部是对应于 /proc/sys/ 这个目录的子目录及文件 [root@MongoDB ~]# ll /proc/sys to ...