JS 之性能优化(2)
2015-10-20 20:37
639 查看
继续上一篇的JS性能优化之后,下面接着讲关于前端性能优化的内容。如果有不对的地方欢迎纠正。
1.避免过多的重排与重绘操作。
尽量将DOM中的多个读操作放一起,中间不要插入写的操作,因为写操作会导致浏览器迅速的重排,从而影响性能。将DOM中的多个写操作放一起,不要插入读的操作,如果插入读操作会导致浏览器多次重排。也就是DOM中读写操作分开。
2.缓存重排获取的值
避免下次用到该值的时候,浏览器又需要重排。
3.通过设置样式名来修改元素样式
通过改变元素的class,或者csstext属性来改变元素的样式。
4.尽量使用离线DOM来操作节点
例如操作Document Fragment对象,完成后把这个对象插入到实际的DOM中。或者cloneNode()方法,在克隆的节点上操作,再用克隆的节点替换原节点。
5.对操作频繁的元素使用display:none,然后对其操作,操作完后恢复显示display:block
这样处理的话,浏览器相当于渲染页面只有两次(隐藏或显示)。不可见的元素不影响重排或重绘。
6.将元素设为position:fixed或absolute,重排的开销会很小
因为被定位的元素不会影响其他元素的布局。
7.使用虚拟DOM的脚本库
比如React等。
8.使用window.requestAnimationFrame(),window.requestIdleCallback()
这两个方法调节重新渲染。
requestAnimationFrame(func),传一个函数进去当作参数,这个函数是一个屏幕重绘前被调用的函数,等下次浏览器渲染时执行函数里的操作。其实这个跟setTimeout()类似,只是间隔时间是由浏览器自己(下次渲染)来决定。这个方法解决了浏览器不知道Javascript动画正在执行和不知道多少才是合适的间隔的问题。
兼容写法:mozRequestAnimationFrame() || msRequestAnimationFrame() || weibkitRequestAnimationFrame() || oRequestAnimationFrame()
使用场景比如:重复执行的函数,JS动画(滑动),页面滚动,页面放大缩小等。
案例:
log里输出:
a: 389.112ms
b: 3922.486ms
很明显,使用requestAnimationFrame()方法后执行更有效率。不过该方法也有兼容性问题,是否使用还得看项目而定。
参考:http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
1.避免过多的重排与重绘操作。
尽量将DOM中的多个读操作放一起,中间不要插入写的操作,因为写操作会导致浏览器迅速的重排,从而影响性能。将DOM中的多个写操作放一起,不要插入读的操作,如果插入读操作会导致浏览器多次重排。也就是DOM中读写操作分开。
2.缓存重排获取的值
避免下次用到该值的时候,浏览器又需要重排。
3.通过设置样式名来修改元素样式
通过改变元素的class,或者csstext属性来改变元素的样式。
4.尽量使用离线DOM来操作节点
例如操作Document Fragment对象,完成后把这个对象插入到实际的DOM中。或者cloneNode()方法,在克隆的节点上操作,再用克隆的节点替换原节点。
5.对操作频繁的元素使用display:none,然后对其操作,操作完后恢复显示display:block
这样处理的话,浏览器相当于渲染页面只有两次(隐藏或显示)。不可见的元素不影响重排或重绘。
6.将元素设为position:fixed或absolute,重排的开销会很小
因为被定位的元素不会影响其他元素的布局。
7.使用虚拟DOM的脚本库
比如React等。
8.使用window.requestAnimationFrame(),window.requestIdleCallback()
这两个方法调节重新渲染。
requestAnimationFrame(func),传一个函数进去当作参数,这个函数是一个屏幕重绘前被调用的函数,等下次浏览器渲染时执行函数里的操作。其实这个跟setTimeout()类似,只是间隔时间是由浏览器自己(下次渲染)来决定。这个方法解决了浏览器不知道Javascript动画正在执行和不知道多少才是合适的间隔的问题。
兼容写法:mozRequestAnimationFrame() || msRequestAnimationFrame() || weibkitRequestAnimationFrame() || oRequestAnimationFrame()
使用场景比如:重复执行的函数,JS动画(滑动),页面滚动,页面放大缩小等。
案例:
<script> function scroll(elem){ var hei = elem.clientHeight; window.requestAnimationFrame(function(){ elem.style.height = (hei*2) + 'px'; }) } function scroll2(elem){ var hei = elem.clientHeight; elem.style.height = (hei*2) + 'px'; } elem = document.getElementById('elem'); console.time('a'); for(var i=0;i<100000;i++){ scroll(elem); } console.timeEnd('a'); console.time('b'); for(var i=0;i<100000;i++){ scroll2(elem); } console.timeEnd('b'); </script>
log里输出:
a: 389.112ms
b: 3922.486ms
很明显,使用requestAnimationFrame()方法后执行更有效率。不过该方法也有兼容性问题,是否使用还得看项目而定。
参考:http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
相关文章推荐
- 无缝滚动,JavaScript
- Jsp中三种注释
- Extjs之RowNumberer
- JS事件
- js的基础类型与引用类型
- [Servlet]Servlet/JSP Web应用配置
- Javascript和HTML dom
- 杂六笔记
- C# web api返回类型设置为json的两种方法
- 利用javascript让导航栏响应伸缩
- 正则表达式文件路径验证js版
- 杂记--泛型与json解析(fastjson)
- WebApi传递JSON参数
- 轻松学习JavaScript一:为什么学习JavaScript
- seajs开篇:我为什么学习seajs,因为它的"预先下载,延迟执行"特性
- javascript函数命名的三种方式及区别
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
- EaselJS简明教程2-动画
- EaselJS简明教程1-绘图
- 如何理解javascript closure ?