javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(headings): update readme headings to be correct level

Browse Source
This commit is contained in:
Brandy Carney
2020-05-14 17:26:44 -04:00
parent 448dfa0a69
commit 16a03d58ec
17 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/virtual-scroll/readme.md
View File

@ -8,7 +8,7 @@ in the list is rendered at once; instead a small subset of records (enough to fi
are rendered and reused as the user scrolls.
### Approximate Widths and Heights
## Approximate Widths and Heights
If the height of items in the virtual scroll are not close to the
default size of `40px`, it is extremely important to provide a value for
@ -24,7 +24,7 @@ is only used to help calculate initial dimensions.
It's also important to know that Ionic's default item sizes have
slightly different heights between platforms, which is perfectly fine.
### Images Within Virtual Scroll
## Images Within Virtual Scroll
HTTP requests, image decoding, and image rendering can cause jank while
scrolling. In order to better control images, Ionic provides `<ion-img>`
@ -49,7 +49,7 @@ images while scrolling quickly.
## Virtual Scroll Performance Tips
#### iOS Cordova WKWebView
### iOS Cordova WKWebView
When deploying to iOS with Cordova, it's highly recommended to use the
[WKWebView plugin](https://blog.ionicframework.com/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/)
@ -57,7 +57,7 @@ in order to take advantage of iOS's higher performing webview. Additionally,
WKWebView is superior at scrolling efficiently in comparison to the older
UIWebView.
#### Lock in element dimensions and locations
### Lock in element dimensions and locations
In order for virtual scroll to efficiently size and locate every item, it's
very important every element within each virtual item does not dynamically
@ -65,14 +65,14 @@ change its dimensions or location. The best way to ensure size and location
does not change, it's recommended each virtual item has locked in its size
via CSS.
#### Use `ion-img` for images
### Use `ion-img` for images
When including images within Virtual Scroll, be sure to use
[`ion-img`](../img/Img/) rather than the standard `<img>` HTML element.
With `ion-img`, images are lazy loaded so only the viewable ones are
rendered, and HTTP requests are efficiently controlled while scrolling.
#### Set Approximate Widths and Heights
### Set Approximate Widths and Heights
As mentioned above, all elements should lock in their dimensions. However,
virtual scroll isn't aware of the dimensions until after they have been
@ -82,7 +82,7 @@ how many items should be built. With "approx" property inputs, such as
therefore allowing virtual scroll to decide how many items should be
created.
#### Changing dataset should use `trackBy`
### Changing dataset should use `trackBy`
It is possible for the identities of elements in the iterator to change
while the data does not. This can happen, for example, if the iterator
@ -91,7 +91,7 @@ produced from an RPC to the server, and that RPC is re-run. Even if the
different identities, and Ionic will tear down the entire DOM and rebuild
it. This is an expensive operation and should be avoided if possible.
#### Efficient headers and footer functions
### Efficient headers and footer functions
Each virtual item must stay extremely efficient, but one way to really
kill its performance is to perform any DOM operations within section header
and footer functions. These functions are called for every record in the