Comments (2)
Reflow
对Element(E)的某些改变影响到了它的layout时, 会引起E自身 & E的祖先(ancestor) & 子元素(children) & E之后的元素(elements following E)的reflow... 所以性能影响很恐怖.
引起reflow的条件
- Resizing the window
- Changing the font
- Adding or removeing a stylesheet
- Content changes, inputing text in a input box
- Activation of CSS pseudo classes, :hover, etc.
- Manipulating the class attribute
- A script manipulating the DOM
- Calculating offsetWidth / offsetHeight
- Setting a property of the style attribute
避免 or 最小化reflow带来的性能影响
针对上述条件, 尽量避免引起reflow
其他
- 换用style, 减少操作class(class影响范围越小越好, 即在DOM-tree中越低越好)
- 避免在操作style时, 多行赋值, 改为一次变更(传obj)
- 给已经把position定位为absolute 或 fixed的元素设置animation
- 避免使用tables来layout
from blog.
Repaint
from blog.
Related Issues (20)
- HTML: JS: meta-viewport HOT 1
- JS: snake case & camel case HOT 1
- Docker: WordPress, Nginx HOT 2
- Nuxt: [BABEL] Note: The code generator has deoptimised the styling of XXX.js as it exceeds the max of 500KB. HOT 1
- Nginx: Tips HOT 2
- Shell: Tips HOT 1
- Nacos: Tips HOT 2
- Xnix: LVM: Tips
- OS: Ubuntu: apt HOT 1
- OS: Ubuntu: xclip HOT 3
- OS: Ubuntu: user HOT 1
- OS:Ubuntu: Nvidia GPU HOT 5
- OS: Ubuntu: CUDA
- OS:Ubuntu:zshconfig
- Web: blogs
- Network: tools: curl
- PL: node.js: egg.js HOT 2
- FFMPEG: ProRes HOT 1
- Networking: 阿里云: 云解析DNS HOT 3
- Shell: scripts HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.