web页面的回流,认识与避免
一、什么是回流?
回流是会导致页面重新渲染的一些元素,从而影响性能。
二、哪些因素会导致回流?
1、调整窗口的大小;
2、改变字体,如果用rem 设置了根目录的字体大小,这样就减少了回流的次数;
3、增加或者移除样式表;
4、内容的变化,用户在input中输入了文字(这是不可避免的);
5、激活CSS的伪类;
6、操作class属性;
7、基本操作DOM(包括js中的domcument等);
8、计算offsetWidth与offsetHeight 属性,获取元素在窗口中的位置;
9、在html代码中直接设置style 属性的值,这个降低了代码的利用率,还影响性能。
三、如何避免回流?
1、如果想设定元素的样式,直接改变class名,而不是改变class中的某个特定的属性,比如height,weight;
2、避免设置多项内联样式,就是说少使用style;
3、应用元素动画的时候,使用属性的position属性的fixed值或absolute值;
4、避免使用table布局;
5、尽量在DOM树的最末端改变class,改变子节点的样式。
web页面的回流,认识与避免的更多相关文章
- Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
- IOS客户端UIwebview下web页面闪屏问题
基于ios客户端uiwebview下的web页面,在其内容高度大于视窗高度时,如果点击超过视窗下文档的底部按钮,收缩内容高度,会发生闪屏问题. 外因是由文档的高度大于视窗的高度所致,本质原因未知. 解 ...
- DWR实现后台推送消息到web页面
DWR简介 DWR(Direct Web Remoting)可用于实现javascript直接调用java函数和后台直接调用页面javascript代码,后者可用作服务端推送消息到Web前端. (服务 ...
- web页面放到手机页面,缩放问题
有时候写页面样式不规范,很多页面元素写死尺寸时,web页面尺寸比较大放到移动端访问时,就背缩放了,div或者按钮变得好小 可以加段js,效果会好点 <script> ! function( ...
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- Mono+Jexus部署Web页面
一.web页面 二.Jexus默认站点的配置文件(只需修改站点路径) ###################### # Web Site: Default ###################### ...
- base64:URL背景图片与web页面性能优化
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
随机推荐
- C++ RTTI
一.定义:RTTI:Run Time Type Identification ,运行时类型识别:指程序能够使用基类的指针或引用来检索其所指对象的实际派生类型.二.使用方式:C++中有两个操作符提供RT ...
- .NET下dropdownlist的基本操作
//List列中索引的赋值 teacher.DataValueField = ds.Tables[0].Columns["pidcord"].ColumnName; //List列 ...
- C语言中的自定义函数
C语言中可以使用系统函数也可以使用自己的函数,就是自定义函数 自定义函数分为四种 第一种:无参无返回值的 函数的声明 void sayH(); 函数的实现 void sayH(){ printf(&q ...
- IOS-Swift、Objective-C、C++混合编程
1.Objective-C调用C++代码 后缀为m文件的是Objective-C的执行文件,而后缀为mm文件的是Objective-C++文件. 直接在Objective-C中是无法调用C++代码的, ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(五)Image View视图 学习笔记
留下两个问题:1.后面涉及到的异常不知道原因.2.动态图片到了程序里面就不动了. 然后: 上面是有问题的,下面是没有问题的了. 代码(另外简单写的代码,纠正了那个错误): imp ...
- ERP产品价格成本计算的几个方法(转)
一般财务计算产品价格又很多方法,我这里做了几个供参考,实体属性主要是编号.数量.价格等,这里就不列出了. /// <summary> /// 先进先出算法 /// </s ...
- Backbone模型
现在进入最关键的组件 - 模型.模型用来存储应用的所有数据,以及直接和数据操作相关的逻辑.Backbone中的模型类是Backbone.Model,它包含了数据存储,数据验证,以及数据发生变动时触发相 ...
- Climbing Stairs
Climbing Stairs https://leetcode.com/problems/climbing-stairs/ You are climbing a stair case. It tak ...
- hdu String Problem(最小表示法入门题)
hdu 3374 String Problem 最小表示法 view code#include <iostream> #include <cstdio> #include &l ...
- The available repos for opensuse13.2
opensuse13.2国内源和设置命令 ustc-osshttp://mirrors.ustc.edu.cn/opensuse/distribution/13.2/repo/oss/ustc-n ...