内容简介:常见引起重排的操作:常见引起重绘的操作:color、background、background-position、box-shadow、border-radius等。
- css选择器: 从右到左匹配
- 尽量少使用计算属性,如calc()、expression等
- 不要使用@import
- 重绘和重排 重绘(repaint)、重排(reflow) repaint:屏幕的一部分进行了重画,比如某个 css 中改变背景色,元素尺寸没有变。 reflow:任何一个元素的尺寸发生了变化,需要重新验证并计算 render tree,就会造成重排。
常见引起重排的操作:
- js添加或删除元素
- 元素大小发生改变 (border、padding、width)
- 浏览器窗口大小改变
- 元素位置改变
- 设置style属性
- 页面首次渲染
常见引起重绘的操作:
color、background、background-position、box-shadow、border-radius等。
优化重排和重绘
- 减少DOM操作
- 利用添加class 修改样式
- 动画使用CSS动画,开启GPU加速
- 不要使用table
- 可以让其脱离文档流,position:absolute,fixed
以上所述就是小编给大家介绍的《前端优化总结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
爆款:如何打造超级IP
【美】安妮塔•埃尔伯斯 / 杨雨 / 中信出版社 / 2016-1-10 / 49
哈佛商学院IP运营与产品管理方法论第一书,翻转长尾理论的重要著作! 电影大片、当红炸子鸡、百万畅销书背后的运营逻辑是什么? 《五十度灰》、Lady Gaga、维多利亚的秘密有何共同秘密? 漫威如何将蜘蛛侠、X战警、绿巨人打造成金矿? 皇马如何打造体育IP,一跃成为全球收 入最高的足球俱乐部? 爆款策略如何运用于电影、电视、音乐、出版、体育与商业各领域? ----......一起来看看 《爆款:如何打造超级IP》 这本书的介绍吧!