- 浏览: 43030 次
- 性别:
- 来自: 深圳
最新评论
浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow。
有多种用户操作和 DHTML 变化可能会触发 reflow:
1.调整浏览器窗口的大小
2.用 javascript 计算样式(computed styles)
3.在 DOM 中创建删除元素
4.改变元素的 class
但是并非所有 javascript 控制的样式都触发 reflow,即使触发了触发的次数也不尽相同
下面是一些减小 reflow 的原则:
减少不必要的 DOM 层级(DOM depth)。改变 DOM 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
尽量减少 CSS 规则,去除未用到的 CSS。
如果做复杂的表现变化,如动画,让它脱离文档流。用绝对定位或 fixed 定位来完成。
避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 CPU。
请减少对DOM的操作:
基本原理:
对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。
天生就慢。在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
解决办法:
修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。
减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
使用JSON格式来进行数据交换:
基本原理:
JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
高效使用HTML标签和CSS样式:
基本原理:
HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。
正确理解:
HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
有多种用户操作和 DHTML 变化可能会触发 reflow:
1.调整浏览器窗口的大小
2.用 javascript 计算样式(computed styles)
3.在 DOM 中创建删除元素
4.改变元素的 class
但是并非所有 javascript 控制的样式都触发 reflow,即使触发了触发的次数也不尽相同
下面是一些减小 reflow 的原则:
减少不必要的 DOM 层级(DOM depth)。改变 DOM 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
尽量减少 CSS 规则,去除未用到的 CSS。
如果做复杂的表现变化,如动画,让它脱离文档流。用绝对定位或 fixed 定位来完成。
避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 CPU。
请减少对DOM的操作:
基本原理:
对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。
天生就慢。在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
解决办法:
修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。
减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
使用JSON格式来进行数据交换:
基本原理:
JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
高效使用HTML标签和CSS样式:
基本原理:
HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。
正确理解:
HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
发表评论
-
ES6 Array常用Api详解
2019-05-06 11:41 3721,Array.of Array.of方法用于将一组值, ... -
JavaScript基础
2019-03-23 21:23 01,数据类型 在JavaScri ... -
gulp
2019-03-21 10:25 0正则路径 https://blog.csdn.net/wi ... -
vue声明周期
2019-02-25 21:51 0vue -
Vue生命周期 VS React生命周期
2019-01-29 11:12 0Vue生命周: beforeCreate: c ... -
JavaScript 对象属性
2019-01-23 10:57 925JavaScript中的对象属性有两种: 一,数据 ... -
JavaScript闭包
2019-01-17 12:02 0要想真正理解闭包首先要先搞清楚作用域和作用域链。 1,作 ... -
常用收藏
2019-01-16 11:11 329参考链接 MongoDB用户权限管理 https:/ ... -
浏览器中进程与线程
2019-01-05 18:06 1187一,首先使用快捷键Shift+Esc打开浏览器Chrome任 ... -
Flex
2018-12-30 15:42 9252009年,W3C提出了一种新的布局方式:Flex布局。 ... -
linux下建立git仓库
2018-12-28 14:51 532参考文件 https://www.cnblogs.com/ ... -
Express中异常处理
2018-12-26 17:36 1271下面内容摘自网络文章,分析的很全面。 文章地址:http ... -
Express中如何使用async/await
2018-12-26 15:31 1226随着Node.js v7.6.0版本开 ... -
查看端口占用
2018-10-09 23:27 475参考:https://www.jianshu.com/p/ ... -
GIt部署到linux服务器
2018-09-30 12:01 920git一键部署代码到远程 ... -
JavaScript中常见继承方式
2018-09-14 18:16 541JavaScript作为弱类型语言,继承也是其强大的特性之 ... -
Node.js版本管理工具nvm
2018-09-09 10:52 568nvm是什么? nvm允许你在同一台机器上安装不同版 ... -
字符编码的发展历史
2018-09-08 09:52 0字符编码的发展历史 Unicode和UTF-8有何区别? ... -
nodejs-buffer
2018-09-07 18:13 0公所周知JavaScript语言不能处理二进制数据,但在服务 ... -
Git学习笔记
2018-09-04 18:07 360----------------------------- ...
相关推荐
本文主要是结合自己的一些项目经验,给大家提出了几点减少浏览器reflow和repaint的方法和注意事项,希望对大家能有所帮助。
Adobe Edge Reflow Preview下载
Standard Reflow Profile for Standard and Lead-Free Packages ACTEL
DIY reflow oven code for arduino
Ersa Reflow oven变频器文档
Reflow Text Animator A port of Plaid's ReflowText that allows easily transitioning between sibling TextViews - no matter their size or style. Usage To move and transform fromView into toView: new ...
Symbion S36 Post-Reflow AOI Systemsymbion S36后回流AOI系统
Objective-C单向数据流方案,灵感来自于Flux, Redux and Vue。
* 构造frame, 以建立对象树(DOM树) * reflow, 以确定对象位置,或者是调用mozilla的Layout(这里是指源码的实现) * 绘制,以便对象能显示在屏幕上 总的来说,reflow就是载入内容树(在HTML中就是DOM树)和创建或...
高效设置回流焊温度曲线参考手册,回流焊高质量的保证。
RTI-033-97 Datapaq Reflow Tracker System 窄形六通道系统 包含下列内容 SW5366A Insight炉温跟踪仪中文分析软件 DQ1862 Q18 数据记录器,K 型电极, 6个通道, -200°to 1370℃ 精度± 0.5℃,每通道可储存18,...
NUC970 PCBA Reflow Profile
reflow-animator,一个用于在同级TextView之间轻松过渡的库,博客附件,效果请查看博客相对应项目。
git-reflow –自动执行git工作流程(2015福冈Ruby奖得主) ... 减少交付出色代码所需的知识。 拥有干净且实际可用的提交历史记录。 轻松还原功能(如果需要)。 与多样化的团队合作,而不必担心不同的流程。
回流Reflow 是一个非常基本的工作流助手,它需要一个状态 getter/setter 函数和一个工作流定义,并返回一个转换函数,该函数将在状态之间转换对象,遵循工作流规则并调用提供的任何工作流状态转换逻辑。人为的例子:...
Reflow_oven TAMI回流焊炉更多信息请访问
JEDEC SPP-024A Standard Procedures And Practices - Reflow Flatness Requirements for Ball Grid Array Packages - 完整英文电子版(6页).zip