--------------------------------------------------
前言
今天白天的时候我们一起学习了块级元素,晚上的时候本来想继续学习CSS,但是发现还是有一点累,所以我们还是来研究点大家都感兴趣的东西,前端优化。
什么是reflow?
这个单词字面意思就是回流,这里举一个例子:
我们这里有个dom树:
1 <p> 2 <span class="title"></span> 3 <label class="checkbox"> 4 <input type="checkbox" value="足球" /> 5 red 6 </label> 7 <label class="checkbox"> 8 <input type="checkbox" value="篮球" /> 9 black 10 </label> 11 <label class="checkbox"> 12 <input type="checkbox" value="乒乓" /> 13 english中文 14 </label> 15 </p>
我们如果删除了其中一个节点,比如第四行的节点,这棵树肯定不会就这么倒了,所以会形成一个新的dom树,这就是回流:
回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。
因为回流可能导致整个dom树的重新构造,所以是性能的一大杀手
以下操作会引起回流:
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化(input中输入文字会导致)
⑤ 激活CSS伪类(:hover)
⑥ 操作class属性,新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值
......
reflow与repaint是减缓js的几大主要原因,尤其是reflow更是性能杀手,所以我们应该想法避免。
减少页面回流
① 一起变化
如果要改变一个元素的样式,可以将所有样式集中在一个class上面一次变化,而不是变化几次:
1 <style type="text/css"> 2 .changeStyle { width: 100px; height: 100px; } 3 </style> 4 <script type="text/javascript"> 5 $(document).ready(function () { 6 var el = $('id'); 7 //1 8 el.css('width', '100px'); 9 el.css('height', '100px'); 10 //2 11 el.css({ 'width': '100px;', 'height': '100px;' }); 12 //3 13 el.addClass('changeStyle'); 14 15 }); 16 </script>
以上几种做法,我这里弱弱的推荐第三种,避免第一种。
② 具有动画效果请使用absolute
因为absolute元素的改变对其它元素的回流影响不大,所以我们的动画效果的元素还是将他搞成absolute吧。
③ 避免使用表格布局(记住只是布局哦,我们数据还是应该用表格的)
④ 请绝对不要使用CSS表达式,性能杀手啊,特别是IE
⑤ 在最末改变元素
因为回流是自上而下的,所以下不及上,我们在最后面修改信息对全局影响越少。
⑥ 动画移动时候,要控制
比如我们拖动元素时候,我是在他x或者y坐标改变5px才操作,这样虽说降低了平滑度,但是对性能有提高。
结语
好了,今天就到这里啦,后面点我们再看看CSS中一些细节的地方。
相关推荐
Symbion S36 Post-Reflow AOI Systemsymbion S36后回流AOI系统
Reflowster-Reflow 这是回流焊的基本固件。 使用它来使用回流焊机执行基本的回流焊。
1. 浏览器渲染机制 2. 重绘 3. 回流 4. 浏览器优化 5. 减少重绘与回流
我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案,当你需要学习 Git 时,你也可以找到放之四海皆准的实践方案。但性能优化却不一样,它好像只能是...
Adobe Edge Reflow Preview下载
Reflow_oven TAMI回流焊炉更多信息请访问
Standard Reflow Profile for Standard and Lead-Free Packages ACTEL
回流烤面包机 用于回流焊接的烤箱 我帮助几个朋友搬出了他们的公寓。 我的付款? 一个旧的烤面包机。 虽然我确实喜欢 mmmmm 烤食物,但我发现自己只是使用烤面包机、普通烤箱或铸铁煎锅来做饭。 二手烤箱根本没有...
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 ...
本文主要是结合自己的一些项目经验,给大家提出了几点减少浏览器reflow和repaint的方法和注意事项,希望对大家能有所帮助。
高效设置回流焊温度曲线参考手册,回流焊高质量的保证。
本篇文章,小编将为大家介绍,有关javascript的性能优化(repaint和reflow),有需要的朋友可以参考一下
frame主要的动作有三个: ...比如,未指定图片宽高的话,图片的载入会使页面 reflow, 因为要根据图片宽高来更新frame。这里就有一个提高页面性能的小技巧:如果事先能够确定图片宽高的话,最好在HTML里写上。
用于回流炉实用程序的串行配置文件绘图仪是一个免费软件应用程序,用于绘制通常从自制回流炉控制器(例如:基于 Arduino)通过串行端口发送到运行 Windows 7 的 PC 或笔记本电脑的温度与时间数据的图表。生成的图表...
Objective-C单向数据流方案,灵感来自于Flux, Redux and Vue。
RTI-033-97 Datapaq Reflow Tracker System 窄形六通道系统 包含下列内容 SW5366A Insight炉温跟踪仪中文分析软件 DQ1862 Q18 数据记录器,K 型电极, 6个通道, -200°to 1370℃ 精度± 0.5℃,每通道可储存18,...
git-reflow –自动执行git工作流程(2015福冈Ruby奖得主) 如果您的工作流程如下所示: 创建功能分支 编写出色的代码 创建一个对主请求请求 通过代码审查获取“ lgtm” 合并到主节点(默认情况下被压缩,但是可以...